pixelize-design-library 2.0.17 → 2.0.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.
Files changed (3) hide show
  1. package/dist/Components/SearchSelect/SearchSelect.js +29 -12
  2. package/dist/Pages/searchSelect.js +9 -5
  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;
@@ -61,14 +73,14 @@ var SearchSelect = function (_a) {
61
73
  var theme = (0, useCustomTheme_1.useCustomTheme)();
62
74
  (0, react_2.useOutsideClick)({
63
75
  ref: containerRef,
64
- handler: function () { setIsOpen(false); setCustomSelectOpen(false); },
76
+ handler: function () {
77
+ setIsOpen(false);
78
+ },
65
79
  });
66
80
  var selectedValues = isMultiple
67
- ? Array.isArray(value)
68
- ? value
69
- : []
70
- : value
71
- ? [value]
81
+ ? normalizeMultiValue(value)
82
+ : normalizeSingleValue(value)
83
+ ? [normalizeSingleValue(value)]
72
84
  : [];
73
85
  var filteredOptions = options.filter(function (option) {
74
86
  return option.label.toLowerCase().includes(inputValue.toLowerCase());
@@ -145,10 +157,15 @@ var SearchSelect = function (_a) {
145
157
  }, 200);
146
158
  }
147
159
  }, [pagination, options.length, inputValue, hasMore]);
148
- // useOutsideClick({
149
- // ref: customSelectRef,
150
- // handler: () => setCustomSelectOpen(false),
151
- // });
160
+ (0, react_2.useOutsideClick)({
161
+ ref: customSelectRef,
162
+ handler: function (e) {
163
+ var dropdown = document.getElementById('custom-select-portal');
164
+ if (dropdown && dropdown.contains(e.target))
165
+ return;
166
+ setCustomSelectOpen(false);
167
+ },
168
+ });
152
169
  var handleCustomSelect = function (item) {
153
170
  if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
154
171
  insideSelect.onSelect(item);
@@ -165,7 +182,7 @@ var SearchSelect = function (_a) {
165
182
  });
166
183
  }
167
184
  }, [customSelectOpen]);
168
- 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" },
169
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 })),
170
187
  react_1.default.createElement(react_2.InputGroup, { size: size },
171
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" },
@@ -174,7 +191,7 @@ var SearchSelect = function (_a) {
174
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" }),
175
192
  customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
176
193
  customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
177
- react_1.default.createElement(react_2.Box, { 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" // height instead of vertical padding
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" // height instead of vertical padding
178
195
  , px: "0.75rem" // light internal spacing
179
196
  , fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
180
197
  e.stopPropagation();
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: {
@@ -158,15 +162,15 @@ var SearchSelect = function () {
158
162
  "label": "Hariharan Jeganathan",
159
163
  },
160
164
  {
161
- "id": 1,
165
+ "id": 5,
162
166
  "label": "Karuppusamy S",
163
167
  },
164
168
  {
165
- "id": 2,
169
+ "id": 6,
166
170
  "label": "SasiKumar M",
167
171
  },
168
172
  {
169
- "id": 4,
173
+ "id": 7,
170
174
  "label": "Hariharan Jeganathan",
171
175
  }
172
176
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.17",
3
+ "version": "2.0.19",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",