pixelize-design-library 2.0.21 → 2.0.22
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.
|
@@ -191,9 +191,7 @@ var SearchSelect = function (_a) {
|
|
|
191
191
|
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_e = (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
|
|
192
192
|
customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
|
|
193
193
|
customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
194
|
-
react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem"
|
|
195
|
-
, px: "0.75rem" // light internal spacing
|
|
196
|
-
, fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
|
|
194
|
+
react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
|
|
197
195
|
e.stopPropagation();
|
|
198
196
|
handleCustomSelect(item);
|
|
199
197
|
} }, item.label)); })))))),
|
|
@@ -202,7 +200,7 @@ var SearchSelect = function (_a) {
|
|
|
202
200
|
? item.label.slice(0, chip.maxText) + '…'
|
|
203
201
|
: item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
|
|
204
202
|
: selectedValues.length === 1 &&
|
|
205
|
-
inputValue === '' && (react_1.default.createElement(react_2.
|
|
203
|
+
inputValue === '' && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
|
|
206
204
|
(chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
|
|
207
205
|
isMultiple &&
|
|
208
206
|
selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
|
|
@@ -219,7 +217,6 @@ var SearchSelect = function (_a) {
|
|
|
219
217
|
_focus: { boxShadow: 'none', bg: 'transparent' },
|
|
220
218
|
} }))),
|
|
221
219
|
isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "sm" })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: "sm", onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
|
|
222
|
-
console.log('Toggle clicked');
|
|
223
220
|
e.preventDefault();
|
|
224
221
|
e.stopPropagation();
|
|
225
222
|
setIsOpen(function (prev) { return !prev; });
|
|
@@ -87,13 +87,15 @@ var SearchSelect = function () {
|
|
|
87
87
|
var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
|
|
88
88
|
var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
|
|
89
89
|
var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
|
|
90
|
-
var _e = (0, react_1.useState)({
|
|
90
|
+
var _e = (0, react_1.useState)({}), customSelectValue = _e[0], setCustomSelectValue = _e[1];
|
|
91
91
|
return (react_1.default.createElement("div", null,
|
|
92
92
|
react_1.default.createElement(SearchSelect_1.default
|
|
93
93
|
// width={"250px"}
|
|
94
94
|
, {
|
|
95
95
|
// width={"250px"}
|
|
96
|
-
label: "Users", id: "user-select", options: soptions, value: selectedOptions,
|
|
96
|
+
label: "Users", id: "user-select", options: soptions, value: selectedOptions,
|
|
97
|
+
// isMultiple
|
|
98
|
+
onSelect: function (val) {
|
|
97
99
|
console.log("val", val);
|
|
98
100
|
setselectedOptions(val);
|
|
99
101
|
}, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
|