pixelize-design-library 2.0.16 → 2.0.18

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 (6) hide show
  1. package/dist/Components/SearchSelect/SearchSelect.d.ts +1 -1
  2. package/dist/Components/SearchSelect/SearchSelect.js +27 -14
  3. package/dist/Components/SearchSelect/SearchSelectProps.d.ts +1 -0
  4. package/dist/Components/SearchSelect/SelectTruncatedLabel.js +1 -1
  5. package/dist/Pages/searchSelect.js +13 -5
  6. package/package.json +1 -1
package/dist/Components/SearchSelect/SearchSelect.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { SearchSelectProps } from './SearchSelectProps';
3
- declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect }: SearchSelectProps) => React.JSX.Element;
3
+ declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect }: SearchSelectProps) => React.JSX.Element;
4
4
  export default SearchSelect;
package/dist/Components/SearchSelect/SearchSelect.js CHANGED
@@ -47,21 +47,23 @@ var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
47
47
  var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
48
48
  var SearchSelect = function (_a) {
49
49
  var _b, _c, _d, _e, _f;
50
- 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.size, size = _r === void 0 ? 'md' : _r, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _s = _a.isSelectAll, isSelectAll = _s === void 0 ? false : _s, pagination = _a.pagination, insideSelect = _a.insideSelect;
51
- var _t = (0, react_1.useState)(searchQuery), inputValue = _t[0], setInputValue = _t[1];
52
- var _u = (0, react_1.useState)(false), isOpen = _u[0], setIsOpen = _u[1];
53
- var _v = (0, react_1.useState)(true), hasMore = _v[0], setHasMore = _v[1];
50
+ 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;
51
+ var _u = (0, react_1.useState)(searchQuery), inputValue = _u[0], setInputValue = _u[1];
52
+ var _v = (0, react_1.useState)(false), isOpen = _v[0], setIsOpen = _v[1];
53
+ var _w = (0, react_1.useState)(true), hasMore = _w[0], setHasMore = _w[1];
54
54
  var inputRef = (0, react_1.useRef)(null);
55
55
  var containerRef = (0, react_1.useRef)(null);
56
56
  var scrollTimeoutRef = (0, react_1.useRef)(null);
57
- var _w = (0, react_1.useState)(false), focused = _w[0], setFocused = _w[1];
58
- var _x = (0, react_1.useState)(false), customSelectOpen = _x[0], setCustomSelectOpen = _x[1];
57
+ var _x = (0, react_1.useState)(false), focused = _x[0], setFocused = _x[1];
58
+ var _y = (0, react_1.useState)(false), customSelectOpen = _y[0], setCustomSelectOpen = _y[1];
59
59
  var customSelectRef = (0, react_1.useRef)(null);
60
- var _y = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _y[0], setCustomSelectPos = _y[1];
60
+ var _z = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _z[0], setCustomSelectPos = _z[1];
61
61
  var theme = (0, useCustomTheme_1.useCustomTheme)();
62
62
  (0, react_2.useOutsideClick)({
63
63
  ref: containerRef,
64
- handler: function () { return setIsOpen(false); },
64
+ handler: function () {
65
+ setIsOpen(false);
66
+ },
65
67
  });
66
68
  var selectedValues = isMultiple
67
69
  ? Array.isArray(value)
@@ -149,6 +151,15 @@ var SearchSelect = function (_a) {
149
151
  // ref: customSelectRef,
150
152
  // handler: () => setCustomSelectOpen(false),
151
153
  // });
154
+ (0, react_2.useOutsideClick)({
155
+ ref: customSelectRef,
156
+ handler: function (e) {
157
+ var dropdown = document.getElementById('custom-select-portal');
158
+ if (dropdown && dropdown.contains(e.target))
159
+ return;
160
+ setCustomSelectOpen(false);
161
+ },
162
+ });
152
163
  var handleCustomSelect = function (item) {
153
164
  if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
154
165
  insideSelect.onSelect(item);
@@ -165,17 +176,19 @@ var SearchSelect = function (_a) {
165
176
  });
166
177
  }
167
178
  }, [customSelectOpen]);
168
- return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
179
+ return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative", height: height },
169
180
  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
181
  react_1.default.createElement(react_2.InputGroup, { size: size },
171
182
  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" },
172
- insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", px: 2, py: 2.5, ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-12px", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
173
- react_1.default.createElement(react_2.Box, { minW: "5rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width },
183
+ 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; }); } },
184
+ 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" },
174
185
  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
186
  customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
176
187
  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: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", minW: "10rem", maxWidth: "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, px: 3, py: 2, fontSize: "sm", _hover: { bg: 'gray.100' }, cursor: "pointer", onClick: function (e) {
178
- e.stopPropagation(); // 👈 Prevent outside click from triggering
188
+ 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
189
+ , px: "0.75rem" // light internal spacing
190
+ , fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
191
+ e.stopPropagation();
179
192
  handleCustomSelect(item);
180
193
  } }, item.label)); })))))),
181
194
  isMultiple
@@ -199,7 +212,7 @@ var SearchSelect = function (_a) {
199
212
  _active: { bg: 'transparent' },
200
213
  _focus: { boxShadow: 'none', bg: 'transparent' },
201
214
  } }))),
202
- 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: 18 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 18 })))))),
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 })))))),
203
216
  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" },
204
217
  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]) },
205
218
  react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
package/dist/Components/SearchSelect/SearchSelectProps.d.ts CHANGED
@@ -17,6 +17,7 @@ export type SearchSelectProps = {
17
17
  errorMessage?: string;
18
18
  helperText?: string;
19
19
  width?: string | number;
20
+ height?: string | number;
20
21
  size?: "xs" | "sm" | "md" | "lg";
21
22
  chip?: {
22
23
  maxChips?: number;
package/dist/Components/SearchSelect/SelectTruncatedLabel.js CHANGED
@@ -39,7 +39,7 @@ var SelectTruncatedLabel = function (_a) {
39
39
  setIsOverflowing(el.scrollWidth > el.clientWidth);
40
40
  }
41
41
  }, [label, maxWidth]);
42
- var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap" }, label));
42
+ var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap", fontWeight: 500, fontSize: "0.875rem", letterSpacing: "0.044rem" }, label));
43
43
  return isOverflowing ? react_2.default.createElement(ToolTip_1.default, { label: label, placement: "top" }, textElement) : textElement;
44
44
  };
45
45
  exports.default = SelectTruncatedLabel;
package/dist/Pages/searchSelect.js CHANGED
@@ -89,11 +89,7 @@ var SearchSelect = function () {
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
93
- // width={"200px"}
94
- , {
95
- // width={"200px"}
96
- label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
92
+ react_1.default.createElement(SearchSelect_1.default, { width: "250px", label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
97
93
  console.log("val", val);
98
94
  setselectedOptions(val);
99
95
  }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
@@ -160,6 +156,18 @@ var SearchSelect = function () {
160
156
  {
161
157
  "id": 4,
162
158
  "label": "Hariharan Jeganathan",
159
+ },
160
+ {
161
+ "id": 5,
162
+ "label": "Karuppusamy S",
163
+ },
164
+ {
165
+ "id": 6,
166
+ "label": "SasiKumar M",
167
+ },
168
+ {
169
+ "id": 7,
170
+ "label": "Hariharan Jeganathan",
163
171
  }
164
172
  ]
165
173
  } })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.16",
3
+ "version": "2.0.18",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",