pixelize-design-library 2.2.112 → 2.2.113

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 (5) 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/LeftFilterPane.d.ts +2 -2
  4. package/dist/Components/Table/LeftFilterPane.js +51 -23
  5. 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/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;
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;
62
+ var _f = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _f[0], setIsSearching = _f[1];
63
+ var _g = (0, react_1.useState)({}), localSelected = _g[0], setLocalSelected = _g[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,7 +144,9 @@ 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]);
146
151
  var handleApply = function () {
147
152
  onApply === null || onApply === void 0 ? void 0 : onApply(selected);
@@ -165,7 +170,9 @@ var LeftFilterPane = function (_a) {
165
170
  setSearch("");
166
171
  setIsSearching(false);
167
172
  } }))))))),
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) {
173
+ 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
174
+ .map(function (s, i) { return (s.initiallyExpanded ? i : -1); })
175
+ .filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) {
169
176
  var _a;
170
177
  return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
171
178
  react_1.default.createElement("h2", null,
@@ -198,7 +205,7 @@ var LeftFilterPane = function (_a) {
198
205
  if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
199
206
  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
207
  }
201
- if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select") {
208
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
202
209
  var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
203
210
  var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
204
211
  return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -227,7 +234,7 @@ var LeftFilterPane = function (_a) {
227
234
  },
228
235
  } }),
229
236
  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 },
237
+ (it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
231
238
  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
239
  react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
233
240
  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 +271,50 @@ var LeftFilterPane = function (_a) {
264
271
  if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
265
272
  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
273
  }
274
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select" || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "user") {
275
+ var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
276
+ var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
277
+ return (react_1.default.createElement(react_1.default.Fragment, null,
278
+ 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 }),
279
+ react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
280
+ 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) {
281
+ setTextValue(sec.id, activeItem.id, option);
282
+ } }))));
283
+ }
267
284
  return null;
268
285
  })())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
269
286
  var sectionItems = selected[sec.id] || [];
270
287
  var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
271
288
  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
- } }));
289
+ return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
290
+ 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: {
291
+ '.chakra-checkbox__control': {
292
+ width: '12px',
293
+ height: '12px',
294
+ mt: '2px',
295
+ },
296
+ '.chakra-checkbox__label': {
297
+ lineHeight: '1rem',
298
+ whiteSpace: 'normal',
299
+ wordBreak: 'break-word',
300
+ },
301
+ } }),
302
+ 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); } })),
303
+ (it.type === "select" || it.type === "user") && checked && (react_1.default.createElement(react_2.Box, { mt: 2 },
304
+ 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 }),
305
+ react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
306
+ 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) {
307
+ setTextValue(sec.id, it.id, option);
308
+ } }))))));
284
309
  }))))));
285
- }))),
310
+ }))) : (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
311
+ react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")))),
286
312
  react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
287
313
  react_1.default.createElement(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red" }, "Clear All"),
288
314
  react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary",
289
315
  // 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"))));
316
+ color: "white", size: "sm", onClick: handleApply,
317
+ // _hover={{ bg: theme.colors?.red?.[600] }}
318
+ fontSize: "xs" }, "Apply"))));
291
319
  };
292
320
  exports.default = LeftFilterPane;
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.113",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",