@colisweb/rescript-toolkit 2.65.6 → 2.66.1

package/package.json

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

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -19,6 +19,7 @@ let make = (
   let (selectedOptions, setSelectedOptions) = React.useState(() => defaultValue)
   let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
   let (search, setSearch) = React.useState(() => "")
+  let allowFilter = options->Array.length > 5 && allowFilter
 
   React.useEffect2(() => {
     let prev =
@@ -61,6 +62,7 @@ let make = (
         ? <div className="mb-3">
             <Toolkit__Ui_TextInput
               id="search"
+              autoFocus={true}
               placeholder=?{searchPlaceholder}
               onChange={event => {
                 let target = event->ReactEvent.Form.currentTarget
@@ -85,12 +87,16 @@ let make = (
           ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
           ->Js.String2.includes(search)
       )
-      ->Array.map(item => {
+      ->Array.mapWithIndex((i, item) => {
         let {itemLabel, label, value} = item
 
         <div
           key={`multiselectoption-${label}-${value}`}
-          className={cx(["flex flex-row items-center gap-2 mt-3 pt-3 text-left", itemClassName])}>
+          className={cx([
+            "flex flex-row items-center gap-2 pt-3 text-left",
+            i > 0 ? "mt-3" : "",
+            itemClassName,
+          ])}>
           <Toolkit__Ui_Checkbox
             value
             className="w-full flex-shrink-0"
@@ -108,8 +114,8 @@ let make = (
               } else {
                 setSelectedOptions(selectedOptions => {
                   let value =
-                    selectedOptions->Array.keep(selectedItem =>
-                      selectedItem.value != value && selectedItem.label != label
+                    selectedOptions->Array.keep(
+                      selectedItem => selectedItem.value != value && selectedItem.label != label,
                     )
 
                   onChange(value)

package/src/vendors/BsReactSelect.res

@@ -139,12 +139,12 @@ module ReactSelectMultipleCreateInput = {
     @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<string> => unit=?,
+      ~onInputChange: string => unit=?,
       ~onKeyDown: ReactEvent.Keyboard.t => unit,
       ~placeholder: option<string>=?,
       ~value: array<string>,
@@ -157,10 +157,10 @@ module ReactSelectMultipleCreateInput = {
 
   @react.component
   let make = (
-    ~inputValue: string,
-    ~onInputChange: string => unit,
+    ~inputValue: option<string>=?,
+    ~onInputChange: option<string => unit>=?,
     ~value: array<string>,
-    ~onChange: array<string> => unit,
+    ~onChange: option<array<string> => unit>=?,
     ~isClearable=true,
     ~placeholder="",
     ~isDisabled=false,
@@ -172,14 +172,15 @@ module ReactSelectMultipleCreateInput = {
       components={"DropDownIndicator": React.null}
       isMulti=true
       onKeyDown={e => {
-        if inputValue === "" {
-          ()
-        } else {
+        switch inputValue {
+        | Some("")
+        | None => ()
+        | Some(inputValue) =>
           switch e->ReactEvent.Keyboard.key {
           | "Enter"
           | "Tab" => {
-              onInputChange("")
-              onChange(value->Array.concat([inputValue]))
+              onInputChange->Option.forEach(fn => fn(""))
+              onChange->Option.forEach(fn => fn(value->Array.concat([inputValue])))
               e->ReactEvent.Keyboard.preventDefault
             }
 
@@ -188,10 +189,10 @@ module ReactSelectMultipleCreateInput = {
         }
       }}
       menuIsOpen={false}
-      inputValue
+      ?inputValue
       isClearable
-      onChange
-      onInputChange
+      ?onChange
+      ?onInputChange
       placeholder
       value
       isDisabled