Merge pull request #189 from AppQuality/develop

feat: Allow creating options on dropdown (#188)

src/stories/Dropdown/Dropdown.stories.tsx

@@ -27,3 +27,28 @@ MultiDropdown.args = {
   name: "colors",
   options: colourOptions,
 };
+
+export const CreatableDropdown = Template.bind({});
+CreatableDropdown.args = {
+  className: "creatable-single",
+  defaultValue: colourOptions[0],
+  name: "color",
+  onCreateOption: async (inputValue: string) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    alert(`Creating ${inputValue}`);
+  },
+  options: colourOptions,
+};
+
+export const CreatableMultiDropdown = Template.bind({});
+CreatableMultiDropdown.args = {
+  isMulti: true,
+  className: "creatable-multi",
+  defaultValue: colourOptions[0],
+  name: "color",
+  onCreateOption: async (inputValue: string) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    alert(`Creating ${inputValue}`);
+  },
+  options: colourOptions,
+};

src/stories/Dropdown/index.tsx

@@ -1,12 +1,17 @@
-import ReactSelect, { Props, GroupBase, StylesConfig } from "react-select5";
-import { aqTheme, customComponents } from "./styles";
+import ReactSelect, { GroupBase, Props, StylesConfig } from "react-select5";
+import Creatable from "react-select5/creatable";
 import { aqBootstrapTheme } from "../theme/defaultTheme";
+import { aqTheme, customComponents } from "./styles";
 
 export function Dropdown<
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>,
->(props: Props<Option, IsMulti, Group>) {
+>(
+  props: Props<Option, IsMulti, Group> & {
+    onCreateOption?: (inputValue: string) => Promise<void>;
+  },
+) {
   const customStyle: StylesConfig<Option, IsMulti, Group> = {
     control: (provided, state) => {
       let borderColor = aqBootstrapTheme.colors.elementGeneric;
@@ -201,8 +206,9 @@ export function Dropdown<
     },
   };
 
+  const Component = props.onCreateOption ? Creatable : ReactSelect;
   return (
-    <ReactSelect
+    <Component
       theme={(theme) => ({
         ...theme,
         ...aqTheme,