@xsolla/xui-color-picker 0.136.0 → 0.137.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-color-picker",
-  "version": "0.136.0",
+  "version": "0.137.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,11 +13,11 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-button": "0.136.0",
-    "@xsolla/xui-core": "0.136.0",
-    "@xsolla/xui-input": "0.136.0",
-    "@xsolla/xui-primitives-core": "0.136.0",
-    "@xsolla/xui-select": "0.136.0"
+    "@xsolla/xui-button": "0.137.0",
+    "@xsolla/xui-core": "0.137.0",
+    "@xsolla/xui-input": "0.137.0",
+    "@xsolla/xui-primitives-core": "0.137.0",
+    "@xsolla/xui-select": "0.137.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/web/index.js

@@ -39,13 +39,85 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ColorPicker.tsx
-var import_react7 = require("react");
+var import_react8 = 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"));
+
+// ../../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 = import_react.default.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 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"};
@@ -132,7 +204,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,
@@ -157,6 +229,8 @@ var Box = import_react.default.forwardRef(
     type,
     disabled,
     id,
+    testID,
+    "data-testid": dataTestId,
     ...props
   }, ref) => {
     if (as === "img" && src) {
@@ -184,7 +258,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,
@@ -204,6 +278,7 @@ var Box = import_react.default.forwardRef(
         "aria-controls": ariaControls,
         "aria-live": ariaLive,
         tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
         ...props,
         children
       }
@@ -218,7 +293,7 @@ var import_xui_button2 = require("@xsolla/xui-button");
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // src/ColorPickerArea.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_xui_core = require("@xsolla/xui-core");
 
 // src/colorUtils.ts
@@ -411,7 +486,7 @@ function createColorFromHsb(h, s, b, a = 1) {
 }
 
 // src/utils.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -426,7 +501,7 @@ function snapValueToStep(value, min, max, step) {
   return snappedValue;
 }
 function useMergedRefs(...refs) {
-  return (0, import_react2.useCallback)((node) => {
+  return (0, import_react3.useCallback)((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
         ref(node);
@@ -437,9 +512,9 @@ function useMergedRefs(...refs) {
   }, refs);
 }
 function useUpdatableState(updater, deps, initialUpdate = false) {
-  const [state, setState] = (0, import_react2.useState)(() => updater(void 0));
-  const isFirstRender = (0, import_react2.useRef)(true);
-  (0, import_react2.useEffect)(() => {
+  const [state, setState] = (0, import_react3.useState)(() => updater(void 0));
+  const isFirstRender = (0, import_react3.useRef)(true);
+  (0, import_react3.useEffect)(() => {
     if (isFirstRender.current && !initialUpdate) {
       isFirstRender.current = false;
       return;
@@ -451,7 +526,7 @@ function useUpdatableState(updater, deps, initialUpdate = false) {
 
 // src/ColorPickerArea.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(props, ref) {
+var ColorPickerArea = (0, import_react4.forwardRef)(function CustomColorArea(props, ref) {
   const {
     xChannelStep = 0.1,
     yChannelStep = 0.1,
@@ -461,15 +536,15 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
     onChangeEnd,
     className
   } = props;
-  const internalRef = (0, import_react3.useRef)(null);
+  const internalRef = (0, import_react4.useRef)(null);
   const containerRef = useMergedRefs(ref, internalRef);
-  const [layout, setLayout] = (0, import_react3.useState)({ width: 0, height: 0 });
-  const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
-  const [currentColor, setCurrentColor] = (0, import_react3.useState)(() => {
+  const [layout, setLayout] = (0, import_react4.useState)({ width: 0, height: 0 });
+  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
+  const [currentColor, setCurrentColor] = (0, import_react4.useState)(() => {
     const initialValue = value || defaultValue || "#ffffff";
     return parseColor(initialValue);
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (value !== void 0) {
       setCurrentColor(parseColor(value));
     }
@@ -480,7 +555,7 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
   const brightness = hsb.b * 100;
   const thumbX = saturation / 100 * 100;
   const thumbY = 100 - brightness / 100 * 100;
-  const updateColor = (0, import_react3.useCallback)(
+  const updateColor = (0, import_react4.useCallback)(
     (x, y) => {
       const newSaturation = snapValueToStep(x * 100, 0, 100, xChannelStep);
       const newBrightness = snapValueToStep(
@@ -501,7 +576,7 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
     },
     [hue, hsb.a, xChannelStep, yChannelStep, onChange]
   );
-  const handleMouseDown = (0, import_react3.useCallback)(
+  const handleMouseDown = (0, import_react4.useCallback)(
     (e) => {
       if (import_xui_core.isNative) return;
       setIsDragging(true);
@@ -512,7 +587,7 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
     },
     [updateColor]
   );
-  const handleMouseMove = (0, import_react3.useCallback)(
+  const handleMouseMove = (0, import_react4.useCallback)(
     (e) => {
       if (!isDragging || import_xui_core.isNative) return;
       const rect = internalRef.current?.getBoundingClientRect?.();
@@ -523,13 +598,13 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
     },
     [isDragging, updateColor]
   );
-  const handleMouseUp = (0, import_react3.useCallback)(() => {
+  const handleMouseUp = (0, import_react4.useCallback)(() => {
     if (isDragging) {
       setIsDragging(false);
       onChangeEnd?.(currentColor.toString());
     }
   }, [isDragging, currentColor, onChangeEnd]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (import_xui_core.isWeb && isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -539,7 +614,7 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleResponderMove = (0, import_react3.useCallback)(
+  const handleResponderMove = (0, import_react4.useCallback)(
     (e) => {
       const { locationX, locationY } = e.nativeEvent;
       const x = clamp(locationX / layout.width, 0, 1);
@@ -548,7 +623,7 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
     },
     [layout, updateColor]
   );
-  const handleResponderRelease = (0, import_react3.useCallback)(() => {
+  const handleResponderRelease = (0, import_react4.useCallback)(() => {
     setIsDragging(false);
     onChangeEnd?.(currentColor.toString());
   }, [currentColor, onChangeEnd]);
@@ -613,7 +688,7 @@ var ColorPickerArea = (0, import_react3.forwardRef)(function CustomColorArea(pro
 });
 
 // src/ColorPickerSlider.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ColorPickerSlider = ({
@@ -625,9 +700,9 @@ var ColorPickerSlider = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  const trackRef = (0, import_react4.useRef)(null);
-  const [layout, setLayout] = (0, import_react4.useState)({ width: 0, height: 0 });
-  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
+  const trackRef = (0, import_react5.useRef)(null);
+  const [layout, setLayout] = (0, import_react5.useState)({ width: 0, height: 0 });
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
   const currentColor = parseColor(value);
   const hsb = currentColor.toHsb();
   const getChannelValue = () => {
@@ -638,7 +713,7 @@ var ColorPickerSlider = ({
   const channelValue = getChannelValue();
   const maxValue = getMaxValue();
   const thumbPosition = channelValue / maxValue * 100;
-  const updateColor = (0, import_react4.useCallback)(
+  const updateColor = (0, import_react5.useCallback)(
     (x) => {
       const newValue = snapValueToStep(x * maxValue, 0, maxValue, 1);
       let newColor;
@@ -662,7 +737,7 @@ var ColorPickerSlider = ({
     },
     [channel, maxValue, hsb, onChange]
   );
-  const handleMouseDown = (0, import_react4.useCallback)(
+  const handleMouseDown = (0, import_react5.useCallback)(
     (e) => {
       if (import_xui_core2.isNative) return;
       setIsDragging(true);
@@ -672,7 +747,7 @@ var ColorPickerSlider = ({
     },
     [updateColor]
   );
-  const handleMouseMove = (0, import_react4.useCallback)(
+  const handleMouseMove = (0, import_react5.useCallback)(
     (e) => {
       if (!isDragging || import_xui_core2.isNative) return;
       const rect = trackRef.current?.getBoundingClientRect?.();
@@ -682,13 +757,13 @@ var ColorPickerSlider = ({
     },
     [isDragging, updateColor]
   );
-  const handleMouseUp = (0, import_react4.useCallback)(() => {
+  const handleMouseUp = (0, import_react5.useCallback)(() => {
     if (isDragging) {
       setIsDragging(false);
       onChangeEnd?.(currentColor.toString());
     }
   }, [isDragging, currentColor, onChangeEnd]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (import_xui_core2.isWeb && isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -698,7 +773,7 @@ var ColorPickerSlider = ({
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleResponderMove = (0, import_react4.useCallback)(
+  const handleResponderMove = (0, import_react5.useCallback)(
     (e) => {
       const { locationX } = e.nativeEvent;
       const x = clamp(locationX / layout.width, 0, 1);
@@ -706,7 +781,7 @@ var ColorPickerSlider = ({
     },
     [layout, updateColor]
   );
-  const handleResponderRelease = (0, import_react4.useCallback)(() => {
+  const handleResponderRelease = (0, import_react5.useCallback)(() => {
     setIsDragging(false);
     onChangeEnd?.(currentColor.toString());
   }, [currentColor, onChangeEnd]);
@@ -762,7 +837,7 @@ var ColorPickerSlider = ({
 };
 
 // src/ColorPickerInput.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_xui_input = require("@xsolla/xui-input");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ColorPickerInput = ({
@@ -775,8 +850,8 @@ var ColorPickerInput = ({
   const channelRange = value.getChannelRange(channel);
   const intValue = channel === "alpha" ? channelValue * 100 : channelValue;
   const roundedValue = Math.round(intValue);
-  const [inputValue, setInputValue] = (0, import_react5.useState)(String(roundedValue));
-  (0, import_react5.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react6.useState)(String(roundedValue));
+  (0, import_react6.useEffect)(() => {
     setInputValue(String(roundedValue));
   }, [roundedValue]);
   const handleChange = (e) => {
@@ -807,15 +882,15 @@ var ColorPickerInput = ({
 };
 
 // src/ColorPickerHexInput.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_xui_input2 = require("@xsolla/xui-input");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ColorPickerHexInput = ({
   value,
   onChange
 }) => {
-  const [inputValue, setInputValue] = (0, import_react6.useState)(value);
-  (0, import_react6.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react7.useState)(value);
+  (0, import_react7.useEffect)(() => {
     setInputValue(value);
   }, [value]);
   const handleChange = (e) => {
@@ -948,7 +1023,7 @@ var ResetIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     ]
   }
 );
-var ColorPicker = (0, import_react7.forwardRef)(
+var ColorPicker = (0, import_react8.forwardRef)(
   ({
     colorFormat: defaultColorFormat = "hex",
     alpha = true,
@@ -963,7 +1038,7 @@ var ColorPicker = (0, import_react7.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
-    const prevColorRef = (0, import_react7.useRef)(propValue);
+    const prevColorRef = (0, import_react8.useRef)(propValue);
     const [innerValue, setInnerValue] = useUpdatableState(
       (prevState) => {
         if (prevColorRef.current === propValue && prevState) return prevState;
@@ -973,8 +1048,8 @@ var ColorPicker = (0, import_react7.forwardRef)(
       [propValue],
       true
     );
-    const [initialValue] = (0, import_react7.useState)(() => innerValue);
-    const [isValueCopied, setValueCopied] = (0, import_react7.useState)(false);
+    const [initialValue] = (0, import_react8.useState)(() => innerValue);
+    const [isValueCopied, setValueCopied] = (0, import_react8.useState)(false);
     const [colorFormat, setColorFormat] = useUpdatableState(
       () => addAlfaToChannel(defaultColorFormat, alpha),
       [defaultColorFormat, alpha],