pixelize-design-library 2.0.14 → 2.0.15

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.
@@ -45,17 +45,16 @@ 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 SearchSelect = function (_a) {
48
- var _b, _c, _d;
49
- var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _e = _a.isOptionLoading, isOptionLoading = _e === void 0 ? false : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.loadingText, loadingText = _g === void 0 ? 'Loading...' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? 'Select' : _h, value = _a.value, _j = _a.searchQuery, searchQuery = _j === void 0 ? '' : _j, _k = _a.isMultiple, isMultiple = _k === void 0 ? false : _k, _l = _a.isRequired, isRequired = _l === void 0 ? false : _l, _m = _a.error, error = _m === void 0 ? false : _m, errorMessage = _a.errorMessage, helperText = _a.helperText, _o = _a.width, width = _o === void 0 ? '100%' : _o, _p = _a.size, size = _p === void 0 ? 'md' : _p, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _q = _a.isSelectAll, isSelectAll = _q === void 0 ? false : _q, pagination = _a.pagination, insideSelect = _a.insideSelect;
50
- var _r = (0, react_1.useState)(searchQuery), inputValue = _r[0], setInputValue = _r[1];
51
- var _s = (0, react_1.useState)(false), isOpen = _s[0], setIsOpen = _s[1];
52
- var _t = (0, react_1.useState)(true), hasMore = _t[0], setHasMore = _t[1];
48
+ var _b, _c, _d, _e;
49
+ var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _f = _a.isOptionLoading, isOptionLoading = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.loadingText, loadingText = _h === void 0 ? 'Loading...' : _h, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select' : _j, value = _a.value, _k = _a.searchQuery, searchQuery = _k === void 0 ? '' : _k, _l = _a.isMultiple, isMultiple = _l === void 0 ? false : _l, _m = _a.isRequired, isRequired = _m === void 0 ? false : _m, _o = _a.error, error = _o === void 0 ? false : _o, errorMessage = _a.errorMessage, helperText = _a.helperText, _p = _a.width, width = _p === void 0 ? '100%' : _p, _q = _a.size, size = _q === void 0 ? 'md' : _q, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _r = _a.isSelectAll, isSelectAll = _r === void 0 ? false : _r, pagination = _a.pagination, insideSelect = _a.insideSelect;
50
+ var _s = (0, react_1.useState)(searchQuery), inputValue = _s[0], setInputValue = _s[1];
51
+ var _t = (0, react_1.useState)(false), isOpen = _t[0], setIsOpen = _t[1];
52
+ var _u = (0, react_1.useState)(true), hasMore = _u[0], setHasMore = _u[1];
53
53
  var inputRef = (0, react_1.useRef)(null);
54
54
  var containerRef = (0, react_1.useRef)(null);
55
55
  var scrollTimeoutRef = (0, react_1.useRef)(null);
56
- var _u = (0, react_1.useState)(false), focused = _u[0], setFocused = _u[1];
57
- var _v = (0, react_1.useState)(false), customSelectOpen = _v[0], setCustomSelectOpen = _v[1];
58
- // const [customSelectValue, setCustomSelectValue] = useState<string>('Select');
56
+ var _v = (0, react_1.useState)(false), focused = _v[0], setFocused = _v[1];
57
+ var _w = (0, react_1.useState)(false), customSelectOpen = _w[0], setCustomSelectOpen = _w[1];
59
58
  var customSelectRef = (0, react_1.useRef)(null);
60
59
  var theme = (0, useCustomTheme_1.useCustomTheme)();
61
60
  (0, react_2.useOutsideClick)({
@@ -160,9 +159,9 @@ var SearchSelect = function (_a) {
160
159
  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" },
161
160
  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; }); } },
162
161
  react_1.default.createElement(react_2.Box, { minW: "8rem", fontSize: "sm", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", maxW: 100 },
163
- react_1.default.createElement(react_2.Text, { maxW: "6rem", isTruncated: true, whiteSpace: "nowrap" }, insideSelect.value),
162
+ react_1.default.createElement(react_2.Text, { maxW: "6rem", isTruncated: true, whiteSpace: "nowrap" }, (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label),
164
163
  customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
165
- customSelectOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "100%", mt: "0.25rem", zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", width: "100%" }, (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _d === void 0 ? void 0 : _d.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 () { return handleCustomSelect(item); } }, item.label)); }))))),
164
+ customSelectOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "100%", mt: "0.25rem", zIndex: 20, bg: "white", border: "1px solid", borderColor: "gray.300", borderRadius: "md", boxShadow: "md", width: "100%" }, (_e = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _e === void 0 ? void 0 : _e.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 () { return handleCustomSelect(item); } }, item.label)); }))))),
166
165
  isMultiple
167
166
  ? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
168
167
  ? item.label.slice(0, chip.maxText) + '…'
@@ -47,7 +47,7 @@ export type SearchSelectProps = {
47
47
  virtualization?: boolean;
48
48
  insideSelect?: {
49
49
  onSelect?: (options: Options) => void;
50
- value?: string;
50
+ value?: Options;
51
51
  option?: Options[];
52
52
  };
53
53
  };
@@ -87,7 +87,7 @@ var SearchSelect = function () {
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
- var _e = (0, react_1.useState)('Select'), customSelectValue = _e[0], setCustomSelectValue = _e[1];
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
92
  react_1.default.createElement(SearchSelect_1.default, { label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
93
93
  console.log("val", val);
@@ -137,7 +137,7 @@ var SearchSelect = function () {
137
137
  // error={true}
138
138
  // errorMessage="hello"
139
139
  virtualization: true, insideSelect: {
140
- onSelect: function (val) { return setCustomSelectValue(val.label); },
140
+ onSelect: function (val) { return setCustomSelectValue(val); },
141
141
  value: customSelectValue,
142
142
  option: [
143
143
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.14",
3
+ "version": "2.0.15",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",