@asdp/ferryui 0.1.22-dev.9209 → 0.1.22-dev.9233

package/dist/index.d.mts

@@ -810,6 +810,7 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
     rows?: number;
     min?: number | string;
     max?: number | string;
+    onlyCountries?: string[];
     step?: number | string;
     isMultiSelect?: boolean;
     selectScrollbarColor?: string;

package/dist/index.d.ts

@@ -810,6 +810,7 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
     rows?: number;
     min?: number | string;
     max?: number | string;
+    onlyCountries?: string[];
     step?: number | string;
     isMultiSelect?: boolean;
     selectScrollbarColor?: string;

package/dist/index.js

@@ -3133,6 +3133,7 @@ var InputDynamic = ({
   hasError = false,
   autoComplete,
   onInput,
+  onlyCountries,
   contentAfter,
   onChange,
   language = "id",
@@ -3349,7 +3350,8 @@ var InputDynamic = ({
     const getPhoneAppearanceClass = () => {
       if (appearance === "underline") return styles.phoneInputUnderline;
       if (appearance === "filled-darker") return styles.phoneInputFilledDarker;
-      if (appearance === "filled-lighter") return styles.phoneInputFilledLighter;
+      if (appearance === "filled-lighter")
+        return styles.phoneInputFilledLighter;
       return "";
     };
     const phoneAppearanceClass = getPhoneAppearanceClass();
@@ -3382,9 +3384,21 @@ var InputDynamic = ({
     const fontSizeValuePhoneInput = size == "small" ? reactComponents.tokens.fontSizeBase200 : size === "medium" ? reactComponents.tokens.fontSizeBase300 : reactComponents.tokens.fontSizeBase400;
     const phoneInputSizeStyle = {
       fontSize: fontSizeValuePhoneInput,
-      ...size === "small" && { minHeight: "26px", height: "26px", padding: `0 ${reactComponents.tokens.spacingHorizontalS} 0 48px` },
-      ...size === "medium" && { minHeight: "34px", height: "34px", padding: `${reactComponents.tokens.spacingVerticalXXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXXS} 48px` },
-      ...size === "large" && { minHeight: "40px", height: "40px", padding: `${reactComponents.tokens.spacingVerticalXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXS} 48px` }
+      ...size === "small" && {
+        minHeight: "26px",
+        height: "26px",
+        padding: `0 ${reactComponents.tokens.spacingHorizontalS} 0 48px`
+      },
+      ...size === "medium" && {
+        minHeight: "34px",
+        height: "34px",
+        padding: `${reactComponents.tokens.spacingVerticalXXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXXS} 48px`
+      },
+      ...size === "large" && {
+        minHeight: "40px",
+        height: "40px",
+        padding: `${reactComponents.tokens.spacingVerticalXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXS} 48px`
+      }
     };
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
@@ -3421,7 +3435,11 @@ var InputDynamic = ({
         "div",
         {
           ref: emailOrPhoneInputRef,
-          className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
+          className: reactComponents.mergeClasses(
+            styles.phoneInputWrapper,
+            phoneAppearanceClass,
+            error ? styles.phoneInputError : ""
+          ),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
@@ -3524,7 +3542,11 @@ var InputDynamic = ({
         "div",
         {
           ref: phoneInputRef,
-          className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
+          className: reactComponents.mergeClasses(
+            styles.phoneInputWrapper,
+            phoneAppearanceClass,
+            error ? styles.phoneInputError : ""
+          ),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
@@ -3659,7 +3681,9 @@ var InputDynamic = ({
               autoCapitalize: "off",
               spellCheck: "false"
             },
-            value: (options && options.length > 0 ? options : COUNTRIES).find((country) => country.value === field.value) || null,
+            value: (options && options.length > 0 ? options : COUNTRIES).find(
+              (country) => country.value === field.value
+            ) || null,
             onChange: (selectedOption) => {
               field.onChange(selectedOption ? selectedOption.value : "");
               if (onChange) {
@@ -3710,24 +3734,33 @@ var InputDynamic = ({
           return stringVal;
         };
         const cleanedFieldValue = cleanPhoneValue(field.value || "");
+        const phoneInputProps = {};
+        if (onlyCountries) {
+          phoneInputProps.onlyCountries = onlyCountries;
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
+            className: reactComponents.mergeClasses(
+              styles.phoneInputWrapper,
+              phoneAppearanceClass,
+              error ? styles.phoneInputError : ""
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               PhoneInput,
               {
+                ...phoneInputProps,
                 country: defaultCountry.toLowerCase(),
-                value: cleanedFieldValue,
+                disabled,
+                disableSearchIcon: true,
+                enableSearch: true,
+                inputStyle: phoneInputSizeStyle,
                 onChange: (value, data) => {
                   const cleanedValue = cleanPhoneValue(value || "");
                   field.onChange(cleanedValue);
                 },
                 placeholder: placeholder || mergedLabels.phoneDefaultPlaceholder,
-                disabled,
-                enableSearch: true,
-                disableSearchIcon: true,
-                inputStyle: phoneInputSizeStyle
+                value: cleanedFieldValue
               }
             )
           }
@@ -4078,7 +4111,9 @@ var InputDynamic = ({
         if (!stringValue) return true;
         const detectedType = detectEmailOrPhoneStrict(stringValue);
         if (detectedType === "email") {
-          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
+          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(
+            stringValue
+          )) {
             return mergedLabels.invalidEmailFormatError;
           }
         } else if (detectedType === "phone") {
@@ -4107,7 +4142,9 @@ var InputDynamic = ({
         if (!stringValue) return true;
         const detectedType = detectIdentityType(stringValue);
         if (detectedType === "email") {
-          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
+          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(
+            stringValue
+          )) {
             return mergedLabels.invalidEmailFormatError;
           }
         } else if (detectedType === "phone") {
@@ -4154,29 +4191,40 @@ var InputDynamic = ({
               }
             ),
             renderInput(field, error?.message),
-            helperText && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "4px", marginTop: "4px" }, children: [
-              helperIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                react.Icon,
-                {
-                  icon: helperIcon,
-                  style: {
-                    color: reactComponents.tokens.colorNeutralForeground3,
-                    flexShrink: 0
-                  },
-                  width: 16,
-                  height: 16
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactComponents.Text,
-                {
-                  size: 200,
-                  style: { textAlign: "left" },
-                  className: styles.helperText,
-                  children: helperText
-                }
-              )
-            ] })
+            helperText && !error && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "4px",
+                  marginTop: "4px"
+                },
+                children: [
+                  helperIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Icon,
+                    {
+                      icon: helperIcon,
+                      style: {
+                        color: reactComponents.tokens.colorNeutralForeground3,
+                        flexShrink: 0
+                      },
+                      width: 16,
+                      height: 16
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Text,
+                    {
+                      size: 200,
+                      style: { textAlign: "left" },
+                      className: styles.helperText,
+                      children: helperText
+                    }
+                  )
+                ]
+              }
+            )
           ]
         }
       )