pixelize-design-library 2.2.45 → 2.2.47

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 (15) hide show
  1. package/dist/Components/Card/PaymentCard/PaymentCard.js +4 -3
  2. package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts +1 -0
  3. package/dist/Components/NoteTextArea/NoteTextArea.d.ts +1 -1
  4. package/dist/Components/NoteTextArea/NoteTextArea.js +11 -10
  5. package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +1 -0
  6. package/dist/Components/Table/Components/HeaderActions.js +5 -34
  7. package/dist/Components/Table/Table.d.ts +1 -1
  8. package/dist/Components/Table/Table.js +2 -2
  9. package/dist/Components/Table/TableProps.d.ts +6 -1
  10. package/dist/Components/Table/TableSettings/ManageColumns.js +1 -1
  11. package/dist/Components/Table/TableSettings/TableFilters.d.ts +10 -0
  12. package/dist/Components/Table/TableSettings/TableFilters.js +66 -0
  13. package/dist/Components/Table/TableSettings/TableSettings.d.ts +2 -1
  14. package/dist/Components/Table/TableSettings/TableSettings.js +25 -18
  15. package/package.json +1 -1
package/dist/Components/Card/PaymentCard/PaymentCard.js CHANGED
@@ -83,13 +83,14 @@ var PaymentCard = function (_a) {
83
83
  react_1.default.createElement(react_2.Box, { textAlign: "center", mb: 6 },
84
84
  react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4 }, plan.icon),
85
85
  react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
86
- react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
86
+ (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
87
87
  react_1.default.createElement(react_2.Box, { fontSize: "1.5rem" }, "\u20B9"),
88
88
  billingCycle === "yearly" ? plan.yearlyPrice : plan.monthlyPrice,
89
89
  react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
90
90
  react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
91
- react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax))),
92
- react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 3 }, plan.description)),
91
+ react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
92
+ plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
93
+ react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
93
94
  !isActive && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
94
95
  react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
95
96
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts CHANGED
@@ -23,4 +23,5 @@ export type Plan = {
23
23
  buttonVariant: "solid" | "outline" | "link";
24
24
  popular?: boolean;
25
25
  buttonLoadingText?: string;
26
+ priceDescription?: string;
26
27
  };
package/dist/Components/NoteTextArea/NoteTextArea.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NoteTextAreaProps } from "./NoteTextAreaProps";
3
- export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder }: NoteTextAreaProps): React.JSX.Element;
3
+ export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): React.JSX.Element;
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -45,16 +45,16 @@ var countWords = function (text) {
45
45
  };
46
46
  function NoteTextArea(_a) {
47
47
  var _b;
48
- var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h;
48
+ var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h, _j = _a.cancelButtonHide, cancelButtonHide = _j === void 0 ? false : _j;
49
49
  var theme = (0, useCustomTheme_1.useCustomTheme)();
50
50
  var noteAreaRef = (0, react_1.useRef)(null);
51
- var _j = (0, react_1.useState)(false), isActive = _j[0], setIsActive = _j[1];
52
- var _k = (0, react_1.useState)(""), noteValue = _k[0], setNoteValue = _k[1];
53
- var _l = (0, react_1.useState)(""), titleValue = _l[0], setTitleValue = _l[1];
54
- var _m = (0, react_1.useState)(false), titleShow = _m[0], setTitleShow = _m[1];
55
- var _o = (0, react_1.useState)([]), files = _o[0], setFiles = _o[1];
56
- var _p = (0, react_1.useState)(""), fileError = _p[0], setFileError = _p[1];
57
- var _q = (0, react_1.useState)(false), isSaveDisabled = _q[0], setIsSaveDisabled = _q[1];
51
+ var _k = (0, react_1.useState)(false), isActive = _k[0], setIsActive = _k[1];
52
+ var _l = (0, react_1.useState)(""), noteValue = _l[0], setNoteValue = _l[1];
53
+ var _m = (0, react_1.useState)(""), titleValue = _m[0], setTitleValue = _m[1];
54
+ var _o = (0, react_1.useState)(false), titleShow = _o[0], setTitleShow = _o[1];
55
+ var _p = (0, react_1.useState)([]), files = _p[0], setFiles = _p[1];
56
+ var _q = (0, react_1.useState)(""), fileError = _q[0], setFileError = _q[1];
57
+ var _r = (0, react_1.useState)(false), isSaveDisabled = _r[0], setIsSaveDisabled = _r[1];
58
58
  (0, react_1.useEffect)(function () {
59
59
  setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
60
60
  }, [titleValue, maxNoteWordCount]);
@@ -164,7 +164,7 @@ function NoteTextArea(_a) {
164
164
  background: theme.colors.white,
165
165
  } })),
166
166
  react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "80px", pl: 3, pt: 2, position: "relative" },
167
- react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: "Add a note...", variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
167
+ react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
168
168
  react_1.default.createElement(react_2.Divider, null),
169
169
  react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
170
170
  react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%" },
@@ -175,7 +175,8 @@ function NoteTextArea(_a) {
175
175
  !titleShow ? (react_1.default.createElement(react_2.Text, { onClick: function () { return setTitleShow(true); }, cursor: "pointer", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm" }, "Add a Title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
176
176
  react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, titleValue || "Title")))),
177
177
  react_1.default.createElement(react_2.Flex, { gap: 3, align: "center", ml: "auto", flexShrink: 0 },
178
- react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"),
178
+ cancelButtonHide ? null : (react_1.default.createElement(react_1.default.Fragment, null,
179
+ react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"))),
179
180
  react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
180
181
  saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,
181
182
  "Save"))),
package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts CHANGED
@@ -14,4 +14,5 @@ export type NoteTextAreaProps = {
14
14
  onChange?: (value: string) => void;
15
15
  ref?: LegacyRef<HTMLInputElement>;
16
16
  customPlaceholder?: string;
17
+ cancelButtonHide?: boolean;
17
18
  };
package/dist/Components/Table/Components/HeaderActions.js CHANGED
@@ -18,35 +18,6 @@ var react_1 = require("@chakra-ui/react");
18
18
  var lucide_react_1 = require("lucide-react");
19
19
  var react_2 = __importDefault(require("react"));
20
20
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
21
- // const ListItem = ({
22
- // icon,
23
- // name,
24
- // onClick,
25
- // selections,
26
- // }: {
27
- // icon: React.ReactElement;
28
- // name: string;
29
- // onClick?: (selection: (string | number)[]) => void;
30
- // selections: (string | number)[];
31
- // }) => {
32
- // const { colors }: any = useCustomTheme();
33
- // const styledIcon = React.cloneElement(icon, {
34
- // color: colors?.text?.[500],
35
- // size: "1.25rem",
36
- // });
37
- // return (
38
- // <Box
39
- // display={"flex"}
40
- // alignItems={"center"}
41
- // gap={"0.375rem"}
42
- // onClick={() => onClick && onClick(selections)}
43
- // cursor={"pointer"}
44
- // _hover={{color: colors?.primary?.[500]}}
45
- // >
46
- // {styledIcon} {name}
47
- // </Box>
48
- // );
49
- // };
50
21
  var ListItem = function (_a) {
51
22
  var _b, _c;
52
23
  var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections, _d = _a.isHoverEnabled, isHoverEnabled = _d === void 0 ? false : _d, hoverColor = _a.hoverColor;
@@ -55,7 +26,7 @@ var ListItem = function (_a) {
55
26
  color: "currentColor",
56
27
  size: "1.25rem",
57
28
  });
58
- return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: isHoverEnabled ? "pointer" : "default", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], _hover: isHoverEnabled
29
+ return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], _hover: isHoverEnabled
59
30
  ? { color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } // ✅ hover updates both
60
31
  : {}, transition: "color 0.2s ease" // ✅ smooth animation
61
32
  },
@@ -64,14 +35,14 @@ var ListItem = function (_a) {
64
35
  name));
65
36
  };
66
37
  var HeaderActions = function (_a) {
67
- var _b, _c, _d, _e, _f, _g, _h, _j;
38
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
68
39
  var actions = _a.actions, selections = _a.selections;
69
40
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
70
41
  return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 4, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500] },
71
42
  ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })),
72
- ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections })),
73
- ((_h = actions === null || actions === void 0 ? void 0 : actions.items) === null || _h === void 0 ? void 0 : _h.length)
74
- ? (_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
43
+ ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })),
44
+ ((_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.length)
45
+ ? (_k = actions === null || actions === void 0 ? void 0 : actions.items) === null || _k === void 0 ? void 0 : _k.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
75
46
  : null));
76
47
  };
77
48
  exports.default = HeaderActions;
package/dist/Components/Table/Table.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { TableProps } from "./TableProps";
3
- export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, }: TableProps): React.JSX.Element;
3
+ export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, tableSettings, }: TableProps): React.JSX.Element;
package/dist/Components/Table/Table.js CHANGED
@@ -49,7 +49,7 @@ function Table(_a) {
49
49
  name: "",
50
50
  page: "",
51
51
  orgId: "",
52
- } : _m, _o = _a.paginationMode, paginationMode = _o === void 0 ? "client" : _o, _p = _a.noOfRowsPerPage, noOfRowsPerPage = _p === void 0 ? 50 : _p, _q = _a.totalRecords, totalRecords = _q === void 0 ? 0 : _q, onPagination = _a.onPagination, _r = _a.isTableSettings, isTableSettings = _r === void 0 ? false : _r, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch;
52
+ } : _m, _o = _a.paginationMode, paginationMode = _o === void 0 ? "client" : _o, _p = _a.noOfRowsPerPage, noOfRowsPerPage = _p === void 0 ? 50 : _p, _q = _a.totalRecords, totalRecords = _q === void 0 ? 0 : _q, onPagination = _a.onPagination, _r = _a.isTableSettings, isTableSettings = _r === void 0 ? false : _r, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, tableSettings = _a.tableSettings;
53
53
  var theme = (0, useCustomTheme_1.useCustomTheme)();
54
54
  var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
55
55
  // useEffect(() => {
@@ -110,7 +110,7 @@ function Table(_a) {
110
110
  react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
111
111
  isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
112
112
  react_1.default.createElement(Divider_1.default, null),
113
- react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } }))),
113
+ react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
114
114
  selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
115
115
  react_1.default.createElement(Divider_1.default, null),
116
116
  react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -23,10 +23,15 @@ export type TableProps = {
23
23
  noOfRowsPerPage?: number;
24
24
  totalRecords?: number;
25
25
  onPagination?: (page: number, noOfRecords: number) => void;
26
- isTableSettings?: boolean;
27
26
  headerActions?: HeaderActionsProps;
28
27
  onGlobalSearch?: (searchVal: string) => void;
29
28
  onColumnFilter?: (filters: Record<string, any>) => void;
29
+ isTableSettings?: boolean;
30
+ tableSettings?: {
31
+ filters?: string[];
32
+ filterSelected?: string[];
33
+ onFilterSelection?: (filters: string[]) => void;
34
+ };
30
35
  preferences?: {
31
36
  url: string;
32
37
  token: string;
package/dist/Components/Table/TableSettings/ManageColumns.js CHANGED
@@ -113,7 +113,7 @@ var ManageColumns = function (_a) {
113
113
  react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
114
114
  !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
115
115
  react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
116
- react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
116
+ react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
117
117
  react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
118
118
  react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found"))),
119
119
  error && (react_1.default.createElement(react_2.Text, { color: "red.500", mt: "3", fontSize: "sm" }, error))));
package/dist/Components/Table/TableSettings/TableFilters.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ type TableFiltersMethods = {
3
+ getSelectedFilters: () => string[];
4
+ };
5
+ declare const TableFilters: ({ filters, childFilterMethodsRef, filterSelected }: {
6
+ filters?: string[] | undefined;
7
+ childFilterMethodsRef?: React.Ref<TableFiltersMethods> | undefined;
8
+ filterSelected?: string[] | undefined;
9
+ }) => React.JSX.Element | null;
10
+ export default TableFilters;
package/dist/Components/Table/TableSettings/TableFilters.js ADDED
@@ -0,0 +1,66 @@
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 = require("@chakra-ui/react");
39
+ var react_2 = __importStar(require("react"));
40
+ var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
41
+ var TableFilters = function (_a) {
42
+ var filters = _a.filters, childFilterMethodsRef = _a.childFilterMethodsRef, filterSelected = _a.filterSelected;
43
+ var _b = (0, react_2.useState)(filterSelected !== null && filterSelected !== void 0 ? filterSelected : []), selectedFilters = _b[0], setSelectedFilters = _b[1];
44
+ (0, react_2.useImperativeHandle)(childFilterMethodsRef, function () {
45
+ return {
46
+ getSelectedFilters: function () {
47
+ return selectedFilters;
48
+ },
49
+ };
50
+ }, [selectedFilters]);
51
+ if (!filters)
52
+ return null;
53
+ return (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", gap: "0.75rem" }, Object.entries(filters !== null && filters !== void 0 ? filters : {}).map(function (_a) {
54
+ var key = _a[0], value = _a[1];
55
+ return (react_2.default.createElement(react_1.Box, { key: key },
56
+ react_2.default.createElement(Checkbox_1.default, { value: value, isChecked: selectedFilters.includes(value), onChange: function (e) {
57
+ if (e.target.checked) {
58
+ setSelectedFilters(__spreadArray(__spreadArray([], selectedFilters, true), [value], false));
59
+ }
60
+ else {
61
+ setSelectedFilters(selectedFilters.filter(function (filter) { return filter !== value; }));
62
+ }
63
+ }, label: value })));
64
+ })));
65
+ };
66
+ exports.default = TableFilters;
package/dist/Components/Table/TableSettings/TableSettings.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
2
  import { TableProps } from "../TableProps";
3
- declare const TableSettings: ({ columns, onSave, }: {
3
+ declare const TableSettings: ({ columns, onSave, tableSettings, }: {
4
4
  columns: TableProps["columns"];
5
5
  onSave: (updatedColumns: TableProps["columns"]) => void;
6
+ tableSettings?: TableProps["tableSettings"];
6
7
  }) => React.JSX.Element;
7
8
  export default TableSettings;
package/dist/Components/Table/TableSettings/TableSettings.js CHANGED
@@ -32,13 +32,25 @@ var ManageColumns_1 = __importDefault(require("./ManageColumns"));
32
32
  var Button_1 = __importDefault(require("../../Button/Button"));
33
33
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
34
34
  var lucide_react_1 = require("lucide-react");
35
+ var TableFilters_1 = __importDefault(require("./TableFilters"));
35
36
  var TableSettings = function (_a) {
36
37
  var _b, _c;
37
- var columns = _a.columns, onSave = _a.onSave;
38
+ var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
38
39
  var theme = (0, useCustomTheme_1.useCustomTheme)();
39
40
  var childInputMethodsRef = (0, react_2.useRef)({});
41
+ var childFilterMethodsRef = (0, react_2.useRef)(null);
40
42
  var _d = (0, react_2.useState)(false), settingsOpen = _d[0], setSettingsOpen = _d[1];
41
43
  var _e = (0, react_2.useState)(0), selectedIndex = _e[0], setSelectedIndex = _e[1];
44
+ var filters = (0, react_2.useMemo)(function () {
45
+ var _a;
46
+ return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
47
+ }, [tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters]);
48
+ var handleSave = (0, react_2.useCallback)(function () {
49
+ var _a, _b, _c, _d, _e, _f, _g;
50
+ onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
51
+ (_d = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _d === void 0 ? void 0 : _d.call(tableSettings, (_g = (_f = (_e = childFilterMethodsRef.current) === null || _e === void 0 ? void 0 : _e.getSelectedFilters) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : []);
52
+ setSettingsOpen(false);
53
+ }, [onSave, tableSettings]);
42
54
  return (react_2.default.createElement(react_1.Box, null,
43
55
  react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer" },
44
56
  react_2.default.createElement(lucide_react_1.Settings, { onClick: function () { return setSettingsOpen(true); }, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
@@ -49,25 +61,20 @@ var TableSettings = function (_a) {
49
61
  react_2.default.createElement(react_1.ModalCloseButton, null),
50
62
  react_2.default.createElement(react_1.ModalBody, null,
51
63
  react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
52
- react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content" },
53
- react_2.default.createElement(react_1.Tab, { _selected: {
64
+ react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: "gray.200" },
65
+ filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
66
+ borderLeft: "2px solid ".concat(theme.colors.primary[600]),
67
+ }, fontSize: "14px", justifyContent: "flex-start" }, "Filters")),
68
+ react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
54
69
  borderLeft: "2px solid ".concat(theme.colors.primary[600]),
55
70
  }, fontSize: "14px", justifyContent: "flex-start" }, "Manage columns")),
56
- react_2.default.createElement(react_1.TabPanels, null,
57
- react_2.default.createElement(react_1.TabPanel, null,
58
- react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef })),
59
- react_2.default.createElement(react_1.TabPanel, null,
60
- react_2.default.createElement(react_1.Text, null, "Font size settings")),
61
- react_2.default.createElement(react_1.TabPanel, null,
62
- react_2.default.createElement(react_1.Text, null, "Density settings")),
71
+ react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50] },
72
+ filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, null,
73
+ react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
63
74
  react_2.default.createElement(react_1.TabPanel, null,
64
- react_2.default.createElement(react_1.Text, null, "Scrollbar settings"))))),
65
- react_2.default.createElement(react_1.ModalFooter, null,
66
- react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, sx: { marginRight: "0.5rem" } }),
67
- react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: function () {
68
- var _a, _b, _c;
69
- onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
70
- setSettingsOpen(false);
71
- } }))))));
75
+ react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef }))))),
76
+ react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem" },
77
+ react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
78
+ react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
72
79
  };
73
80
  exports.default = TableSettings;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.45",
3
+ "version": "2.2.47",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",