pixelize-design-library 2.0.18 → 2.0.20

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.
Files changed (3) hide show
  1. package/dist/Components/SearchSelect/SearchSelect.js +20 -11
  2. package/dist/Pages/searchSelect.js +6 -2
  3. package/package.json +1 -1
package/dist/Components/SearchSelect/SearchSelect.js CHANGED
@@ -45,6 +45,18 @@ var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
45
45
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
46
46
  var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
47
47
  var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
48
+ var normalizeSingleValue = function (val) {
49
+ if (typeof val === 'object' && val !== null && 'id' in val && 'label' in val) {
50
+ return val;
51
+ }
52
+ return undefined;
53
+ };
54
+ var normalizeMultiValue = function (val) {
55
+ if (Array.isArray(val)) {
56
+ return val.filter(function (v) { return v && typeof v === 'object' && 'id' in v && 'label' in v; });
57
+ }
58
+ return [];
59
+ };
48
60
  var SearchSelect = function (_a) {
49
61
  var _b, _c, _d, _e, _f;
50
62
  var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? 'Loading...' : _j, _k = _a.placeholder, placeholder = _k === void 0 ? 'Select' : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? '' : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? '100%' : _q, _r = _a.height, height = _r === void 0 ? "2.75rem" : _r, _s = _a.size, size = _s === void 0 ? 'md' : _s, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _t = _a.isSelectAll, isSelectAll = _t === void 0 ? false : _t, pagination = _a.pagination, insideSelect = _a.insideSelect;
@@ -66,11 +78,9 @@ var SearchSelect = function (_a) {
66
78
  },
67
79
  });
68
80
  var selectedValues = isMultiple
69
- ? Array.isArray(value)
70
- ? value
71
- : []
72
- : value
73
- ? [value]
81
+ ? normalizeMultiValue(value)
82
+ : normalizeSingleValue(value)
83
+ ? [normalizeSingleValue(value)]
74
84
  : [];
75
85
  var filteredOptions = options.filter(function (option) {
76
86
  return option.label.toLowerCase().includes(inputValue.toLowerCase());
@@ -147,10 +157,6 @@ var SearchSelect = function (_a) {
147
157
  }, 200);
148
158
  }
149
159
  }, [pagination, options.length, inputValue, hasMore]);
150
- // useOutsideClick({
151
- // ref: customSelectRef,
152
- // handler: () => setCustomSelectOpen(false),
153
- // });
154
160
  (0, react_2.useOutsideClick)({
155
161
  ref: customSelectRef,
156
162
  handler: function (e) {
@@ -176,7 +182,7 @@ var SearchSelect = function (_a) {
176
182
  });
177
183
  }
178
184
  }, [customSelectOpen]);
179
- return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative", height: height },
185
+ return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
180
186
  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 })),
181
187
  react_1.default.createElement(react_2.InputGroup, { size: size },
182
188
  react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.375rem", 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((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
@@ -212,7 +218,10 @@ var SearchSelect = function (_a) {
212
218
  _active: { bg: 'transparent' },
213
219
  _focus: { boxShadow: 'none', bg: 'transparent' },
214
220
  } }))),
215
- 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 () { return setIsOpen(function (prev) { return !prev; }); }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))))),
221
+ 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
+ e.stopPropagation();
223
+ setIsOpen(function (prev) { return !prev; });
224
+ }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))))),
216
225
  isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: "white", boxShadow: "md", display: "flex", flexDirection: "column" },
217
226
  isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { p: 2, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
218
227
  react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
package/dist/Pages/searchSelect.js CHANGED
@@ -83,13 +83,17 @@ var rrr = function (start, limit) {
83
83
  };
84
84
  var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
85
85
  var SearchSelect = function () {
86
- var _a = (0, react_1.useState)([{ id: "300", label: "mahesh" }]), selectedOptions = _a[0], setselectedOptions = _a[1];
86
+ var _a = (0, react_1.useState)({}), selectedOptions = _a[0], setselectedOptions = _a[1];
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
90
  var _e = (0, react_1.useState)({ id: "3", label: "Hariharan J" }), customSelectValue = _e[0], setCustomSelectValue = _e[1];
91
91
  return (react_1.default.createElement("div", null,
92
- react_1.default.createElement(SearchSelect_1.default, { width: "250px", label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
92
+ react_1.default.createElement(SearchSelect_1.default
93
+ // width={"250px"}
94
+ , {
95
+ // width={"250px"}
96
+ label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
93
97
  console.log("val", val);
94
98
  setselectedOptions(val);
95
99
  }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.18",
3
+ "version": "2.0.20",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",