@colisweb/rescript-toolkit 2.46.0 → 2.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.46.0",
+  "version": "2.46.1",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",
@@ -77,7 +77,8 @@
     "rescript-react-update": "5.0.0",
     "sanitize-html": "2.7.0",
     "swr": "1.3.0",
-    "tailwindcss": "3.1.4"
+    "tailwindcss": "3.1.4",
+    "@tailwindcss/line-clamp": "0.4.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.6",

package/src/tailwind/tailwind.config.js

@@ -11,7 +11,8 @@ module.exports = {
       },
       boxShadow: {
         sidenav: "inset 0 0 1px 2px rgba(0, 0, 0, 0.2)",
-        sm: "0px 2px 1px -1px rgba(0,0,0,0.1), 0px 1px 1px 0px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1)",
+        sm:
+          "0px 2px 1px -1px rgba(0,0,0,0.1), 0px 1px 1px 0px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1)",
       },
       borderColor: {
         currentColor: "currentColor",
@@ -149,6 +150,7 @@ module.exports = {
       },
     },
   },
+  plugins: [require("@tailwindcss/line-clamp")],
   content: [
     "public/index.html",
     "lib/es6_global/src/**/**.js",

package/src/ui/Toolkit__Ui_Dropdown.res

@@ -18,18 +18,20 @@ let make = (
   ~buttonVariant: Toolkit__Ui_Button.variant=#default,
   ~position=#bottom,
 ) => {
-  let ref = React.useRef(Js.Nullable.null)
+  let dropDownRef = React.useRef(Js.Nullable.null)
+  let buttonRef = React.useRef(Js.Nullable.null)
   let (position, setPosition) = React.useState(() => position)
   let {isOpen, hide, toggle} = Toolkit__Hooks.useDisclosure(~defaultIsOpen, ())
 
-  Toolkit__Hooks.useOnClickOutside(ref, _ => {
+  Toolkit__Hooks.useOnClickOutside(buttonRef, _ => {
     hide()
   })
+
   let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
 
   React.useEffect2(() => {
     if isOpen {
-      ref.current
+      dropDownRef.current
       ->Js.Nullable.toOption
       ->Option.forEach(dom => {
         let {left, right} = dom->Browser.DomElement.getBoundingClientRect
@@ -52,7 +54,7 @@ let make = (
       setAdjustmentStyle(_ => None)
     }
     None
-  }, (isOpen, ref))
+  }, (isOpen, dropDownRef))
 
   <div className={cx(["relative", containerClassName])}>
     <Toolkit__Ui_Button
@@ -60,11 +62,12 @@ let make = (
       size=buttonSize
       type_="button"
       color=buttonColor
+      buttonRef={ReactDOM.Ref.domRef(buttonRef)}
       onClick={event => {
-        switch ref.current->Js.Nullable.toOption {
+        switch dropDownRef.current->Js.Nullable.toOption {
         | None => toggle()
-        | Some(domRef) => {
-            let isInDropdown = ReactEvent.Mouse.currentTarget(event)["contains"](. domRef)
+        | Some(dropDownRef) => {
+            let isInDropdown = ReactEvent.Mouse.currentTarget(event)["contains"](. dropDownRef)
             if !isInDropdown {
               toggle()
             }
@@ -75,7 +78,7 @@ let make = (
       label
       {isOpen
         ? <div
-            ref={ReactDOM.Ref.domRef(ref)}
+            ref={ReactDOM.Ref.domRef(dropDownRef)}
             className={cx([
               "dropdown",
               "absolute  z-20 bg-white p-2 transform shadow rounded text-base font-normal text-neutral-700 opacity-0",

package/src/ui/Toolkit__Ui_Table.res

@@ -45,6 +45,7 @@ module Core = {
     ~className="",
     ~emptyMessage,
     ~additionalRow: option<(ReactTable.instanceRow<'a>, 'a) => React.element>=?,
+    ~trClassName="",
   ) =>
     <div className={cx([className, "flex flex-auto w-full overflow-x-auto relative"])}>
       <Toolkit__Ui_Spread props={table.getTableProps()}>
@@ -98,7 +99,7 @@ module Core = {
 
                 <React.Fragment key={"tr" ++ index->Int.toString}>
                   <Toolkit__Ui_Spread props={row.getRowProps()}>
-                    <tr className={"block even:bg-gray-200 min-h-[5.5rem]"}>
+                    <tr className={cx([trClassName, "block even:bg-gray-200 min-h-[5.5rem]"])}>
                       {row.cells
                       ->Array.mapWithIndex((index, cell) =>
                         <Toolkit__Ui_Spread

package/src/ui/Toolkit__Ui_Table.resi

@@ -10,6 +10,7 @@ module Core: {
     ~className: string=?,
     ~emptyMessage: string,
     ~additionalRow: (ReactTable.instanceRow<'a>, 'a) => React.element=?,
+    ~trClassName: string=?,
   ) => React.element
 }