@colisweb/rescript-toolkit 5.26.0 → 5.26.2

package/package.json

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

package/src/form/ReSchema.res

@@ -71,7 +71,11 @@ module Make = (Lenses: Lenses) => {
         }): t
       | True({field: Lenses.field<bool>, error: option<string>}): t
       | False({field: Lenses.field<bool>, error: option<string>}): t
-      | OptionNonEmpty({field: Lenses.field<option<'a>>, error: option<string>}): t
+      | OptionNonEmpty({
+          field: Lenses.field<option<'a>>,
+          optionalPredicate?: Lenses.state => bool,
+          error: option<string>,
+        }): t
       | ArrayNonEmpty({field: Lenses.field<array<'a>>, error: option<string>}): t
 
     type schema = array<t>
@@ -96,7 +100,9 @@ module Make = (Lenses: Lenses) => {
       [CustomNestedSchema2({field, predicate})]
     }
 
-    let optionNonEmpty = (~error=?, field) => [OptionNonEmpty({field, error})]
+    let optionNonEmpty = (~error=?, ~optionalPredicate=?, field) => [
+      OptionNonEmpty({field, ?optionalPredicate, error}),
+    ]
 
     let arrayNonEmpty = (~error=?, field) => [ArrayNonEmpty({field, error})]
 
@@ -359,14 +365,16 @@ module Make = (Lenses: Lenses) => {
 
         (Field(field), NestedErrors2(results))
       }
-    | Validation.OptionNonEmpty({field, error}) => {
+    | Validation.OptionNonEmpty({field, error} as props) => {
         let value = Lenses.get(values, field)
 
         (
           Field(field),
-          value->Option.isNone
-            ? Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value="")))
-            : Valid,
+          switch value {
+          | _ if props.optionalPredicate->Option.mapWithDefault(false, fn => fn(values)) => Valid
+          | None => Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value="")))
+          | Some(_) => Valid
+          },
         )
       }
     | Validation.ArrayNonEmpty({field, error}) => {

package/src/form/Toolkit__Form.res

@@ -738,6 +738,11 @@ module Make = (StateLenses: Config) => {
             </Toolkit__Ui_Label>
             <ReactPhoneNumberInput
               international
+              className={cx([
+                "bg-white border rounded",
+                error->Option.isSome ? "border-danger-500" : "",
+              ])}
+              id
               value
               countryCallingCodeEditable={false}
               defaultCountry

package/src/ui/styles.css

@@ -33,6 +33,8 @@
 
 :root {
   --reach-dialog: 1;
+  --PhoneInputCountrySelectArrow-width: 0.5em;
+  --PhoneInputCountryFlag-height: 0.85em;
 }
 
 body {
@@ -260,16 +262,15 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-.PhoneInput {
-  @apply bg-white border rounded;
-}
-
 .PhoneInputCountry {
-  @apply px-2 m-2 border-r;
+  @apply pr-2 m-2 border-r;
 }
 
 .PhoneInputInput {
   @apply rounded-r py-2;
 }
+.PhoneInputCountrySelectArrow {
+  @apply relative -top-px ml-2 text-neutral-600;
+}
 
 /* purgecss end ignore */

package/src/vendors/ReactPhoneNumberInput.res

@@ -7,6 +7,8 @@ external make: (
   ~defaultCountry: string=?,
   ~onChange: string => unit=?,
   ~onBlur: 'a => unit=?,
+  ~className: string=?,
+  ~id: string=?,
 ) => React.element = "default"
 
 @module("react-phone-number-input")