@colisweb/rescript-toolkit 2.13.2 → 2.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.13.2",
+  "version": "2.13.5",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/router/Toolkit__Router.res

@@ -254,7 +254,7 @@ module Make = (Config: RouterConfig) => {
           <span
             className={cx([
               "transition-all duration-200 ease-in-out absolute ml-12 w-40 transform top-1/2 -translate-y-1/2 text-left",
-              isNavOpen ? "pl-1 opacity-100" : "opacity-0",
+              isNavOpen ? "pl-1 opacity-100 delay-75" : "opacity-0 invisible",
             ])}>
             groupInfo.label
           </span>

package/src/vendors/BsReactSelect.res

@@ -127,3 +127,71 @@ module ReactAsyncSelectMultiple = {
     ~loadOptions: string => Promise.Js.t<array<labelOption<'value>>, string>,
   ) => React.element = "default"
 }
+
+module ReactSelectMultipleCreateInput = {
+  module ReactSelect = {
+    type components = {"DropDownIndicator": React.element}
+
+    @module("react-select/creatable") @react.component
+    external make: (
+      ~components: components,
+      ~inputValue: string,
+      ~isClearable: option<bool>=?,
+      ~isMulti: option<bool>=?,
+      ~menuIsOpen: option<bool>=?,
+      ~onChange: array<string> => unit,
+      ~onInputChange: string => unit,
+      ~onKeyDown: ReactEvent.Keyboard.t => unit,
+      ~placeholder: option<string>=?,
+      ~value: array<string>,
+      ~isDisabled: option<bool>=?,
+      ~isLoading: option<bool>=?,
+      ~className: option<string>=?,
+      ~id: option<string>=?,
+    ) => React.element = "CreatableSelect"
+  }
+
+  @react.component
+  let make = (
+    ~inputValue: string,
+    ~onInputChange: string => unit,
+    ~value: array<string>,
+    ~onChange: array<string> => unit,
+    ~isClearable=true,
+    ~placeholder="",
+    ~isDisabled=false,
+    ~isLoading=false,
+    ~className: option<string>=?,
+    ~id: option<string>=?,
+  ) =>
+    <ReactSelect
+      components={"DropDownIndicator": React.null}
+      isMulti=true
+      onKeyDown={e => {
+        if inputValue === "" {
+          ()
+        } else {
+          switch e->ReactEvent.Keyboard.key {
+          | "Enter"
+          | "Tab" => {
+              onInputChange("")
+              onChange(value->Array.concat([inputValue]))
+              e->ReactEvent.Keyboard.preventDefault
+            }
+          | _ => ()
+          }
+        }
+      }}
+      menuIsOpen={false}
+      inputValue
+      isClearable
+      onChange
+      onInputChange
+      placeholder
+      value
+      isDisabled
+      isLoading
+      ?className
+      ?id
+    />
+}