From 5396f5d0a645f2c9f4de5b12135237ac0f5e5816 Mon Sep 17 00:00:00 2001
From: d-beezee <59012086+d-beezee@users.noreply.github.com>
Date: Fri, 26 Apr 2024 11:48:16 +0200
Subject: [PATCH] feat: Allow creating options on dropdown (#188)

---
 src/stories/Dropdown/Dropdown.stories.tsx | 25 +++++++++++++++++++++++
 src/stories/Dropdown/index.tsx            | 14 +++++++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/stories/Dropdown/Dropdown.stories.tsx b/src/stories/Dropdown/Dropdown.stories.tsx
index b1bca32..90c381b 100644
--- a/src/stories/Dropdown/Dropdown.stories.tsx
+++ b/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,
+};
diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx
index 3311584..6276f3f 100644
--- a/src/stories/Dropdown/index.tsx
+++ b/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,