@xsolla/xui-button 0.136.0 → 0.137.0

package/web/index.mjs

@@ -1,11 +1,83 @@
 // src/Button.tsx
-import React2, { useState } from "react";
+import React3, { useState } from "react";
 
 // ../primitives-web/src/Box.tsx
-import React from "react";
+import React2 from "react";
 import styled from "styled-components";
+
+// ../primitives-web/src/filterDOMProps.ts
+import React from "react";
+
+// ../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+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)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../primitives-web/src/Box.tsx
 import { jsx } from "react/jsx-runtime";
-var StyledBox = styled.div`
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -92,7 +164,7 @@ var StyledBox = styled.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = React.forwardRef(
+var Box = React2.forwardRef(
   ({
     children,
     onPress,
@@ -117,6 +189,8 @@ var Box = React.forwardRef(
     type,
     disabled,
     id,
+    testID,
+    "data-testid": dataTestId,
     ...props
   }, ref) => {
     if (as === "img" && src) {
@@ -144,7 +218,7 @@ var Box = React.forwardRef(
       StyledBox,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -164,6 +238,7 @@ var Box = React.forwardRef(
         "aria-controls": ariaControls,
         "aria-live": ariaLive,
         tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
         ...props,
         children
       }
@@ -175,7 +250,8 @@ Box.displayName = "Box";
 // ../primitives-web/src/Text.tsx
 import styled2 from "styled-components";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var StyledText = styled2.span`
+var FilteredSpan = createFilteredElement("span");
+var StyledText = styled2(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"};
@@ -216,7 +292,8 @@ var rotate = keyframes`
     transform: rotate(360deg);
   }
 `;
-var StyledSpinner = styled3.div`
+var FilteredDiv2 = createFilteredElement("div");
+var StyledSpinner = styled3(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
@@ -252,7 +329,8 @@ Spinner.displayName = "Spinner";
 // ../primitives-web/src/Icon.tsx
 import styled4 from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var StyledIcon = styled4.div`
+var FilteredDiv3 = createFilteredElement("div");
+var StyledIcon = styled4(FilteredDiv3)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -275,10 +353,10 @@ var Icon = ({ children, ...props }) => {
 import { useResolvedTheme } from "@xsolla/xui-core";
 import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var cloneIconWithDefaults = (icon, defaultSize, defaultColor) => {
-  if (!React2.isValidElement(icon)) return icon;
+  if (!React3.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React2.cloneElement(iconElement, {
+  return React3.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -505,14 +583,14 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/IconButton.tsx
-import React3, { useState as useState2 } from "react";
+import React4, { useState as useState2 } from "react";
 import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var cloneIconWithDefaults2 = (icon, defaultSize, defaultColor) => {
-  if (!React3.isValidElement(icon)) return icon;
+  if (!React4.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React3.cloneElement(iconElement, {
+  return React4.cloneElement(iconElement, {
     ...existingProps,
     // Preserve existing props (including accessibility attributes)
     size: existingProps.size ?? defaultSize,
@@ -1016,14 +1094,14 @@ var FlexButton = ({
 FlexButton.displayName = "FlexButton";
 
 // src/AppButton.tsx
-import React5, { useState as useState4 } from "react";
+import React6, { useState as useState4 } from "react";
 import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var cloneIconWithDefaults3 = (icon, defaultSize, defaultColor) => {
-  if (!React5.isValidElement(icon)) return icon;
+  if (!React6.isValidElement(icon)) return icon;
   const iconElement = icon;
   const existingProps = iconElement.props || {};
-  return React5.cloneElement(iconElement, {
+  return React6.cloneElement(iconElement, {
     ...existingProps,
     size: existingProps.size ?? defaultSize,
     color: existingProps.color ?? defaultColor
@@ -1239,7 +1317,7 @@ var AppButton = ({
 AppButton.displayName = "AppButton";
 
 // src/ButtonGroup.tsx
-import React6 from "react";
+import React7 from "react";
 import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ButtonGroup = ({
@@ -1260,8 +1338,8 @@ var ButtonGroup = ({
   const { theme } = useResolvedTheme5({ themeMode, themeProductContext });
   const flattenChildren = (children2) => {
     const result = [];
-    React6.Children.forEach(children2, (child) => {
-      if (React6.isValidElement(child) && child.type === React6.Fragment) {
+    React7.Children.forEach(children2, (child) => {
+      if (React7.isValidElement(child) && child.type === React7.Fragment) {
         result.push(...flattenChildren(child.props.children));
       } else if (child !== null && child !== void 0) {
         result.push(child);
@@ -1296,12 +1374,12 @@ var ButtonGroup = ({
   ].filter(Boolean).join(" ") || void 0;
   const processChildren = (childrenToProcess) => {
     if (orientation === "vertical") {
-      return childrenToProcess.map((child, index) => {
-        if (React6.isValidElement(child)) {
-          return React6.cloneElement(child, {
+      return childrenToProcess.map((child, index2) => {
+        if (React7.isValidElement(child)) {
+          return React7.cloneElement(child, {
             ...child.props,
             fullWidth: true,
-            key: child.key ?? index
+            key: child.key ?? index2
           });
         }
         return child;