@xsolla/xui-input-phone 0.133.0 → 0.134.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/web/index.js +35 -144
- package/web/index.js.map +1 -1
- package/web/index.mjs +10 -119
- package/web/index.mjs.map +1 -1
package/web/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/InputPhone.tsx
|
|
2
|
-
import
|
|
2
|
+
import React3, {
|
|
3
3
|
useState,
|
|
4
4
|
forwardRef as forwardRef2,
|
|
5
5
|
useRef,
|
|
@@ -7,117 +7,10 @@ import React4, {
|
|
|
7
7
|
} from "react";
|
|
8
8
|
|
|
9
9
|
// ../primitives-web/src/Box.tsx
|
|
10
|
-
import React2 from "react";
|
|
11
|
-
import styled from "styled-components";
|
|
12
|
-
|
|
13
|
-
// ../primitives-web/src/filterDOMProps.ts
|
|
14
10
|
import React from "react";
|
|
15
|
-
|
|
16
|
-
// BoxProps — layout & styling
|
|
17
|
-
"backgroundColor",
|
|
18
|
-
"borderColor",
|
|
19
|
-
"borderWidth",
|
|
20
|
-
"borderBottomWidth",
|
|
21
|
-
"borderBottomColor",
|
|
22
|
-
"borderTopWidth",
|
|
23
|
-
"borderTopColor",
|
|
24
|
-
"borderLeftWidth",
|
|
25
|
-
"borderLeftColor",
|
|
26
|
-
"borderRightWidth",
|
|
27
|
-
"borderRightColor",
|
|
28
|
-
"borderRadius",
|
|
29
|
-
"borderStyle",
|
|
30
|
-
"flexDirection",
|
|
31
|
-
"flexWrap",
|
|
32
|
-
"alignItems",
|
|
33
|
-
"justifyContent",
|
|
34
|
-
"alignSelf",
|
|
35
|
-
"flex",
|
|
36
|
-
"flexShrink",
|
|
37
|
-
"gap",
|
|
38
|
-
"position",
|
|
39
|
-
"top",
|
|
40
|
-
"bottom",
|
|
41
|
-
"left",
|
|
42
|
-
"right",
|
|
43
|
-
"outline",
|
|
44
|
-
"overflow",
|
|
45
|
-
"overflowX",
|
|
46
|
-
"overflowY",
|
|
47
|
-
"zIndex",
|
|
48
|
-
"cursor",
|
|
49
|
-
"padding",
|
|
50
|
-
"paddingHorizontal",
|
|
51
|
-
"paddingVertical",
|
|
52
|
-
"paddingTop",
|
|
53
|
-
"paddingBottom",
|
|
54
|
-
"paddingLeft",
|
|
55
|
-
"paddingRight",
|
|
56
|
-
"margin",
|
|
57
|
-
"marginTop",
|
|
58
|
-
"marginBottom",
|
|
59
|
-
"marginLeft",
|
|
60
|
-
"marginRight",
|
|
61
|
-
"minWidth",
|
|
62
|
-
"minHeight",
|
|
63
|
-
"maxWidth",
|
|
64
|
-
"maxHeight",
|
|
65
|
-
"hoverStyle",
|
|
66
|
-
"pressStyle",
|
|
67
|
-
"focusStyle",
|
|
68
|
-
"outlineColor",
|
|
69
|
-
"outlineWidth",
|
|
70
|
-
"outlineOffset",
|
|
71
|
-
"outlineStyle",
|
|
72
|
-
// BoxProps — RN-only
|
|
73
|
-
"onPress",
|
|
74
|
-
"onLayout",
|
|
75
|
-
"onMoveShouldSetResponder",
|
|
76
|
-
"onResponderGrant",
|
|
77
|
-
"onResponderMove",
|
|
78
|
-
"onResponderRelease",
|
|
79
|
-
"onResponderTerminate",
|
|
80
|
-
"testID",
|
|
81
|
-
// Box — custom element type
|
|
82
|
-
"elementType",
|
|
83
|
-
// TextProps
|
|
84
|
-
"fontSize",
|
|
85
|
-
"fontWeight",
|
|
86
|
-
"fontFamily",
|
|
87
|
-
"lineHeight",
|
|
88
|
-
"whiteSpace",
|
|
89
|
-
"textAlign",
|
|
90
|
-
"textDecoration",
|
|
91
|
-
"numberOfLines",
|
|
92
|
-
"letterSpacing",
|
|
93
|
-
"textTransform",
|
|
94
|
-
// SpinnerProps
|
|
95
|
-
"strokeWidth",
|
|
96
|
-
// DividerProps
|
|
97
|
-
"vertical",
|
|
98
|
-
"dashStroke"
|
|
99
|
-
]);
|
|
100
|
-
function createFilteredElement(defaultTag) {
|
|
101
|
-
const Component = React.forwardRef(
|
|
102
|
-
({ children, elementType, ...props }, ref) => {
|
|
103
|
-
const Tag = elementType || defaultTag;
|
|
104
|
-
const htmlProps = {};
|
|
105
|
-
for (const key of Object.keys(props)) {
|
|
106
|
-
if (!NON_HTML_PROPS.has(key)) {
|
|
107
|
-
htmlProps[key] = props[key];
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
return React.createElement(Tag, { ref, ...htmlProps }, children);
|
|
111
|
-
}
|
|
112
|
-
);
|
|
113
|
-
Component.displayName = `Filtered(${defaultTag})`;
|
|
114
|
-
return Component;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// ../primitives-web/src/Box.tsx
|
|
11
|
+
import styled from "styled-components";
|
|
118
12
|
import { jsx } from "react/jsx-runtime";
|
|
119
|
-
var
|
|
120
|
-
var StyledBox = styled(FilteredDiv)`
|
|
13
|
+
var StyledBox = styled.div`
|
|
121
14
|
display: flex;
|
|
122
15
|
box-sizing: border-box;
|
|
123
16
|
background-color: ${(props) => props.backgroundColor || "transparent"};
|
|
@@ -204,7 +97,7 @@ var StyledBox = styled(FilteredDiv)`
|
|
|
204
97
|
${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
|
|
205
98
|
}
|
|
206
99
|
`;
|
|
207
|
-
var Box =
|
|
100
|
+
var Box = React.forwardRef(
|
|
208
101
|
({
|
|
209
102
|
children,
|
|
210
103
|
onPress,
|
|
@@ -256,7 +149,7 @@ var Box = React2.forwardRef(
|
|
|
256
149
|
StyledBox,
|
|
257
150
|
{
|
|
258
151
|
ref,
|
|
259
|
-
|
|
152
|
+
as,
|
|
260
153
|
id,
|
|
261
154
|
type: as === "button" ? type || "button" : void 0,
|
|
262
155
|
disabled: as === "button" ? disabled : void 0,
|
|
@@ -287,8 +180,7 @@ Box.displayName = "Box";
|
|
|
287
180
|
// ../primitives-web/src/Text.tsx
|
|
288
181
|
import styled2 from "styled-components";
|
|
289
182
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
290
|
-
var
|
|
291
|
-
var StyledText = styled2(FilteredSpan)`
|
|
183
|
+
var StyledText = styled2.span`
|
|
292
184
|
color: ${(props) => props.color || "inherit"};
|
|
293
185
|
font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
|
|
294
186
|
font-weight: ${(props) => props.fontWeight || "normal"};
|
|
@@ -321,8 +213,7 @@ var Text = ({
|
|
|
321
213
|
// ../primitives-web/src/Icon.tsx
|
|
322
214
|
import styled3 from "styled-components";
|
|
323
215
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
324
|
-
var
|
|
325
|
-
var StyledIcon = styled3(FilteredDiv2)`
|
|
216
|
+
var StyledIcon = styled3.div`
|
|
326
217
|
display: flex;
|
|
327
218
|
align-items: center;
|
|
328
219
|
justify-content: center;
|
|
@@ -2413,7 +2304,7 @@ var InputPhone = forwardRef2(
|
|
|
2413
2304
|
const inputId = providedId || `input-phone-${safeId}`;
|
|
2414
2305
|
const errorId = `${inputId}-error`;
|
|
2415
2306
|
const dropdownId = `${inputId}-dropdown`;
|
|
2416
|
-
|
|
2307
|
+
React3.useImperativeHandle(
|
|
2417
2308
|
ref,
|
|
2418
2309
|
() => inputRef.current,
|
|
2419
2310
|
[]
|
|
@@ -2720,7 +2611,7 @@ var InputPhone = forwardRef2(
|
|
|
2720
2611
|
borderColor: inputColors.borderHover
|
|
2721
2612
|
} : void 0,
|
|
2722
2613
|
children: [
|
|
2723
|
-
selectedCountry?.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children:
|
|
2614
|
+
selectedCountry?.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children: React3.isValidElement(selectedCountry.flag) ? React3.cloneElement(
|
|
2724
2615
|
selectedCountry.flag,
|
|
2725
2616
|
{ size: flagSize }
|
|
2726
2617
|
) : selectedCountry.flag }) : /* @__PURE__ */ jsx258(Location, { size: flagSize, variant: "line", color: iconColor }),
|
|
@@ -2981,7 +2872,7 @@ var InputPhone = forwardRef2(
|
|
|
2981
2872
|
backgroundColor: inputColors.bgHover
|
|
2982
2873
|
} : void 0,
|
|
2983
2874
|
children: [
|
|
2984
|
-
country.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children:
|
|
2875
|
+
country.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children: React3.isValidElement(country.flag) ? React3.cloneElement(
|
|
2985
2876
|
country.flag,
|
|
2986
2877
|
{ size: flagSize }
|
|
2987
2878
|
) : country.flag }) : /* @__PURE__ */ jsx258(
|