@colisweb/rescript-toolkit 2.66.1 → 2.66.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.66.1",
+  "version": "2.66.2",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",

package/src/vendors/BsReactSelect.res

@@ -133,21 +133,25 @@ module ReactAsyncSelectMultiple = {
 }
 
 module ReactSelectMultipleCreateInput = {
+  type labelOption<'value> = {
+    label: string,
+    value: 'value,
+  }
   module ReactSelect = {
-    type components = {"DropDownIndicator": React.element}
-
+    type components = {"DropdownIndicator": React.element}
+    type labeledValue = {value: string, label: string}
     @module("react-select/creatable") @react.component
     external make: (
       ~components: components,
-      ~inputValue: string=?,
+      ~inputValue: string,
       ~isClearable: option<bool>=?,
       ~isMulti: option<bool>=?,
       ~menuIsOpen: option<bool>=?,
-      ~onChange: array<string> => unit=?,
-      ~onInputChange: string => unit=?,
+      ~onChange: array<labelOption<'a>> => unit,
+      ~onInputChange: string => unit,
       ~onKeyDown: ReactEvent.Keyboard.t => unit,
       ~placeholder: option<string>=?,
-      ~value: array<string>,
+      ~value: array<labelOption<'a>>,
       ~isDisabled: option<bool>=?,
       ~isLoading: option<bool>=?,
       ~className: option<string>=?,
@@ -157,10 +161,8 @@ module ReactSelectMultipleCreateInput = {
 
   @react.component
   let make = (
-    ~inputValue: option<string>=?,
-    ~onInputChange: option<string => unit>=?,
     ~value: array<string>,
-    ~onChange: option<array<string> => unit>=?,
+    ~onChange: array<string> => unit,
     ~isClearable=true,
     ~placeholder="",
     ~isDisabled=false,
@@ -168,19 +170,21 @@ module ReactSelectMultipleCreateInput = {
     ~className: option<string>=?,
     ~id: option<string>=?,
   ) => {
+    let (inputValue, onInputChange) = React.useState(() => "")
+    let onInputChange = v => onInputChange(_ => v)
+
     <ReactSelect
-      components={"DropDownIndicator": React.null}
+      components={"DropdownIndicator": React.null}
       isMulti=true
       onKeyDown={e => {
-        switch inputValue {
-        | Some("")
-        | None => ()
-        | Some(inputValue) =>
+        if inputValue === "" {
+          ()
+        } else {
           switch e->ReactEvent.Keyboard.key {
           | "Enter"
           | "Tab" => {
-              onInputChange->Option.forEach(fn => fn(""))
-              onChange->Option.forEach(fn => fn(value->Array.concat([inputValue])))
+              onInputChange("")
+              onChange(value->Array.concat([inputValue]))
               e->ReactEvent.Keyboard.preventDefault
             }
 
@@ -189,12 +193,12 @@ module ReactSelectMultipleCreateInput = {
         }
       }}
       menuIsOpen={false}
-      ?inputValue
+      inputValue
       isClearable
-      ?onChange
-      ?onInputChange
+      onChange={values => onChange(values->Array.map(({label}) => label))}
+      onInputChange
       placeholder
-      value
+      value={value->Array.mapWithIndex((i, v) => {label: v, value: v ++ i->Js.Int.toString})}
       isDisabled
       isLoading
       ?className