@asdp/ferryui 0.1.22-dev.9201 → 0.1.22-dev.9214

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

@@ -2766,7 +2766,8 @@ var useStyles8 = reactComponents.makeStyles({
   phoneInputWrapper: {
     width: "100%",
     "& .react-tel-input": {
-      width: "100%"
+      width: "100%",
+      fontFamily: reactComponents.tokens.fontFamilyBase
     },
     "& .react-tel-input .form-control": {
       width: "100%",
@@ -2814,6 +2815,128 @@ var useStyles8 = reactComponents.makeStyles({
     },
     "& .react-tel-input .flag-dropdown.open .selected-flag": {
       backgroundColor: "transparent"
+    },
+    // --- Country dropdown list: match react-select styling ---
+    "& .react-tel-input .country-list": {
+      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+      borderRadius: reactComponents.tokens.borderRadiusMedium,
+      boxShadow: `0 4px 11px rgba(0, 0, 0, 0.1)`,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      margin: "4px 0 0 0",
+      padding: 0,
+      width: "300px",
+      maxHeight: "300px",
+      overflowY: "auto",
+      fontFamily: reactComponents.tokens.fontFamilyBase
+    },
+    // Scrollbar matching react-select
+    "& .react-tel-input .country-list::-webkit-scrollbar": {
+      width: "8px",
+      display: "block"
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-track": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+      borderRadius: "4px"
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-thumb": {
+      backgroundColor: reactComponents.tokens.colorNeutralStroke2,
+      borderRadius: "4px"
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: reactComponents.tokens.colorBrandBackground
+    },
+    "& .react-tel-input .country-list::-webkit-scrollbar-thumb:active": {
+      backgroundColor: reactComponents.tokens.colorBrandBackgroundPressed
+    },
+    // Country option items
+    "& .react-tel-input .country-list .country": {
+      padding: "8px 12px",
+      cursor: "pointer",
+      transition: "background-color 0.15s ease",
+      display: "flex",
+      alignItems: "center",
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      fontWeight: reactComponents.tokens.fontWeightRegular,
+      color: reactComponents.tokens.colorNeutralForeground1,
+      backgroundColor: "transparent"
+    },
+    "& .react-tel-input .country-list .country:hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    },
+    "& .react-tel-input .country-list .country.highlight": {
+      backgroundColor: reactComponents.tokens.colorBrandBackground,
+      color: reactComponents.tokens.colorNeutralForegroundOnBrand
+    },
+    "& .react-tel-input .country-list .country.highlight .dial-code": {
+      color: reactComponents.tokens.colorNeutralForegroundOnBrand
+    },
+    "& .react-tel-input .country-list .country .country-name": {
+      marginRight: "6px",
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      fontWeight: reactComponents.tokens.fontWeightRegular,
+      color: "inherit"
+    },
+    "& .react-tel-input .country-list .country .dial-code": {
+      color: reactComponents.tokens.colorNeutralForeground3,
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      fontWeight: reactComponents.tokens.fontWeightRegular
+    },
+    "& .react-tel-input .country-list .country .flag": {
+      marginRight: "8px",
+      marginTop: "2px"
+    },
+    // Search box - match react-select search input
+    "& .react-tel-input .country-list .search": {
+      position: "sticky",
+      top: 0,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      padding: "8px 12px",
+      zIndex: 1
+    },
+    "& .react-tel-input .country-list .search-box": {
+      width: "100%",
+      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+      borderRadius: reactComponents.tokens.borderRadiusMedium,
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400,
+      lineHeight: reactComponents.tokens.lineHeightBase400,
+      padding: "6px 10px",
+      outline: "none",
+      color: reactComponents.tokens.colorNeutralForeground1,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      boxSizing: "border-box",
+      marginLeft: 0
+    },
+    "& .react-tel-input .country-list .search-box:focus": {
+      borderTopColor: reactComponents.tokens.colorBrandStroke1,
+      borderRightColor: reactComponents.tokens.colorBrandStroke1,
+      borderBottomColor: reactComponents.tokens.colorBrandStroke1,
+      borderLeftColor: reactComponents.tokens.colorBrandStroke1,
+      boxShadow: `0 0 0 1px ${reactComponents.tokens.colorBrandStroke1}`
+    },
+    "& .react-tel-input .country-list .search-box::placeholder": {
+      color: reactComponents.tokens.colorNeutralForeground3,
+      fontFamily: reactComponents.tokens.fontFamilyBase
+    },
+    // Search emoji (magnifying glass) - hide for cleaner look
+    "& .react-tel-input .country-list .search-emoji": {
+      display: "none"
+    },
+    // Divider between preferred countries and rest
+    "& .react-tel-input .country-list .divider": {
+      borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+      marginBottom: 0,
+      paddingBottom: 0
+    },
+    // No results message
+    "& .react-tel-input .country-list .no-entries-message": {
+      padding: "8px 12px",
+      color: reactComponents.tokens.colorNeutralForeground3,
+      fontFamily: reactComponents.tokens.fontFamilyBase,
+      fontSize: reactComponents.tokens.fontSizeBase400
     }
   },
   // Appearance: underline
@@ -3010,6 +3133,7 @@ var InputDynamic = ({
   hasError = false,
   autoComplete,
   onInput,
+  onlyCountries,
   contentAfter,
   onChange,
   language = "id",
@@ -3140,13 +3264,26 @@ var InputDynamic = ({
       }),
       placeholder: (provided) => ({
         ...provided,
-        color: reactComponents.tokens.colorNeutralForeground3
+        color: reactComponents.tokens.colorNeutralForeground3,
         // fontSize: tokens.fontSizeBase400,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       }),
       singleValue: (provided) => ({
         ...provided,
-        color: reactComponents.tokens.colorNeutralForeground1
+        color: reactComponents.tokens.colorNeutralForeground1,
         // fontSize: tokens.fontSizeBase400,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }),
+      valueContainer: (provided) => ({
+        ...provided,
+        flexWrap: "nowrap",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       })
     };
   };
@@ -3574,6 +3711,10 @@ var InputDynamic = ({
           return stringVal;
         };
         const cleanedFieldValue = cleanPhoneValue(field.value || "");
+        const phoneInputProps = {};
+        if (onlyCountries) {
+          phoneInputProps.onlyCountries = onlyCountries;
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -3581,17 +3722,19 @@ var InputDynamic = ({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               PhoneInput,
               {
+                ...phoneInputProps,
+                onlyCountries,
                 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
               }
             )
           }