@xsolla/xui-multi-select 0.90.0 → 0.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/native/index.js +58 -57
- package/native/index.js.map +1 -1
- package/native/index.mjs +42 -41
- package/native/index.mjs.map +1 -1
- package/package.json +5 -5
- package/web/index.js +58 -57
- package/web/index.js.map +1 -1
- package/web/index.mjs +42 -41
- package/web/index.mjs.map +1 -1
package/native/index.mjs
CHANGED
|
@@ -620,6 +620,7 @@ import { jsx as jsx378 } from "react/jsx-runtime";
|
|
|
620
620
|
import { jsx as jsx379 } from "react/jsx-runtime";
|
|
621
621
|
import { jsx as jsx380 } from "react/jsx-runtime";
|
|
622
622
|
import { jsx as jsx381 } from "react/jsx-runtime";
|
|
623
|
+
import { jsx as jsx382 } from "react/jsx-runtime";
|
|
623
624
|
var StyledIcon = styled.div`
|
|
624
625
|
display: inline-flex;
|
|
625
626
|
align-items: center;
|
|
@@ -637,15 +638,15 @@ var BaseIcon = ({
|
|
|
637
638
|
variant = "line",
|
|
638
639
|
size = 24,
|
|
639
640
|
color = "currentColor",
|
|
640
|
-
solidContent:
|
|
641
|
-
lineContent:
|
|
641
|
+
solidContent: solidContent382,
|
|
642
|
+
lineContent: lineContent382,
|
|
642
643
|
className,
|
|
643
644
|
style,
|
|
644
645
|
"data-testid": testId,
|
|
645
646
|
"aria-label": ariaLabel,
|
|
646
647
|
"aria-hidden": ariaHidden
|
|
647
648
|
}) => {
|
|
648
|
-
const svgContent = variant === "line" ?
|
|
649
|
+
const svgContent = variant === "line" ? lineContent382 : solidContent382;
|
|
649
650
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
650
651
|
return /* @__PURE__ */ jsx4(
|
|
651
652
|
StyledIcon,
|
|
@@ -662,18 +663,18 @@ var BaseIcon = ({
|
|
|
662
663
|
}
|
|
663
664
|
);
|
|
664
665
|
};
|
|
665
|
-
var
|
|
666
|
-
var
|
|
667
|
-
var ChevronDown = (props) => /* @__PURE__ */
|
|
668
|
-
var
|
|
669
|
-
var
|
|
670
|
-
var ChevronUp = (props) => /* @__PURE__ */
|
|
671
|
-
var
|
|
672
|
-
var
|
|
673
|
-
var ExclamationMarkCr = (props) => /* @__PURE__ */
|
|
674
|
-
var
|
|
675
|
-
var
|
|
676
|
-
var Remove = (props) => /* @__PURE__ */
|
|
666
|
+
var solidContent70 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-down--solid"><path id="Union" d="M7.19471 10.195C6.75374 9.754 7.06605 9 7.68969 9L16.3098 9C16.9334 9 17.2457 9.754 16.8048 10.195L12.7068 14.2929C12.3163 14.6834 11.6832 14.6834 11.2926 14.2929L7.19471 10.195Z" style="fill: currentColor"/></g></svg>`;
|
|
667
|
+
var lineContent70 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-down--line"><path id="Union" d="M12.7178 15.7808C12.3273 16.1713 11.6942 16.1713 11.3036 15.7808L4.30371 8.78084L5.71777 7.36678L12.0107 13.6597L18.3037 7.36678L19.7178 8.78084L12.7178 15.7808Z" style="fill: currentColor"/></g></svg>`;
|
|
668
|
+
var ChevronDown = (props) => /* @__PURE__ */ jsx71(BaseIcon, { ...props, solidContent: solidContent70, lineContent: lineContent70 });
|
|
669
|
+
var solidContent79 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-up--solid"><path id="Union" d="M16.8048 12.8049C17.2457 13.2458 16.9334 13.9998 16.3098 13.9998H7.68968C7.06605 13.9998 6.75373 13.2458 7.19471 12.8049L11.2926 8.70696C11.6832 8.31643 12.3163 8.31643 12.7068 8.70696L16.8048 12.8049Z" style="fill: currentColor"/></g></svg>`;
|
|
670
|
+
var lineContent79 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-up--line"><path id="Union" d="M11.2929 7.93945C11.6834 7.54893 12.3166 7.54893 12.7071 7.93945L19.707 14.9394L18.293 16.3534L12 10.0605L5.70703 16.3534L4.29297 14.9394L11.2929 7.93945Z" style="fill: currentColor"/></g></svg>`;
|
|
671
|
+
var ChevronUp = (props) => /* @__PURE__ */ jsx80(BaseIcon, { ...props, solidContent: solidContent79, lineContent: lineContent79 });
|
|
672
|
+
var solidContent88 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_exclamation-mark-cr--solid"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16ZM11 6V14H13V6H11Z" style="fill: currentColor"/></g></svg>`;
|
|
673
|
+
var lineContent88 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_exclamation-mark-cr--line"><g id="Union"><path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" style="fill: currentColor"/><path d="M13 14H11V6H13V14Z" style="fill: currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" style="fill: currentColor"/></g></g></svg>`;
|
|
674
|
+
var ExclamationMarkCr = (props) => /* @__PURE__ */ jsx89(BaseIcon, { ...props, solidContent: solidContent88, lineContent: lineContent88 });
|
|
675
|
+
var solidContent112 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_remove--solid"><path id="Union" d="M19.7789 7.05003C20.1695 7.44056 20.1695 8.07372 19.7789 8.46424L16.2434 11.9998L19.7789 15.5353C20.1695 15.9258 20.1695 16.559 19.7789 16.9495L16.9505 19.778C16.56 20.1685 15.9268 20.1685 15.5363 19.778L12.0008 16.2424L8.46522 19.778C8.0747 20.1685 7.44153 20.1685 7.05101 19.778L4.22258 16.9495C3.83206 16.559 3.83206 15.9258 4.22258 15.5353L7.75811 11.9998L4.22258 8.46424C3.83206 8.07372 3.83206 7.44056 4.22258 7.05003L7.05101 4.2216C7.44153 3.83108 8.0747 3.83108 8.46522 4.2216L12.0008 7.75714L15.5363 4.2216C15.9268 3.83108 16.56 3.83108 16.9505 4.2216L19.7789 7.05003Z" style="fill: currentColor"/></g></svg>`;
|
|
676
|
+
var lineContent112 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_remove--line"><path id="Union" d="M20.0303 5.41455L13.4199 12.0249L20.0195 18.6245L18.6055 20.0386L12.0059 13.439L5.41406 20.0308L4 18.6167L10.5918 12.0249L4.00879 5.44189L5.42285 4.02783L12.0059 10.6108L18.6162 4.00049L20.0303 5.41455Z" style="fill: currentColor"/></g></svg>`;
|
|
677
|
+
var Remove = (props) => /* @__PURE__ */ jsx113(BaseIcon, { ...props, solidContent: solidContent112, lineContent: lineContent112 });
|
|
677
678
|
|
|
678
679
|
// src/useMultiSelectControl.tsx
|
|
679
680
|
import {
|
|
@@ -686,16 +687,16 @@ import {
|
|
|
686
687
|
// ../tag/dist/web/index.mjs
|
|
687
688
|
import React2 from "react";
|
|
688
689
|
import styled3 from "styled-components";
|
|
689
|
-
import { jsx as
|
|
690
|
+
import { jsx as jsx384 } from "react/jsx-runtime";
|
|
690
691
|
import styled22 from "styled-components";
|
|
691
692
|
import { jsx as jsx2101 } from "react/jsx-runtime";
|
|
692
693
|
import styled32 from "styled-components";
|
|
693
|
-
import { jsx as
|
|
694
|
+
import { jsx as jsx385 } from "react/jsx-runtime";
|
|
694
695
|
import { useDesignSystem } from "@xsolla/xui-core";
|
|
695
696
|
|
|
696
697
|
// ../icons/dist/web/index.mjs
|
|
697
698
|
import styled2 from "styled-components";
|
|
698
|
-
import { jsx as
|
|
699
|
+
import { jsx as jsx383 } from "react/jsx-runtime";
|
|
699
700
|
|
|
700
701
|
// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
701
702
|
import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
|
|
@@ -792,7 +793,7 @@ var StyledIcon2 = styled2.div`
|
|
|
792
793
|
}
|
|
793
794
|
`;
|
|
794
795
|
var Icon3 = ({ children, ...props }) => {
|
|
795
|
-
return /* @__PURE__ */
|
|
796
|
+
return /* @__PURE__ */ jsx383(StyledIcon2, { ...props, children });
|
|
796
797
|
};
|
|
797
798
|
var X2 = (props) => /* @__PURE__ */ jsx2100(Icon3, { ...props, children: /* @__PURE__ */ jsx2100(X, { size: "100%" }) });
|
|
798
799
|
|
|
@@ -911,7 +912,7 @@ var Box2 = React2.forwardRef(
|
|
|
911
912
|
...props
|
|
912
913
|
}, ref) => {
|
|
913
914
|
if (as === "img" && src) {
|
|
914
|
-
return /* @__PURE__ */
|
|
915
|
+
return /* @__PURE__ */ jsx384(
|
|
915
916
|
"img",
|
|
916
917
|
{
|
|
917
918
|
src,
|
|
@@ -931,7 +932,7 @@ var Box2 = React2.forwardRef(
|
|
|
931
932
|
}
|
|
932
933
|
);
|
|
933
934
|
}
|
|
934
|
-
return /* @__PURE__ */
|
|
935
|
+
return /* @__PURE__ */ jsx384(
|
|
935
936
|
StyledBox,
|
|
936
937
|
{
|
|
937
938
|
ref,
|
|
@@ -1006,7 +1007,7 @@ var StyledIcon3 = styled32.div`
|
|
|
1006
1007
|
}
|
|
1007
1008
|
`;
|
|
1008
1009
|
var Icon4 = ({ children, ...props }) => {
|
|
1009
|
-
return /* @__PURE__ */
|
|
1010
|
+
return /* @__PURE__ */ jsx385(StyledIcon3, { ...props, children });
|
|
1010
1011
|
};
|
|
1011
1012
|
var Tag = ({
|
|
1012
1013
|
size = "md",
|
|
@@ -1107,7 +1108,7 @@ var Tag = ({
|
|
|
1107
1108
|
|
|
1108
1109
|
// src/useMultiSelectControl.tsx
|
|
1109
1110
|
import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
|
|
1110
|
-
import { jsx as
|
|
1111
|
+
import { jsx as jsx386, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
1111
1112
|
var COUNT_ITEM_VALUE = "count-item";
|
|
1112
1113
|
var useMultiSelectControl = ({
|
|
1113
1114
|
variant,
|
|
@@ -1167,7 +1168,7 @@ var useMultiSelectControl = ({
|
|
|
1167
1168
|
};
|
|
1168
1169
|
const setPlaceholder = () => {
|
|
1169
1170
|
setSelectedContent(
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
+
/* @__PURE__ */ jsx386(
|
|
1171
1172
|
Text,
|
|
1172
1173
|
{
|
|
1173
1174
|
color: theme.colors.control.input.placeholder,
|
|
@@ -1218,7 +1219,7 @@ var useMultiSelectControl = ({
|
|
|
1218
1219
|
const isCount = item.value === COUNT_ITEM_VALUE;
|
|
1219
1220
|
const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
|
|
1220
1221
|
if (variant === "tag") {
|
|
1221
|
-
return /* @__PURE__ */
|
|
1222
|
+
return /* @__PURE__ */ jsx386(
|
|
1222
1223
|
Box,
|
|
1223
1224
|
{
|
|
1224
1225
|
onPress: !isCount ? (e) => {
|
|
@@ -1230,7 +1231,7 @@ var useMultiSelectControl = ({
|
|
|
1230
1231
|
opacity: disabled ? 0.5 : 1,
|
|
1231
1232
|
cursor: disabled || isCount ? "not-allowed" : "pointer"
|
|
1232
1233
|
},
|
|
1233
|
-
children: /* @__PURE__ */
|
|
1234
|
+
children: /* @__PURE__ */ jsx386(
|
|
1234
1235
|
Tag,
|
|
1235
1236
|
{
|
|
1236
1237
|
size,
|
|
@@ -1350,7 +1351,7 @@ var useMultiSelectControl = ({
|
|
|
1350
1351
|
};
|
|
1351
1352
|
|
|
1352
1353
|
// src/MultiSelectControl.tsx
|
|
1353
|
-
import { jsx as
|
|
1354
|
+
import { jsx as jsx387, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1354
1355
|
var MultiSelectControl = forwardRef3(
|
|
1355
1356
|
({
|
|
1356
1357
|
variant = "tag",
|
|
@@ -1451,8 +1452,8 @@ var MultiSelectControl = forwardRef3(
|
|
|
1451
1452
|
gap: 8,
|
|
1452
1453
|
style: { minWidth: 0 },
|
|
1453
1454
|
children: [
|
|
1454
|
-
iconLeft && /* @__PURE__ */
|
|
1455
|
-
/* @__PURE__ */
|
|
1455
|
+
iconLeft && /* @__PURE__ */ jsx387(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
|
|
1456
|
+
/* @__PURE__ */ jsx387(
|
|
1456
1457
|
Box,
|
|
1457
1458
|
{
|
|
1458
1459
|
ref: itemsRef,
|
|
@@ -1472,7 +1473,7 @@ var MultiSelectControl = forwardRef3(
|
|
|
1472
1473
|
}
|
|
1473
1474
|
),
|
|
1474
1475
|
/* @__PURE__ */ jsxs3(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
|
|
1475
|
-
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */
|
|
1476
|
+
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ jsx387(
|
|
1476
1477
|
Box,
|
|
1477
1478
|
{
|
|
1478
1479
|
onPress: (e) => {
|
|
@@ -1480,17 +1481,17 @@ var MultiSelectControl = forwardRef3(
|
|
|
1480
1481
|
removeAllValues();
|
|
1481
1482
|
},
|
|
1482
1483
|
style: { cursor: "pointer" },
|
|
1483
|
-
children: /* @__PURE__ */
|
|
1484
|
+
children: /* @__PURE__ */ jsx387(Remove, { size: 18, color: iconColor, variant: "line" })
|
|
1484
1485
|
}
|
|
1485
1486
|
),
|
|
1486
|
-
isError && /* @__PURE__ */
|
|
1487
|
+
isError && /* @__PURE__ */ jsx387(
|
|
1487
1488
|
ExclamationMarkCr,
|
|
1488
1489
|
{
|
|
1489
1490
|
size: 18,
|
|
1490
1491
|
color: theme.colors.content.alert.primary
|
|
1491
1492
|
}
|
|
1492
1493
|
),
|
|
1493
|
-
iconRight ? iconRight : isOpen ? /* @__PURE__ */
|
|
1494
|
+
iconRight ? iconRight : isOpen ? /* @__PURE__ */ jsx387(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ jsx387(ChevronDown, { size: 18, color: iconColor })
|
|
1494
1495
|
] })
|
|
1495
1496
|
]
|
|
1496
1497
|
}
|
|
@@ -1591,7 +1592,7 @@ var useMultiSelect = ({
|
|
|
1591
1592
|
};
|
|
1592
1593
|
|
|
1593
1594
|
// src/MultiSelect.tsx
|
|
1594
|
-
import { Fragment, jsx as
|
|
1595
|
+
import { Fragment, jsx as jsx388, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1595
1596
|
var MultiSelect = forwardRef4(
|
|
1596
1597
|
({
|
|
1597
1598
|
options,
|
|
@@ -1656,7 +1657,7 @@ var MultiSelect = forwardRef4(
|
|
|
1656
1657
|
onChoose(newValues.map(String));
|
|
1657
1658
|
};
|
|
1658
1659
|
return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
|
|
1659
|
-
label && /* @__PURE__ */
|
|
1660
|
+
label && /* @__PURE__ */ jsx388(
|
|
1660
1661
|
Text,
|
|
1661
1662
|
{
|
|
1662
1663
|
color: theme.colors.content.secondary,
|
|
@@ -1673,7 +1674,7 @@ var MultiSelect = forwardRef4(
|
|
|
1673
1674
|
position: "relative"
|
|
1674
1675
|
},
|
|
1675
1676
|
children: [
|
|
1676
|
-
/* @__PURE__ */
|
|
1677
|
+
/* @__PURE__ */ jsx388(
|
|
1677
1678
|
MultiSelectControl,
|
|
1678
1679
|
{
|
|
1679
1680
|
ref: controlRef,
|
|
@@ -1698,7 +1699,7 @@ var MultiSelect = forwardRef4(
|
|
|
1698
1699
|
}
|
|
1699
1700
|
),
|
|
1700
1701
|
isOpen && !isDisable && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
1701
|
-
/* @__PURE__ */
|
|
1702
|
+
/* @__PURE__ */ jsx388(
|
|
1702
1703
|
Box,
|
|
1703
1704
|
{
|
|
1704
1705
|
style: {
|
|
@@ -1713,7 +1714,7 @@ var MultiSelect = forwardRef4(
|
|
|
1713
1714
|
onPress: onClose
|
|
1714
1715
|
}
|
|
1715
1716
|
),
|
|
1716
|
-
/* @__PURE__ */
|
|
1717
|
+
/* @__PURE__ */ jsx388(
|
|
1717
1718
|
Box,
|
|
1718
1719
|
{
|
|
1719
1720
|
ref: menuRef,
|
|
@@ -1737,7 +1738,7 @@ var MultiSelect = forwardRef4(
|
|
|
1737
1738
|
children: menuItems.map((item, _index) => {
|
|
1738
1739
|
const brandColors = theme.colors.control.brand.primary;
|
|
1739
1740
|
const contentColors = theme.colors.content;
|
|
1740
|
-
return /* @__PURE__ */
|
|
1741
|
+
return /* @__PURE__ */ jsx388(
|
|
1741
1742
|
Box,
|
|
1742
1743
|
{
|
|
1743
1744
|
paddingHorizontal: sizeStyles.paddingHorizontal,
|
|
@@ -1758,7 +1759,7 @@ var MultiSelect = forwardRef4(
|
|
|
1758
1759
|
cursor: item.disabled ? "not-allowed" : "pointer",
|
|
1759
1760
|
opacity: item.disabled ? 0.5 : 1
|
|
1760
1761
|
},
|
|
1761
|
-
children: /* @__PURE__ */
|
|
1762
|
+
children: /* @__PURE__ */ jsx388(
|
|
1762
1763
|
Text,
|
|
1763
1764
|
{
|
|
1764
1765
|
color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
|
|
@@ -1777,7 +1778,7 @@ var MultiSelect = forwardRef4(
|
|
|
1777
1778
|
]
|
|
1778
1779
|
}
|
|
1779
1780
|
),
|
|
1780
|
-
errorMessage && /* @__PURE__ */
|
|
1781
|
+
errorMessage && /* @__PURE__ */ jsx388(
|
|
1781
1782
|
Text,
|
|
1782
1783
|
{
|
|
1783
1784
|
color: theme.colors.content.alert.primary,
|