@colisweb/rescript-toolkit 1.28.3 → 1.29.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "1.28.3",
+  "version": "1.29.1",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/fetcher/Toolkit__Fetcher.res

@@ -4,9 +4,6 @@ module type Config = {
 }
 
 module Make = (Config: Config) => {
-  let trigger = (key: Config.Request.argument): unit =>
-    Toolkit__Hooks.triggerFetcher(Config.key(key))
-
   let key: Config.Request.argument => array<string> = Config.key
 
   let use = (

package/src/form/Toolkit__Form.res

@@ -11,7 +11,7 @@ module ErrorMessage = {
   @react.component
   let make = (~error=?, ~className="") =>
     error->Option.isSome
-      ? <p className={cx([className, "text-danger-600 text-sm mt-1"])}>
+      ? <p className={cx([className, "text-danger-600 text-sm mt-1 form-error-feedback"])}>
           {error->Option.getExn->React.string}
         </p>
       : React.null

package/src/hooks/Toolkit__Hooks.res

@@ -59,8 +59,6 @@ let useInitialPreviousDistinct = (~compare=(a, b) => a === b, value) => {
 
 type fetcher<'data> = ('data, bool, unit => Promise.t<result<bool, Js.Promise.error>>)
 
-let triggerFetcher = Swr.trigger
-
 let useFetcher = (~options: option<Swr.fetcherOptions>=?, key: 'key, fn: 'fn): fetcher<'data> => {
   let {data, isValidating, mutate} = Swr.useSwr(
     key,

package/src/ui/Toolkit__Ui.res

@@ -7,6 +7,7 @@ module Spread = Toolkit__Ui_Spread
 module DatetimeInput = Toolkit__Ui_DatetimeInput
 module TextInput = Toolkit__Ui_TextInput
 module Tooltip = Toolkit__Ui_Tooltip
+module TooltipV2 = Toolkit__Ui_TooltipV2
 module Switch = Toolkit__Ui_Switch
 module Radio = Toolkit__Ui_Radio
 module Checkbox = Toolkit__Ui_Checkbox

package/src/ui/Toolkit__Ui_Snackbar.res

@@ -75,7 +75,7 @@ module Item = {
         "bg-white p-3 rounded shadow transition duration-500 ease-in-out mt-3 transform ",
         {
           open Css
-          style(list{bottom(40->px)})
+          style(list{bottom(40->px), unsafe("pointer-events", "all")})
         },
         mounted ? "-translate-y-14" : "!opacity-0",
         isVisible ? "opacity-100" : "opacity-0  translate-x-[200px]",
@@ -127,7 +127,7 @@ module Provider = {
 
     <ReachUi.Portal>
       <div
-        className="z-[2147483647] fixed right-0 top-0 transform translate-y-14 h-full p-4 flex flex-col items-end justify-end">
+        className="z-[2147483647] pointer-events-none fixed right-0 top-0 transform translate-y-14 h-full p-4 flex flex-col items-end justify-end">
         {list
         ->Array.map(e => {
           <Item key={e.id->Obj.magic} options=e />

package/src/ui/Toolkit__Ui_TooltipV2.res

@@ -0,0 +1,85 @@
+type position = [
+  | #bottom
+  | #right
+  | #top
+  | #left
+]
+
+@react.component
+let make = (
+  ~label: React.element,
+  ~children,
+  ~tooltipClassName="",
+  ~containerClassName="",
+  ~position=#bottom,
+) => {
+  let ref = React.useRef(Js.Nullable.null)
+  let (position, setPosition) = React.useState(() => position)
+  let (children, isHover) = ReactUse.useHover(children)
+  let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
+
+  React.useEffect2(() => {
+    if isHover {
+      ref.current
+      ->Js.Nullable.toOption
+      ->Option.forEach(dom => {
+        let {left, width, right, top} = dom->Browser.DomElement.getBoundingClientRect
+
+        let overflowFromRight = left +. width > Browser.innerWidth->Float.fromInt
+        let overflowFromLeft = left <= 0.
+
+        let overflowCorrection = {
+          if overflowFromRight {
+            Some(-.(width -. (Browser.innerWidth->Int.toFloat -. left)))
+          } else if overflowFromLeft {
+            Some(-.left)
+          } else {
+            None
+          }
+        }
+
+        switch position {
+        | #left if left < 0. => setPosition(_ => #right)
+        | #right if right < 0. => setPosition(_ => #left)
+        | #top if top < 0. => setPosition(_ => #bottom)
+        | _ => ()
+        }
+
+        setAdjustmentStyle(_ => Some(
+          ReactDOM.Style.make(
+            ~marginLeft=overflowCorrection->Option.mapWithDefault("", correction =>
+              `${correction->Js.Float.toString}px`
+            ),
+            ~opacity="1",
+            (),
+          ),
+        ))
+      })
+    } else {
+      setAdjustmentStyle(_ => None)
+    }
+    None
+  }, (isHover, ref))
+
+  <div className={cx(["relative", containerClassName])}>
+    children
+    {isHover
+      ? <div
+          ref={ReactDOM.Ref.domRef(ref)}
+          className={cx([
+            "dropdown",
+            "absolute z-20 text-sm p-2 transform transition duration-150 ease-in-out shadow rounded font-normal bg-gray-800 text-white opacity-0",
+            switch position {
+            | #bottom => "left-1/2 top-full  -translate-x-1/2 mt-2"
+            | #top => "left-1/2 bottom-full -translate-x-1/2 mb-2"
+            | #left => "right-full top-1/2 -translate-y-1/2 ml-2"
+            | #right => "left-full top-1/2 -translate-y-1/2 ml-2"
+            },
+            tooltipClassName,
+          ])}
+          style={adjustmentStyle->Option.getWithDefault(ReactDOM.Style.make())}>
+          label
+        </div>
+      : React.null}
+  </div>
+}

package/src/vendors/Browser.res

@@ -45,3 +45,6 @@ module DomElement = {
   }
   @send external getBoundingClientRect: Dom.element => rect = "getBoundingClientRect"
 }
+
+@val
+external innerWidth: int = "window.innerWidth"

package/src/vendors/Browser.resi

@@ -33,3 +33,5 @@ module DomElement: {
   }
   let getBoundingClientRect: Dom.element => rect
 }
+
+let innerWidth: int

package/src/vendors/ReactUse.res

@@ -43,3 +43,6 @@ external usePreviousDistinct: (~compare: option<('a, 'b) => bool>=?, 'a, unit) =
 
 @module("react-use")
 external useGetSet: (unit => 'a) => ('a, 'a => 'a) = "useGetSet"
+
+@module("react-use")
+external useHover: React.element => (React.element, bool) = "useHover"

package/src/vendors/Swr.res

@@ -52,8 +52,6 @@ external useSwr: ('key, 'fn, 'fetcherOptions) => fetcher<'data> = "default"
 @module("swr")
 external useSwrOptional: ('key, 'fn, 'fetcherOptions) => fetcher<option<'data>> = "default"
 
-@module("swr") external trigger: 'key => unit = "trigger"
-
 type cache
 @module("swr") external cache: cache = "cache"
 @send external clear: cache => unit = "clear"