@xsolla/xui-input-phone 0.133.0 → 0.135.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-input-phone",
-  "version": "0.133.0",
+  "version": "0.135.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,8 +13,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.133.0",
-    "@xsolla/xui-primitives-core": "0.133.0",
+    "@xsolla/xui-core": "0.135.0",
+    "@xsolla/xui-primitives-core": "0.135.0",
     "libphonenumber-js": "^1.10.56"
   },
   "peerDependencies": {

package/web/index.js

@@ -41,120 +41,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/InputPhone.tsx
-var import_react4 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 
 // ../primitives-web/src/Box.tsx
-var import_react2 = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-
-// ../primitives-web/src/filterDOMProps.ts
 var import_react = __toESM(require("react"));
-var NON_HTML_PROPS = /* @__PURE__ */ new Set([
-  // BoxProps — layout & styling
-  "backgroundColor",
-  "borderColor",
-  "borderWidth",
-  "borderBottomWidth",
-  "borderBottomColor",
-  "borderTopWidth",
-  "borderTopColor",
-  "borderLeftWidth",
-  "borderLeftColor",
-  "borderRightWidth",
-  "borderRightColor",
-  "borderRadius",
-  "borderStyle",
-  "flexDirection",
-  "flexWrap",
-  "alignItems",
-  "justifyContent",
-  "alignSelf",
-  "flex",
-  "flexShrink",
-  "gap",
-  "position",
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "outline",
-  "overflow",
-  "overflowX",
-  "overflowY",
-  "zIndex",
-  "cursor",
-  "padding",
-  "paddingHorizontal",
-  "paddingVertical",
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-  "margin",
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "hoverStyle",
-  "pressStyle",
-  "focusStyle",
-  "outlineColor",
-  "outlineWidth",
-  "outlineOffset",
-  "outlineStyle",
-  // BoxProps — RN-only
-  "onPress",
-  "onLayout",
-  "onMoveShouldSetResponder",
-  "onResponderGrant",
-  "onResponderMove",
-  "onResponderRelease",
-  "onResponderTerminate",
-  "testID",
-  // Box — custom element type
-  "elementType",
-  // TextProps
-  "fontSize",
-  "fontWeight",
-  "fontFamily",
-  "lineHeight",
-  "whiteSpace",
-  "textAlign",
-  "textDecoration",
-  "numberOfLines",
-  "letterSpacing",
-  "textTransform",
-  // SpinnerProps
-  "strokeWidth",
-  // DividerProps
-  "vertical",
-  "dashStroke"
-]);
-function createFilteredElement(defaultTag) {
-  const Component = import_react.default.forwardRef(
-    ({ children, elementType, ...props }, ref) => {
-      const Tag = elementType || defaultTag;
-      const htmlProps = {};
-      for (const key of Object.keys(props)) {
-        if (!NON_HTML_PROPS.has(key)) {
-          htmlProps[key] = props[key];
-        }
-      }
-      return import_react.default.createElement(Tag, { ref, ...htmlProps }, children);
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
-
-// ../primitives-web/src/Box.tsx
+var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var FilteredDiv = createFilteredElement("div");
-var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
+var StyledBox = import_styled_components.default.div`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -241,7 +134,7 @@ var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = import_react2.default.forwardRef(
+var Box = import_react.default.forwardRef(
   ({
     children,
     onPress,
@@ -293,7 +186,7 @@ var Box = import_react2.default.forwardRef(
       StyledBox,
       {
         ref,
-        elementType: as,
+        as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -324,8 +217,7 @@ Box.displayName = "Box";
 // ../primitives-web/src/Text.tsx
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var FilteredSpan = createFilteredElement("span");
-var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
+var StyledText = import_styled_components2.default.span`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -358,8 +250,7 @@ var Text = ({
 // ../primitives-web/src/Icon.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FilteredDiv2 = createFilteredElement("div");
-var StyledIcon = (0, import_styled_components3.default)(FilteredDiv2)`
+var StyledIcon = import_styled_components3.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -379,7 +270,7 @@ var Icon = ({ children, ...props }) => {
 };
 
 // ../primitives-web/src/Input.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var StyledInput = import_styled_components4.default.input`
@@ -413,7 +304,7 @@ var StyledInput = import_styled_components4.default.input`
     -webkit-text-fill-color: ${(props) => props.color || "inherit"} !important;
   }
 `;
-var InputPrimitive = (0, import_react3.forwardRef)(
+var InputPrimitive = (0, import_react2.forwardRef)(
   ({
     value,
     placeholder,
@@ -2402,7 +2293,7 @@ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
     )
   }
 );
-var InputPhone = (0, import_react4.forwardRef)(
+var InputPhone = (0, import_react3.forwardRef)(
   ({
     value,
     placeholder = "+1 (000) 000-0000",
@@ -2428,35 +2319,35 @@ var InputPhone = (0, import_react4.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
-    const [internalState, setInternalState] = (0, import_react4.useState)(
+    const [internalState, setInternalState] = (0, import_react3.useState)(
       "default"
     );
-    const [passValue, setPassValue] = (0, import_react4.useState)(value ?? "");
-    const [isDropdownOpen, setIsDropdownOpen] = (0, import_react4.useState)(false);
-    const [highlightedIndex, setHighlightedIndex] = (0, import_react4.useState)(-1);
-    const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
-    const inputRef = (0, import_react4.useRef)(null);
-    const dropdownRef = (0, import_react4.useRef)(null);
-    const countryButtonRef = (0, import_react4.useRef)(null);
-    const searchInputRef = (0, import_react4.useRef)(null);
-    const selectedCountryRef = (0, import_react4.useRef)(null);
-    const countryListRef = (0, import_react4.useRef)(null);
+    const [passValue, setPassValue] = (0, import_react3.useState)(value ?? "");
+    const [isDropdownOpen, setIsDropdownOpen] = (0, import_react3.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react3.useState)(-1);
+    const [searchQuery, setSearchQuery] = (0, import_react3.useState)("");
+    const inputRef = (0, import_react3.useRef)(null);
+    const dropdownRef = (0, import_react3.useRef)(null);
+    const countryButtonRef = (0, import_react3.useRef)(null);
+    const searchInputRef = (0, import_react3.useRef)(null);
+    const selectedCountryRef = (0, import_react3.useRef)(null);
+    const countryListRef = (0, import_react3.useRef)(null);
     const rawId = (0, import_xui_core.useId)();
     const safeId = rawId.replace(/:/g, "");
     const inputId = providedId || `input-phone-${safeId}`;
     const errorId = `${inputId}-error`;
     const dropdownId = `${inputId}-dropdown`;
-    import_react4.default.useImperativeHandle(
+    import_react3.default.useImperativeHandle(
       ref,
       () => inputRef.current,
       []
     );
-    (0, import_react4.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (value !== void 0) {
         setPassValue(value);
       }
     }, [value]);
-    (0, import_react4.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (isDropdownOpen && selectedCountryRef.current && countryListRef.current) {
         const timeoutId = setTimeout(() => {
           const selectedItem = selectedCountryRef.current;
@@ -2467,7 +2358,7 @@ var InputPhone = (0, import_react4.forwardRef)(
         return () => clearTimeout(timeoutId);
       }
     }, [isDropdownOpen]);
-    (0, import_react4.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (!isDropdownOpen || !import_xui_core.isWeb) return;
       const handleClickOutside = (event) => {
         const target = event.target;
@@ -2598,7 +2489,7 @@ var InputPhone = (0, import_react4.forwardRef)(
           break;
       }
     };
-    (0, import_react4.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (isDropdownOpen && highlightedIndex >= 0 && highlightedIndex < filteredCountries.length) {
         const handleEnter = (e) => {
           if (e.key === "Enter") {
@@ -2753,7 +2644,7 @@ var InputPhone = (0, import_react4.forwardRef)(
                       borderColor: inputColors.borderHover
                     } : void 0,
                     children: [
-                      selectedCountry?.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react4.default.isValidElement(selectedCountry.flag) ? import_react4.default.cloneElement(
+                      selectedCountry?.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react3.default.isValidElement(selectedCountry.flag) ? import_react3.default.cloneElement(
                         selectedCountry.flag,
                         { size: flagSize }
                       ) : selectedCountry.flag }) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Location, { size: flagSize, variant: "line", color: iconColor }),
@@ -3014,7 +2905,7 @@ var InputPhone = (0, import_react4.forwardRef)(
                                   backgroundColor: inputColors.bgHover
                                 } : void 0,
                                 children: [
-                                  country.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react4.default.isValidElement(country.flag) ? import_react4.default.cloneElement(
+                                  country.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react3.default.isValidElement(country.flag) ? import_react3.default.cloneElement(
                                     country.flag,
                                     { size: flagSize }
                                   ) : country.flag }) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
@@ -3081,7 +2972,7 @@ var InputPhone = (0, import_react4.forwardRef)(
 InputPhone.displayName = "InputPhone";
 
 // src/usePhoneNumber.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_libphonenumber_js = require("libphonenumber-js");
 var getNormalizedPhoneNumber = (phoneNumber) => {
   if (!phoneNumber) return "";
@@ -3146,20 +3037,20 @@ var usePhoneNumber = (options = {}) => {
     }
     return void 0;
   };
-  const [phoneNumber, setPhoneNumberState] = (0, import_react5.useState)(() => {
+  const [phoneNumber, setPhoneNumberState] = (0, import_react4.useState)(() => {
     if (initialValue) {
       return getNormalizedPhoneNumber(initialValue);
     }
     return "";
   });
-  const [country, setCountry] = (0, import_react5.useState)(
+  const [country, setCountry] = (0, import_react4.useState)(
     getInitialCountry
   );
   const formattedPhoneNumber = phoneNumber ? (0, import_libphonenumber_js.formatIncompletePhoneNumber)(
     phoneNumber,
     country?.code
   ) : "";
-  const handlePhoneChange = (0, import_react5.useCallback)(
+  const handlePhoneChange = (0, import_react4.useCallback)(
     (value) => {
       let normalizedValue = value;
       const digitsOnly = value.replace(/\D/g, "");
@@ -3186,7 +3077,7 @@ var usePhoneNumber = (options = {}) => {
     },
     [country?.code, onChange, onCountryChange]
   );
-  const handleCountryChange = (0, import_react5.useCallback)(
+  const handleCountryChange = (0, import_react4.useCallback)(
     (newCountry) => {
       const previousCountry = country;
       setCountry(newCountry);
@@ -3211,7 +3102,7 @@ var usePhoneNumber = (options = {}) => {
     },
     [country, phoneNumber, onChange, onCountryChange]
   );
-  const setPhoneNumber = (0, import_react5.useCallback)(
+  const setPhoneNumber = (0, import_react4.useCallback)(
     (value) => {
       const normalized = getNormalizedPhoneNumber(value);
       setPhoneNumberState(normalized);
@@ -3227,7 +3118,7 @@ var usePhoneNumber = (options = {}) => {
     },
     [country?.code, onChange, onCountryChange]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (initialValue && initialValue !== phoneNumber) {
       const normalized = getNormalizedPhoneNumber(initialValue);
       setPhoneNumberState(normalized);