@xsolla/xui-multi-select 0.107.0 → 0.109.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/web/index.mjs
CHANGED
|
@@ -619,6 +619,7 @@ import { jsx as jsx383 } from "react/jsx-runtime";
|
|
|
619
619
|
import { jsx as jsx384 } from "react/jsx-runtime";
|
|
620
620
|
import { jsx as jsx385 } from "react/jsx-runtime";
|
|
621
621
|
import { jsx as jsx386 } from "react/jsx-runtime";
|
|
622
|
+
import { jsx as jsx387 } from "react/jsx-runtime";
|
|
622
623
|
var StyledIcon2 = styled4.div`
|
|
623
624
|
display: inline-flex;
|
|
624
625
|
align-items: center;
|
|
@@ -636,15 +637,15 @@ var BaseIcon = ({
|
|
|
636
637
|
variant = "line",
|
|
637
638
|
size = 24,
|
|
638
639
|
color = "currentColor",
|
|
639
|
-
solidContent:
|
|
640
|
-
lineContent:
|
|
640
|
+
solidContent: solidContent387,
|
|
641
|
+
lineContent: lineContent387,
|
|
641
642
|
className,
|
|
642
643
|
style,
|
|
643
644
|
"data-testid": testId,
|
|
644
645
|
"aria-label": ariaLabel,
|
|
645
646
|
"aria-hidden": ariaHidden
|
|
646
647
|
}) => {
|
|
647
|
-
const svgContent = variant === "line" ?
|
|
648
|
+
const svgContent = variant === "line" ? lineContent387 : solidContent387;
|
|
648
649
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
649
650
|
return /* @__PURE__ */ jsx4(
|
|
650
651
|
StyledIcon2,
|
|
@@ -661,18 +662,18 @@ var BaseIcon = ({
|
|
|
661
662
|
}
|
|
662
663
|
);
|
|
663
664
|
};
|
|
664
|
-
var
|
|
665
|
-
var
|
|
666
|
-
var ChevronDown = (props) => /* @__PURE__ */
|
|
667
|
-
var
|
|
668
|
-
var
|
|
669
|
-
var ChevronUp = (props) => /* @__PURE__ */
|
|
670
|
-
var
|
|
671
|
-
var
|
|
672
|
-
var ExclamationMarkCr = (props) => /* @__PURE__ */
|
|
673
|
-
var
|
|
674
|
-
var
|
|
675
|
-
var Remove = (props) => /* @__PURE__ */
|
|
665
|
+
var solidContent71 = `<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.19337 11.1943C6.75239 10.7533 7.06471 9.99933 7.68834 9.99933L16.3084 9.99933C16.9321 9.99933 17.2444 10.7533 16.8034 11.1943L12.7055 15.2922C12.315 15.6827 11.6818 15.6827 11.2913 15.2922L7.19337 11.1943Z" style="fill: currentColor"/></g></svg>`;
|
|
666
|
+
var lineContent71 = `<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>`;
|
|
667
|
+
var ChevronDown = (props) => /* @__PURE__ */ jsx72(BaseIcon, { ...props, solidContent: solidContent71, lineContent: lineContent71 });
|
|
668
|
+
var solidContent80 = `<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.8066 12.8057C17.2476 13.2467 16.9352 14.0007 16.3116 14.0007H7.69152C7.06788 14.0007 6.75557 13.2467 7.19654 12.8057L11.2945 8.70778C11.685 8.31726 12.3181 8.31726 12.7087 8.70778L16.8066 12.8057Z" style="fill: currentColor"/></g></svg>`;
|
|
669
|
+
var lineContent80 = `<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>`;
|
|
670
|
+
var ChevronUp = (props) => /* @__PURE__ */ jsx81(BaseIcon, { ...props, solidContent: solidContent80, lineContent: lineContent80 });
|
|
671
|
+
var solidContent89 = `<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>`;
|
|
672
|
+
var lineContent89 = `<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>`;
|
|
673
|
+
var ExclamationMarkCr = (props) => /* @__PURE__ */ jsx90(BaseIcon, { ...props, solidContent: solidContent89, lineContent: lineContent89 });
|
|
674
|
+
var solidContent113 = `<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>`;
|
|
675
|
+
var lineContent113 = `<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>`;
|
|
676
|
+
var Remove = (props) => /* @__PURE__ */ jsx114(BaseIcon, { ...props, solidContent: solidContent113, lineContent: lineContent113 });
|
|
676
677
|
|
|
677
678
|
// src/useMultiSelectControl.tsx
|
|
678
679
|
import {
|
|
@@ -685,16 +686,16 @@ import {
|
|
|
685
686
|
// ../tag/dist/web/index.mjs
|
|
686
687
|
import React2 from "react";
|
|
687
688
|
import styled6 from "styled-components";
|
|
688
|
-
import { jsx as
|
|
689
|
+
import { jsx as jsx389 } from "react/jsx-runtime";
|
|
689
690
|
import styled22 from "styled-components";
|
|
690
691
|
import { jsx as jsx2101 } from "react/jsx-runtime";
|
|
691
692
|
import styled32 from "styled-components";
|
|
692
|
-
import { jsx as
|
|
693
|
+
import { jsx as jsx390 } from "react/jsx-runtime";
|
|
693
694
|
import { useDesignSystem } from "@xsolla/xui-core";
|
|
694
695
|
|
|
695
696
|
// ../icons/dist/web/index.mjs
|
|
696
697
|
import styled5 from "styled-components";
|
|
697
|
-
import { jsx as
|
|
698
|
+
import { jsx as jsx388 } from "react/jsx-runtime";
|
|
698
699
|
|
|
699
700
|
// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
700
701
|
import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
|
|
@@ -791,7 +792,7 @@ var StyledIcon3 = styled5.div`
|
|
|
791
792
|
}
|
|
792
793
|
`;
|
|
793
794
|
var Icon3 = ({ children, ...props }) => {
|
|
794
|
-
return /* @__PURE__ */
|
|
795
|
+
return /* @__PURE__ */ jsx388(StyledIcon3, { ...props, children });
|
|
795
796
|
};
|
|
796
797
|
var X2 = (props) => /* @__PURE__ */ jsx2100(Icon3, { ...props, children: /* @__PURE__ */ jsx2100(X, { size: "100%" }) });
|
|
797
798
|
|
|
@@ -910,7 +911,7 @@ var Box2 = React2.forwardRef(
|
|
|
910
911
|
...props
|
|
911
912
|
}, ref) => {
|
|
912
913
|
if (as === "img" && src) {
|
|
913
|
-
return /* @__PURE__ */
|
|
914
|
+
return /* @__PURE__ */ jsx389(
|
|
914
915
|
"img",
|
|
915
916
|
{
|
|
916
917
|
src,
|
|
@@ -930,7 +931,7 @@ var Box2 = React2.forwardRef(
|
|
|
930
931
|
}
|
|
931
932
|
);
|
|
932
933
|
}
|
|
933
|
-
return /* @__PURE__ */
|
|
934
|
+
return /* @__PURE__ */ jsx389(
|
|
934
935
|
StyledBox2,
|
|
935
936
|
{
|
|
936
937
|
ref,
|
|
@@ -1005,7 +1006,7 @@ var StyledIcon4 = styled32.div`
|
|
|
1005
1006
|
}
|
|
1006
1007
|
`;
|
|
1007
1008
|
var Icon4 = ({ children, ...props }) => {
|
|
1008
|
-
return /* @__PURE__ */
|
|
1009
|
+
return /* @__PURE__ */ jsx390(StyledIcon4, { ...props, children });
|
|
1009
1010
|
};
|
|
1010
1011
|
var SELECTABLE_BORDER_RADIUS = 8;
|
|
1011
1012
|
var Tag = ({
|
|
@@ -1142,7 +1143,7 @@ var Tag = ({
|
|
|
1142
1143
|
|
|
1143
1144
|
// src/useMultiSelectControl.tsx
|
|
1144
1145
|
import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
|
|
1145
|
-
import { jsx as
|
|
1146
|
+
import { jsx as jsx391, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
1146
1147
|
var COUNT_ITEM_VALUE = "count-item";
|
|
1147
1148
|
var useMultiSelectControl = ({
|
|
1148
1149
|
variant,
|
|
@@ -1202,7 +1203,7 @@ var useMultiSelectControl = ({
|
|
|
1202
1203
|
};
|
|
1203
1204
|
const setPlaceholder = () => {
|
|
1204
1205
|
setSelectedContent(
|
|
1205
|
-
/* @__PURE__ */
|
|
1206
|
+
/* @__PURE__ */ jsx391(
|
|
1206
1207
|
Text,
|
|
1207
1208
|
{
|
|
1208
1209
|
color: theme.colors.control.input.placeholder,
|
|
@@ -1253,7 +1254,7 @@ var useMultiSelectControl = ({
|
|
|
1253
1254
|
const isCount = item.value === COUNT_ITEM_VALUE;
|
|
1254
1255
|
const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
|
|
1255
1256
|
if (variant === "tag") {
|
|
1256
|
-
return /* @__PURE__ */
|
|
1257
|
+
return /* @__PURE__ */ jsx391(
|
|
1257
1258
|
Box,
|
|
1258
1259
|
{
|
|
1259
1260
|
onPress: !isCount ? (e) => {
|
|
@@ -1265,7 +1266,7 @@ var useMultiSelectControl = ({
|
|
|
1265
1266
|
opacity: disabled ? 0.5 : 1,
|
|
1266
1267
|
cursor: disabled || isCount ? "not-allowed" : "pointer"
|
|
1267
1268
|
},
|
|
1268
|
-
children: /* @__PURE__ */
|
|
1269
|
+
children: /* @__PURE__ */ jsx391(
|
|
1269
1270
|
Tag,
|
|
1270
1271
|
{
|
|
1271
1272
|
size,
|
|
@@ -1385,7 +1386,7 @@ var useMultiSelectControl = ({
|
|
|
1385
1386
|
};
|
|
1386
1387
|
|
|
1387
1388
|
// src/MultiSelectControl.tsx
|
|
1388
|
-
import { jsx as
|
|
1389
|
+
import { jsx as jsx392, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1389
1390
|
var MultiSelectControl = forwardRef3(
|
|
1390
1391
|
({
|
|
1391
1392
|
variant = "tag",
|
|
@@ -1486,8 +1487,8 @@ var MultiSelectControl = forwardRef3(
|
|
|
1486
1487
|
gap: 8,
|
|
1487
1488
|
style: { minWidth: 0 },
|
|
1488
1489
|
children: [
|
|
1489
|
-
iconLeft && /* @__PURE__ */
|
|
1490
|
-
/* @__PURE__ */
|
|
1490
|
+
iconLeft && /* @__PURE__ */ jsx392(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
|
|
1491
|
+
/* @__PURE__ */ jsx392(
|
|
1491
1492
|
Box,
|
|
1492
1493
|
{
|
|
1493
1494
|
ref: itemsRef,
|
|
@@ -1507,7 +1508,7 @@ var MultiSelectControl = forwardRef3(
|
|
|
1507
1508
|
}
|
|
1508
1509
|
),
|
|
1509
1510
|
/* @__PURE__ */ jsxs3(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
|
|
1510
|
-
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */
|
|
1511
|
+
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ jsx392(
|
|
1511
1512
|
Box,
|
|
1512
1513
|
{
|
|
1513
1514
|
onPress: (e) => {
|
|
@@ -1515,17 +1516,17 @@ var MultiSelectControl = forwardRef3(
|
|
|
1515
1516
|
removeAllValues();
|
|
1516
1517
|
},
|
|
1517
1518
|
style: { cursor: "pointer" },
|
|
1518
|
-
children: /* @__PURE__ */
|
|
1519
|
+
children: /* @__PURE__ */ jsx392(Remove, { size: 18, color: iconColor, variant: "line" })
|
|
1519
1520
|
}
|
|
1520
1521
|
),
|
|
1521
|
-
isError && /* @__PURE__ */
|
|
1522
|
+
isError && /* @__PURE__ */ jsx392(
|
|
1522
1523
|
ExclamationMarkCr,
|
|
1523
1524
|
{
|
|
1524
1525
|
size: 18,
|
|
1525
1526
|
color: theme.colors.content.alert.primary
|
|
1526
1527
|
}
|
|
1527
1528
|
),
|
|
1528
|
-
iconRight ? iconRight : isOpen ? /* @__PURE__ */
|
|
1529
|
+
iconRight ? iconRight : isOpen ? /* @__PURE__ */ jsx392(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ jsx392(ChevronDown, { size: 18, color: iconColor })
|
|
1529
1530
|
] })
|
|
1530
1531
|
]
|
|
1531
1532
|
}
|
|
@@ -1626,7 +1627,7 @@ var useMultiSelect = ({
|
|
|
1626
1627
|
};
|
|
1627
1628
|
|
|
1628
1629
|
// src/MultiSelect.tsx
|
|
1629
|
-
import { Fragment, jsx as
|
|
1630
|
+
import { Fragment, jsx as jsx393, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1630
1631
|
var MultiSelect = forwardRef4(
|
|
1631
1632
|
({
|
|
1632
1633
|
options,
|
|
@@ -1691,7 +1692,7 @@ var MultiSelect = forwardRef4(
|
|
|
1691
1692
|
onChoose(newValues.map(String));
|
|
1692
1693
|
};
|
|
1693
1694
|
return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
|
|
1694
|
-
label && /* @__PURE__ */
|
|
1695
|
+
label && /* @__PURE__ */ jsx393(
|
|
1695
1696
|
Text,
|
|
1696
1697
|
{
|
|
1697
1698
|
color: theme.colors.content.secondary,
|
|
@@ -1708,7 +1709,7 @@ var MultiSelect = forwardRef4(
|
|
|
1708
1709
|
position: "relative"
|
|
1709
1710
|
},
|
|
1710
1711
|
children: [
|
|
1711
|
-
/* @__PURE__ */
|
|
1712
|
+
/* @__PURE__ */ jsx393(
|
|
1712
1713
|
MultiSelectControl,
|
|
1713
1714
|
{
|
|
1714
1715
|
ref: controlRef,
|
|
@@ -1733,7 +1734,7 @@ var MultiSelect = forwardRef4(
|
|
|
1733
1734
|
}
|
|
1734
1735
|
),
|
|
1735
1736
|
isOpen && !isDisable && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
1736
|
-
/* @__PURE__ */
|
|
1737
|
+
/* @__PURE__ */ jsx393(
|
|
1737
1738
|
Box,
|
|
1738
1739
|
{
|
|
1739
1740
|
style: {
|
|
@@ -1748,7 +1749,7 @@ var MultiSelect = forwardRef4(
|
|
|
1748
1749
|
onPress: onClose
|
|
1749
1750
|
}
|
|
1750
1751
|
),
|
|
1751
|
-
/* @__PURE__ */
|
|
1752
|
+
/* @__PURE__ */ jsx393(
|
|
1752
1753
|
Box,
|
|
1753
1754
|
{
|
|
1754
1755
|
ref: menuRef,
|
|
@@ -1772,7 +1773,7 @@ var MultiSelect = forwardRef4(
|
|
|
1772
1773
|
children: menuItems.map((item, _index) => {
|
|
1773
1774
|
const brandColors = theme.colors.control.brand.primary;
|
|
1774
1775
|
const contentColors = theme.colors.content;
|
|
1775
|
-
return /* @__PURE__ */
|
|
1776
|
+
return /* @__PURE__ */ jsx393(
|
|
1776
1777
|
Box,
|
|
1777
1778
|
{
|
|
1778
1779
|
paddingHorizontal: sizeStyles.paddingHorizontal,
|
|
@@ -1793,7 +1794,7 @@ var MultiSelect = forwardRef4(
|
|
|
1793
1794
|
cursor: item.disabled ? "not-allowed" : "pointer",
|
|
1794
1795
|
opacity: item.disabled ? 0.5 : 1
|
|
1795
1796
|
},
|
|
1796
|
-
children: /* @__PURE__ */
|
|
1797
|
+
children: /* @__PURE__ */ jsx393(
|
|
1797
1798
|
Text,
|
|
1798
1799
|
{
|
|
1799
1800
|
color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
|
|
@@ -1812,7 +1813,7 @@ var MultiSelect = forwardRef4(
|
|
|
1812
1813
|
]
|
|
1813
1814
|
}
|
|
1814
1815
|
),
|
|
1815
|
-
errorMessage && /* @__PURE__ */
|
|
1816
|
+
errorMessage && /* @__PURE__ */ jsx393(
|
|
1816
1817
|
Text,
|
|
1817
1818
|
{
|
|
1818
1819
|
color: theme.colors.content.alert.primary,
|