@colisweb/rescript-toolkit 4.11.0 → 4.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/primitives/Toolkit__Primitives.res

@@ -13,7 +13,8 @@ module String = {
   }
 
   /**
-  * normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+  *Normalize NFD*: replace by re remove split by commponents the accent letters
+  and deletes the accent component only, leaving the un-accented letter
   */
   let normalizeForSearch = str => {
     str

package/src/ui/Toolkit__Ui_MultiSelectWithValidation.res

@@ -35,6 +35,54 @@ module Footer = {
   }
 }
 
+module Options = {
+  @react.component
+  let make = (~options, ~deferredSearch, ~itemClassName, ~setSelectedOptions, ~selectedOptions) => {
+    options
+    ->Array.keep(({label}) =>
+      deferredSearch == "" ||
+        label->Toolkit__Primitives.String.normalizeForSearch->Js.String2.includes(deferredSearch)
+    )
+    ->Array.mapWithIndex((i, item) => {
+      let {label, value} = item
+
+      <div
+        key={`multiselectoption-${label}-${value}-${i->Int.toString}`}
+        className={cx([
+          "group flex flex-row items-center gap-2 pt-3 text-left relative",
+          i > 0 ? "mt-3" : "",
+          itemClassName,
+        ])}>
+        <Toolkit__Ui_Checkbox
+          value
+          className="w-full flex-shrink-0 relative"
+          checked={selectedOptions->Array.some(item => item.label == label && item.value == value)}
+          onChange={(checked, _value) => {
+            if checked {
+              setSelectedOptions(selectedOptions => {
+                let value = selectedOptions->Array.concat([item])
+
+                value
+              })
+            } else {
+              setSelectedOptions(selectedOptions => {
+                let value =
+                  selectedOptions->Array.keep(
+                    selectedItem => selectedItem.value != value && selectedItem.label != label,
+                  )
+
+                value
+              })
+            }
+          }}>
+          {item.itemLabel->Option.getWithDefault(label->React.string)}
+        </Toolkit__Ui_Checkbox>
+      </div>
+    })
+    ->React.array
+  }
+}
+
 @react.component
 let make = (
   ~options: options,
@@ -52,6 +100,7 @@ let make = (
   let (selectedOptions, setSelectedOptions) = React.useState(() => defaultValue)
   let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
   let (search, setSearch) = React.useState(() => "")
+  let deferredSearch = React.useDeferredValue(search)
   let allowFilter = options->Array.length > 5 && allowFilter
 
   React.useEffect2(() => {
@@ -123,66 +172,13 @@ let make = (
               value={search}
               onChange={event => {
                 let target = event->ReactEvent.Form.currentTarget
-                // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
-                setSearch(_ =>
-                  target["value"]
-                  ->Js.String2.toLowerCase
-                  ->Js.String2.normalizeByForm("NFD")
-                  ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
-                )
+
+                setSearch(_ => target["value"]->Toolkit__Primitives.String.normalizeForSearch)
               }}
             />
           </div>
         : React.null}
-      {options
-      ->Array.keep(({label}) =>
-        // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
-        search == "" ||
-          label
-          ->Js.String2.toLowerCase
-          ->Js.String2.normalizeByForm("NFD")
-          ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
-          ->Js.String2.includes(search)
-      )
-      ->Array.mapWithIndex((i, item) => {
-        let {label, value} = item
-
-        <div
-          key={`multiselectoption-${label}-${value}-${i->Int.toString}`}
-          className={cx([
-            "group flex flex-row items-center gap-2 pt-3 text-left relative",
-            i > 0 ? "mt-3" : "",
-            itemClassName,
-          ])}>
-          <Toolkit__Ui_Checkbox
-            value
-            className="w-full flex-shrink-0 relative"
-            checked={selectedOptions->Array.some(item =>
-              item.label == label && item.value == value
-            )}
-            onChange={(checked, _value) => {
-              if checked {
-                setSelectedOptions(selectedOptions => {
-                  let value = selectedOptions->Array.concat([item])
-
-                  value
-                })
-              } else {
-                setSelectedOptions(selectedOptions => {
-                  let value =
-                    selectedOptions->Array.keep(
-                      selectedItem => selectedItem.value != value && selectedItem.label != label,
-                    )
-
-                  value
-                })
-              }
-            }}>
-            {item.itemLabel->Option.getWithDefault(label->React.string)}
-          </Toolkit__Ui_Checkbox>
-        </div>
-      })
-      ->React.array}
+      <Options deferredSearch options setSelectedOptions selectedOptions itemClassName />
     </div>
     <Footer
       onCancel={() => {