pixelize-design-library 2.1.18 → 2.1.19
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.
|
@@ -58,18 +58,18 @@ var normalizeMultiValue = function (val) {
|
|
|
58
58
|
return [];
|
|
59
59
|
};
|
|
60
60
|
var SearchSelect = function (_a) {
|
|
61
|
-
var _b, _c, _d, _e, _f;
|
|
62
|
-
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch,
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var
|
|
61
|
+
var _b, _c, _d, _e, _f, _g;
|
|
62
|
+
var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _h = _a.isOptionLoading, isOptionLoading = _h === void 0 ? false : _h, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.loadingText, loadingText = _k === void 0 ? 'Loading...' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? 'Select' : _l, value = _a.value, _m = _a.searchQuery, searchQuery = _m === void 0 ? '' : _m, _o = _a.isMultiple, isMultiple = _o === void 0 ? false : _o, _p = _a.isRequired, isRequired = _p === void 0 ? false : _p, _q = _a.error, error = _q === void 0 ? false : _q, errorMessage = _a.errorMessage, helperText = _a.helperText, _r = _a.width, width = _r === void 0 ? '100%' : _r, _s = _a.height, height = _s === void 0 ? "2.75rem" : _s, _t = _a.size, size = _t === void 0 ? 'md' : _t, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _u = _a.isSelectAll, isSelectAll = _u === void 0 ? false : _u, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
|
|
63
|
+
var _v = (0, react_1.useState)(searchQuery), inputValue = _v[0], setInputValue = _v[1];
|
|
64
|
+
var _w = (0, react_1.useState)(false), isOpen = _w[0], setIsOpen = _w[1];
|
|
65
|
+
var _x = (0, react_1.useState)(true), hasMore = _x[0], setHasMore = _x[1];
|
|
66
66
|
var inputRef = (0, react_1.useRef)(null);
|
|
67
67
|
var containerRef = (0, react_1.useRef)(null);
|
|
68
68
|
var scrollTimeoutRef = (0, react_1.useRef)(null);
|
|
69
|
-
var
|
|
70
|
-
var
|
|
69
|
+
var _y = (0, react_1.useState)(false), focused = _y[0], setFocused = _y[1];
|
|
70
|
+
var _z = (0, react_1.useState)(false), customSelectOpen = _z[0], setCustomSelectOpen = _z[1];
|
|
71
71
|
var customSelectRef = (0, react_1.useRef)(null);
|
|
72
|
-
var
|
|
72
|
+
var _0 = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _0[0], setCustomSelectPos = _0[1];
|
|
73
73
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
74
74
|
(0, react_2.useOutsideClick)({
|
|
75
75
|
ref: containerRef,
|
|
@@ -183,13 +183,13 @@ var SearchSelect = function (_a) {
|
|
|
183
183
|
return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
|
|
184
184
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
|
|
185
185
|
react_1.default.createElement(react_2.InputGroup, { size: size },
|
|
186
|
-
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((
|
|
186
|
+
react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : focused ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.error) : "0 0 0 0.125rem ".concat((_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
|
|
187
187
|
insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-0.75rem", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
|
|
188
188
|
react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: height, pl: "0.5rem", pr: "0.5rem" },
|
|
189
|
-
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (
|
|
189
|
+
react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_f = (_e = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
|
|
190
190
|
customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
|
|
191
191
|
customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
|
|
192
|
-
react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (
|
|
192
|
+
react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_g = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _g === void 0 ? void 0 : _g.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) {
|
|
193
193
|
e.stopPropagation();
|
|
194
194
|
handleCustomSelect(item);
|
|
195
195
|
} }, item.label)); })))))),
|