@colisweb/rescript-toolkit 3.7.2 → 3.7.3

package/locale/fr.json

@@ -44,6 +44,11 @@
     "defaultMessage": "Jeudi",
     "message": "Jeudi"
   },
+  {
+    "id": "_435887be",
+    "defaultMessage": "Seulement",
+    "message": "Seulement"
+  },
   {
     "id": "_471931e7",
     "defaultMessage": "Le champ est requis.",

package/package.json

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

package/playground/components/Playground_Checkbox.res

@@ -1,4 +1,3 @@
-
 open Toolkit__Ui
 
 @module("@root/src/ui/Toolkit__Ui_Checkbox.resi?raw")
@@ -42,6 +41,12 @@ let make = () => {
       <h2> {"Checked"->React.string} </h2>
       <Checkbox checked=true name="test" value="test"> {"children"->React.string} </Checkbox>
     </div>
+    <div>
+      <h2> {"IntermediaryChecked"->React.string} </h2>
+      <Checkbox checked=true intermediaryChecked=true name="test" value="test">
+        {"children"->React.string}
+      </Checkbox>
+    </div>
     <div>
       <Checkbox checked=true name="test" value="test" size=#xs className="mb-4">
         {"xs"->React.string}

package/playground/components/Playground_MultiSelect.res

@@ -87,5 +87,26 @@ let make = () => {
         onChange={Js.log}
       />
     </div>
+    <div>
+      <h3 className="mb-2"> {"Select only button"->React.string} </h3>
+      <p className="mb-1">
+        {"Select only button is displayed when the displaySelectOnlyOption prop is at true"->React.string}
+      </p>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-80"}
+        dropdownClassName="max-h-[300px] w-80 overflow-auto"
+        displaySelectOnlyOption=true
+        options={Array.makeBy(10, (i): Toolkit__Ui.MultiSelect.item => {
+          {
+            itemLabel: <p> {`label ${i->Int.toString}`->React.string} </p>,
+            label: `label ${i->Int.toString}`,
+            value: `label ${i->Int.toString}`,
+          }
+        })}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+      />
+    </div>
   </div>
 }

package/src/ui/Toolkit__Ui_Checkbox.res

@@ -9,6 +9,7 @@ let make = (
   ~name=?,
   ~checked=?,
   ~defaultChecked=?,
+  ~intermediaryChecked=false,
   ~className="",
   ~size: size=#sm,
   ~checkboxClassName="",
@@ -70,15 +71,25 @@ let make = (
         checkboxClassName,
         isChecked ? checkedCheckboxClassName : "",
       ])}>
-      <ReactIcons.FaCheck
-        className="transform transition-all ease-in-out"
-        size={switch size {
-        | #xs => 14
-        | #sm => 16
-        | #md => 18
-        | #lg => 24
-        }}
-      />
+      {intermediaryChecked
+        ? <ReactIcons.FaMinus
+            className="transform transition-all ease-in-out"
+            size={switch size {
+            | #xs => 14
+            | #sm => 16
+            | #md => 18
+            | #lg => 24
+            }}
+          />
+        : <ReactIcons.FaCheck
+            className="transform transition-all ease-in-out"
+            size={switch size {
+            | #xs => 14
+            | #sm => 16
+            | #md => 18
+            | #lg => 24
+            }}
+          />}
     </span>
     {children->Option.mapWithDefault(React.null, children => hideLabel ? React.null : children)}
   </label>

package/src/ui/Toolkit__Ui_Checkbox.resi

@@ -9,6 +9,7 @@ let make: (
   ~name: string=?,
   ~checked: bool=?,
   ~defaultChecked: bool=?,
+  ~intermediaryChecked: bool=?,
   ~className: string=?,
   ~size: size=?,
   ~checkboxClassName: string=?,

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -1,3 +1,5 @@
+open ReactIntl
+
 type item = {
   itemLabel?: React.element,
   label: string,
@@ -19,6 +21,7 @@ let make = (
   ~onChange: array<item> => unit,
   ~disabled: bool=?,
   ~onClose: unit => unit=?,
+  ~displaySelectOnlyOption=false,
 ) => {
   let (selectedOptions, setSelectedOptions) = React.useState(() => defaultValue)
   let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
@@ -60,9 +63,9 @@ let make = (
     position=#bottom
     label={switch selectedOptions {
     | [] =>
-      <p className="flex flex-row gap-2 w-full items-center">
+      <p className="flex flex-row gap-2 w-full items-center relative">
         <span className="ml-1"> {placeholder} </span>
-        <span className="absolute inset-y-0 right-0 flex items-center px-2">
+        <span className="absolute inset-y-0 right-0 flex items-center">
           <ReactIcons.FaAngleDown />
         </span>
       </p>
@@ -91,6 +94,7 @@ 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
@@ -120,13 +124,13 @@ let make = (
         <div
           key={`multiselectoption-${label}-${value}`}
           className={cx([
-            "flex flex-row items-center gap-2 pt-3 text-left",
+            "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"
+            className="w-full flex-shrink-0 relative"
             checked={selectedOptions->Array.some(item =>
               item.label == label && item.value == value
             )}
@@ -152,6 +156,24 @@ let make = (
             }}>
             {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}

package/src/ui/Toolkit__Ui_MultiSelect.resi

@@ -19,4 +19,5 @@ let make: (
   ~onChange: array<item> => unit,
   ~disabled: bool=?,
   ~onClose: unit => unit=?,
+  ~displaySelectOnlyOption:bool=?
 ) => React.element

package/src/vendors/ReactIcons.res

@@ -6045,3 +6045,33 @@ module FaRegTrashAlt = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "FaRegTrashAlt"
 }
+
+module FaMinus = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaMinus"
+}
+
+module FaBolt = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaBolt"
+}
+
+module FaLeaf = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaLeaf"
+}
+module FaBicycle = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaBicycle"
+}
+
+module FaBoxes = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element = "FaBoxes"
+}
+module FaListAlt = {
+  @module("react-icons/fa") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "FaListAlt"
+}