pixelize-design-library 2.0.12 → 2.0.14

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 (16) hide show
  1. package/README.md +1 -1
  2. package/dist/Components/DatePicker/DatePicker.js +14 -4
  3. package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
  4. package/dist/Components/KanbanBoard/KanbanBoard.js +20 -13
  5. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +1 -0
  6. package/dist/Components/SearchSelect/SearchSelect.d.ts +4 -0
  7. package/dist/Components/SearchSelect/SearchSelect.js +203 -0
  8. package/dist/Components/SearchSelect/SearchSelectProps.d.ts +60 -0
  9. package/dist/Components/SearchSelect/SearchSelectProps.js +2 -0
  10. package/dist/Layout.js +8 -4
  11. package/dist/Pages/kanbanboard.js +1 -1
  12. package/dist/Pages/searchSelect.d.ts +3 -0
  13. package/dist/Pages/searchSelect.js +162 -0
  14. package/dist/index.d.ts +2 -1
  15. package/dist/index.js +4 -2
  16. package/package.json +4 -2
package/README.md CHANGED
@@ -51,7 +51,7 @@ PixelizeDesign Library Components Are Below
51
51
  - RadioButtonGroup,
52
52
  - Search,
53
53
  - Select,
54
- - SelectSearch,
54
+ - SearchSelect,
55
55
  - SideBar,
56
56
  - Skeletons,
57
57
  - Switch,
package/dist/Components/DatePicker/DatePicker.js CHANGED
@@ -65,7 +65,7 @@ function CustomDatePicker(props) {
65
65
  var popoverRef = (0, react_1.useRef)(null);
66
66
  var handleOpen = function () {
67
67
  if (!isRange && !selectedDate) {
68
- setTempDate(null);
68
+ setTempDate(new Date());
69
69
  }
70
70
  onOpen();
71
71
  };
@@ -186,16 +186,26 @@ function CustomDatePicker(props) {
186
186
  react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
187
187
  react_1.default.createElement(react_2.PopoverBody, null,
188
188
  showDate && (react_1.default.createElement(react_1.default.Fragment, null,
189
- react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mb: 2 },
189
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
190
190
  react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
191
191
  react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
192
- react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, (0, date_fns_1.format)(currentMonth, "MMMM yyyy")),
192
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
193
+ react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
194
+ var newMonth = parseInt(e.target.value, 10);
195
+ setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
196
+ } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
197
+ react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
198
+ var newYear = parseInt(e.target.value, 10);
199
+ setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
200
+ } }, Array.from({ length: 100 }).map(function (_, i) {
201
+ var year = new Date().getFullYear() - 50 + i;
202
+ return (react_1.default.createElement("option", { key: year, value: year }, year));
203
+ }))),
193
204
  react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
194
205
  react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
195
206
  react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
196
207
  renderDays())),
197
208
  !isRange && showTime && (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date(), dateFormat: dateFormat, onChange: function (updatedDate) {
198
- console.log("onChange", updatedDate);
199
209
  setTempDate(updatedDate);
200
210
  props.onChange(updatedDate);
201
211
  } })),
package/dist/Components/KanbanBoard/KanbanBoard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { KanbanBoardProps } from "./KanbanBoardProps";
3
- declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete }: KanbanBoardProps) => React.JSX.Element;
3
+ declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, }: KanbanBoardProps) => React.JSX.Element;
4
4
  export default KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -53,10 +53,10 @@ var lucide_react_1 = require("lucide-react");
53
53
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
54
54
  var AccountCard_1 = __importDefault(require("./AccountCard"));
55
55
  var KanbanBoard = function (_a) {
56
- var _b;
57
- var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete;
56
+ var _b, _c, _d;
57
+ var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e;
58
58
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
59
- var _c = (0, react_1.useState)(data), columns = _c[0], setColumns = _c[1];
59
+ var _f = (0, react_1.useState)(data), columns = _f[0], setColumns = _f[1];
60
60
  var onDragEnd = function (result) {
61
61
  var _a, _b;
62
62
  var source = result.source, destination = result.destination;
@@ -89,25 +89,32 @@ var KanbanBoard = function (_a) {
89
89
  }
90
90
  };
91
91
  var handleColumnDelete = function (colId) {
92
- var _a;
93
- var columnIds = ((_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items.map(function (item) { return item.id; })) || [];
92
+ var _a, _b;
93
+ var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
94
94
  onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
95
95
  };
96
96
  return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
97
- react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, Object.entries(columns).map(function (_a) {
97
+ react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
98
+ var _a, _b;
99
+ return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
100
+ react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
101
+ react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
102
+ })) : ((_d = Object.entries(columns)) === null || _d === void 0 ? void 0 : _d.map(function (_a) {
98
103
  var colId = _a[0], column = _a[1];
99
104
  return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
100
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
105
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
101
106
  return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
102
107
  ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
103
- : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500]) : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column" }),
104
- react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, display: "flex", justifyContent: "space-between" },
105
- react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", lineHeight: "100%", letterSpacing: "0%", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
108
+ : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
109
+ ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
110
+ : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0 }),
111
+ react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, justifyContent: "space-between" },
112
+ react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
106
113
  react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
107
- react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" },
108
- column.items.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
114
+ react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" }, (_l = column.items) === null || _l === void 0 ? void 0 :
115
+ _l.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
109
116
  provided.placeholder)));
110
117
  }));
111
- }))));
118
+ })))));
112
119
  };
113
120
  exports.default = KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -23,4 +23,5 @@ export type KanbanBoardProps = {
23
23
  to: string;
24
24
  item: Account;
25
25
  }) => void;
26
+ isLoading?: boolean;
26
27
  };
package/dist/Components/SearchSelect/SearchSelect.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
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;
4
+ export default SearchSelect;
package/dist/Components/SearchSelect/SearchSelect.js ADDED
@@ -0,0 +1,203 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
26
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
27
+ if (ar || !(i in from)) {
28
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
29
+ ar[i] = from[i];
30
+ }
31
+ }
32
+ return to.concat(ar || Array.prototype.slice.call(from));
33
+ };
34
+ var __importDefault = (this && this.__importDefault) || function (mod) {
35
+ return (mod && mod.__esModule) ? mod : { "default": mod };
36
+ };
37
+ Object.defineProperty(exports, "__esModule", { value: true });
38
+ var react_1 = __importStar(require("react"));
39
+ var react_2 = require("@chakra-ui/react");
40
+ var lucide_react_1 = require("lucide-react");
41
+ var FormLabel_1 = require("../Common/FormLabel");
42
+ var Tag_1 = __importDefault(require("../Tag/Tag"));
43
+ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
44
+ var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
45
+ var HelperText_1 = __importDefault(require("../Common/HelperText"));
46
+ var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
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];
53
+ var inputRef = (0, react_1.useRef)(null);
54
+ var containerRef = (0, react_1.useRef)(null);
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');
59
+ var customSelectRef = (0, react_1.useRef)(null);
60
+ var theme = (0, useCustomTheme_1.useCustomTheme)();
61
+ (0, react_2.useOutsideClick)({
62
+ ref: containerRef,
63
+ handler: function () { return setIsOpen(false); },
64
+ });
65
+ var selectedValues = isMultiple
66
+ ? Array.isArray(value)
67
+ ? value
68
+ : []
69
+ : value
70
+ ? [value]
71
+ : [];
72
+ var filteredOptions = options.filter(function (option) {
73
+ return option.label.toLowerCase().includes(inputValue.toLowerCase());
74
+ });
75
+ (0, react_1.useEffect)(function () {
76
+ var delayDebounce = setTimeout(function () {
77
+ onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
78
+ }, 1000);
79
+ return function () { return clearTimeout(delayDebounce); };
80
+ }, [inputValue, onSearch]);
81
+ (0, react_1.useEffect)(function () {
82
+ if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
83
+ setHasMore(options.length % pagination.limit === 0);
84
+ }
85
+ }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.limit]);
86
+ var handleSelect = function (option) {
87
+ if (isMultiple) {
88
+ var exists = selectedValues.find(function (v) { return v.id === option.id; });
89
+ var updated = exists
90
+ ? selectedValues.filter(function (v) { return v.id !== option.id; })
91
+ : __spreadArray(__spreadArray([], selectedValues, true), [option], false);
92
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
93
+ }
94
+ else {
95
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
96
+ setIsOpen(false);
97
+ }
98
+ setInputValue('');
99
+ };
100
+ var handleRemove = function (id) {
101
+ var updated = selectedValues.filter(function (v) { return v.id !== id; });
102
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
103
+ };
104
+ var handleClearAll = function () {
105
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
106
+ setInputValue('');
107
+ };
108
+ var handleSelectAll = function () {
109
+ var allSelected = filteredOptions.every(function (opt) {
110
+ return selectedValues.some(function (sel) { return sel.id === opt.id; });
111
+ });
112
+ if (allSelected) {
113
+ var updated = selectedValues.filter(function (sel) { return !filteredOptions.some(function (opt) { return opt.id === sel.id; }); });
114
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
115
+ }
116
+ else {
117
+ var filteredNotSelected = filteredOptions.filter(function (opt) { return !selectedValues.some(function (sel) { return sel.id === opt.id; }); });
118
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(__spreadArray(__spreadArray([], selectedValues, true), filteredNotSelected, true));
119
+ }
120
+ setInputValue('');
121
+ };
122
+ var isSelected = function (id) {
123
+ return selectedValues.some(function (v) { return v.id === id; });
124
+ };
125
+ var isValidIcon = function (icon) {
126
+ return react_1.default.isValidElement(icon);
127
+ };
128
+ var allFilteredSelected = filteredOptions.length > 0 &&
129
+ filteredOptions.every(function (opt) {
130
+ return selectedValues.some(function (sel) { return sel.id === opt.id; });
131
+ });
132
+ var handleScroll = (0, react_1.useCallback)(function (e) {
133
+ if (!pagination || !pagination.onScroll || pagination.scrollLoading || !hasMore)
134
+ return;
135
+ var target = e.currentTarget;
136
+ var nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
137
+ if (nearBottom) {
138
+ if (scrollTimeoutRef.current)
139
+ clearTimeout(scrollTimeoutRef.current);
140
+ scrollTimeoutRef.current = setTimeout(function () {
141
+ var _a;
142
+ var startIndex = options.length + 1;
143
+ (_a = pagination.onScroll) === null || _a === void 0 ? void 0 : _a.call(pagination, startIndex, pagination.limit || 10, inputValue);
144
+ }, 200);
145
+ }
146
+ }, [pagination, options.length, inputValue, hasMore]);
147
+ (0, react_2.useOutsideClick)({
148
+ ref: customSelectRef,
149
+ handler: function () { return setCustomSelectOpen(false); },
150
+ });
151
+ var handleCustomSelect = (0, react_1.useCallback)(function (item) {
152
+ setCustomSelectOpen(false);
153
+ if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
154
+ insideSelect.onSelect(item);
155
+ }
156
+ }, [insideSelect]);
157
+ return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
158
+ 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 })),
159
+ react_1.default.createElement(react_2.InputGroup, { size: size },
160
+ 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
+ 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
+ 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),
164
+ 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)); }))))),
166
+ isMultiple
167
+ ? 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
+ ? item.label.slice(0, chip.maxText) + '…'
169
+ : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
170
+ : selectedValues.length === 1 &&
171
+ inputValue === '' && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] }, selectedValues[0].label)),
172
+ (chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
173
+ isMultiple &&
174
+ selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
175
+ (!selectedValues.length || isMultiple || inputValue) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
176
+ setFocused(true);
177
+ setIsOpen(true);
178
+ }, onBlur: function () { return setFocused(false); }, placeholder: placeholder })),
179
+ react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
180
+ selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
181
+ react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
182
+ bg: 'transparent',
183
+ _hover: { bg: 'transparent' },
184
+ _active: { bg: 'transparent' },
185
+ _focus: { boxShadow: 'none', bg: 'transparent' },
186
+ } }))),
187
+ 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 })))))),
188
+ 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" },
189
+ 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]) },
190
+ react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
191
+ react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ? 'Unselect All' : 'Select All'))),
192
+ react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { p: 3, display: "flex", alignItems: "center", gap: 2 },
193
+ react_1.default.createElement(react_2.Spinner, { size: "sm" }),
194
+ react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : 'transparent', _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
195
+ isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
196
+ react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
197
+ (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: "white", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
198
+ addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
199
+ react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || 'Add New'))))),
200
+ helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
201
+ error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
202
+ };
203
+ exports.default = SearchSelect;
package/dist/Components/SearchSelect/SearchSelectProps.d.ts ADDED
@@ -0,0 +1,60 @@
1
+ /// <reference types="react" />
2
+ export type SearchSelectProps = {
3
+ id?: string;
4
+ label?: string;
5
+ options: Options[];
6
+ onSelect?: (options: Options | Options[] | undefined) => void;
7
+ onSearch?: (value: string) => void;
8
+ isOptionLoading?: boolean;
9
+ isLoading?: boolean;
10
+ loadingText?: string;
11
+ placeholder?: string;
12
+ value?: Options[] | Options;
13
+ searchQuery?: string;
14
+ isMultiple?: boolean;
15
+ isRequired?: boolean;
16
+ error?: boolean;
17
+ errorMessage?: string;
18
+ helperText?: string;
19
+ width?: string | number;
20
+ size?: "xs" | "sm" | "md" | "lg";
21
+ chip?: {
22
+ maxChips?: number;
23
+ maxText?: number;
24
+ onClick?: (options: Options | Options[]) => void;
25
+ };
26
+ information?: {
27
+ isInformation?: boolean;
28
+ informationMessage?: string;
29
+ };
30
+ rightIcon?: {
31
+ icon?: React.ReactNode;
32
+ onClick?: () => void;
33
+ };
34
+ addNew?: {
35
+ enabled: boolean;
36
+ icon?: React.ReactNode;
37
+ text?: string;
38
+ onClick?: () => void;
39
+ };
40
+ isRemoveAllIcon?: boolean;
41
+ isSelectAll?: boolean;
42
+ pagination?: {
43
+ onScroll?: (startIndex: number, limit: number, query: string) => void;
44
+ limit?: number;
45
+ scrollLoading?: boolean;
46
+ };
47
+ virtualization?: boolean;
48
+ insideSelect?: {
49
+ onSelect?: (options: Options) => void;
50
+ value?: string;
51
+ option?: Options[];
52
+ };
53
+ };
54
+ export type Options = {
55
+ id: string | number;
56
+ label: string;
57
+ email?: string;
58
+ profileUrl?: string;
59
+ color?: string;
60
+ };
package/dist/Components/SearchSelect/SearchSelectProps.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/dist/Layout.js CHANGED
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = require("@chakra-ui/react");
30
30
  var react_2 = __importStar(require("react"));
31
31
  var accordion_1 = __importDefault(require("./Pages/accordion"));
32
- var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
32
+ var searchSelect_1 = __importDefault(require("./Pages/searchSelect"));
33
33
  var search_1 = __importDefault(require("./Pages/search"));
34
34
  var timeline_1 = __importDefault(require("./Pages/timeline"));
35
35
  var datePick_1 = __importDefault(require("./Pages/datePick"));
@@ -62,6 +62,7 @@ var TInput_1 = __importDefault(require("./Pages/TInput"));
62
62
  var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
63
63
  var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
64
64
  var lucide_react_1 = require("lucide-react");
65
+ var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
65
66
  var Layout = function () {
66
67
  var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
67
68
  var navigate = function (path) {
@@ -86,7 +87,9 @@ var Layout = function () {
86
87
  return react_2.default.createElement(alertdialog_1.default, null);
87
88
  case "/accordion":
88
89
  return react_2.default.createElement(accordion_1.default, null);
89
- case "/selectsearch":
90
+ case "/searchSelect":
91
+ return react_2.default.createElement(searchSelect_1.default, null);
92
+ case "/selectSearch":
90
93
  return react_2.default.createElement(selectSearch_1.default, null);
91
94
  case "/timeline":
92
95
  return react_2.default.createElement(timeline_1.default, null);
@@ -147,7 +150,7 @@ var Layout = function () {
147
150
  case "/kanban":
148
151
  return react_2.default.createElement(kanbanboard_1.default, null);
149
152
  case "/tag":
150
- return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
153
+ return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
151
154
  case "/":
152
155
  default:
153
156
  }
@@ -158,7 +161,8 @@ var Layout = function () {
158
161
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline" }, "Home"),
159
162
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline" }, "AlertDialog"),
160
163
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline" }, "Accordion"),
161
- react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); }, variant: "outline" }, "Selectsearch"),
164
+ react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline" }, "searchSelect"),
165
+ react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectSearch"); }, variant: "outline" }, "selectSearch"),
162
166
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline" }, "Timeline"),
163
167
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline" }, "Search"),
164
168
  react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline" }, "Datepicker"),
package/dist/Pages/kanbanboard.js CHANGED
@@ -110,6 +110,6 @@ var initialData = {
110
110
  },
111
111
  };
112
112
  var KanbanBoardExample = function () {
113
- return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); } }));
113
+ return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); }, isLoading: false }));
114
114
  };
115
115
  exports.default = KanbanBoardExample;
package/dist/Pages/searchSelect.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const SearchSelect: () => React.JSX.Element;
3
+ export default SearchSelect;
package/dist/Pages/searchSelect.js ADDED
@@ -0,0 +1,162 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
+ return new (P || (P = Promise))(function (resolve, reject) {
28
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
32
+ });
33
+ };
34
+ var __generator = (this && this.__generator) || function (thisArg, body) {
35
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
36
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
37
+ function verb(n) { return function (v) { return step([n, v]); }; }
38
+ function step(op) {
39
+ if (f) throw new TypeError("Generator is already executing.");
40
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
41
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
42
+ if (y = 0, t) op = [op[0] & 2, t.value];
43
+ switch (op[0]) {
44
+ case 0: case 1: t = op; break;
45
+ case 4: _.label++; return { value: op[1], done: false };
46
+ case 5: _.label++; y = op[1]; op = [0]; continue;
47
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
48
+ default:
49
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
50
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
51
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
52
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
53
+ if (t[2]) _.ops.pop();
54
+ _.trys.pop(); continue;
55
+ }
56
+ op = body.call(thisArg, _);
57
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
58
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
59
+ }
60
+ };
61
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
62
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
63
+ if (ar || !(i in from)) {
64
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
65
+ ar[i] = from[i];
66
+ }
67
+ }
68
+ return to.concat(ar || Array.prototype.slice.call(from));
69
+ };
70
+ var __importDefault = (this && this.__importDefault) || function (mod) {
71
+ return (mod && mod.__esModule) ? mod : { "default": mod };
72
+ };
73
+ Object.defineProperty(exports, "__esModule", { value: true });
74
+ var react_1 = __importStar(require("react"));
75
+ var SearchSelect_1 = __importDefault(require("../Components/SearchSelect/SearchSelect"));
76
+ var max = 149;
77
+ var rrr = function (start, limit) {
78
+ var end = Math.min(start + limit, max + 1); // +1 to include `max` as valid
79
+ return Array.from({ length: end - start }, function (_, index) { return ({
80
+ id: (start + index).toString(),
81
+ label: "Option ".concat(start + index),
82
+ }); });
83
+ };
84
+ var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
85
+ var SearchSelect = function () {
86
+ var _a = (0, react_1.useState)([{ id: "300", label: "mahesh" }]), selectedOptions = _a[0], setselectedOptions = _a[1];
87
+ var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
88
+ var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
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];
91
+ return (react_1.default.createElement("div", null,
92
+ react_1.default.createElement(SearchSelect_1.default, { label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
93
+ console.log("val", val);
94
+ setselectedOptions(val);
95
+ }, onSearch: function (query) { return setSearch(query); }, isOptionLoading: false, placeholder: "Search users...", searchQuery: search, chip: {
96
+ maxChips: 3,
97
+ onClick: function () { return console.log("chip removed"); },
98
+ }, isSelectAll: true, pagination: {
99
+ limit: 50,
100
+ scrollLoading: paginationLoading,
101
+ onScroll: function (startIndex, limit, query) { return __awaiter(void 0, void 0, void 0, function () {
102
+ var newOptions;
103
+ return __generator(this, function (_a) {
104
+ switch (_a.label) {
105
+ case 0:
106
+ console.log("Fetching:", startIndex, limit, query);
107
+ if (startIndex > max) {
108
+ console.log("No more data to load.");
109
+ return [2 /*return*/];
110
+ }
111
+ setpaginationLoading(true);
112
+ return [4 /*yield*/, delay(1000)];
113
+ case 1:
114
+ _a.sent();
115
+ newOptions = rrr(startIndex, limit);
116
+ setpaginationLoading(false);
117
+ if (newOptions.length === 0) {
118
+ console.log("No new options returned.");
119
+ return [2 /*return*/];
120
+ }
121
+ setSoptions(function (prev) { return __spreadArray(__spreadArray([], prev, true), newOptions, true); });
122
+ return [2 /*return*/];
123
+ }
124
+ });
125
+ }); },
126
+ },
127
+ // width={"500px"}
128
+ addNew: {
129
+ enabled: true,
130
+ text: "Add new user",
131
+ onClick: function () { return console.log("Add New User"); },
132
+ },
133
+ // rightIcon={{
134
+ // icon: <Plus size={16} />,
135
+ // onClick: () => console.log("Clicked Right Icon"),
136
+ // }}
137
+ // error={true}
138
+ // errorMessage="hello"
139
+ virtualization: true, insideSelect: {
140
+ onSelect: function (val) { return setCustomSelectValue(val.label); },
141
+ value: customSelectValue,
142
+ option: [
143
+ {
144
+ "id": 3,
145
+ "label": "Hariharan J",
146
+ },
147
+ {
148
+ "id": 1,
149
+ "label": "Karuppusamy S",
150
+ },
151
+ {
152
+ "id": 2,
153
+ "label": "SasiKumar M",
154
+ },
155
+ {
156
+ "id": 4,
157
+ "label": "Hariharan Jeganathan",
158
+ }
159
+ ]
160
+ } })));
161
+ };
162
+ exports.default = SearchSelect;
package/dist/index.d.ts CHANGED
@@ -28,6 +28,7 @@ import ProgressBar from "./Components/ProgressBar/ProgressBar";
28
28
  import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
29
29
  import Search from "./Components/Search/Search";
30
30
  import Select from "./Components/Select/Select";
31
+ import SearchSelect from "./Components/SearchSelect/SearchSelect";
31
32
  import SelectSearch from "./Components/SelectSearch/SelectSearch";
32
33
  import SideBar from "./Components/SideBar/SideBar";
33
34
  import Skeletons from "./Components/Skeletons/Skeletons";
@@ -44,5 +45,5 @@ import withTheme from "./withTheme";
44
45
  import { useCustomTheme } from "./Theme/useCustomTheme";
45
46
  import { ThemesList } from "./Theme";
46
47
  import { debounce } from "./Utils/table";
47
- export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
48
+ export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
48
49
  export default withTheme;
package/dist/index.js CHANGED
@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.FormWrapper = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
31
- exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = void 0;
30
+ exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.FormWrapper = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
31
+ exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = void 0;
32
32
  var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
33
33
  exports.Accordian = Accordion_1.default;
34
34
  var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -99,6 +99,8 @@ var Search_1 = __importDefault(require("./Components/Search/Search"));
99
99
  exports.Search = Search_1.default;
100
100
  var Select_1 = __importDefault(require("./Components/Select/Select"));
101
101
  exports.Select = Select_1.default;
102
+ var SearchSelect_1 = __importDefault(require("./Components/SearchSelect/SearchSelect"));
103
+ exports.SearchSelect = SearchSelect_1.default;
102
104
  var SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
103
105
  exports.SelectSearch = SelectSearch_1.default;
104
106
  var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.0.12",
3
+ "version": "2.0.14",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -16,7 +16,8 @@
16
16
  "react-apexcharts": "^1.4.1",
17
17
  "react-datepicker": "^7.3.0",
18
18
  "react-dom": "^18.3.1",
19
- "react-scripts": "^5.0.1"
19
+ "react-scripts": "^5.0.1",
20
+ "react-window": "^1.8.11"
20
21
  },
21
22
  "scripts": {
22
23
  "start": "react-scripts start",
@@ -55,6 +56,7 @@
55
56
  "@types/node": "^16.18.97",
56
57
  "@types/react": "^18.3.2",
57
58
  "@types/react-dom": "^18.3.0",
59
+ "@types/react-window": "^1.8.8",
58
60
  "autoprefixer": "^10.4.21",
59
61
  "copyfiles": "^2.4.1",
60
62
  "path": "^0.12.7",