@xsolla/xui-multi-select 0.106.0 → 0.108.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.js
CHANGED
|
@@ -657,6 +657,7 @@ var import_jsx_runtime386 = require("react/jsx-runtime");
|
|
|
657
657
|
var import_jsx_runtime387 = require("react/jsx-runtime");
|
|
658
658
|
var import_jsx_runtime388 = require("react/jsx-runtime");
|
|
659
659
|
var import_jsx_runtime389 = require("react/jsx-runtime");
|
|
660
|
+
var import_jsx_runtime390 = require("react/jsx-runtime");
|
|
660
661
|
var StyledIcon = import_styled_components.default.div`
|
|
661
662
|
display: inline-flex;
|
|
662
663
|
align-items: center;
|
|
@@ -674,15 +675,15 @@ var BaseIcon = ({
|
|
|
674
675
|
variant = "line",
|
|
675
676
|
size = 24,
|
|
676
677
|
color = "currentColor",
|
|
677
|
-
solidContent:
|
|
678
|
-
lineContent:
|
|
678
|
+
solidContent: solidContent387,
|
|
679
|
+
lineContent: lineContent387,
|
|
679
680
|
className,
|
|
680
681
|
style,
|
|
681
682
|
"data-testid": testId,
|
|
682
683
|
"aria-label": ariaLabel,
|
|
683
684
|
"aria-hidden": ariaHidden
|
|
684
685
|
}) => {
|
|
685
|
-
const svgContent = variant === "line" ?
|
|
686
|
+
const svgContent = variant === "line" ? lineContent387 : solidContent387;
|
|
686
687
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
687
688
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
688
689
|
StyledIcon,
|
|
@@ -699,18 +700,18 @@ var BaseIcon = ({
|
|
|
699
700
|
}
|
|
700
701
|
);
|
|
701
702
|
};
|
|
702
|
-
var
|
|
703
|
-
var
|
|
704
|
-
var ChevronDown = (props) => /* @__PURE__ */ (0,
|
|
705
|
-
var
|
|
706
|
-
var
|
|
707
|
-
var ChevronUp = (props) => /* @__PURE__ */ (0,
|
|
708
|
-
var
|
|
709
|
-
var
|
|
710
|
-
var ExclamationMarkCr = (props) => /* @__PURE__ */ (0,
|
|
711
|
-
var
|
|
712
|
-
var
|
|
713
|
-
var Remove = (props) => /* @__PURE__ */ (0,
|
|
703
|
+
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>`;
|
|
704
|
+
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>`;
|
|
705
|
+
var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(BaseIcon, { ...props, solidContent: solidContent71, lineContent: lineContent71 });
|
|
706
|
+
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>`;
|
|
707
|
+
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>`;
|
|
708
|
+
var ChevronUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(BaseIcon, { ...props, solidContent: solidContent80, lineContent: lineContent80 });
|
|
709
|
+
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>`;
|
|
710
|
+
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>`;
|
|
711
|
+
var ExclamationMarkCr = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(BaseIcon, { ...props, solidContent: solidContent89, lineContent: lineContent89 });
|
|
712
|
+
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>`;
|
|
713
|
+
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>`;
|
|
714
|
+
var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(BaseIcon, { ...props, solidContent: solidContent113, lineContent: lineContent113 });
|
|
714
715
|
|
|
715
716
|
// src/useMultiSelectControl.tsx
|
|
716
717
|
var import_react5 = require("react");
|
|
@@ -718,16 +719,16 @@ var import_react5 = require("react");
|
|
|
718
719
|
// ../tag/dist/web/index.mjs
|
|
719
720
|
var import_react4 = __toESM(require("react"), 1);
|
|
720
721
|
var import_styled_components3 = __toESM(require("styled-components"), 1);
|
|
721
|
-
var import_jsx_runtime392 = require("react/jsx-runtime");
|
|
722
|
-
var import_styled_components4 = __toESM(require("styled-components"), 1);
|
|
723
722
|
var import_jsx_runtime393 = require("react/jsx-runtime");
|
|
724
|
-
var
|
|
723
|
+
var import_styled_components4 = __toESM(require("styled-components"), 1);
|
|
725
724
|
var import_jsx_runtime394 = require("react/jsx-runtime");
|
|
725
|
+
var import_styled_components5 = __toESM(require("styled-components"), 1);
|
|
726
|
+
var import_jsx_runtime395 = require("react/jsx-runtime");
|
|
726
727
|
var import_xui_core = require("@xsolla/xui-core");
|
|
727
728
|
|
|
728
729
|
// ../icons/dist/web/index.mjs
|
|
729
730
|
var import_styled_components2 = __toESM(require("styled-components"), 1);
|
|
730
|
-
var
|
|
731
|
+
var import_jsx_runtime391 = require("react/jsx-runtime");
|
|
731
732
|
|
|
732
733
|
// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
733
734
|
var import_react3 = require("react");
|
|
@@ -807,7 +808,7 @@ var X = createLucideIcon("X", [
|
|
|
807
808
|
]);
|
|
808
809
|
|
|
809
810
|
// ../icons/dist/web/index.mjs
|
|
810
|
-
var
|
|
811
|
+
var import_jsx_runtime392 = require("react/jsx-runtime");
|
|
811
812
|
var StyledIcon2 = import_styled_components2.default.div`
|
|
812
813
|
display: flex;
|
|
813
814
|
align-items: center;
|
|
@@ -824,12 +825,12 @@ var StyledIcon2 = import_styled_components2.default.div`
|
|
|
824
825
|
}
|
|
825
826
|
`;
|
|
826
827
|
var Icon3 = ({ children, ...props }) => {
|
|
827
|
-
return /* @__PURE__ */ (0,
|
|
828
|
+
return /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(StyledIcon2, { ...props, children });
|
|
828
829
|
};
|
|
829
|
-
var X2 = (props) => /* @__PURE__ */ (0,
|
|
830
|
+
var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(X, { size: "100%" }) });
|
|
830
831
|
|
|
831
832
|
// ../tag/dist/web/index.mjs
|
|
832
|
-
var
|
|
833
|
+
var import_jsx_runtime396 = require("react/jsx-runtime");
|
|
833
834
|
var StyledBox = import_styled_components3.default.div`
|
|
834
835
|
display: flex;
|
|
835
836
|
box-sizing: border-box;
|
|
@@ -943,7 +944,7 @@ var Box2 = import_react4.default.forwardRef(
|
|
|
943
944
|
...props
|
|
944
945
|
}, ref) => {
|
|
945
946
|
if (as === "img" && src) {
|
|
946
|
-
return /* @__PURE__ */ (0,
|
|
947
|
+
return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
|
|
947
948
|
"img",
|
|
948
949
|
{
|
|
949
950
|
src,
|
|
@@ -963,7 +964,7 @@ var Box2 = import_react4.default.forwardRef(
|
|
|
963
964
|
}
|
|
964
965
|
);
|
|
965
966
|
}
|
|
966
|
-
return /* @__PURE__ */ (0,
|
|
967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
|
|
967
968
|
StyledBox,
|
|
968
969
|
{
|
|
969
970
|
ref,
|
|
@@ -1011,7 +1012,7 @@ var Text2 = ({
|
|
|
1011
1012
|
role,
|
|
1012
1013
|
...props
|
|
1013
1014
|
}) => {
|
|
1014
|
-
return /* @__PURE__ */ (0,
|
|
1015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
|
|
1015
1016
|
StyledText,
|
|
1016
1017
|
{
|
|
1017
1018
|
...props,
|
|
@@ -1038,7 +1039,7 @@ var StyledIcon3 = import_styled_components5.default.div`
|
|
|
1038
1039
|
}
|
|
1039
1040
|
`;
|
|
1040
1041
|
var Icon4 = ({ children, ...props }) => {
|
|
1041
|
-
return /* @__PURE__ */ (0,
|
|
1042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(StyledIcon3, { ...props, children });
|
|
1042
1043
|
};
|
|
1043
1044
|
var SELECTABLE_BORDER_RADIUS = 8;
|
|
1044
1045
|
var Tag = ({
|
|
@@ -1128,7 +1129,7 @@ var Tag = ({
|
|
|
1128
1129
|
const { bg, text, border } = resolveColors();
|
|
1129
1130
|
const isSelectable = variant === "selectable";
|
|
1130
1131
|
const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
|
|
1131
|
-
return /* @__PURE__ */ (0,
|
|
1132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
|
|
1132
1133
|
Box2,
|
|
1133
1134
|
{
|
|
1134
1135
|
as: isSelectable ? "button" : void 0,
|
|
@@ -1152,8 +1153,8 @@ var Tag = ({
|
|
|
1152
1153
|
whiteSpace: "nowrap"
|
|
1153
1154
|
},
|
|
1154
1155
|
children: [
|
|
1155
|
-
icon && /* @__PURE__ */ (0,
|
|
1156
|
-
/* @__PURE__ */ (0,
|
|
1156
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
|
|
1157
|
+
/* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
|
|
1157
1158
|
Text2,
|
|
1158
1159
|
{
|
|
1159
1160
|
color: text,
|
|
@@ -1167,7 +1168,7 @@ var Tag = ({
|
|
|
1167
1168
|
children
|
|
1168
1169
|
}
|
|
1169
1170
|
),
|
|
1170
|
-
onRemove && /* @__PURE__ */ (0,
|
|
1171
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
|
|
1171
1172
|
]
|
|
1172
1173
|
}
|
|
1173
1174
|
);
|
|
@@ -1175,7 +1176,7 @@ var Tag = ({
|
|
|
1175
1176
|
|
|
1176
1177
|
// src/useMultiSelectControl.tsx
|
|
1177
1178
|
var import_xui_core2 = require("@xsolla/xui-core");
|
|
1178
|
-
var
|
|
1179
|
+
var import_jsx_runtime397 = require("react/jsx-runtime");
|
|
1179
1180
|
var COUNT_ITEM_VALUE = "count-item";
|
|
1180
1181
|
var useMultiSelectControl = ({
|
|
1181
1182
|
variant,
|
|
@@ -1235,7 +1236,7 @@ var useMultiSelectControl = ({
|
|
|
1235
1236
|
};
|
|
1236
1237
|
const setPlaceholder = () => {
|
|
1237
1238
|
setSelectedContent(
|
|
1238
|
-
/* @__PURE__ */ (0,
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1239
1240
|
Text,
|
|
1240
1241
|
{
|
|
1241
1242
|
color: theme.colors.control.input.placeholder,
|
|
@@ -1286,7 +1287,7 @@ var useMultiSelectControl = ({
|
|
|
1286
1287
|
const isCount = item.value === COUNT_ITEM_VALUE;
|
|
1287
1288
|
const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
|
|
1288
1289
|
if (variant === "tag") {
|
|
1289
|
-
return /* @__PURE__ */ (0,
|
|
1290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1290
1291
|
Box,
|
|
1291
1292
|
{
|
|
1292
1293
|
onPress: !isCount ? (e) => {
|
|
@@ -1298,7 +1299,7 @@ var useMultiSelectControl = ({
|
|
|
1298
1299
|
opacity: disabled ? 0.5 : 1,
|
|
1299
1300
|
cursor: disabled || isCount ? "not-allowed" : "pointer"
|
|
1300
1301
|
},
|
|
1301
|
-
children: /* @__PURE__ */ (0,
|
|
1302
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1302
1303
|
Tag,
|
|
1303
1304
|
{
|
|
1304
1305
|
size,
|
|
@@ -1316,7 +1317,7 @@ var useMultiSelectControl = ({
|
|
|
1316
1317
|
}
|
|
1317
1318
|
const isCountItem = hasHidden;
|
|
1318
1319
|
const needsComma = index < displayedItems.length - 2 || index < displayedItems.length - 1 && !isCountItem;
|
|
1319
|
-
return /* @__PURE__ */ (0,
|
|
1320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(
|
|
1320
1321
|
Text,
|
|
1321
1322
|
{
|
|
1322
1323
|
color: theme.colors.content.primary,
|
|
@@ -1418,7 +1419,7 @@ var useMultiSelectControl = ({
|
|
|
1418
1419
|
};
|
|
1419
1420
|
|
|
1420
1421
|
// src/MultiSelectControl.tsx
|
|
1421
|
-
var
|
|
1422
|
+
var import_jsx_runtime398 = require("react/jsx-runtime");
|
|
1422
1423
|
var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
1423
1424
|
({
|
|
1424
1425
|
variant = "tag",
|
|
@@ -1481,7 +1482,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1481
1482
|
borderColor = inputColors.borderHover;
|
|
1482
1483
|
}
|
|
1483
1484
|
const iconColor = isDisable ? inputColors.textDisable : inputColors.placeholder;
|
|
1484
|
-
return /* @__PURE__ */ (0,
|
|
1485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(
|
|
1485
1486
|
Box,
|
|
1486
1487
|
{
|
|
1487
1488
|
ref,
|
|
@@ -1509,7 +1510,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1509
1510
|
borderColor: inputColors.borderHover
|
|
1510
1511
|
} : void 0,
|
|
1511
1512
|
children: [
|
|
1512
|
-
/* @__PURE__ */ (0,
|
|
1513
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(
|
|
1513
1514
|
Box,
|
|
1514
1515
|
{
|
|
1515
1516
|
ref: containerRef,
|
|
@@ -1519,8 +1520,8 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1519
1520
|
gap: 8,
|
|
1520
1521
|
style: { minWidth: 0 },
|
|
1521
1522
|
children: [
|
|
1522
|
-
iconLeft && /* @__PURE__ */ (0,
|
|
1523
|
-
/* @__PURE__ */ (0,
|
|
1523
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
|
|
1524
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1524
1525
|
Box,
|
|
1525
1526
|
{
|
|
1526
1527
|
ref: itemsRef,
|
|
@@ -1539,8 +1540,8 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1539
1540
|
]
|
|
1540
1541
|
}
|
|
1541
1542
|
),
|
|
1542
|
-
/* @__PURE__ */ (0,
|
|
1543
|
-
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0,
|
|
1543
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
|
|
1544
|
+
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1544
1545
|
Box,
|
|
1545
1546
|
{
|
|
1546
1547
|
onPress: (e) => {
|
|
@@ -1548,17 +1549,17 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1548
1549
|
removeAllValues();
|
|
1549
1550
|
},
|
|
1550
1551
|
style: { cursor: "pointer" },
|
|
1551
|
-
children: /* @__PURE__ */ (0,
|
|
1552
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
|
|
1552
1553
|
}
|
|
1553
1554
|
),
|
|
1554
|
-
isError && /* @__PURE__ */ (0,
|
|
1555
|
+
isError && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1555
1556
|
ExclamationMarkCr,
|
|
1556
1557
|
{
|
|
1557
1558
|
size: 18,
|
|
1558
1559
|
color: theme.colors.content.alert.primary
|
|
1559
1560
|
}
|
|
1560
1561
|
),
|
|
1561
|
-
iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0,
|
|
1562
|
+
iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(ChevronDown, { size: 18, color: iconColor })
|
|
1562
1563
|
] })
|
|
1563
1564
|
]
|
|
1564
1565
|
}
|
|
@@ -1659,7 +1660,7 @@ var useMultiSelect = ({
|
|
|
1659
1660
|
};
|
|
1660
1661
|
|
|
1661
1662
|
// src/MultiSelect.tsx
|
|
1662
|
-
var
|
|
1663
|
+
var import_jsx_runtime399 = require("react/jsx-runtime");
|
|
1663
1664
|
var MultiSelect = (0, import_react8.forwardRef)(
|
|
1664
1665
|
({
|
|
1665
1666
|
options,
|
|
@@ -1723,8 +1724,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1723
1724
|
const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
|
|
1724
1725
|
onChoose(newValues.map(String));
|
|
1725
1726
|
};
|
|
1726
|
-
return /* @__PURE__ */ (0,
|
|
1727
|
-
label && /* @__PURE__ */ (0,
|
|
1727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
|
|
1728
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1728
1729
|
Text,
|
|
1729
1730
|
{
|
|
1730
1731
|
color: theme.colors.content.secondary,
|
|
@@ -1733,7 +1734,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1733
1734
|
children: label
|
|
1734
1735
|
}
|
|
1735
1736
|
),
|
|
1736
|
-
/* @__PURE__ */ (0,
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(
|
|
1737
1738
|
Box,
|
|
1738
1739
|
{
|
|
1739
1740
|
ref,
|
|
@@ -1741,7 +1742,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1741
1742
|
position: "relative"
|
|
1742
1743
|
},
|
|
1743
1744
|
children: [
|
|
1744
|
-
/* @__PURE__ */ (0,
|
|
1745
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1745
1746
|
MultiSelectControl,
|
|
1746
1747
|
{
|
|
1747
1748
|
ref: controlRef,
|
|
@@ -1765,8 +1766,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1765
1766
|
extraClear
|
|
1766
1767
|
}
|
|
1767
1768
|
),
|
|
1768
|
-
isOpen && !isDisable && /* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1769
|
+
isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(import_jsx_runtime399.Fragment, { children: [
|
|
1770
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1770
1771
|
Box,
|
|
1771
1772
|
{
|
|
1772
1773
|
style: {
|
|
@@ -1781,7 +1782,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1781
1782
|
onPress: onClose
|
|
1782
1783
|
}
|
|
1783
1784
|
),
|
|
1784
|
-
/* @__PURE__ */ (0,
|
|
1785
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1785
1786
|
Box,
|
|
1786
1787
|
{
|
|
1787
1788
|
ref: menuRef,
|
|
@@ -1805,7 +1806,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1805
1806
|
children: menuItems.map((item, _index) => {
|
|
1806
1807
|
const brandColors = theme.colors.control.brand.primary;
|
|
1807
1808
|
const contentColors = theme.colors.content;
|
|
1808
|
-
return /* @__PURE__ */ (0,
|
|
1809
|
+
return /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1809
1810
|
Box,
|
|
1810
1811
|
{
|
|
1811
1812
|
paddingHorizontal: sizeStyles.paddingHorizontal,
|
|
@@ -1826,7 +1827,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1826
1827
|
cursor: item.disabled ? "not-allowed" : "pointer",
|
|
1827
1828
|
opacity: item.disabled ? 0.5 : 1
|
|
1828
1829
|
},
|
|
1829
|
-
children: /* @__PURE__ */ (0,
|
|
1830
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1830
1831
|
Text,
|
|
1831
1832
|
{
|
|
1832
1833
|
color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
|
|
@@ -1845,7 +1846,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1845
1846
|
]
|
|
1846
1847
|
}
|
|
1847
1848
|
),
|
|
1848
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
1849
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1849
1850
|
Text,
|
|
1850
1851
|
{
|
|
1851
1852
|
color: theme.colors.content.alert.primary,
|