onChange should provide primitive values without a label

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Inputs/Select/Select.stories.tsx

@@ -1,9 +1,8 @@
 import { action } from "@storybook/addon-actions";
 import { useEffect, useState } from "react";
-import { MultiValue, SingleValue } from "react-select";
 
 import Select from ".";
-import { ISelectProps, Option } from "./types";
+import { ISelectProps } from "./types";
 
 export default {
   title: "Input/Select",
@@ -17,43 +16,7 @@ export default {
 };
 
 export const SingleSelect = (args: ISelectProps) => {
-  const [input, setInput] = useState<
-    Record<
-      string,
-      MultiValue<Option | undefined> | SingleValue<Option | undefined>
-    >
-  >({
-    foo: {
-      value: "foo",
-      label: "foo"
-    }
-  });
-
-  useEffect(() => {
-    console.log(input);
-  }, [input]);
-
-  return <Select {...args} name='foo' value={input.foo} onChange={setInput} />;
-};
-
-SingleSelect.args = {
-  name: "single-select",
-  onChange: action("onChange"),
-  options: [
-    { value: "foo", label: "Foo" },
-    { value: "bar", label: "Bar" },
-    { value: "baz", label: "Baz" }
-  ],
-  value: "foo"
-};
-
-export const SingleSelectWithStringValue = (args: ISelectProps) => {
-  const [input, setInput] = useState<
-    Record<
-      string,
-      MultiValue<Option | undefined> | SingleValue<Option | undefined | string>
-    >
-  >({
+  const [input, setInput] = useState<Record<string, string[] | string>>({
     foo: "foo"
   });
 
@@ -64,7 +27,7 @@ export const SingleSelectWithStringValue = (args: ISelectProps) => {
   return <Select {...args} name='foo' value={input.foo} onChange={setInput} />;
 };
 
-SingleSelectWithStringValue.args = {
+SingleSelect.args = {
   name: "single-select",
   onChange: action("onChange"),
   options: [
@@ -76,43 +39,7 @@ SingleSelectWithStringValue.args = {
 };
 
 export const MultiSelect = (args: ISelectProps) => {
-  const [input, setInput] = useState<
-    Record<
-      string,
-      MultiValue<Option | undefined> | SingleValue<Option | undefined>
-    >
-  >({
-    foo: [
-      { value: "foo", label: "foo" },
-      { value: "bar", label: "bar" }
-    ]
-  });
-
-  useEffect(() => {
-    console.log(input);
-  }, [input]);
-
-  return <Select {...args} value={input.foo} onChange={setInput} />;
-};
-
-MultiSelect.args = {
-  name: "foo",
-  isMulti: true,
-  options: [
-    { value: "foo", label: "Foo" },
-    { value: "bar", label: "Bar" },
-    { value: "baz", label: "Baz" }
-  ]
-};
-
-export const MultiSelectWithStringArray = (args: ISelectProps) => {
-  const [input, setInput] = useState<
-    Record<
-      string,
-      | MultiValue<Option | undefined>
-      | SingleValue<Option | undefined | string[]>
-    >
-  >({
+  const [input, setInput] = useState<Record<string, string[] | string>>({
     foo: ["foo", "bar"]
   });
 
@@ -123,7 +50,7 @@ export const MultiSelectWithStringArray = (args: ISelectProps) => {
   return <Select {...args} value={input.foo} onChange={setInput} />;
 };
 
-MultiSelectWithStringArray.args = {
+MultiSelect.args = {
   name: "foo",
   isMulti: true,
   options: [

src/Components/Inputs/Select/index.tsx

@@ -15,10 +15,10 @@ const Select: FC<ISelectProps> = props => {
     option: MultiValue<Option | undefined> | SingleValue<Option | undefined>
   ): void => {
     if (Array.isArray(option) && isMulti) {
-      return props.onChange({ [props.name]: option });
+      return props.onChange({ [props.name]: option.map(o => o?.value) });
     }
 
-    return props.onChange({ [props.name]: option });
+    return props.onChange({ [props.name]: (option as Option)?.value });
   };
 
   const getValue = () => {

src/Components/Inputs/Select/types.ts

@@ -1,4 +1,4 @@
-import { MultiValue, PropsValue, SingleValue } from "react-select";
+import { PropsValue } from "react-select";
 
 export type Option = {
   value: string;
@@ -17,12 +17,7 @@ export interface ISelectProps {
   max?: number;
   isMulti?: boolean;
   isSearchable?: boolean;
-  onChange: (
-    option: Record<
-      string,
-      MultiValue<Option | undefined> | SingleValue<Option | undefined>
-    >
-  ) => void;
+  onChange: (option: Record<string, string[] | string>) => void;
   options: Option[];
   inputWrapperClassName?: string;
 }