@colisweb/rescript-toolkit 4.15.0 → 4.15.2

package/package.json

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

package/src/ui/Toolkit__Ui_Dropdown.res

@@ -82,9 +82,10 @@ let make = (
       onClick={event => {
         switch dropDownRef.current->Js.Nullable.toOption {
         | None => toggle()
-        | Some(_dropDownRef) => {
-            let isButton = ReactEvent.Mouse.target(event)["tagName"] === "BUTTON"
-            if isButton {
+        | Some(dropDownRef) => {
+            let clickedElement = event->ReactEvent.Mouse.target->Browser.DomElement.toDomElement
+
+            if !(dropDownRef->Browser.DomElement.Node.contains(clickedElement)) {
               toggle()
             }
           }

package/src/ui/Toolkit__Ui_SelectWithValidation.res

@@ -101,6 +101,7 @@ let make = (
   ~disabled: option<bool>=?,
   ~onCancel: option<unit => unit>=?,
   ~validateMessage: option<React.element>=?,
+  ~showCarret=true,
 ) => {
   let (selectedOption, setSelectedOption) = React.useState(() => defaultValue)
   let previousDefaultValue = Toolkit__Hooks.usePrevious(defaultValue)
@@ -130,18 +131,22 @@ let make = (
     | None =>
       <p className="flex flex-row gap-2 w-full items-center relative">
         <span> {placeholder} </span>
-        <span className="absolute inset-y-0 right-0 flex items-center">
-          <ReactIcons.FaAngleDown />
-        </span>
+        {showCarret
+          ? <span className="absolute inset-y-0 right-0 flex items-center">
+              <ReactIcons.FaAngleDown />
+            </span>
+          : React.null}
       </p>
     | Some(selectedOption) =>
       <div className="table table-fixed w-full" title={selectedOption.label}>
         <span className="table-cell truncate text-left w-full">
           {selectedOption.itemLabel->Option.getWithDefault(selectedOption.label->React.string)}
         </span>
-        <span className="absolute inset-y-0 right-2 flex items-center">
-          <ReactIcons.FaAngleDown />
-        </span>
+        {showCarret
+          ? <span className="absolute inset-y-0 right-2 flex items-center">
+              <ReactIcons.FaAngleDown />
+            </span>
+          : React.null}
       </div>
     }}>
     <div className="py-2 pl-2 pr-1 max-h-[300px] overflow-y-scroll">

package/src/ui/Toolkit__Ui_SelectWithValidation.resi

@@ -20,4 +20,5 @@ let make: (
   ~disabled: bool=?,
   ~onCancel: unit => unit=?,
   ~validateMessage: React.element=?,
+  ~showCarret: bool=?,
 ) => React.element

package/src/vendors/Browser.res

@@ -48,6 +48,18 @@ module DomElement = {
   @send external getBoundingClientRect: Dom.element => rect = "getBoundingClientRect"
 
   @send external focus: Dom.element => unit = "focus"
+
+  external toDomElement: 'a => Dom.element = "%identity"
+
+  module ClassList = {
+    @send @scope("classList")
+    external contains: (Dom.element, string) => bool = "contains"
+  }
+
+  module Node = {
+    @send
+    external contains: (Dom.element, Dom.element) => bool = "contains"
+  }
 }
 
 @val

package/src/vendors/Browser.resi

@@ -34,6 +34,17 @@ module DomElement: {
   }
   let getBoundingClientRect: Dom.element => rect
   let focus: Dom.element => unit
+
+  external toDomElement: 'a => Dom.element = "%identity"
+
+  module ClassList: {
+    @send @scope("classList")
+    external contains: (Dom.element, string) => bool = "contains"
+  }
+  module Node: {
+    @send
+    external contains: (Dom.element, Dom.element) => bool = "contains"
+  }
 }
 
 let innerWidth: int