@xsolla/xui-multi-select 0.133.0 → 0.135.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.133.0",
+  "version": "0.135.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.133.0",
-    "@xsolla/xui-core": "0.133.0",
-    "@xsolla/xui-dropdown": "0.133.0",
-    "@xsolla/xui-primitives-core": "0.133.0"
+    "@xsolla/xui-checkbox": "0.135.0",
+    "@xsolla/xui-core": "0.135.0",
+    "@xsolla/xui-dropdown": "0.135.0",
+    "@xsolla/xui-primitives-core": "0.135.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_react10 = require("react");
+var import_react8 = 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_react8 = require("react");
+var import_react6 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // ../icons-base/dist/web/index.mjs
@@ -715,12 +715,11 @@ 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_react7 = require("react");
+var import_react5 = require("react");
 
 // ../tag/dist/web/index.mjs
-var import_react5 = __toESM(require("react"), 1);
+var import_react4 = __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");
@@ -729,7 +728,6 @@ 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");
 
@@ -812,109 +810,7 @@ var X = createLucideIcon("X", [
 
 // ../icons/dist/web/index.mjs
 var import_jsx_runtime392 = require("react/jsx-runtime");
-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)`
+var StyledIcon3 = import_styled_components5.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -936,109 +832,7 @@ 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 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)`
+var StyledBox2 = import_styled_components6.default.div`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -1125,7 +919,7 @@ var StyledBox2 = (0, import_styled_components6.default)(FilteredDiv2)`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box2 = import_react5.default.forwardRef(
+var Box2 = import_react4.default.forwardRef(
   ({
     children,
     onPress,
@@ -1177,7 +971,7 @@ var Box2 = import_react5.default.forwardRef(
       StyledBox2,
       {
         ref,
-        elementType: as,
+        as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -1204,8 +998,7 @@ var Box2 = import_react5.default.forwardRef(
   }
 );
 Box2.displayName = "Box";
-var FilteredSpan = createFilteredElement2("span");
-var StyledText2 = (0, import_styled_components7.default)(FilteredSpan)`
+var StyledText2 = import_styled_components7.default.span`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -1234,8 +1027,7 @@ var Text2 = ({
     }
   );
 };
-var FilteredDiv22 = createFilteredElement2("div");
-var StyledIcon4 = (0, import_styled_components8.default)(FilteredDiv22)`
+var StyledIcon4 = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1253,14 +1045,10 @@ var StyledIcon4 = (0, import_styled_components8.default)(FilteredDiv22)`
 var Icon4 = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(StyledIcon4, { ...props, children });
 };
-var SELECTABLE_BORDER_RADIUS = 8;
 var Tag = ({
   size = "md",
   tone = "primary",
   type = "solid",
-  variant = "default",
-  selected = false,
-  onPress,
   children,
   iconLeft,
   iconRight,
@@ -1271,20 +1059,6 @@ var Tag = ({
   const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.tag(size);
   const resolveColors = () => {
-    if (variant === "selectable") {
-      if (selected) {
-        return {
-          bg: theme.colors.control.brand.secondary.bg,
-          text: theme.colors.content.brand.primary,
-          border: theme.colors.border.secondary
-        };
-      }
-      return {
-        bg: theme.colors.overlay.mono,
-        text: theme.colors.content.primary,
-        border: theme.colors.border.secondary
-      };
-    }
     const isOutlined = type === "outlined";
     switch (tone) {
       case "primary":
@@ -1338,16 +1112,12 @@ var Tag = ({
     }
   };
   const { bg, text, border } = resolveColors();
-  const isSelectable = variant === "selectable";
-  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
   const isIconOnly = !children && (!!iconLeft || !!iconRight);
   return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
     Box2,
     {
-      as: isSelectable ? "button" : void 0,
-      onPress: isSelectable ? onPress : void 0,
       backgroundColor: bg,
-      borderRadius,
+      borderRadius: sizeStyles.radius,
       height: sizeStyles.height,
       width: isIconOnly ? sizeStyles.height : void 0,
       paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
@@ -1358,8 +1128,6 @@ var Tag = ({
       borderWidth: sizeStyles.borderWidth,
       borderColor: border,
       borderStyle: "solid",
-      cursor: isSelectable ? "pointer" : "default",
-      hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",
@@ -1407,15 +1175,15 @@ var useMultiSelectControl = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  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)(
+  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)(
     null
   );
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -1425,7 +1193,7 @@ var useMultiSelectControl = ({
     resizeObserver.observe(containerRef.current);
     return () => resizeObserver.disconnect();
   }, [containerRef]);
-  const widthsDependencies = (0, import_react7.useMemo)(
+  const widthsDependencies = (0, import_react5.useMemo)(
     () => ({
       stateList: stateList.map((item) => item.value),
       variant,
@@ -1583,7 +1351,7 @@ var useMultiSelectControl = ({
     displayStateRef.current = 3 /* Render */;
     setItemsRender();
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isPlaceholder) {
       displayStateRef.current = 0 /* Placeholder */;
       setPlaceholder();
@@ -1617,7 +1385,7 @@ var useMultiSelectControl = ({
     widthsDependencies,
     stateList
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (displayStateRef.current !== 2 /* Calculation */) return;
     const rafId = requestAnimationFrame(() => {
       if (displayStateRef.current === 2 /* Calculation */) {
@@ -1636,7 +1404,7 @@ var useMultiSelectControl = ({
 
 // src/MultiSelectControl.tsx
 var import_jsx_runtime398 = require("react/jsx-runtime");
-var MultiSelectControl = (0, import_react8.forwardRef)(
+var MultiSelectControl = (0, import_react6.forwardRef)(
   ({
     variant = "tag",
     flexible = true,
@@ -1664,7 +1432,7 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
-    const containerRef = (0, import_react8.useRef)(null);
+    const containerRef = (0, import_react6.useRef)(null);
     const { itemsRef, selectedContent, isCalculating } = useMultiSelectControl({
       variant,
       flexible,
@@ -1787,7 +1555,7 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
 MultiSelectControl.displayName = "MultiSelectControl";
 
 // src/useMultiSelect.ts
-var import_react9 = require("react");
+var import_react7 = require("react");
 var initialState = {
   values: [],
   selectedItems: [],
@@ -1798,12 +1566,12 @@ var useMultiSelect = ({
   value = [],
   onChange
 }) => {
-  const [state, setState] = (0, import_react9.useState)(initialState);
-  const optionsRef = (0, import_react9.useRef)(options);
-  (0, import_react9.useEffect)(() => {
+  const [state, setState] = (0, import_react7.useState)(initialState);
+  const optionsRef = (0, import_react7.useRef)(options);
+  (0, import_react7.useEffect)(() => {
     optionsRef.current = options;
   }, [options]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
       ...prevState,
@@ -1811,7 +1579,7 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
-  const onChoose = (0, import_react9.useCallback)(
+  const onChoose = (0, import_react7.useCallback)(
     (selectedIds) => {
       const newValues = optionsRef.current.filter((opt) => selectedIds.includes(String(opt.value))).map((opt) => opt.value);
       const newSelectedItems = optionsRef.current.filter(
@@ -1826,7 +1594,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemove = (0, import_react9.useCallback)(
+  const onRemove = (0, import_react7.useCallback)(
     (value2, event) => {
       event?.stopPropagation();
       setState((prev) => {
@@ -1844,7 +1612,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemoveAll = (0, import_react9.useCallback)(() => {
+  const onRemoveAll = (0, import_react7.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       values: [],
@@ -1852,13 +1620,13 @@ var useMultiSelect = ({
     }));
     onChange?.([]);
   }, [onChange]);
-  const onSelectClick = (0, import_react9.useCallback)(() => {
+  const onSelectClick = (0, import_react7.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: !prevState.isOpen
     }));
   }, []);
-  const onClose = (0, import_react9.useCallback)(() => {
+  const onClose = (0, import_react7.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: false
@@ -1879,7 +1647,7 @@ var useMultiSelect = ({
 
 // src/MultiSelect.tsx
 var import_jsx_runtime399 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react10.forwardRef)(
+var MultiSelect = (0, import_react8.forwardRef)(
   ({
     options,
     errorMessage,
@@ -1901,8 +1669,8 @@ var MultiSelect = (0, import_react10.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
-    const controlRef = (0, import_react10.useRef)(null);
-    const menuRef = (0, import_react10.useRef)(null);
+    const controlRef = (0, import_react8.useRef)(null);
+    const menuRef = (0, import_react8.useRef)(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -1923,7 +1691,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
       value,
       onChange
     });
-    (0, import_react10.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       if (isDisable) {
         onClose();
       }