pixelize-design-library 2.2.112 → 2.2.114

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 (8) hide show
  1. package/dist/Components/FilterSidebar/FilterSidebar.js +20 -19
  2. package/dist/Components/Table/CompactSelect.js +14 -13
  3. package/dist/Components/Table/Components/TableBody.js +4 -3
  4. package/dist/Components/Table/LeftFilterPane.d.ts +4 -3
  5. package/dist/Components/Table/LeftFilterPane.js +59 -26
  6. package/dist/Components/Table/Table.js +3 -3
  7. package/dist/Components/Table/TableProps.d.ts +1 -0
  8. package/package.json +1 -1
package/dist/Components/FilterSidebar/FilterSidebar.js CHANGED
@@ -194,25 +194,26 @@ var FilterSidebar = function (_a) {
194
194
  react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[800], whiteSpace: "nowrap" },
195
195
  currentMin,
196
196
  range.unit ? " ".concat(range.unit) : "")))),
197
- react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0 },
198
- react_1.default.createElement(react_2.PopoverBody, { p: 0 },
199
- react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "min-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
200
- var min = v;
201
- var max = currentMax;
202
- var nextVal = [Math.min(min, max), Math.max(min, max)];
203
- setInternalSelected(function (prev) {
204
- var _a;
205
- var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
206
- onChange === null || onChange === void 0 ? void 0 : onChange(next);
207
- return next;
208
- });
209
- setOpenPrice({});
210
- } },
211
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
212
- v,
213
- range.unit ? " ".concat(range.unit) : ""),
214
- currentMin === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
215
- react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); }))))),
197
+ react_1.default.createElement(react_2.Portal, null,
198
+ react_1.default.createElement(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600 },
199
+ react_1.default.createElement(react_2.PopoverBody, { p: 0 },
200
+ react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto" }, values.map(function (v) { return (react_1.default.createElement(react_2.Flex, { key: "min-".concat(v), px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.white, borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
201
+ var min = v;
202
+ var max = currentMax;
203
+ var nextVal = [Math.min(min, max), Math.max(min, max)];
204
+ setInternalSelected(function (prev) {
205
+ var _a;
206
+ var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = nextVal, _a));
207
+ onChange === null || onChange === void 0 ? void 0 : onChange(next);
208
+ return next;
209
+ });
210
+ setOpenPrice({});
211
+ } },
212
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] },
213
+ v,
214
+ range.unit ? " ".concat(range.unit) : ""),
215
+ currentMin === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
216
+ react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); })))))),
216
217
  react_1.default.createElement(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: function () { return setOpenPrice({}); }, placement: "bottom-start", closeOnBlur: true },
217
218
  react_1.default.createElement(react_2.PopoverTrigger, null,
218
219
  react_1.default.createElement(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: function () { return setOpenPrice({ id: section.id, target: "max" }); }, gap: 2, overflow: "hidden" },
package/dist/Components/Table/CompactSelect.js CHANGED
@@ -41,18 +41,19 @@ var CompactSelect = function (_a) {
41
41
  react_1.default.createElement(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? "".concat(height, "px") : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: "white", borderRadius: "0.25rem", onClick: function () { return setIsOpen(function (prev) { return !prev; }); } },
42
42
  react_1.default.createElement(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left" }, (value === null || value === void 0 ? void 0 : value.label) || placeholder),
43
43
  isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 12 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 12 }))),
44
- react_1.default.createElement(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0 },
45
- react_1.default.createElement(react_2.PopoverBody, { p: 2 },
46
- react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" },
47
- react_1.default.createElement(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: function (e) { return setQuery(e.target.value); }, sx: { fontSize: "0.75rem", height: "22px" } }),
48
- react_1.default.createElement(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100" },
49
- filtered.map(function (opt) { return (react_1.default.createElement(react_2.Box, { key: opt.id, px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: function () {
50
- onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
51
- setIsOpen(false);
52
- setQuery("");
53
- } },
54
- react_1.default.createElement(react_2.Text, { fontSize: "0.75rem" }, opt.label))); }),
55
- filtered.length === 0 && (react_1.default.createElement(react_2.Box, { px: 2, py: 2 },
56
- react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "gray.500" }, "No results")))))))));
44
+ react_1.default.createElement(react_2.Portal, null,
45
+ react_1.default.createElement(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600 },
46
+ react_1.default.createElement(react_2.PopoverBody, { p: 2 },
47
+ react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" },
48
+ react_1.default.createElement(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: function (e) { return setQuery(e.target.value); }, sx: { fontSize: "0.75rem", height: "22px" } }),
49
+ react_1.default.createElement(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100" },
50
+ filtered.map(function (opt) { return (react_1.default.createElement(react_2.Box, { key: opt.id, px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: function () {
51
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
52
+ setIsOpen(false);
53
+ setQuery("");
54
+ } },
55
+ react_1.default.createElement(react_2.Text, { fontSize: "0.75rem" }, opt.label))); }),
56
+ filtered.length === 0 && (react_1.default.createElement(react_2.Box, { px: 2, py: 2 },
57
+ react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "gray.500" }, "No results"))))))))));
57
58
  };
58
59
  exports.default = CompactSelect;
package/dist/Components/Table/Components/TableBody.js CHANGED
@@ -35,9 +35,10 @@ var TableActions_1 = __importDefault(require("./TableActions"));
35
35
  var lucide_react_1 = require("lucide-react");
36
36
  var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
37
37
  var TableBody = function (_a) {
38
+ var _b, _c, _d;
38
39
  var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
39
40
  var theme = (0, useCustomTheme_1.useCustomTheme)();
40
- var _b = (0, react_2.useState)(new Set()), expandedRows = _b[0], setExpandedRows = _b[1];
41
+ var _e = (0, react_2.useState)(new Set()), expandedRows = _e[0], setExpandedRows = _e[1];
41
42
  var toggleRowExpansion = function (rowIndex) {
42
43
  setExpandedRows(function (prev) {
43
44
  var newSet = new Set(prev);
@@ -77,9 +78,9 @@ var TableBody = function (_a) {
77
78
  return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
78
79
  }
79
80
  if (data.length === 0) {
80
- return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
81
+ return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
81
82
  react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
82
- react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
83
+ react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] },
83
84
  react_2.default.createElement("p", null, "No data found")))));
84
85
  }
85
86
  return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {
package/dist/Components/Table/LeftFilterPane.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  export type FilterItem = {
3
3
  id: string;
4
4
  label: string;
5
- type?: "text" | "select";
5
+ type?: "text" | "select" | "user";
6
6
  option?: {
7
7
  id: string;
8
8
  label: string;
@@ -19,7 +19,7 @@ export type SelectedFilterItem = {
19
19
  id: string;
20
20
  condition?: string;
21
21
  value?: any;
22
- type?: "text" | "select";
22
+ type?: "text" | "select" | "user";
23
23
  };
24
24
  export type LeftFilterPaneProps = {
25
25
  title?: string;
@@ -29,6 +29,7 @@ export type LeftFilterPaneProps = {
29
29
  onApply?: (selected: any) => void;
30
30
  onClear?: () => void;
31
31
  theme: any;
32
+ isApplyLoading?: boolean;
32
33
  };
33
- declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
34
+ declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, }: LeftFilterPaneProps) => React.JSX.Element;
34
35
  export default LeftFilterPane;
package/dist/Components/Table/LeftFilterPane.js CHANGED
@@ -57,13 +57,16 @@ var TextOperationControls_1 = require("./TextOperationControls");
57
57
  var SelectOperationControls_1 = require("./SelectOperationControls");
58
58
  var CompactSelect_1 = __importDefault(require("./CompactSelect"));
59
59
  var LeftFilterPane = function (_a) {
60
- var _b, _c, _d, _e;
61
- var _f = _a.title, title = _f === void 0 ? "Filter" : _f, _g = _a.height, height = _g === void 0 ? 300 : _g, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme;
62
- var _h = (0, react_1.useState)(false), isSearching = _h[0], setIsSearching = _h[1];
63
- var _j = (0, react_1.useState)({}), localSelected = _j[0], setLocalSelected = _j[1];
60
+ var _b, _c;
61
+ var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 300 : _e, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _f = _a.isApplyLoading, isApplyLoading = _f === void 0 ? false : _f;
62
+ var _g = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _g[0], setIsSearching = _g[1];
63
+ var _h = (0, react_1.useState)({}), localSelected = _h[0], setLocalSelected = _h[1];
64
64
  var searchRef = (0, react_1.useRef)(null);
65
65
  (0, react_1.useEffect)(function () {
66
66
  setLocalSelected(selectedProp || {});
67
+ if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search) {
68
+ setIsSearching(true);
69
+ }
67
70
  }, [selectedProp]);
68
71
  var selected = localSelected;
69
72
  var search = selected.search || "";
@@ -101,7 +104,7 @@ var LeftFilterPane = function (_a) {
101
104
  if (checked) {
102
105
  if (sectionItems.some(function (i) { return i.id === itemId; }))
103
106
  return prev;
104
- return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = __spreadArray(__spreadArray([], sectionItems, true), [{ id: itemId, type: type, condition: type === "text" ? "contains" : "is", value: "" }], false), _a));
107
+ return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = __spreadArray(__spreadArray([], sectionItems, true), [{ id: itemId, type: type, condition: (type === "select" || type === "user") ? "is" : "contains", value: "" }], false), _a));
105
108
  }
106
109
  else {
107
110
  return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = sectionItems.filter(function (i) { return i.id !== itemId; }), _b));
@@ -141,8 +144,19 @@ var LeftFilterPane = function (_a) {
141
144
  if (!search.trim())
142
145
  return sections;
143
146
  var q = search.toLowerCase();
144
- return sections.map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); });
147
+ return sections
148
+ .map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); })
149
+ .filter(function (sec) { return (sec.items || []).length > 0; });
145
150
  }, [search, sections]);
151
+ var hasActiveFilters = (0, react_1.useMemo)(function () {
152
+ return Object.entries(localSelected).some(function (_a) {
153
+ var key = _a[0], value = _a[1];
154
+ if (key === "search") {
155
+ return !!(value && typeof value === "string" && value.trim() !== "");
156
+ }
157
+ return Array.isArray(value) && value.length > 0;
158
+ });
159
+ }, [localSelected]);
146
160
  var handleApply = function () {
147
161
  onApply === null || onApply === void 0 ? void 0 : onApply(selected);
148
162
  };
@@ -165,7 +179,9 @@ var LeftFilterPane = function (_a) {
165
179
  setSearch("");
166
180
  setIsSearching(false);
167
181
  } }))))))),
168
- react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" }, filteredSections.length > 1 ? (react_1.default.createElement(react_2.Accordion, { allowMultiple: true, defaultIndex: sections.map(function (s, i) { return (s.initiallyExpanded ? i : -1); }).filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) {
182
+ react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" }, filteredSections.length > 0 ? (filteredSections.length > 1 ? (react_1.default.createElement(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections
183
+ .map(function (s, i) { return (s.initiallyExpanded ? i : -1); })
184
+ .filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) {
169
185
  var _a;
170
186
  return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
171
187
  react_1.default.createElement("h2", null,
@@ -198,7 +214,7 @@ var LeftFilterPane = function (_a) {
198
214
  if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
199
215
  return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
200
216
  }
201
- if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select") {
217
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
202
218
  var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
203
219
  var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
204
220
  return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -227,7 +243,7 @@ var LeftFilterPane = function (_a) {
227
243
  },
228
244
  } }),
229
245
  checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
230
- checked && it.type === "select" && (react_1.default.createElement(react_2.Box, { mt: 2 },
246
+ (it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
231
247
  react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
232
248
  react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
233
249
  react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "22px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: function (option) {
@@ -264,29 +280,46 @@ var LeftFilterPane = function (_a) {
264
280
  if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
265
281
  return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
266
282
  }
283
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
284
+ var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
285
+ var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
286
+ return (react_1.default.createElement(react_1.default.Fragment, null,
287
+ react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
288
+ react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
289
+ react_1.default.createElement(CompactSelect_1.default, { placeholder: def === null || def === void 0 ? void 0 : def.label, size: "xs", height: "22px", options: opts, value: activeItem.value, onSelect: function (option) {
290
+ setTextValue(sec.id, activeItem.id, option);
291
+ } }))));
292
+ }
267
293
  return null;
268
294
  })())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
269
295
  var sectionItems = selected[sec.id] || [];
270
296
  var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
271
297
  var checked = !!activeItem;
272
- return (react_1.default.createElement(Checkbox_1.default, { key: it.id, label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked, it.type); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
273
- '.chakra-checkbox__control': {
274
- width: '12px',
275
- height: '12px',
276
- mt: '2px',
277
- },
278
- '.chakra-checkbox__label': {
279
- lineHeight: '1rem',
280
- whiteSpace: 'normal',
281
- wordBreak: 'break-word',
282
- },
283
- } }));
298
+ return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
299
+ react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked, it.type); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
300
+ '.chakra-checkbox__control': {
301
+ width: '12px',
302
+ height: '12px',
303
+ mt: '2px',
304
+ },
305
+ '.chakra-checkbox__label': {
306
+ lineHeight: '1rem',
307
+ whiteSpace: 'normal',
308
+ wordBreak: 'break-word',
309
+ },
310
+ } }),
311
+ checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
312
+ (it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
313
+ react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
314
+ react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
315
+ react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "22px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: function (option) {
316
+ setTextValue(sec.id, it.id, option);
317
+ } }))))));
284
318
  }))))));
285
- }))),
286
- react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
319
+ }))) : (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
320
+ react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")))),
321
+ hasActiveFilters && (react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
287
322
  react_1.default.createElement(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red" }, "Clear All"),
288
- react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary",
289
- // bg={theme.colors?.red?.[500]}
290
- color: "white", size: "sm", onClick: handleApply, _hover: { bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.red) === null || _e === void 0 ? void 0 : _e[600] }, fontSize: "xs" }, "Apply"))));
323
+ react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading }, "Apply")))));
291
324
  };
292
325
  exports.default = LeftFilterPane;
package/dist/Components/Table/Table.js CHANGED
@@ -113,8 +113,8 @@ function Table(_a) {
113
113
  var controlsHeight = 45;
114
114
  var estimatedRowHeight = 45;
115
115
  var actualRows = _filteredData.length;
116
- var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : 5;
117
- var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : 10;
116
+ var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : (actualRows === 0 ? 1 : 5);
117
+ var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
118
118
  var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
119
119
  (0, react_1.useEffect)(function () {
120
120
  if (!autoFitViewport)
@@ -148,7 +148,7 @@ function Table(_a) {
148
148
  return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
149
149
  react_1.default.createElement(react_2.Flex, { align: "start" },
150
150
  react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.25 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500], style: { height: controlsHeight + tableMaxH } },
151
- react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler })),
151
+ react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading })),
152
152
  react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
153
153
  react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, flexWrap: "nowrap", bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
154
154
  filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -43,6 +43,7 @@ export type TableProps = {
43
43
  isFilterSidebar?: boolean;
44
44
  handleSidebarFilterClick?: (filters: Record<string, any>) => void;
45
45
  filterSidebarToggle?: () => void;
46
+ isApplyLoading?: boolean;
46
47
  };
47
48
  preferences?: {
48
49
  url: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.112",
3
+ "version": "2.2.114",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",