@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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-multi-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.109.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-checkbox": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-dropdown": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-checkbox": "0.109.0",
|
|
14
|
+
"@xsolla/xui-core": "0.109.0",
|
|
15
|
+
"@xsolla/xui-dropdown": "0.109.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.109.0"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": ">=16.8.0",
|
package/web/index.js
CHANGED
|
@@ -655,6 +655,7 @@ var import_jsx_runtime386 = require("react/jsx-runtime");
|
|
|
655
655
|
var import_jsx_runtime387 = require("react/jsx-runtime");
|
|
656
656
|
var import_jsx_runtime388 = require("react/jsx-runtime");
|
|
657
657
|
var import_jsx_runtime389 = require("react/jsx-runtime");
|
|
658
|
+
var import_jsx_runtime390 = require("react/jsx-runtime");
|
|
658
659
|
var StyledIcon2 = import_styled_components4.default.div`
|
|
659
660
|
display: inline-flex;
|
|
660
661
|
align-items: center;
|
|
@@ -672,15 +673,15 @@ var BaseIcon = ({
|
|
|
672
673
|
variant = "line",
|
|
673
674
|
size = 24,
|
|
674
675
|
color = "currentColor",
|
|
675
|
-
solidContent:
|
|
676
|
-
lineContent:
|
|
676
|
+
solidContent: solidContent387,
|
|
677
|
+
lineContent: lineContent387,
|
|
677
678
|
className,
|
|
678
679
|
style,
|
|
679
680
|
"data-testid": testId,
|
|
680
681
|
"aria-label": ariaLabel,
|
|
681
682
|
"aria-hidden": ariaHidden
|
|
682
683
|
}) => {
|
|
683
|
-
const svgContent = variant === "line" ?
|
|
684
|
+
const svgContent = variant === "line" ? lineContent387 : solidContent387;
|
|
684
685
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
685
686
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
686
687
|
StyledIcon2,
|
|
@@ -697,18 +698,18 @@ var BaseIcon = ({
|
|
|
697
698
|
}
|
|
698
699
|
);
|
|
699
700
|
};
|
|
700
|
-
var
|
|
701
|
-
var
|
|
702
|
-
var ChevronDown = (props) => /* @__PURE__ */ (0,
|
|
703
|
-
var
|
|
704
|
-
var
|
|
705
|
-
var ChevronUp = (props) => /* @__PURE__ */ (0,
|
|
706
|
-
var
|
|
707
|
-
var
|
|
708
|
-
var ExclamationMarkCr = (props) => /* @__PURE__ */ (0,
|
|
709
|
-
var
|
|
710
|
-
var
|
|
711
|
-
var Remove = (props) => /* @__PURE__ */ (0,
|
|
701
|
+
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>`;
|
|
702
|
+
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>`;
|
|
703
|
+
var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(BaseIcon, { ...props, solidContent: solidContent71, lineContent: lineContent71 });
|
|
704
|
+
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>`;
|
|
705
|
+
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>`;
|
|
706
|
+
var ChevronUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(BaseIcon, { ...props, solidContent: solidContent80, lineContent: lineContent80 });
|
|
707
|
+
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>`;
|
|
708
|
+
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>`;
|
|
709
|
+
var ExclamationMarkCr = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(BaseIcon, { ...props, solidContent: solidContent89, lineContent: lineContent89 });
|
|
710
|
+
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>`;
|
|
711
|
+
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>`;
|
|
712
|
+
var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(BaseIcon, { ...props, solidContent: solidContent113, lineContent: lineContent113 });
|
|
712
713
|
|
|
713
714
|
// src/useMultiSelectControl.tsx
|
|
714
715
|
var import_react5 = require("react");
|
|
@@ -716,16 +717,16 @@ var import_react5 = require("react");
|
|
|
716
717
|
// ../tag/dist/web/index.mjs
|
|
717
718
|
var import_react4 = __toESM(require("react"), 1);
|
|
718
719
|
var import_styled_components6 = __toESM(require("styled-components"), 1);
|
|
719
|
-
var import_jsx_runtime392 = require("react/jsx-runtime");
|
|
720
|
-
var import_styled_components7 = __toESM(require("styled-components"), 1);
|
|
721
720
|
var import_jsx_runtime393 = require("react/jsx-runtime");
|
|
722
|
-
var
|
|
721
|
+
var import_styled_components7 = __toESM(require("styled-components"), 1);
|
|
723
722
|
var import_jsx_runtime394 = require("react/jsx-runtime");
|
|
723
|
+
var import_styled_components8 = __toESM(require("styled-components"), 1);
|
|
724
|
+
var import_jsx_runtime395 = require("react/jsx-runtime");
|
|
724
725
|
var import_xui_core = require("@xsolla/xui-core");
|
|
725
726
|
|
|
726
727
|
// ../icons/dist/web/index.mjs
|
|
727
728
|
var import_styled_components5 = __toESM(require("styled-components"), 1);
|
|
728
|
-
var
|
|
729
|
+
var import_jsx_runtime391 = require("react/jsx-runtime");
|
|
729
730
|
|
|
730
731
|
// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
|
|
731
732
|
var import_react3 = require("react");
|
|
@@ -805,7 +806,7 @@ var X = createLucideIcon("X", [
|
|
|
805
806
|
]);
|
|
806
807
|
|
|
807
808
|
// ../icons/dist/web/index.mjs
|
|
808
|
-
var
|
|
809
|
+
var import_jsx_runtime392 = require("react/jsx-runtime");
|
|
809
810
|
var StyledIcon3 = import_styled_components5.default.div`
|
|
810
811
|
display: flex;
|
|
811
812
|
align-items: center;
|
|
@@ -822,12 +823,12 @@ var StyledIcon3 = import_styled_components5.default.div`
|
|
|
822
823
|
}
|
|
823
824
|
`;
|
|
824
825
|
var Icon3 = ({ children, ...props }) => {
|
|
825
|
-
return /* @__PURE__ */ (0,
|
|
826
|
+
return /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(StyledIcon3, { ...props, children });
|
|
826
827
|
};
|
|
827
|
-
var X2 = (props) => /* @__PURE__ */ (0,
|
|
828
|
+
var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(X, { size: "100%" }) });
|
|
828
829
|
|
|
829
830
|
// ../tag/dist/web/index.mjs
|
|
830
|
-
var
|
|
831
|
+
var import_jsx_runtime396 = require("react/jsx-runtime");
|
|
831
832
|
var StyledBox2 = import_styled_components6.default.div`
|
|
832
833
|
display: flex;
|
|
833
834
|
box-sizing: border-box;
|
|
@@ -941,7 +942,7 @@ var Box2 = import_react4.default.forwardRef(
|
|
|
941
942
|
...props
|
|
942
943
|
}, ref) => {
|
|
943
944
|
if (as === "img" && src) {
|
|
944
|
-
return /* @__PURE__ */ (0,
|
|
945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
|
|
945
946
|
"img",
|
|
946
947
|
{
|
|
947
948
|
src,
|
|
@@ -961,7 +962,7 @@ var Box2 = import_react4.default.forwardRef(
|
|
|
961
962
|
}
|
|
962
963
|
);
|
|
963
964
|
}
|
|
964
|
-
return /* @__PURE__ */ (0,
|
|
965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
|
|
965
966
|
StyledBox2,
|
|
966
967
|
{
|
|
967
968
|
ref,
|
|
@@ -1009,7 +1010,7 @@ var Text2 = ({
|
|
|
1009
1010
|
role,
|
|
1010
1011
|
...props
|
|
1011
1012
|
}) => {
|
|
1012
|
-
return /* @__PURE__ */ (0,
|
|
1013
|
+
return /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
|
|
1013
1014
|
StyledText2,
|
|
1014
1015
|
{
|
|
1015
1016
|
...props,
|
|
@@ -1036,7 +1037,7 @@ var StyledIcon4 = import_styled_components8.default.div`
|
|
|
1036
1037
|
}
|
|
1037
1038
|
`;
|
|
1038
1039
|
var Icon4 = ({ children, ...props }) => {
|
|
1039
|
-
return /* @__PURE__ */ (0,
|
|
1040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(StyledIcon4, { ...props, children });
|
|
1040
1041
|
};
|
|
1041
1042
|
var SELECTABLE_BORDER_RADIUS = 8;
|
|
1042
1043
|
var Tag = ({
|
|
@@ -1126,7 +1127,7 @@ var Tag = ({
|
|
|
1126
1127
|
const { bg, text, border } = resolveColors();
|
|
1127
1128
|
const isSelectable = variant === "selectable";
|
|
1128
1129
|
const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
|
|
1129
|
-
return /* @__PURE__ */ (0,
|
|
1130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
|
|
1130
1131
|
Box2,
|
|
1131
1132
|
{
|
|
1132
1133
|
as: isSelectable ? "button" : void 0,
|
|
@@ -1150,8 +1151,8 @@ var Tag = ({
|
|
|
1150
1151
|
whiteSpace: "nowrap"
|
|
1151
1152
|
},
|
|
1152
1153
|
children: [
|
|
1153
|
-
icon && /* @__PURE__ */ (0,
|
|
1154
|
-
/* @__PURE__ */ (0,
|
|
1154
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
|
|
1155
|
+
/* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
|
|
1155
1156
|
Text2,
|
|
1156
1157
|
{
|
|
1157
1158
|
color: text,
|
|
@@ -1165,7 +1166,7 @@ var Tag = ({
|
|
|
1165
1166
|
children
|
|
1166
1167
|
}
|
|
1167
1168
|
),
|
|
1168
|
-
onRemove && /* @__PURE__ */ (0,
|
|
1169
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
|
|
1169
1170
|
]
|
|
1170
1171
|
}
|
|
1171
1172
|
);
|
|
@@ -1173,7 +1174,7 @@ var Tag = ({
|
|
|
1173
1174
|
|
|
1174
1175
|
// src/useMultiSelectControl.tsx
|
|
1175
1176
|
var import_xui_core2 = require("@xsolla/xui-core");
|
|
1176
|
-
var
|
|
1177
|
+
var import_jsx_runtime397 = require("react/jsx-runtime");
|
|
1177
1178
|
var COUNT_ITEM_VALUE = "count-item";
|
|
1178
1179
|
var useMultiSelectControl = ({
|
|
1179
1180
|
variant,
|
|
@@ -1233,7 +1234,7 @@ var useMultiSelectControl = ({
|
|
|
1233
1234
|
};
|
|
1234
1235
|
const setPlaceholder = () => {
|
|
1235
1236
|
setSelectedContent(
|
|
1236
|
-
/* @__PURE__ */ (0,
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1237
1238
|
Text,
|
|
1238
1239
|
{
|
|
1239
1240
|
color: theme.colors.control.input.placeholder,
|
|
@@ -1284,7 +1285,7 @@ var useMultiSelectControl = ({
|
|
|
1284
1285
|
const isCount = item.value === COUNT_ITEM_VALUE;
|
|
1285
1286
|
const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
|
|
1286
1287
|
if (variant === "tag") {
|
|
1287
|
-
return /* @__PURE__ */ (0,
|
|
1288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1288
1289
|
Box,
|
|
1289
1290
|
{
|
|
1290
1291
|
onPress: !isCount ? (e) => {
|
|
@@ -1296,7 +1297,7 @@ var useMultiSelectControl = ({
|
|
|
1296
1297
|
opacity: disabled ? 0.5 : 1,
|
|
1297
1298
|
cursor: disabled || isCount ? "not-allowed" : "pointer"
|
|
1298
1299
|
},
|
|
1299
|
-
children: /* @__PURE__ */ (0,
|
|
1300
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
|
|
1300
1301
|
Tag,
|
|
1301
1302
|
{
|
|
1302
1303
|
size,
|
|
@@ -1314,7 +1315,7 @@ var useMultiSelectControl = ({
|
|
|
1314
1315
|
}
|
|
1315
1316
|
const isCountItem = hasHidden;
|
|
1316
1317
|
const needsComma = index < displayedItems.length - 2 || index < displayedItems.length - 1 && !isCountItem;
|
|
1317
|
-
return /* @__PURE__ */ (0,
|
|
1318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(
|
|
1318
1319
|
Text,
|
|
1319
1320
|
{
|
|
1320
1321
|
color: theme.colors.content.primary,
|
|
@@ -1416,7 +1417,7 @@ var useMultiSelectControl = ({
|
|
|
1416
1417
|
};
|
|
1417
1418
|
|
|
1418
1419
|
// src/MultiSelectControl.tsx
|
|
1419
|
-
var
|
|
1420
|
+
var import_jsx_runtime398 = require("react/jsx-runtime");
|
|
1420
1421
|
var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
1421
1422
|
({
|
|
1422
1423
|
variant = "tag",
|
|
@@ -1479,7 +1480,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1479
1480
|
borderColor = inputColors.borderHover;
|
|
1480
1481
|
}
|
|
1481
1482
|
const iconColor = isDisable ? inputColors.textDisable : inputColors.placeholder;
|
|
1482
|
-
return /* @__PURE__ */ (0,
|
|
1483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(
|
|
1483
1484
|
Box,
|
|
1484
1485
|
{
|
|
1485
1486
|
ref,
|
|
@@ -1507,7 +1508,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1507
1508
|
borderColor: inputColors.borderHover
|
|
1508
1509
|
} : void 0,
|
|
1509
1510
|
children: [
|
|
1510
|
-
/* @__PURE__ */ (0,
|
|
1511
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(
|
|
1511
1512
|
Box,
|
|
1512
1513
|
{
|
|
1513
1514
|
ref: containerRef,
|
|
@@ -1517,8 +1518,8 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1517
1518
|
gap: 8,
|
|
1518
1519
|
style: { minWidth: 0 },
|
|
1519
1520
|
children: [
|
|
1520
|
-
iconLeft && /* @__PURE__ */ (0,
|
|
1521
|
-
/* @__PURE__ */ (0,
|
|
1521
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
|
|
1522
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1522
1523
|
Box,
|
|
1523
1524
|
{
|
|
1524
1525
|
ref: itemsRef,
|
|
@@ -1537,8 +1538,8 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1537
1538
|
]
|
|
1538
1539
|
}
|
|
1539
1540
|
),
|
|
1540
|
-
/* @__PURE__ */ (0,
|
|
1541
|
-
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0,
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
|
|
1542
|
+
extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1542
1543
|
Box,
|
|
1543
1544
|
{
|
|
1544
1545
|
onPress: (e) => {
|
|
@@ -1546,17 +1547,17 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
|
|
|
1546
1547
|
removeAllValues();
|
|
1547
1548
|
},
|
|
1548
1549
|
style: { cursor: "pointer" },
|
|
1549
|
-
children: /* @__PURE__ */ (0,
|
|
1550
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
|
|
1550
1551
|
}
|
|
1551
1552
|
),
|
|
1552
|
-
isError && /* @__PURE__ */ (0,
|
|
1553
|
+
isError && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
|
|
1553
1554
|
ExclamationMarkCr,
|
|
1554
1555
|
{
|
|
1555
1556
|
size: 18,
|
|
1556
1557
|
color: theme.colors.content.alert.primary
|
|
1557
1558
|
}
|
|
1558
1559
|
),
|
|
1559
|
-
iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0,
|
|
1560
|
+
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 })
|
|
1560
1561
|
] })
|
|
1561
1562
|
]
|
|
1562
1563
|
}
|
|
@@ -1657,7 +1658,7 @@ var useMultiSelect = ({
|
|
|
1657
1658
|
};
|
|
1658
1659
|
|
|
1659
1660
|
// src/MultiSelect.tsx
|
|
1660
|
-
var
|
|
1661
|
+
var import_jsx_runtime399 = require("react/jsx-runtime");
|
|
1661
1662
|
var MultiSelect = (0, import_react8.forwardRef)(
|
|
1662
1663
|
({
|
|
1663
1664
|
options,
|
|
@@ -1721,8 +1722,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1721
1722
|
const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
|
|
1722
1723
|
onChoose(newValues.map(String));
|
|
1723
1724
|
};
|
|
1724
|
-
return /* @__PURE__ */ (0,
|
|
1725
|
-
label && /* @__PURE__ */ (0,
|
|
1725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
|
|
1726
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1726
1727
|
Text,
|
|
1727
1728
|
{
|
|
1728
1729
|
color: theme.colors.content.secondary,
|
|
@@ -1731,7 +1732,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1731
1732
|
children: label
|
|
1732
1733
|
}
|
|
1733
1734
|
),
|
|
1734
|
-
/* @__PURE__ */ (0,
|
|
1735
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(
|
|
1735
1736
|
Box,
|
|
1736
1737
|
{
|
|
1737
1738
|
ref,
|
|
@@ -1739,7 +1740,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1739
1740
|
position: "relative"
|
|
1740
1741
|
},
|
|
1741
1742
|
children: [
|
|
1742
|
-
/* @__PURE__ */ (0,
|
|
1743
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1743
1744
|
MultiSelectControl,
|
|
1744
1745
|
{
|
|
1745
1746
|
ref: controlRef,
|
|
@@ -1763,8 +1764,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1763
1764
|
extraClear
|
|
1764
1765
|
}
|
|
1765
1766
|
),
|
|
1766
|
-
isOpen && !isDisable && /* @__PURE__ */ (0,
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1767
|
+
isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(import_jsx_runtime399.Fragment, { children: [
|
|
1768
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1768
1769
|
Box,
|
|
1769
1770
|
{
|
|
1770
1771
|
style: {
|
|
@@ -1779,7 +1780,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1779
1780
|
onPress: onClose
|
|
1780
1781
|
}
|
|
1781
1782
|
),
|
|
1782
|
-
/* @__PURE__ */ (0,
|
|
1783
|
+
/* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1783
1784
|
Box,
|
|
1784
1785
|
{
|
|
1785
1786
|
ref: menuRef,
|
|
@@ -1803,7 +1804,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1803
1804
|
children: menuItems.map((item, _index) => {
|
|
1804
1805
|
const brandColors = theme.colors.control.brand.primary;
|
|
1805
1806
|
const contentColors = theme.colors.content;
|
|
1806
|
-
return /* @__PURE__ */ (0,
|
|
1807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1807
1808
|
Box,
|
|
1808
1809
|
{
|
|
1809
1810
|
paddingHorizontal: sizeStyles.paddingHorizontal,
|
|
@@ -1824,7 +1825,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1824
1825
|
cursor: item.disabled ? "not-allowed" : "pointer",
|
|
1825
1826
|
opacity: item.disabled ? 0.5 : 1
|
|
1826
1827
|
},
|
|
1827
|
-
children: /* @__PURE__ */ (0,
|
|
1828
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1828
1829
|
Text,
|
|
1829
1830
|
{
|
|
1830
1831
|
color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
|
|
@@ -1843,7 +1844,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
|
|
|
1843
1844
|
]
|
|
1844
1845
|
}
|
|
1845
1846
|
),
|
|
1846
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
1847
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
|
|
1847
1848
|
Text,
|
|
1848
1849
|
{
|
|
1849
1850
|
color: theme.colors.content.alert.primary,
|