@colisweb/rescript-toolkit 5.41.0 → 5.42.0

package/package.json

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

package/src/form/Reform.res

@@ -81,6 +81,7 @@ module Make = (Config: Config) => {
     isDirty: bool,
     isValid: bool,
     setFormState: formState => unit,
+    hasValidationErrors: unit => bool,
   }
 
   type onSubmitAPI = {
@@ -527,6 +528,14 @@ module Make = (Config: Config) => {
       isDirty: state.formState == Dirty,
       isValid: state.formState == Valid,
       setFormState: formState => send(SetFormState(formState)),
+      hasValidationErrors: () => {
+        let recordState = ReSchema.validate(~i18n, state.values, schema)
+
+        switch recordState {
+        | Valid => false
+        | _ => true
+        }
+      },
     }
 
     interface

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -51,12 +51,11 @@ let make = (
     )
   }
 
-  <Toolkit__Ui_Dropdown
+  <Toolkit__Ui_PortalDropdown
     ?disabled
     buttonClassName
-    ?onClose
+    onClickOutside=?{onClose}
     dropdownClassName
-    position=#bottom
     label={switch selectedOptions {
     | [] =>
       <p className="flex flex-row gap-2 w-full items-center relative">
@@ -90,96 +89,97 @@ let make = (
         </button>
       </>
     }}>
-    <div className="py-2 pl-2 pr-1">
-      {allowFilter
-        ? <div className="mb-3">
-            <Toolkit__Ui_TextInput
-              id="search"
-              autoFocus={true}
-              placeholder=?{searchPlaceholder}
-              allowWhiteSpace={true}
-              onKeyDown={event => {
-                if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
-                  let selectedOptions = filterOptionsBySearch(~options, ~search)
-                  onChange(selectedOptions)
-                  setSelectedOptions(_ => {
-                    selectedOptions
-                  })
-                }
-              }}
-              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"])
-              }}
-            />
-          </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 == "" || Toolkit__Primitives.String.normalizedIncludes(label, search)
-      )
-      ->Array.mapWithIndex((i, item) => {
-        let {label, value} = item
+    {_ =>
+      <div className="py-2 pl-2 pr-1">
+        {allowFilter
+          ? <div className="mb-3">
+              <Toolkit__Ui_TextInput
+                id="search"
+                autoFocus={true}
+                placeholder=?{searchPlaceholder}
+                allowWhiteSpace={true}
+                onKeyDown={event => {
+                  if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
+                    let selectedOptions = filterOptionsBySearch(~options, ~search)
+                    onChange(selectedOptions)
+                    setSelectedOptions(_ => {
+                      selectedOptions
+                    })
+                  }
+                }}
+                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"])
+                }}
+              />
+            </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 == "" || Toolkit__Primitives.String.normalizedIncludes(label, 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])
+          <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])
 
-                  onChange(value)
-                  value
-                })
-              } else {
-                setSelectedOptions(selectedOptions => {
-                  let value =
-                    selectedOptions->Array.keep(
-                      selectedItem => selectedItem.value != value && selectedItem.label != label,
-                    )
+                    onChange(value)
+                    value
+                  })
+                } else {
+                  setSelectedOptions(selectedOptions => {
+                    let value =
+                      selectedOptions->Array.keep(
+                        selectedItem => selectedItem.value != value && selectedItem.label != label,
+                      )
 
-                  onChange(value)
-                  value
-                })
-              }
-            }}>
-            {item.itemLabel->Option.getWithDefault(label->React.string)}
-          </Toolkit__Ui_Checkbox>
-          {displaySelectOnlyOption
-            ? <div className="group-hover:block hidden absolute right-0">
-                <Toolkit__Ui_Button
-                  onClick={_ => {
-                    setSelectedOptions(_ => {
-                      let value = [item]
+                    onChange(value)
+                    value
+                  })
+                }
+              }}>
+              {item.itemLabel->Option.getWithDefault(label->React.string)}
+            </Toolkit__Ui_Checkbox>
+            {displaySelectOnlyOption
+              ? <div className="group-hover:block hidden absolute right-0">
+                  <Toolkit__Ui_Button
+                    onClick={_ => {
+                      setSelectedOptions(_ => {
+                        let value = [item]
 
-                      onChange(value)
-                      value
-                    })
-                  }}
-                  color=#neutralLight
-                  size=#sm
-                  className="hover:underline hover:!bg-neutral-200 hover:!border-neutral-200 hover:!text-primary-700">
-                  <FormattedMessage defaultMessage="Seulement" />
-                </Toolkit__Ui_Button>
-              </div>
-            : React.null}
-        </div>
-      })
-      ->React.array}
-    </div>
-  </Toolkit__Ui_Dropdown>
+                        onChange(value)
+                        value
+                      })
+                    }}
+                    color=#neutralLight
+                    size=#sm
+                    className="hover:underline hover:!bg-neutral-200 hover:!border-neutral-200 hover:!text-primary-700">
+                    <FormattedMessage defaultMessage="Seulement" />
+                  </Toolkit__Ui_Button>
+                </div>
+              : React.null}
+          </div>
+        })
+        ->React.array}
+      </div>}
+  </Toolkit__Ui_PortalDropdown>
 }

package/src/ui/Toolkit__Ui_PortalDropdown.res

@@ -18,6 +18,7 @@ let make = (
   ~buttonColor: Toolkit__Ui_Button.color=#white,
   ~buttonSize: Toolkit__Ui_Button.size=#md,
   ~buttonVariant: Toolkit__Ui_Button.variant=#default,
+  ~disabled=?,
 ) => {
   let dropDownRef = React.useRef(Js.Nullable.null)
   let buttonRef = React.useRef(Js.Nullable.null)
@@ -47,6 +48,7 @@ let make = (
 
   <div className={cx(["relative", containerClassName])}>
     <Toolkit__Ui_Button
+      ?disabled
       variant=buttonVariant
       size=buttonSize
       type_="button"

package/src/ui/Toolkit__Ui_PortalDropdown.resi

@@ -18,4 +18,5 @@ let make: (
   ~buttonColor: Toolkit__Ui_Button.color=?,
   ~buttonSize: Toolkit__Ui_Button.size=?,
   ~buttonVariant: Toolkit__Ui_Button.variant=?,
+  ~disabled: bool=?,
 ) => React.element