pixelize-design-library 2.2.159 → 2.2.161

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 (9) hide show
  1. package/dist/Components/Card/PaymentCard/PaymentCard.js +4 -2
  2. package/dist/Components/Checkbox/Checkbox.d.ts +1 -1
  3. package/dist/Components/Checkbox/Checkbox.js +20 -12
  4. package/dist/Components/Checkbox/CheckboxProps.d.ts +1 -0
  5. package/dist/Components/Table/TableSettings/ManageColumns.js +42 -53
  6. package/dist/Components/Table/TableSettings/TableFilters.d.ts +1 -1
  7. package/dist/Components/Table/TableSettings/TableFilters.js +10 -20
  8. package/dist/Components/Table/TableSettings/TableSettings.js +56 -39
  9. package/package.json +1 -1
package/dist/Components/Card/PaymentCard/PaymentCard.js CHANGED
@@ -85,13 +85,15 @@ var PaymentCard = function (_a) {
85
85
  react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
86
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
- billingCycle === "yearly" ? plan.yearlyPrice : plan.monthlyPrice,
88
+ billingCycle === "yearly"
89
+ ? plan.yearlyPrice
90
+ : plan.monthlyPrice,
89
91
  react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
90
92
  react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
91
93
  react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
92
94
  plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
93
95
  react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
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)),
96
+ !isActive && plan.buttonText && (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)),
95
97
  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" },
96
98
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
97
99
  react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));
package/dist/Components/Checkbox/Checkbox.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { CheckboxProps } from "./CheckboxProps";
3
- export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, }: CheckboxProps): React.JSX.Element;
3
+ export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, labelSx, }: CheckboxProps): React.JSX.Element;
package/dist/Components/Checkbox/Checkbox.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
15
  };
@@ -10,21 +21,18 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
10
21
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
11
22
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
12
23
  function CheckBox(_a) {
13
- var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick;
24
+ var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick, labelSx = _a.labelSx;
14
25
  var theme = (0, useCustomTheme_1.useCustomTheme)();
26
+ var controlSize = size === "sm" ? "1rem"
27
+ : size === "md" ? "1.25rem"
28
+ : size === "lg" ? "1.5rem"
29
+ : size; // pass-through if already a CSS value
15
30
  var clampStyles = labelClampLines
16
- ? {
17
- display: "-webkit-box",
18
- WebkitLineClamp: labelClampLines,
19
- WebkitBoxOrient: "vertical",
20
- overflow: "hidden",
21
- textOverflow: "ellipsis",
22
- whiteSpace: "normal",
23
- }
24
- : {};
31
+ ? __assign({ display: "-webkit-box", WebkitLineClamp: labelClampLines, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" }, labelSx)
32
+ : __assign({}, labelSx);
25
33
  return (react_1.default.createElement(react_1.default.Fragment, null,
26
- react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
27
- react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400 }, label)))),
34
+ react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "inherit", sx: __assign(__assign({}, sx), { ".chakra-checkbox__control": { w: controlSize, h: controlSize }, ".chakra-checkbox__label": { ml: 0 } }) }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
35
+ react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400, ml: 0 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.875rem", color: theme.colors.gray[600], fontWeight: 400, ml: 0 }, label)))),
28
36
  error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
29
37
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
30
38
  }
package/dist/Components/Checkbox/CheckboxProps.d.ts CHANGED
@@ -16,4 +16,5 @@ export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "s
16
16
  informationMessage?: string;
17
17
  id?: string;
18
18
  helperText?: string;
19
+ labelSx?: React.CSSProperties;
19
20
  };
package/dist/Components/Table/TableSettings/ManageColumns.js CHANGED
@@ -67,19 +67,11 @@ var ManageColumns = function (_a) {
67
67
  var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
68
68
  var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
69
69
  var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
70
- var visibleCount = (0, react_1.useMemo)(function () {
71
- return items.filter(function (i) { return !i.isHidden; }).length;
72
- }, [items]);
70
+ var visibleCount = (0, react_1.useMemo)(function () { return items.filter(function (i) { return !i.isHidden; }).length; }, [items]);
73
71
  (0, react_1.useEffect)(function () {
74
72
  setItems(columns);
75
73
  }, [columns]);
76
- (0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
77
- return {
78
- getManageColumnsData: function () {
79
- return items;
80
- },
81
- };
82
- }, [items]);
74
+ (0, react_1.useImperativeHandle)(childInputMethodsRef, function () { return ({ getManageColumnsData: function () { return items; } }); }, [items]);
83
75
  var handleDragStart = function (index) { return setDraggedItemIndex(index); };
84
76
  var handleDragOver = function (e, index) {
85
77
  e.preventDefault();
@@ -93,14 +85,18 @@ var ManageColumns = function (_a) {
93
85
  setItems(newItems);
94
86
  };
95
87
  var handleDragEnd = function () { return setDraggedItemIndex(null); };
96
- var toggleCheckbox = function (index) {
97
- var newItems = __spreadArray([], items, true);
98
- var currentVisibleCount = newItems.filter(function (i) { return !i.isHidden; }).length;
99
- if (!newItems[index].isHidden && currentVisibleCount === 2) {
88
+ // Fix: use the item's actual index in `items`, not the filtered list index
89
+ var toggleCheckbox = function (itemId) {
90
+ var realIndex = items.findIndex(function (i) { return i.id === itemId; });
91
+ if (realIndex === -1)
92
+ return;
93
+ var currentVisibleCount = items.filter(function (i) { return !i.isHidden; }).length;
94
+ if (!items[realIndex].isHidden && currentVisibleCount === 2) {
100
95
  setError("At least two columns must remain visible.");
101
96
  return;
102
97
  }
103
- newItems[index].isHidden = !newItems[index].isHidden;
98
+ var newItems = __spreadArray([], items, true);
99
+ newItems[realIndex] = __assign(__assign({}, newItems[realIndex]), { isHidden: !newItems[realIndex].isHidden });
104
100
  setItems(newItems);
105
101
  setError(null);
106
102
  };
@@ -111,7 +107,7 @@ var ManageColumns = function (_a) {
111
107
  var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
112
108
  var handleSelectAll = function () {
113
109
  if (allChecked) {
114
- setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 ? true : false })); }));
110
+ setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 })); }));
115
111
  setError("At least two columns must remain visible.");
116
112
  }
117
113
  else {
@@ -119,59 +115,52 @@ var ManageColumns = function (_a) {
119
115
  setError(null);
120
116
  }
121
117
  };
122
- return (react_1.default.createElement(react_2.Box, { mt: "5" },
123
- error && (react_1.default.createElement(react_2.Box, { mb: "4", p: 3, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
124
- react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "sm", fontWeight: 500 }, error))),
125
- react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "md", borderRadius: "md" }),
126
- !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "3", bg: theme.colors.gray[100], p: 2, borderRadius: "md" },
118
+ return (react_1.default.createElement(react_2.Box, { mt: 2 },
119
+ error && (react_1.default.createElement(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
120
+ react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500 }, error))),
121
+ react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "sm", borderRadius: "md" }),
122
+ !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md" },
127
123
  react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
128
- react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto", sx: {
129
- '&::-webkit-scrollbar': {
130
- width: '3px',
131
- height: '3px',
132
- },
133
- '&::-webkit-scrollbar-track': {
124
+ react_1.default.createElement(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
125
+ "&::-webkit-scrollbar": { width: "3px", height: "3px" },
126
+ "&::-webkit-scrollbar-track": {
134
127
  background: theme.colors.gray[100],
135
- borderRadius: '2px',
128
+ borderRadius: "2px",
136
129
  },
137
- '&::-webkit-scrollbar-thumb': {
130
+ "&::-webkit-scrollbar-thumb": {
138
131
  background: theme.colors.gray[400],
139
- borderRadius: '2px',
132
+ borderRadius: "2px",
140
133
  },
141
- '&::-webkit-scrollbar-thumb:hover': {
134
+ "&::-webkit-scrollbar-thumb:hover": {
142
135
  background: theme.colors.gray[500],
143
136
  },
144
- scrollbarWidth: 'thin',
137
+ scrollbarWidth: "thin",
145
138
  scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
146
139
  } }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
147
140
  var isDraggingThisItem = draggedItemIndex === index;
148
141
  var isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
149
- 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: isDraggingThisItem
142
+ 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: isDraggingThisItem
150
143
  ? theme.colors.primary[100]
151
144
  : isDropZone
152
145
  ? theme.colors.primary[50]
153
- : theme.colors.white, display: "flex", alignItems: "center", borderRadius: "md", border: "2px solid", borderColor: isDraggingThisItem
146
+ : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
154
147
  ? theme.colors.primary[400]
155
- : isDropZone
156
- ? theme.colors.primary[300]
157
- : theme.colors.border[200], cursor: "grab", position: "relative", fontSize: 14, px: "3", py: "2", transition: "all 0.2s ease", _hover: {
148
+ : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
158
149
  bg: theme.colors.gray[50],
159
- borderColor: theme.colors.primary[300],
160
- boxShadow: theme.shadows.sm,
161
- }, _active: {
162
- cursor: "grabbing",
163
- } },
164
- 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: "2", color: theme.colors.gray[400], _hover: {
165
- color: theme.colors.primary[500],
166
- bg: "transparent",
150
+ borderColor: theme.colors.border[200],
151
+ }, _active: { cursor: "grabbing" } },
152
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 14 }), variant: "ghost", size: "xs", cursor: "grab", mr: 1, minW: "auto", h: "auto", p: 0,
153
+ // color={theme.colors.gray[300]}
154
+ _hover: { color: theme.colors.gray[500], bg: "transparent" } }),
155
+ react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(item.id); }, size: "sm", labelSx: {
156
+ color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
167
157
  } }),
168
- react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } })));
169
- })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center", py: 8 }, "No columns found"))),
170
- react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", mt: "4", bg: theme.colors.gray[50], p: 3, borderRadius: "md" },
171
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600], fontWeight: 500 },
172
- visibleCount,
173
- " of ",
174
- items.length,
175
- " columns visible"))));
158
+ react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto' }, index + 1)));
159
+ })) : (react_1.default.createElement(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6 }, "No columns found"))),
160
+ react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right" },
161
+ visibleCount,
162
+ " / ",
163
+ items.length,
164
+ " visible")));
176
165
  };
177
166
  exports.default = ManageColumns;
package/dist/Components/Table/TableSettings/TableFilters.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  type TableFiltersMethods = {
3
3
  getSelectedFilters: () => string[];
4
4
  };
5
- declare const TableFilters: ({ filters, childFilterMethodsRef, filterSelected }: {
5
+ declare const TableFilters: ({ filters, childFilterMethodsRef, filterSelected, }: {
6
6
  filters?: string[];
7
7
  childFilterMethodsRef?: React.Ref<TableFiltersMethods>;
8
8
  filterSelected?: string[];
package/dist/Components/Table/TableSettings/TableFilters.js CHANGED
@@ -54,26 +54,16 @@ var TableFilters = function (_a) {
54
54
  (0, react_2.useEffect)(function () {
55
55
  setSelectedFilters(filterSelected !== null && filterSelected !== void 0 ? filterSelected : []);
56
56
  }, [filterSelected]);
57
- (0, react_2.useImperativeHandle)(childFilterMethodsRef, function () {
58
- return {
59
- getSelectedFilters: function () {
60
- return selectedFilters;
61
- },
62
- };
63
- }, [selectedFilters]);
64
- if (!filters)
57
+ (0, react_2.useImperativeHandle)(childFilterMethodsRef, function () { return ({
58
+ getSelectedFilters: function () { return selectedFilters; },
59
+ }); }, [selectedFilters]);
60
+ if (!(filters === null || filters === void 0 ? void 0 : filters.length))
65
61
  return null;
66
- 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) {
67
- var key = _a[0], value = _a[1];
68
- return (react_2.default.createElement(react_1.Box, { key: key },
69
- react_2.default.createElement(Checkbox_1.default, { value: value, isChecked: selectedFilters.includes(value), onChange: function (e) {
70
- if (e.target.checked) {
71
- setSelectedFilters(__spreadArray(__spreadArray([], selectedFilters, true), [value], false));
72
- }
73
- else {
74
- setSelectedFilters(selectedFilters.filter(function (filter) { return filter !== value; }));
75
- }
76
- }, label: value })));
77
- })));
62
+ return (react_2.default.createElement(react_1.Box, { display: "flex", flexDirection: "column", gap: "0.375rem" }, filters.map(function (value) { return (react_2.default.createElement(Checkbox_1.default, { key: value, value: value, isChecked: selectedFilters.includes(value), onChange: function (e) {
63
+ setSelectedFilters(function (prev) {
64
+ return e.target.checked
65
+ ? __spreadArray(__spreadArray([], prev, true), [value], false) : prev.filter(function (f) { return f !== value; });
66
+ });
67
+ }, label: value })); })));
78
68
  };
79
69
  exports.default = TableFilters;
package/dist/Components/Table/TableSettings/TableSettings.js CHANGED
@@ -46,14 +46,14 @@ var lucide_react_1 = require("lucide-react");
46
46
  var TableFilters_1 = __importDefault(require("./TableFilters"));
47
47
  var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
48
48
  var TableSettings = function (_a) {
49
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
49
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
50
50
  var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
51
51
  var theme = (0, useCustomTheme_1.useCustomTheme)();
52
52
  var childInputMethodsRef = (0, react_2.useRef)({});
53
53
  var childFilterMethodsRef = (0, react_2.useRef)(null);
54
- var _m = (0, react_2.useState)(false), settingsOpen = _m[0], setSettingsOpen = _m[1];
55
- var _o = (0, react_2.useState)(0), selectedIndex = _o[0], setSelectedIndex = _o[1];
56
- var _p = (0, react_2.useState)(columns), items = _p[0], setItems = _p[1];
54
+ var _t = (0, react_2.useState)(false), settingsOpen = _t[0], setSettingsOpen = _t[1];
55
+ var _u = (0, react_2.useState)(0), selectedIndex = _u[0], setSelectedIndex = _u[1];
56
+ var _v = (0, react_2.useState)(columns), items = _v[0], setItems = _v[1];
57
57
  var filters = (0, react_2.useMemo)(function () {
58
58
  var _a;
59
59
  return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
@@ -73,52 +73,69 @@ var TableSettings = function (_a) {
73
73
  react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, 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] })),
74
74
  react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
75
75
  react_2.default.createElement(react_1.ModalOverlay, null),
76
- react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "2px 3px", minW: "700px", minH: "600px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50] },
77
- react_2.default.createElement(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border) === null || _g === void 0 ? void 0 : _g[200], pb: 3 },
78
- react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "lg" }, "Table Settings")),
79
- react_2.default.createElement(react_1.ModalCloseButton, null),
80
- react_2.default.createElement(react_1.ModalBody, { py: 4 },
81
- react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
82
- react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.border) === null || _j === void 0 ? void 0 : _j[200], pr: 2 },
83
- filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
84
- borderLeft: "2px solid ".concat(theme.colors.primary[600]),
85
- bg: theme.colors.primary[50],
76
+ react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], overflow: "hidden" },
77
+ react_2.default.createElement(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border) === null || _g === void 0 ? void 0 : _g[200], pb: 0, pt: 4, px: 4 },
78
+ react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
79
+ react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled" },
80
+ react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "none" },
81
+ filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { fontSize: "13px", fontWeight: 500, px: 4, py: 2, borderBottom: "2px solid transparent", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.text) === null || _j === void 0 ? void 0 : _j[400], _selected: {
82
+ borderBottom: "2px solid ".concat(theme.colors.primary[600]),
83
+ color: theme.colors.primary[600],
86
84
  fontWeight: 600,
87
85
  }, _hover: {
88
- bg: theme.colors.gray[100],
89
- }, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Filters")),
90
- react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
91
- borderLeft: "2px solid ".concat(theme.colors.primary[600]),
92
- bg: theme.colors.primary[50],
86
+ color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[600],
87
+ } }, "Filters")),
88
+ react_2.default.createElement(react_1.Tab, { fontSize: "13px", fontWeight: 500, px: 4, py: 2, borderBottom: "2px solid transparent", color: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[400], _selected: {
89
+ borderBottom: "2px solid ".concat(theme.colors.primary[600]),
90
+ color: theme.colors.primary[600],
93
91
  fontWeight: 600,
94
92
  }, _hover: {
95
- bg: theme.colors.gray[100],
96
- }, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Manage columns")),
97
- react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50], borderRadius: "md", sx: {
98
- '&::-webkit-scrollbar': {
99
- width: '3px',
100
- height: '3px',
101
- },
102
- '&::-webkit-scrollbar-track': {
93
+ color: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.text) === null || _q === void 0 ? void 0 : _q[600],
94
+ } }, "Manage Columns")),
95
+ react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3 }),
96
+ react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, maxH: "420px", overflowY: "auto", sx: {
97
+ "&::-webkit-scrollbar": { width: "3px", height: "3px" },
98
+ "&::-webkit-scrollbar-track": {
103
99
  background: theme.colors.gray[100],
104
- borderRadius: '2px',
100
+ borderRadius: "2px",
105
101
  },
106
- '&::-webkit-scrollbar-thumb': {
102
+ "&::-webkit-scrollbar-thumb": {
107
103
  background: theme.colors.gray[400],
108
- borderRadius: '2px',
104
+ borderRadius: "2px",
109
105
  },
110
- '&::-webkit-scrollbar-thumb:hover': {
106
+ "&::-webkit-scrollbar-thumb:hover": {
111
107
  background: theme.colors.gray[500],
112
108
  },
113
- scrollbarWidth: 'thin',
109
+ scrollbarWidth: "thin",
114
110
  scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
115
111
  } },
116
- filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, null,
117
- react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
118
- react_2.default.createElement(react_1.TabPanel, null,
119
- react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
120
- react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200], pt: 3 },
121
- react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
122
- react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
112
+ react_2.default.createElement(react_1.TabPanels, null,
113
+ filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
114
+ react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
115
+ react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
116
+ react_2.default.createElement(react_1.Box, { sx: {
117
+ // Target ManageColumns list items for tighter spacing
118
+ "& [role='listitem'], & > div > div": {
119
+ py: "4px !important",
120
+ minHeight: "unset !important",
121
+ },
122
+ "& label": {
123
+ fontSize: "13px !important",
124
+ },
125
+ "& .chakra-checkbox": {
126
+ gap: "8px !important",
127
+ },
128
+ "& .chakra-checkbox__label": {
129
+ fontSize: "13px !important",
130
+ },
131
+ // Tighten drag handle rows if present
132
+ "& [draggable]": {
133
+ py: "5px !important",
134
+ },
135
+ } },
136
+ react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
137
+ react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.border) === null || _s === void 0 ? void 0 : _s[200], pt: 3, pb: 3, px: 4 },
138
+ react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
139
+ react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))))));
123
140
  };
124
141
  exports.default = TableSettings;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.159",
3
+ "version": "2.2.161",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",