pixelize-design-library 2.0.16 → 2.0.17

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 +16 -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,21 @@ 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 () { setIsOpen(false); setCustomSelectOpen(false); },
65
65
  });
66
66
  var selectedValues = isMultiple
67
67
  ? Array.isArray(value)
@@ -165,17 +165,19 @@ var SearchSelect = function (_a) {
165
165
  });
166
166
  }
167
167
  }, [customSelectOpen]);
168
- return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
168
+ return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative", height: height },
169
169
  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
170
  react_1.default.createElement(react_2.InputGroup, { size: size },
171
171
  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 },
172
+ 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; }); } },
173
+ 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
174
  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
175
  customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
176
176
  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
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
178
+ , px: "0.75rem" // light internal spacing
179
+ , fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
180
+ e.stopPropagation();
179
181
  handleCustomSelect(item);
180
182
  } }, item.label)); })))))),
181
183
  isMultiple
@@ -199,7 +201,7 @@ var SearchSelect = function (_a) {
199
201
  _active: { bg: 'transparent' },
200
202
  _focus: { boxShadow: 'none', bg: 'transparent' },
201
203
  } }))),
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 })))))),
204
+ 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
205
  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
206
  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
207
  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: {
@@ -157,6 +153,18 @@ var SearchSelect = function () {
157
153
  "id": 2,
158
154
  "label": "SasiKumar M",
159
155
  },
156
+ {
157
+ "id": 4,
158
+ "label": "Hariharan Jeganathan",
159
+ },
160
+ {
161
+ "id": 1,
162
+ "label": "Karuppusamy S",
163
+ },
164
+ {
165
+ "id": 2,
166
+ "label": "SasiKumar M",
167
+ },
160
168
  {
161
169
  "id": 4,
162
170
  "label": "Hariharan Jeganathan",
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.17",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",