@colisweb/rescript-toolkit 4.14.16 → 4.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "4.14.16",
+  "version": "4.15.1",
   "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

@@ -91,6 +91,9 @@ let make = (
   ~validateButtonClassName="",
   ~cancelButtonClassName="",
   ~itemClassName="",
+  ~buttonColor=?,
+  ~buttonSize=?,
+  ~buttonVariant=?,
   ~searchPlaceholder: option<string>=?,
   ~allowFilter=true,
   ~defaultValue: option<item>=?,
@@ -98,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)
@@ -116,6 +120,9 @@ let make = (
 
   <Toolkit__Ui_Dropdown
     ?disabled
+    ?buttonColor
+    ?buttonSize
+    ?buttonVariant
     buttonClassName
     onClose={_ => setSelectedOption(_ => defaultValue)}
     dropdownClassName
@@ -133,9 +140,11 @@ let make = (
         <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

@@ -10,6 +10,9 @@ let make: (
   ~validateButtonClassName: string=?,
   ~cancelButtonClassName: string=?,
   ~itemClassName: string=?,
+  ~buttonColor: Toolkit__Ui_Button.color=?,
+  ~buttonSize: Toolkit__Ui_Button.size=?,
+  ~buttonVariant: Toolkit__Ui_Button.variant=?,
   ~searchPlaceholder: string=?,
   ~allowFilter: bool=?,
   ~defaultValue: item=?,
@@ -17,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