@xsolla/xui-multi-select 0.132.0 → 0.133.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.132.0",
+  "version": "0.133.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.132.0",
-    "@xsolla/xui-core": "0.132.0",
-    "@xsolla/xui-dropdown": "0.132.0",
-    "@xsolla/xui-primitives-core": "0.132.0"
+    "@xsolla/xui-checkbox": "0.133.0",
+    "@xsolla/xui-core": "0.133.0",
+    "@xsolla/xui-dropdown": "0.133.0",
+    "@xsolla/xui-primitives-core": "0.133.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MultiSelect.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // ../primitives-web/src/Box.tsx
 var import_react = __toESM(require("react"));
@@ -267,7 +267,7 @@ var Icon = ({ children, ...props }) => {
 var import_xui_core4 = require("@xsolla/xui-core");
 
 // src/MultiSelectControl.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // ../icons-base/dist/web/index.mjs
@@ -715,11 +715,12 @@ var lineContent113 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.
 var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(BaseIcon, { ...props, solidContent: solidContent113, lineContent: lineContent113 });
 
 // src/useMultiSelectControl.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // ../tag/dist/web/index.mjs
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime393 = require("react/jsx-runtime");
 var import_styled_components7 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime394 = require("react/jsx-runtime");
@@ -728,6 +729,7 @@ var import_jsx_runtime395 = require("react/jsx-runtime");
 var import_xui_core = require("@xsolla/xui-core");
 
 // ../icons/dist/web/index.mjs
+var import_react4 = __toESM(require("react"), 1);
 var import_styled_components5 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime391 = require("react/jsx-runtime");
 
@@ -810,7 +812,109 @@ var X = createLucideIcon("X", [
 
 // ../icons/dist/web/index.mjs
 var import_jsx_runtime392 = require("react/jsx-runtime");
-var StyledIcon3 = import_styled_components5.default.div`
+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_react4.default.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (!NON_HTML_PROPS.has(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return import_react4.default.createElement(Tag2, { ref, ...htmlProps }, children);
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+var FilteredDiv = createFilteredElement("div");
+var StyledIcon3 = (0, import_styled_components5.default)(FilteredDiv)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -832,7 +936,109 @@ var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Icon3, { ...p
 
 // ../tag/dist/web/index.mjs
 var import_jsx_runtime396 = require("react/jsx-runtime");
-var StyledBox2 = import_styled_components6.default.div`
+var NON_HTML_PROPS2 = /* @__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 createFilteredElement2(defaultTag) {
+  const Component = import_react6.default.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (!NON_HTML_PROPS2.has(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return import_react6.default.createElement(Tag2, { ref, ...htmlProps }, children);
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+var FilteredDiv2 = createFilteredElement2("div");
+var StyledBox2 = (0, import_styled_components6.default)(FilteredDiv2)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -919,7 +1125,7 @@ var StyledBox2 = import_styled_components6.default.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box2 = import_react4.default.forwardRef(
+var Box2 = import_react5.default.forwardRef(
   ({
     children,
     onPress,
@@ -971,7 +1177,7 @@ var Box2 = import_react4.default.forwardRef(
       StyledBox2,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -998,7 +1204,8 @@ var Box2 = import_react4.default.forwardRef(
   }
 );
 Box2.displayName = "Box";
-var StyledText2 = import_styled_components7.default.span`
+var FilteredSpan = createFilteredElement2("span");
+var StyledText2 = (0, import_styled_components7.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"};
@@ -1027,7 +1234,8 @@ var Text2 = ({
     }
   );
 };
-var StyledIcon4 = import_styled_components8.default.div`
+var FilteredDiv22 = createFilteredElement2("div");
+var StyledIcon4 = (0, import_styled_components8.default)(FilteredDiv22)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1199,15 +1407,15 @@ var useMultiSelectControl = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  const displayStateRef = (0, import_react5.useRef)(0 /* Placeholder */);
-  const savedWidthsRef = (0, import_react5.useRef)(null);
-  const itemsRef = (0, import_react5.useRef)(null);
-  const [itemsWidth, setItemsWidth] = (0, import_react5.useState)(0);
-  const [selectedContent, setSelectedContent] = (0, import_react5.useState)(
+  const displayStateRef = (0, import_react7.useRef)(0 /* Placeholder */);
+  const savedWidthsRef = (0, import_react7.useRef)(null);
+  const itemsRef = (0, import_react7.useRef)(null);
+  const [itemsWidth, setItemsWidth] = (0, import_react7.useState)(0);
+  const [selectedContent, setSelectedContent] = (0, import_react7.useState)(
     null
   );
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -1217,7 +1425,7 @@ var useMultiSelectControl = ({
     resizeObserver.observe(containerRef.current);
     return () => resizeObserver.disconnect();
   }, [containerRef]);
-  const widthsDependencies = (0, import_react5.useMemo)(
+  const widthsDependencies = (0, import_react7.useMemo)(
     () => ({
       stateList: stateList.map((item) => item.value),
       variant,
@@ -1375,7 +1583,7 @@ var useMultiSelectControl = ({
     displayStateRef.current = 3 /* Render */;
     setItemsRender();
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isPlaceholder) {
       displayStateRef.current = 0 /* Placeholder */;
       setPlaceholder();
@@ -1409,7 +1617,7 @@ var useMultiSelectControl = ({
     widthsDependencies,
     stateList
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (displayStateRef.current !== 2 /* Calculation */) return;
     const rafId = requestAnimationFrame(() => {
       if (displayStateRef.current === 2 /* Calculation */) {
@@ -1428,7 +1636,7 @@ var useMultiSelectControl = ({
 
 // src/MultiSelectControl.tsx
 var import_jsx_runtime398 = require("react/jsx-runtime");
-var MultiSelectControl = (0, import_react6.forwardRef)(
+var MultiSelectControl = (0, import_react8.forwardRef)(
   ({
     variant = "tag",
     flexible = true,
@@ -1456,7 +1664,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
-    const containerRef = (0, import_react6.useRef)(null);
+    const containerRef = (0, import_react8.useRef)(null);
     const { itemsRef, selectedContent, isCalculating } = useMultiSelectControl({
       variant,
       flexible,
@@ -1579,7 +1787,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
 MultiSelectControl.displayName = "MultiSelectControl";
 
 // src/useMultiSelect.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var initialState = {
   values: [],
   selectedItems: [],
@@ -1590,12 +1798,12 @@ var useMultiSelect = ({
   value = [],
   onChange
 }) => {
-  const [state, setState] = (0, import_react7.useState)(initialState);
-  const optionsRef = (0, import_react7.useRef)(options);
-  (0, import_react7.useEffect)(() => {
+  const [state, setState] = (0, import_react9.useState)(initialState);
+  const optionsRef = (0, import_react9.useRef)(options);
+  (0, import_react9.useEffect)(() => {
     optionsRef.current = options;
   }, [options]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
       ...prevState,
@@ -1603,7 +1811,7 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
-  const onChoose = (0, import_react7.useCallback)(
+  const onChoose = (0, import_react9.useCallback)(
     (selectedIds) => {
       const newValues = optionsRef.current.filter((opt) => selectedIds.includes(String(opt.value))).map((opt) => opt.value);
       const newSelectedItems = optionsRef.current.filter(
@@ -1618,7 +1826,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemove = (0, import_react7.useCallback)(
+  const onRemove = (0, import_react9.useCallback)(
     (value2, event) => {
       event?.stopPropagation();
       setState((prev) => {
@@ -1636,7 +1844,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemoveAll = (0, import_react7.useCallback)(() => {
+  const onRemoveAll = (0, import_react9.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       values: [],
@@ -1644,13 +1852,13 @@ var useMultiSelect = ({
     }));
     onChange?.([]);
   }, [onChange]);
-  const onSelectClick = (0, import_react7.useCallback)(() => {
+  const onSelectClick = (0, import_react9.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: !prevState.isOpen
     }));
   }, []);
-  const onClose = (0, import_react7.useCallback)(() => {
+  const onClose = (0, import_react9.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: false
@@ -1671,7 +1879,7 @@ var useMultiSelect = ({
 
 // src/MultiSelect.tsx
 var import_jsx_runtime399 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react8.forwardRef)(
+var MultiSelect = (0, import_react10.forwardRef)(
   ({
     options,
     errorMessage,
@@ -1693,8 +1901,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
-    const controlRef = (0, import_react8.useRef)(null);
-    const menuRef = (0, import_react8.useRef)(null);
+    const controlRef = (0, import_react10.useRef)(null);
+    const menuRef = (0, import_react10.useRef)(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -1715,7 +1923,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
       value,
       onChange
     });
-    (0, import_react8.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (isDisable) {
         onClose();
       }