@xsolla/xui-stepper 0.132.0 → 0.133.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-stepper",
-  "version": "0.132.0",
+  "version": "0.133.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -14,9 +14,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.132.0",
-    "@xsolla/xui-icons": "0.132.0",
-    "@xsolla/xui-primitives-core": "0.132.0"
+    "@xsolla/xui-core": "0.133.0",
+    "@xsolla/xui-icons": "0.133.0",
+    "@xsolla/xui-primitives-core": "0.133.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -38,13 +38,120 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Stepper.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // ../primitives-web/src/Box.tsx
-var import_react = __toESM(require("react"));
+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_jsx_runtime = require("react/jsx-runtime");
-var StyledBox = import_styled_components.default.div`
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -131,7 +238,7 @@ var StyledBox = import_styled_components.default.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = import_react.default.forwardRef(
+var Box = import_react2.default.forwardRef(
   ({
     children,
     onPress,
@@ -183,7 +290,7 @@ var Box = import_react.default.forwardRef(
       StyledBox,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -214,7 +321,8 @@ 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 StyledText = import_styled_components2.default.span`
+var FilteredSpan = createFilteredElement("span");
+var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -255,7 +363,8 @@ var rotate = import_styled_components3.keyframes`
     transform: rotate(360deg);
   }
 `;
-var StyledSpinner = import_styled_components3.default.div`
+var FilteredDiv2 = createFilteredElement("div");
+var StyledSpinner = (0, import_styled_components3.default)(FilteredDiv2)`
   width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
   height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
   border: ${(props) => props.strokeWidth || 2}px solid
@@ -291,7 +400,8 @@ Spinner.displayName = "Spinner";
 // ../primitives-web/src/Divider.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var StyledDivider = import_styled_components4.default.div`
+var FilteredDiv3 = createFilteredElement("div");
+var StyledDivider = (0, import_styled_components4.default)(FilteredDiv3)`
   background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
   width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
   height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
@@ -317,7 +427,7 @@ var Divider = (props) => {
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // src/Step.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_xui_icons = require("@xsolla/xui-icons");
 
@@ -481,9 +591,9 @@ var StepTail = ({
 };
 
 // src/hooks/useStepHoverStyles.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var useStepHoverStyles = (variantUI, state, className, theme, isLast, disabled, noClick, palette) => {
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isWeb()) {
       return;
     }
@@ -610,7 +720,7 @@ var StepState = ({
   className
 }) => {
   const paletteColor = getPaletteColor(palette, theme, "active");
-  const iconStyles = (0, import_react3.useMemo)(() => {
+  const iconStyles = (0, import_react4.useMemo)(() => {
     if (variantUI === "simple") {
       switch (state) {
         case "current":
@@ -760,7 +870,7 @@ var Step = ({
 }) => {
   const { theme, mode } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.stepper(size);
-  const stepClassName = (0, import_react3.useMemo)(
+  const stepClassName = (0, import_react4.useMemo)(
     () => `step-${stepNumber}-${variantUI}-${direction}-${size}-${state}-${palette}`,
     [stepNumber, variantUI, direction, size, state, palette]
   );
@@ -774,7 +884,7 @@ var Step = ({
     noClick,
     palette
   );
-  const stepClick = (0, import_react3.useCallback)(() => {
+  const stepClick = (0, import_react4.useCallback)(() => {
     if (onClick && !disabled && !noClick) {
       onClick({
         number: stepNumber,
@@ -787,7 +897,7 @@ var Step = ({
       });
     }
   }, [onClick, disabled, noClick, stepNumber, title, description, state]);
-  const stepAriaLabel = (0, import_react3.useMemo)(() => {
+  const stepAriaLabel = (0, import_react4.useMemo)(() => {
     const stepNum = stepNumber + 1;
     const titleText = typeof title === "string" ? title : "Step";
     const descriptionText = description && typeof description === "string" ? description : "";
@@ -809,7 +919,7 @@ var Step = ({
     }
     return label;
   }, [stepNumber, title, description, state, isLast]);
-  const handleKeyDown = (0, import_react3.useCallback)(
+  const handleKeyDown = (0, import_react4.useCallback)(
     (event) => {
       if (event.key === "Enter" && !disabled && !noClick) {
         event.preventDefault();
@@ -821,7 +931,7 @@ var Step = ({
     },
     [stepClick, disabled, noClick]
   );
-  const handleKeyUp = (0, import_react3.useCallback)(
+  const handleKeyUp = (0, import_react4.useCallback)(
     (event) => {
       if (event.key === " " && !disabled && !noClick) {
         event.preventDefault();
@@ -832,7 +942,7 @@ var Step = ({
   );
   const isInteractive = !disabled && !noClick && !!onClick;
   const isCurrent = state === "current";
-  const titleStyles = (0, import_react3.useMemo)(() => {
+  const titleStyles = (0, import_react4.useMemo)(() => {
     if (variantUI === "simple") {
       const sizeStylesMap = {
         sm: {
@@ -890,7 +1000,7 @@ var Step = ({
       };
     }
   }, [variantUI, direction, size, state, theme, palette]);
-  const descriptionStyles = (0, import_react3.useMemo)(() => {
+  const descriptionStyles = (0, import_react4.useMemo)(() => {
     const sizeStylesMap = {
       sm: {
         fontSize: 12,
@@ -913,7 +1023,7 @@ var Step = ({
       fontWeight: "400"
     };
   }, [size, variantUI, state, theme]);
-  const contentWrapperStyles = (0, import_react3.useMemo)(() => {
+  const contentWrapperStyles = (0, import_react4.useMemo)(() => {
     if (variantUI === "simple") {
       if (direction === "horizontal") {
         return {
@@ -941,7 +1051,7 @@ var Step = ({
       return baseStyles;
     }
   }, [variantUI, direction, size]);
-  const stepWrapperStyles = (0, import_react3.useMemo)(() => {
+  const stepWrapperStyles = (0, import_react4.useMemo)(() => {
     if (variantUI === "current") {
       if (direction === "horizontal") {
         return {
@@ -1350,8 +1460,8 @@ var Step = ({
 
 // src/Stepper.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var import_react5 = require("react");
-var Stepper = (0, import_react4.forwardRef)(
+var import_react6 = require("react");
+var Stepper = (0, import_react5.forwardRef)(
   ({
     direction = "horizontal",
     variantUI = "current",
@@ -1414,7 +1524,7 @@ var Stepper = (0, import_react4.forwardRef)(
             const isLast = index === steps.length - 1;
             const isFirstColoredTail = index === firstColoredTailIndex;
             const isLastColoredTail = index === lastColoredTailIndex;
-            return /* @__PURE__ */ (0, import_react5.createElement)(
+            return /* @__PURE__ */ (0, import_react6.createElement)(
               Step,
               {
                 size,