@colisweb/rescript-toolkit 5.42.8 → 5.43.0

package/locale/fr.json

@@ -199,11 +199,6 @@
     "defaultMessage": "Lundi",
     "message": "Lundi"
   },
-  {
-    "id": "_a7d9c2dc",
-    "defaultMessage": "Format: +33612345678",
-    "message": "Format: +33612345678"
-  },
   {
     "id": "_a7e73ea4",
     "defaultMessage": "Déconnexion",

package/package.json

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

package/src/form/Toolkit__Form.res

@@ -816,50 +816,31 @@ module Make = (StateLenses: Config) => {
       ~label,
       ~isOptional=false,
       ~id,
-      ~name=?,
-      ~placeholder=?,
-      ~autoFocus=?,
-      ~disabled=?,
-      ~containerClassName="",
-      ~isInline=false,
-      ~inputClassName="",
-      ~labelClassName="",
-      ~inputContainerClassName="",
-      ~autoComplete=?,
-      ~allowWhiteSpace=false,
     ) =>
       <Field
         field
-        render={({value, handleChange, validate, error, state}) => {
-          let isInvalid = error->Option.isSome
-
-          let onBlur = _ =>
-            switch state {
-            | Pristine => ()
-            | _ => validate()
-            }
+        render={({value, handleChange, validate, error}) => {
           <>
-            <Toolkit__Ui_Label htmlFor=id> {label} </Toolkit__Ui_Label>
-            <div>
-              <Toolkit__Ui.TextInput
-                ?autoComplete
-                className={cx([inputClassName])}
-                id
-                value
-                ?name
-                type_={"phone"}
-                ?disabled
-                ?placeholder
-                allowWhiteSpace
-                ?autoFocus
-                isInvalid
-                onChangeText={handleChange}
-                onBlur
-              />
-              <small className="text-neutral-600 pl-1 text-xs m">
-                <FormattedMessage defaultMessage={"Format: +33612345678"} />
-              </small>
-            </div>
+            <Toolkit__Ui_Label
+              htmlFor=id
+              optionalMessage={isOptional
+                ? <FormattedMessage defaultMessage="(Optionnel)" />
+                : React.null}>
+              {label}
+            </Toolkit__Ui_Label>
+            <ReactPhoneNumberInput
+              international
+              className={cx([
+                "bg-white border rounded",
+                error->Option.isSome ? "border-danger-500" : "",
+              ])}
+              id
+              value
+              countryCallingCodeEditable={false}
+              defaultCountry
+              onChange={handleChange}
+              onBlur={_ => validate()}
+            />
             {error->Option.mapWithDefault(React.null, error => {
               <ErrorMessage error />
             })}

package/src/hooks/Toolkit__Hooks.res

@@ -451,3 +451,30 @@ let usePromiseV3 = (~debounce=true, fn, deps) => {
 
   (state, cancel)
 }
+
+type scrollPosition = {
+  x: float,
+  y: float,
+}
+
+let useScrollPosition = (~delay=150, ()) => {
+  let (scrollPos, setScrollPos) = React.useState(() => {x: 0.0, y: 0.0})
+
+  React.useEffect(() => {
+    let handleScroll = () => {
+      setScrollPos(_ => {x: Browser.Window.scrollX, y: Browser.Window.scrollY})
+    }
+
+    let debouncedScroll = Lodash.debounce(handleScroll, delay)
+
+    Browser.Window.addEventListener("scroll", debouncedScroll)
+
+    Some(
+      () => {
+        Browser.Window.removeEventListener("scroll", debouncedScroll)
+      },
+    )
+  }, [delay])
+
+  scrollPos
+}

package/src/vendors/Browser.res

@@ -187,6 +187,10 @@ module FormData = {
 }
 
 module Window = {
+  @val
+  external scrollX: float = "window.scrollX"
+  @val
+  external scrollY: float = "window.scrollY"
   @val
   external addEventListener: (string, ReactEvent.Form.t => unit) => unit = "window.addEventListener"
   @val

package/src/vendors/Browser.resi

@@ -167,6 +167,10 @@ module FormData: {
 }
 
 module Window: {
+  @val
+  external scrollX: float = "window.scrollX"
+  @val
+  external scrollY: float = "window.scrollY"
   @val
   external addEventListener: (string, ReactEvent.Form.t => unit) => unit = "window.addEventListener"
   @val