@xsolla/xui-stepper 0.136.0 → 0.138.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 +4 -4
- package/web/index.js +112 -34
- package/web/index.js.map +1 -1
- package/web/index.mjs +95 -17
- package/web/index.mjs.map +1 -1
package/web/index.mjs
CHANGED
|
@@ -2,10 +2,82 @@
|
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
|
|
4
4
|
// ../primitives-web/src/Box.tsx
|
|
5
|
-
import
|
|
5
|
+
import React2 from "react";
|
|
6
6
|
import styled from "styled-components";
|
|
7
|
+
|
|
8
|
+
// ../primitives-web/src/filterDOMProps.ts
|
|
9
|
+
import React from "react";
|
|
10
|
+
|
|
11
|
+
// ../../node_modules/@emotion/memoize/dist/memoize.esm.js
|
|
12
|
+
function memoize(fn) {
|
|
13
|
+
var cache = {};
|
|
14
|
+
return function(arg) {
|
|
15
|
+
if (cache[arg] === void 0) cache[arg] = fn(arg);
|
|
16
|
+
return cache[arg];
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
var memoize_esm_default = memoize;
|
|
20
|
+
|
|
21
|
+
// ../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
|
|
22
|
+
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
|
|
23
|
+
var index = memoize_esm_default(
|
|
24
|
+
function(prop) {
|
|
25
|
+
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
|
|
26
|
+
}
|
|
27
|
+
/* Z+1 */
|
|
28
|
+
);
|
|
29
|
+
var is_prop_valid_esm_default = index;
|
|
30
|
+
|
|
31
|
+
// ../primitives-web/src/filterDOMProps.ts
|
|
32
|
+
var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
|
|
33
|
+
// RN-only event handlers (pass isPropValid's on* pattern)
|
|
34
|
+
"onPress",
|
|
35
|
+
"onChangeText",
|
|
36
|
+
"onLayout",
|
|
37
|
+
"onMoveShouldSetResponder",
|
|
38
|
+
"onResponderGrant",
|
|
39
|
+
"onResponderMove",
|
|
40
|
+
"onResponderRelease",
|
|
41
|
+
"onResponderTerminate",
|
|
42
|
+
// SVG attributes that pass isPropValid
|
|
43
|
+
"strokeWidth",
|
|
44
|
+
// CSS properties that pass isPropValid but are used as component props
|
|
45
|
+
"overflow",
|
|
46
|
+
"cursor",
|
|
47
|
+
"fontSize",
|
|
48
|
+
"fontWeight",
|
|
49
|
+
"fontFamily",
|
|
50
|
+
"textDecoration"
|
|
51
|
+
]);
|
|
52
|
+
function shouldForwardProp(key) {
|
|
53
|
+
if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
|
|
54
|
+
return is_prop_valid_esm_default(key);
|
|
55
|
+
}
|
|
56
|
+
function createFilteredElement(defaultTag) {
|
|
57
|
+
const Component = React.forwardRef(
|
|
58
|
+
({ children, elementType, ...props }, ref) => {
|
|
59
|
+
const Tag = elementType || defaultTag;
|
|
60
|
+
const htmlProps = {};
|
|
61
|
+
for (const key of Object.keys(props)) {
|
|
62
|
+
if (shouldForwardProp(key)) {
|
|
63
|
+
htmlProps[key] = props[key];
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return React.createElement(
|
|
67
|
+
Tag,
|
|
68
|
+
{ ref, ...htmlProps },
|
|
69
|
+
children
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
Component.displayName = `Filtered(${defaultTag})`;
|
|
74
|
+
return Component;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// ../primitives-web/src/Box.tsx
|
|
7
78
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
-
var
|
|
79
|
+
var FilteredDiv = createFilteredElement("div");
|
|
80
|
+
var StyledBox = styled(FilteredDiv)`
|
|
9
81
|
display: flex;
|
|
10
82
|
box-sizing: border-box;
|
|
11
83
|
background-color: ${(props) => props.backgroundColor || "transparent"};
|
|
@@ -92,7 +164,7 @@ var StyledBox = styled.div`
|
|
|
92
164
|
${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
|
|
93
165
|
}
|
|
94
166
|
`;
|
|
95
|
-
var Box =
|
|
167
|
+
var Box = React2.forwardRef(
|
|
96
168
|
({
|
|
97
169
|
children,
|
|
98
170
|
onPress,
|
|
@@ -117,6 +189,8 @@ var Box = React.forwardRef(
|
|
|
117
189
|
type,
|
|
118
190
|
disabled,
|
|
119
191
|
id,
|
|
192
|
+
testID,
|
|
193
|
+
"data-testid": dataTestId,
|
|
120
194
|
...props
|
|
121
195
|
}, ref) => {
|
|
122
196
|
if (as === "img" && src) {
|
|
@@ -144,7 +218,7 @@ var Box = React.forwardRef(
|
|
|
144
218
|
StyledBox,
|
|
145
219
|
{
|
|
146
220
|
ref,
|
|
147
|
-
as,
|
|
221
|
+
elementType: as,
|
|
148
222
|
id,
|
|
149
223
|
type: as === "button" ? type || "button" : void 0,
|
|
150
224
|
disabled: as === "button" ? disabled : void 0,
|
|
@@ -164,6 +238,7 @@ var Box = React.forwardRef(
|
|
|
164
238
|
"aria-controls": ariaControls,
|
|
165
239
|
"aria-live": ariaLive,
|
|
166
240
|
tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
|
|
241
|
+
"data-testid": dataTestId || testID,
|
|
167
242
|
...props,
|
|
168
243
|
children
|
|
169
244
|
}
|
|
@@ -175,7 +250,8 @@ Box.displayName = "Box";
|
|
|
175
250
|
// ../primitives-web/src/Text.tsx
|
|
176
251
|
import styled2 from "styled-components";
|
|
177
252
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
178
|
-
var
|
|
253
|
+
var FilteredSpan = createFilteredElement("span");
|
|
254
|
+
var StyledText = styled2(FilteredSpan)`
|
|
179
255
|
color: ${(props) => props.color || "inherit"};
|
|
180
256
|
font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
|
|
181
257
|
font-weight: ${(props) => props.fontWeight || "normal"};
|
|
@@ -216,7 +292,8 @@ var rotate = keyframes`
|
|
|
216
292
|
transform: rotate(360deg);
|
|
217
293
|
}
|
|
218
294
|
`;
|
|
219
|
-
var
|
|
295
|
+
var FilteredDiv2 = createFilteredElement("div");
|
|
296
|
+
var StyledSpinner = styled3(FilteredDiv2)`
|
|
220
297
|
width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
|
|
221
298
|
height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
|
|
222
299
|
border: ${(props) => props.strokeWidth || 2}px solid
|
|
@@ -252,7 +329,8 @@ Spinner.displayName = "Spinner";
|
|
|
252
329
|
// ../primitives-web/src/Divider.tsx
|
|
253
330
|
import styled4 from "styled-components";
|
|
254
331
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
255
|
-
var
|
|
332
|
+
var FilteredDiv3 = createFilteredElement("div");
|
|
333
|
+
var StyledDivider = styled4(FilteredDiv3)`
|
|
256
334
|
background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
|
|
257
335
|
width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
|
|
258
336
|
height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
|
|
@@ -1363,26 +1441,26 @@ var Stepper = forwardRef(
|
|
|
1363
1441
|
];
|
|
1364
1442
|
let firstColoredTailIndex = -1;
|
|
1365
1443
|
let lastColoredTailIndex = -1;
|
|
1366
|
-
steps.forEach((step,
|
|
1367
|
-
if (step.state && coloredTailStates.includes(step.state) &&
|
|
1444
|
+
steps.forEach((step, index2) => {
|
|
1445
|
+
if (step.state && coloredTailStates.includes(step.state) && index2 < steps.length - 1) {
|
|
1368
1446
|
if (firstColoredTailIndex === -1) {
|
|
1369
|
-
firstColoredTailIndex =
|
|
1447
|
+
firstColoredTailIndex = index2;
|
|
1370
1448
|
}
|
|
1371
|
-
lastColoredTailIndex =
|
|
1449
|
+
lastColoredTailIndex = index2;
|
|
1372
1450
|
}
|
|
1373
1451
|
});
|
|
1374
|
-
return steps.map((step,
|
|
1375
|
-
const isLast =
|
|
1376
|
-
const isFirstColoredTail =
|
|
1377
|
-
const isLastColoredTail =
|
|
1452
|
+
return steps.map((step, index2) => {
|
|
1453
|
+
const isLast = index2 === steps.length - 1;
|
|
1454
|
+
const isFirstColoredTail = index2 === firstColoredTailIndex;
|
|
1455
|
+
const isLastColoredTail = index2 === lastColoredTailIndex;
|
|
1378
1456
|
return /* @__PURE__ */ createElement(
|
|
1379
1457
|
Step,
|
|
1380
1458
|
{
|
|
1381
1459
|
size,
|
|
1382
1460
|
...step,
|
|
1383
|
-
key: step.key || `stepper-${
|
|
1461
|
+
key: step.key || `stepper-${index2}`,
|
|
1384
1462
|
onClick,
|
|
1385
|
-
stepNumber:
|
|
1463
|
+
stepNumber: index2,
|
|
1386
1464
|
tail: tail && variantUI === "simple" && !isLast,
|
|
1387
1465
|
direction,
|
|
1388
1466
|
variantUI,
|