pixelize-design-library 2.2.110 → 2.2.112

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 (17) hide show
  1. package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts +1 -1
  2. package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js +92 -13
  3. package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts +8 -2
  4. package/dist/Components/FilterSidebar/FilterSidebar.d.ts +3 -0
  5. package/dist/Components/FilterSidebar/FilterSidebar.js +18 -12
  6. package/dist/Components/Table/CompactSelect.d.ts +15 -0
  7. package/dist/Components/Table/CompactSelect.js +58 -0
  8. package/dist/Components/Table/Components/Pagination.js +1 -1
  9. package/dist/Components/Table/Components/TableHeader.js +8 -7
  10. package/dist/Components/Table/LeftFilterPane.d.ts +14 -3
  11. package/dist/Components/Table/LeftFilterPane.js +169 -102
  12. package/dist/Components/Table/SelectOperationControls.d.ts +8 -0
  13. package/dist/Components/Table/SelectOperationControls.js +16 -0
  14. package/dist/Components/Table/Table.js +46 -16
  15. package/dist/Components/Table/TextOperationControls.js +2 -2
  16. package/package.json +1 -1
  17. package/dist/Assets/defaultLogo.tsx +0 -31
package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ApexLineChartProps } from "./ApexLineChartProps";
3
- declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, variant, }: ApexLineChartProps) => React.JSX.Element;
3
+ declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, compact, toolbarBreakpointPct, titleClampLines, showTitleEllipsis, showSeries, series: seriesNames, variant, }: ApexLineChartProps) => React.JSX.Element;
4
4
  export default ApexLineChart;
package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js CHANGED
@@ -37,34 +37,85 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
37
37
  Object.defineProperty(exports, "__esModule", { value: true });
38
38
  var react_1 = __importStar(require("react"));
39
39
  var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
40
+ var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
40
41
  var ApexLineChart = function (_a) {
41
- var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 600 : _c, _d = _a.lineColors, lineColors = _d === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _d, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
42
+ var data = _a.data, labels = _a.labels, title = _a.title, height = _a.height, width = _a.width, _b = _a.lineColors, lineColors = _b === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _b, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
42
43
  color: "#3182ce",
43
44
  fontSize: "16px",
44
45
  fontWeight: 600,
45
46
  fontFamily: "Arial",
46
- } : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
47
- var _h = (0, react_1.useState)([
47
+ } : _d, _e = _a.compact, compact = _e === void 0 ? false : _e, _f = _a.toolbarBreakpointPct, toolbarBreakpointPct = _f === void 0 ? 0.6 : _f, titleClampLines = _a.titleClampLines, _g = _a.showTitleEllipsis, showTitleEllipsis = _g === void 0 ? true : _g, _h = _a.showSeries, showSeries = _h === void 0 ? true : _h, seriesNames = _a.series, _j = _a.variant, variant = _j === void 0 ? "basic" : _j;
48
+ var initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
49
+ var _k = (0, react_1.useState)([
48
50
  {
49
- name: "Series 1",
51
+ name: initialName,
50
52
  data: Array.isArray(data) ? data : [],
51
53
  },
52
- ]), series = _h[0], setSeries = _h[1];
53
- // 🔄 Handle realtime updates
54
+ ]), apexSeries = _k[0], setApexSeries = _k[1];
54
55
  (0, react_1.useEffect)(function () {
55
56
  if (variant === "realtime") {
56
57
  var interval_1 = setInterval(function () {
57
- setSeries(function (prev) {
58
+ setApexSeries(function (prev) {
58
59
  var newData = __spreadArray([], prev[0].data, true);
59
60
  newData.push(Math.floor(Math.random() * 100) + 10); // simulate
60
61
  if (newData.length > 20)
61
62
  newData.shift(); // keep window size
62
- return [{ name: "Series 1", data: newData }];
63
+ return [{ name: prev[0].name, data: newData }];
63
64
  });
64
65
  }, 1000);
65
66
  return function () { return clearInterval(interval_1); };
66
67
  }
67
68
  }, [variant]);
69
+ var wrapperRef = (0, react_1.useRef)(null);
70
+ var _l = (0, react_1.useState)(0), containerW = _l[0], setContainerW = _l[1];
71
+ (0, react_1.useEffect)(function () {
72
+ if (!wrapperRef.current)
73
+ return;
74
+ var ro = new ResizeObserver(function (entries) {
75
+ var _a, _b;
76
+ var w = ((_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width) || 0;
77
+ setContainerW(w);
78
+ });
79
+ ro.observe(wrapperRef.current);
80
+ return function () { return ro.disconnect(); };
81
+ }, []);
82
+ var parsePercent = function (v) {
83
+ var n = parseFloat(v.replace('%', ''));
84
+ return isNaN(n) ? 0 : n / 100;
85
+ };
86
+ var chartW = typeof width === "number"
87
+ ? width
88
+ : typeof width === "string" && width.trim().endsWith("%")
89
+ ? containerW * parsePercent(width.trim())
90
+ : containerW;
91
+ var hNum = typeof height === "number"
92
+ ? height
93
+ : 0;
94
+ var isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
95
+ var computedFontSize = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize) ||
96
+ (chartW
97
+ ? "".concat(Math.max(12, Math.min(18, Math.floor(chartW / 18))), "px")
98
+ : "14px");
99
+ var clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
100
+ var titleRef = (0, react_1.useRef)(null);
101
+ var _m = (0, react_1.useState)(false), isTruncated = _m[0], setIsTruncated = _m[1];
102
+ (0, react_1.useEffect)(function () {
103
+ var el = titleRef.current;
104
+ if (!el)
105
+ return;
106
+ if (clampLines > 1) {
107
+ setIsTruncated(el.scrollHeight > el.clientHeight);
108
+ }
109
+ else {
110
+ setIsTruncated(el.scrollWidth > el.clientWidth);
111
+ }
112
+ }, [title, chartW, width, clampLines]);
113
+ var ratio = containerW > 0
114
+ ? chartW / containerW
115
+ : typeof width === "string" && width.trim().endsWith("%")
116
+ ? parsePercent(width.trim())
117
+ : 1;
118
+ var showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
68
119
  var options = {
69
120
  chart: {
70
121
  type: "line",
@@ -76,7 +127,7 @@ var ApexLineChart = function (_a) {
76
127
  }
77
128
  : { enabled: false },
78
129
  zoom: { enabled: true },
79
- toolbar: { show: true },
130
+ toolbar: { show: showToolbar },
80
131
  },
81
132
  stroke: { curve: "smooth" },
82
133
  colors: lineColors,
@@ -84,14 +135,42 @@ var ApexLineChart = function (_a) {
84
135
  ? { categories: labels }
85
136
  : { type: variant === "realtime" ? "numeric" : "category" },
86
137
  title: {
87
- text: title,
138
+ text: isSmall ? undefined : title,
88
139
  align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
89
140
  style: titleStyle,
90
141
  },
91
- markers: { size: 4 },
142
+ tooltip: {
143
+ enabled: !!showSeries,
144
+ marker: { show: !!showSeries },
145
+ },
146
+ markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
92
147
  dataLabels: { enabled: false },
148
+ grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
93
149
  };
94
- return (react_1.default.createElement("div", null,
95
- react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "line", height: height, width: width })));
150
+ return (react_1.default.createElement("div", { ref: wrapperRef },
151
+ title && isSmall && (react_1.default.createElement(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: "#4A5568", color: "#fff", isDisabled: !isTruncated },
152
+ react_1.default.createElement("div", { ref: titleRef, style: {
153
+ textAlign: "left",
154
+ color: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color,
155
+ fontSize: computedFontSize,
156
+ fontWeight: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontWeight,
157
+ fontFamily: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily,
158
+ marginBottom: 4,
159
+ width: typeof width === "string"
160
+ ? width
161
+ : typeof width === "number"
162
+ ? "".concat(width, "px")
163
+ : "100%",
164
+ whiteSpace: clampLines > 1 ? "normal" : "nowrap",
165
+ overflow: "hidden",
166
+ textOverflow: showTitleEllipsis && clampLines === 1 ? "ellipsis" : "clip",
167
+ display: clampLines > 1 ? "-webkit-box" : undefined,
168
+ WebkitLineClamp: clampLines > 1 ? clampLines : undefined,
169
+ WebkitBoxOrient: clampLines > 1 ? "vertical" : undefined,
170
+ wordBreak: clampLines > 1 ? "break-word" : undefined,
171
+ lineHeight: clampLines > 1 ? "1.2em" : undefined,
172
+ maxHeight: clampLines > 1 ? "".concat(1.2 * clampLines, "em") : undefined,
173
+ } }, title))),
174
+ react_1.default.createElement(react_apexcharts_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width })));
96
175
  };
97
176
  exports.default = ApexLineChart;
package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts CHANGED
@@ -2,21 +2,27 @@ export type ApexLineChartProps = {
2
2
  variant?: LineChartVariant;
3
3
  data: number[];
4
4
  labels?: string[];
5
+ series?: string[];
5
6
  title?: string;
6
- height?: number;
7
- width?: number;
7
+ height?: number | string;
8
+ width?: number | string;
8
9
  lineColors?: string[];
9
10
  titlePosition?: "left" | "center" | "right";
11
+ showSeries?: boolean;
10
12
  titleStyle?: {
11
13
  color?: string;
12
14
  fontSize?: string;
13
15
  fontWeight?: number | string;
14
16
  fontFamily?: string;
15
17
  };
18
+ compact?: boolean;
19
+ titleClampLines?: number;
20
+ showTitleEllipsis?: boolean;
16
21
  legendStyle?: {
17
22
  colors?: string | string[];
18
23
  useSeriesColors?: boolean;
19
24
  position?: "top" | "right" | "bottom" | "left";
20
25
  };
26
+ toolbarBreakpointPct?: number;
21
27
  };
22
28
  export type LineChartVariant = "basic" | "realtime";
package/dist/Components/FilterSidebar/FilterSidebar.d.ts CHANGED
@@ -26,6 +26,7 @@ export type FilterSidebarProps = {
26
26
  sidebarOptions: FilterSection[];
27
27
  selected?: SelectedFilters;
28
28
  onChange?: (selected: SelectedFilters) => void;
29
+ onApply?: (selected: SelectedFilters) => void;
29
30
  maxVisible?: number;
30
31
  width?: string | number;
31
32
  variant?: "minimal" | "cards";
@@ -34,6 +35,8 @@ export type FilterSidebarProps = {
34
35
  headerPadding?: number;
35
36
  panelPadding?: number;
36
37
  sliderMode?: "chakra" | "native";
38
+ clearAllButton?: boolean;
39
+ onClearAllHandler?: () => void;
37
40
  };
38
41
  declare const FilterSidebar: React.FC<FilterSidebarProps>;
39
42
  export default FilterSidebar;
package/dist/Components/FilterSidebar/FilterSidebar.js CHANGED
@@ -44,13 +44,17 @@ var Accordion_1 = __importDefault(require("../Accordion/Accordion"));
44
44
  var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
45
45
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
46
46
  var FilterSidebar = function (_a) {
47
- var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight, _e = _a.headerPadding, headerPadding = _e === void 0 ? 2 : _e, _f = _a.panelPadding, panelPadding = _f === void 0 ? 3 : _f, _g = _a.sliderMode, sliderMode = _g === void 0 ? "native" : _g;
47
+ var sidebarOptions = _a.sidebarOptions, selected = _a.selected, onChange = _a.onChange, _b = _a.maxVisible, maxVisible = _b === void 0 ? 10 : _b, _c = _a.width, width = _c === void 0 ? 280 : _c, _d = _a.variant, variant = _d === void 0 ? "minimal" : _d, containerPadding = _a.containerPadding, containerHeight = _a.containerHeight,
48
+ // headerPadding = 2,
49
+ _e = _a.panelPadding,
50
+ // headerPadding = 2,
51
+ panelPadding = _e === void 0 ? 3 : _e, _f = _a.clearAllButton, clearAllButton = _f === void 0 ? true : _f, onClearAllHandler = _a.onClearAllHandler;
48
52
  var theme = (0, useCustomTheme_1.useCustomTheme)();
49
- var _h = (0, react_1.useState)({}), openPrice = _h[0], setOpenPrice = _h[1];
53
+ var _g = (0, react_1.useState)({}), openPrice = _g[0], setOpenPrice = _g[1];
50
54
  // Determine if the component is controlled (prop provided) or uncontrolled (internal state)
51
55
  var isControlled = selected !== undefined;
52
56
  // Local state for uncontrolled mode
53
- var _j = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _j[0], setLocalSelected = _j[1];
57
+ var _h = (0, react_1.useState)(function () { return (__assign({}, (selected || {}))); }), localSelected = _h[0], setLocalSelected = _h[1];
54
58
  // Derived state: use prop if controlled, otherwise local state
55
59
  var internalSelected = (selected !== undefined ? selected : localSelected);
56
60
  // Wrapper for state updates to handle both modes
@@ -62,12 +66,12 @@ var FilterSidebar = function (_a) {
62
66
  setLocalSelected(next);
63
67
  }
64
68
  };
65
- var _k = (0, react_1.useState)(function () {
69
+ var _j = (0, react_1.useState)(function () {
66
70
  var initial = {};
67
71
  sidebarOptions.forEach(function (s) { return (initial[s.id] = !!s.initiallyExpanded); });
68
72
  return initial;
69
- }), expanded = _k[0], setExpanded = _k[1];
70
- var _l = (0, react_1.useState)({}), searchTerms = _l[0], setSearchTerms = _l[1];
73
+ }), expanded = _j[0], setExpanded = _j[1];
74
+ var _k = (0, react_1.useState)({}), searchTerms = _k[0], setSearchTerms = _k[1];
71
75
  var activeCount = (0, react_1.useMemo)(function () {
72
76
  return Object.values(internalSelected).reduce(function (acc, v) { return acc + (Array.isArray(v) ? v.length : 0); }, 0);
73
77
  }, [internalSelected]);
@@ -99,6 +103,7 @@ var FilterSidebar = function (_a) {
99
103
  });
100
104
  };
101
105
  var clearAll = function () {
106
+ onClearAllHandler === null || onClearAllHandler === void 0 ? void 0 : onClearAllHandler();
102
107
  setInternalSelected(function () {
103
108
  var next = {};
104
109
  onChange === null || onChange === void 0 ? void 0 : onChange(next);
@@ -107,7 +112,8 @@ var FilterSidebar = function (_a) {
107
112
  };
108
113
  var items = sidebarOptions.map(function (section) { return ({
109
114
  header: (react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1 },
110
- react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700] }, section.label),
115
+ react_1.default.createElement(react_2.Tooltip, { label: section.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
116
+ react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: theme.colors.gray[700], textAlign: "left", isTruncated: true, flex: "1", minW: 0 }, section.label)),
111
117
  (function () {
112
118
  var sel = internalSelected[section.id];
113
119
  var hasValue = Array.isArray(sel) ? sel.length > 0 : !!sel;
@@ -115,7 +121,7 @@ var FilterSidebar = function (_a) {
115
121
  })() ? (react_1.default.createElement(react_2.Badge, { colorScheme: "red", variant: "solid", fontSize: "xs", cursor: "pointer", onClick: function (e) {
116
122
  e.stopPropagation();
117
123
  clearFilter(section.id);
118
- }, borderRadius: "full", px: 2 }, "Clear")) : null)),
124
+ }, borderRadius: "full", px: 2 }, "Clear")) : react_1.default.createElement(lucide_react_1.ChevronDownIcon, { size: 10 }))),
119
125
  content: (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, py: 0 }, section.range ? ((function () {
120
126
  var _a, _b, _c, _d, _e, _f, _g, _h;
121
127
  var range = section.range;
@@ -234,7 +240,7 @@ var FilterSidebar = function (_a) {
234
240
  currentMax === v ? (react_1.default.createElement(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center" },
235
241
  react_1.default.createElement(lucide_react_1.Check, { size: 9, color: theme.colors.red[600] }))) : null)); }))))))));
236
242
  })()) : (react_1.default.createElement(react_1.default.Fragment, null,
237
- section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
243
+ section.id === "rating" ? (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, w: "full" }, [4, 3, 2, 1].map(function (r) { return (react_1.default.createElement(react_2.Flex, { key: "rating-".concat(r), align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: String(internalSelected[section.id] || "") === String(r) ? theme.colors.red[50] : "transparent", border: String(internalSelected[section.id] || "") === String(r) ? "1px solid ".concat(theme.colors.red[200]) : "none", _hover: { bg: theme.colors.gray[50] }, onClick: function () {
238
244
  setInternalSelected(function (prev) {
239
245
  var _a;
240
246
  var next = __assign(__assign({}, prev), (_a = {}, _a[section.id] = String(r), _a));
@@ -245,8 +251,7 @@ var FilterSidebar = function (_a) {
245
251
  react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
246
252
  react_1.default.createElement(react_2.HStack, { spacing: 1 }, Array.from({ length: 5 }, function (_, i) { return (react_1.default.createElement(react_2.Box, { key: "star-".concat(r, "-").concat(i) },
247
253
  react_1.default.createElement(lucide_react_1.Star, { size: 16, color: theme.colors.orange[500], fill: i < r ? theme.colors.orange[500] : "none" }))); })),
248
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")),
249
- String(internalSelected[section.id] || "") === String(r) && (react_1.default.createElement(react_2.Badge, { fontSize: "xs", colorScheme: "red", borderRadius: "full", px: 2 }, "Selected")))); }))) : null,
254
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[700] }, "& Up")))); }))) : null,
250
255
  section.searchable && (react_1.default.createElement(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: "Search ".concat(section.label, "..."), borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", borderColor: theme.colors.gray[200], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: function (e) {
251
256
  var v = e.target.value;
252
257
  setSearchTerms(function (prev) {
@@ -336,7 +341,8 @@ var FilterSidebar = function (_a) {
336
341
  return (react_1.default.createElement(react_2.Box, { w: width, bg: variant === "minimal" ? theme.colors.white || "#fff" : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? "1px solid ".concat(theme.colors.gray[200]) : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible" },
337
342
  react_1.default.createElement(react_2.Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100] },
338
343
  react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.gray[800] }, "Filters"),
339
- activeCount > 0 && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All"))),
344
+ activeCount > 0 && clearAllButton && (react_1.default.createElement(react_1.default.Fragment, null,
345
+ react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", leftIcon: react_1.default.createElement(lucide_react_1.X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red" }, "Clear All")))),
340
346
  react_1.default.createElement(Accordion_1.default, { allowMultiple: true, defaultIndex: sidebarOptions.map(function (_, i) { return i; }), items: items })));
341
347
  };
342
348
  exports.default = FilterSidebar;
package/dist/Components/Table/CompactSelect.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import React from "react";
2
+ export type Options = {
3
+ id: string | number;
4
+ label: string;
5
+ };
6
+ type Props = {
7
+ options: Options[];
8
+ value?: Options;
9
+ placeholder?: string;
10
+ height?: string | number;
11
+ onSelect?: (option: Options) => void;
12
+ size?: "xs" | "sm";
13
+ };
14
+ declare const CompactSelect: React.FC<Props>;
15
+ export default CompactSelect;
package/dist/Components/Table/CompactSelect.js ADDED
@@ -0,0 +1,58 @@
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
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ var react_1 = __importStar(require("react"));
27
+ var react_2 = require("@chakra-ui/react");
28
+ var lucide_react_1 = require("lucide-react");
29
+ var CompactSelect = function (_a) {
30
+ var options = _a.options, value = _a.value, _b = _a.placeholder, placeholder = _b === void 0 ? "Select" : _b, _c = _a.height, height = _c === void 0 ? "22px" : _c, onSelect = _a.onSelect, _d = _a.size, size = _d === void 0 ? "xs" : _d;
31
+ var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
32
+ var _f = (0, react_1.useState)(""), query = _f[0], setQuery = _f[1];
33
+ var filtered = (0, react_1.useMemo)(function () {
34
+ var q = query.trim().toLowerCase();
35
+ if (!q)
36
+ return options;
37
+ return options.filter(function (o) { return (o.label || "").toLowerCase().includes(q); });
38
+ }, [query, options]);
39
+ return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, placement: "bottom-start" },
40
+ react_1.default.createElement(react_2.PopoverTrigger, null,
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
+ 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
+ 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")))))))));
57
+ };
58
+ exports.default = CompactSelect;
package/dist/Components/Table/Components/Pagination.js CHANGED
@@ -16,7 +16,7 @@ var Pagination = function (_a) {
16
16
  // const isRightDisabled = currentPage >= pages - 1;
17
17
  var isLeftDisabled = dataLength === 0 || currentPage === 0;
18
18
  var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
19
- return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center" },
19
+ return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", minW: 0, overflow: "hidden", flexWrap: "nowrap" },
20
20
  !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
21
21
  !pageSizeOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
22
22
  computedOptions.map(function (size, index) {
package/dist/Components/Table/Components/TableHeader.js CHANGED
@@ -80,12 +80,13 @@ var TableHeader = function (_a) {
80
80
  };
81
81
  exports.default = (0, react_2.memo)(TableHeader);
82
82
  var SortingIcon = (0, react_2.memo)(function (_a) {
83
+ var _b;
83
84
  var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
84
85
  var theme = (0, useCustomTheme_1.useCustomTheme)();
85
- return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
86
- sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { color: "black", size: 14 }),
87
- sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { color: "black", size: 14 }),
88
- sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { color: "black", size: 14 })));
86
+ return (react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: { color: (_b = theme.colors.secondary) === null || _b === void 0 ? void 0 : _b[500] } },
87
+ sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { size: 14 }),
88
+ sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { size: 14 }),
89
+ sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 })));
89
90
  });
90
91
  var ColumnHeader = (0, react_2.memo)(function (_a) {
91
92
  var _b, _c, _d, _e, _f, _g;
@@ -133,10 +134,10 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
133
134
  }, [handleSort]);
134
135
  var isFiltersEnabled = (isHovered && header.isSort) ||
135
136
  ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
136
- return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[600], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, borderY: noBorders ? "none" : "0.063rem solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
137
+ return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[600], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderY: noBorders ? "none" : "0.063rem solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
137
138
  react_2.default.createElement(react_1.Box, { display: "flex", color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.secondary) === null || _g === void 0 ? void 0 : _g[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
138
- react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
139
- react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
139
+ react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden" }, header.label),
140
+ react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center" },
140
141
  isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
141
142
  react_2.default.createElement(TableFilters_1.default, { header: header, setColumnsSearch: function (searchVal) {
142
143
  return setColumnsSearch(function (prev) {
package/dist/Components/Table/LeftFilterPane.d.ts CHANGED
@@ -2,7 +2,11 @@ import React from "react";
2
2
  export type FilterItem = {
3
3
  id: string;
4
4
  label: string;
5
- type?: "text";
5
+ type?: "text" | "select";
6
+ option?: {
7
+ id: string;
8
+ label: string;
9
+ }[];
6
10
  };
7
11
  export type FilterSection = {
8
12
  id: string;
@@ -11,13 +15,20 @@ export type FilterSection = {
11
15
  initiallyExpanded?: boolean;
12
16
  radio?: boolean;
13
17
  };
18
+ export type SelectedFilterItem = {
19
+ id: string;
20
+ condition?: string;
21
+ value?: any;
22
+ type?: "text" | "select";
23
+ };
14
24
  export type LeftFilterPaneProps = {
15
25
  title?: string;
16
26
  height?: number | string;
17
27
  sections: FilterSection[];
18
- onApply?: (selected: Record<string, string[]>) => void;
28
+ selected?: Record<string, any>;
29
+ onApply?: (selected: any) => void;
19
30
  onClear?: () => void;
20
31
  theme: any;
21
32
  };
22
- declare const LeftFilterPane: ({ title, height, sections, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
33
+ declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
23
34
  export default LeftFilterPane;
package/dist/Components/Table/LeftFilterPane.js CHANGED
@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
33
33
  __setModuleDefault(result, mod);
34
34
  return result;
35
35
  };
36
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
37
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
38
+ if (ar || !(i in from)) {
39
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
40
+ ar[i] = from[i];
41
+ }
42
+ }
43
+ return to.concat(ar || Array.prototype.slice.call(from));
44
+ };
36
45
  var __importDefault = (this && this.__importDefault) || function (mod) {
37
46
  return (mod && mod.__esModule) ? mod : { "default": mod };
38
47
  };
@@ -45,26 +54,58 @@ var react_3 = require("@chakra-ui/react");
45
54
  var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
46
55
  var RadioButton_1 = require("../RadioButton/RadioButton");
47
56
  var TextOperationControls_1 = require("./TextOperationControls");
57
+ var SelectOperationControls_1 = require("./SelectOperationControls");
58
+ var CompactSelect_1 = __importDefault(require("./CompactSelect"));
48
59
  var LeftFilterPane = function (_a) {
49
- var _b, _c;
50
- var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 500 : _e, sections = _a.sections, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme;
51
- var _f = (0, react_1.useState)(""), search = _f[0], setSearch = _f[1];
52
- var _g = (0, react_1.useState)(false), isSearching = _g[0], setIsSearching = _g[1];
53
- var _h = (0, react_1.useState)({}), selected = _h[0], setSelected = _h[1];
54
- var _j = (0, react_1.useState)({}), textFilters = _j[0], setTextFilters = _j[1];
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];
55
64
  var searchRef = (0, react_1.useRef)(null);
56
- var setTextOperator = function (itemId, operator) {
57
- setTextFilters(function (prev) {
58
- var _a;
59
- var _b;
60
- return (__assign(__assign({}, prev), (_a = {}, _a[itemId] = { operator: operator, value: ((_b = prev[itemId]) === null || _b === void 0 ? void 0 : _b.value) || "" }, _a)));
65
+ (0, react_1.useEffect)(function () {
66
+ setLocalSelected(selectedProp || {});
67
+ }, [selectedProp]);
68
+ var selected = localSelected;
69
+ var search = selected.search || "";
70
+ var setSelected = function (updater) {
71
+ setLocalSelected(function (prev) {
72
+ var next = typeof updater === 'function' ? updater(prev) : updater;
73
+ return next;
61
74
  });
62
75
  };
63
- var setTextValue = function (itemId, value) {
64
- setTextFilters(function (prev) {
76
+ var setSearch = function (val) {
77
+ setSelected(function (prev) { return (__assign(__assign({}, prev), { search: val })); });
78
+ };
79
+ var updateItem = function (sectionId, itemId, updates) {
80
+ setSelected(function (prev) {
65
81
  var _a;
66
- var _b;
67
- return (__assign(__assign({}, prev), (_a = {}, _a[itemId] = { operator: ((_b = prev[itemId]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: value }, _a)));
82
+ var sectionItems = prev[sectionId] || [];
83
+ var index = sectionItems.findIndex(function (i) { return i.id === itemId; });
84
+ if (index === -1)
85
+ return prev;
86
+ var newSectionItems = __spreadArray([], sectionItems, true);
87
+ newSectionItems[index] = __assign(__assign({}, newSectionItems[index]), updates);
88
+ return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = newSectionItems, _a));
89
+ });
90
+ };
91
+ var setTextOperator = function (sectionId, itemId, operator) {
92
+ updateItem(sectionId, itemId, { condition: operator });
93
+ };
94
+ var setTextValue = function (sectionId, itemId, value) {
95
+ updateItem(sectionId, itemId, { value: value });
96
+ };
97
+ var toggleItem = function (sectionId, itemId, checked, type) {
98
+ setSelected(function (prev) {
99
+ var _a, _b;
100
+ var sectionItems = prev[sectionId] || [];
101
+ if (checked) {
102
+ if (sectionItems.some(function (i) { return i.id === itemId; }))
103
+ 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));
105
+ }
106
+ else {
107
+ return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = sectionItems.filter(function (i) { return i.id !== itemId; }), _b));
108
+ }
68
109
  });
69
110
  };
70
111
  var formatHeaderLabel = function (label) {
@@ -91,9 +132,8 @@ var LeftFilterPane = function (_a) {
91
132
  (0, react_3.useOutsideClick)({
92
133
  ref: searchRef,
93
134
  handler: function () {
94
- if (isSearching) {
135
+ if (isSearching && !search.trim()) {
95
136
  setIsSearching(false);
96
- setSearch("");
97
137
  }
98
138
  },
99
139
  });
@@ -103,23 +143,15 @@ var LeftFilterPane = function (_a) {
103
143
  var q = search.toLowerCase();
104
144
  return sections.map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); });
105
145
  }, [search, sections]);
106
- var toggleItem = function (sectionId, itemId, checked) {
107
- setSelected(function (prev) {
108
- var _a;
109
- var cur = new Set(prev[sectionId] || []);
110
- if (checked)
111
- cur.add(itemId);
112
- else
113
- cur.delete(itemId);
114
- return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = Array.from(cur), _a));
115
- });
146
+ var handleApply = function () {
147
+ onApply === null || onApply === void 0 ? void 0 : onApply(selected);
116
148
  };
117
- var handleApply = function () { return onApply === null || onApply === void 0 ? void 0 : onApply(selected); };
118
149
  var handleClear = function () {
119
- setSelected({});
150
+ var clearedState = { search: "" };
151
+ setLocalSelected(clearedState);
120
152
  onClear === null || onClear === void 0 ? void 0 : onClear();
153
+ onApply === null || onApply === void 0 ? void 0 : onApply(clearedState);
121
154
  };
122
- var hasSelection = (0, react_1.useMemo)(function () { return Object.values(selected).some(function (arr) { return (arr || []).length > 0; }); }, [selected]);
123
155
  return (react_1.default.createElement(react_2.Box, { width: "180px", height: height, bg: "white", borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column" },
124
156
  react_1.default.createElement(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200" }, !isSearching ? (react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between" },
125
157
  react_1.default.createElement(react_2.Text, { fontWeight: "semibold", fontSize: "sm" }, title),
@@ -133,77 +165,56 @@ var LeftFilterPane = function (_a) {
133
165
  setSearch("");
134
166
  setIsSearching(false);
135
167
  } }))))))),
136
- react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" },
137
- 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) {
138
- var _a, _b, _c;
139
- return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
140
- react_1.default.createElement("h2", null,
141
- react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
142
- (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
143
- react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
144
- whiteSpace: "nowrap",
145
- overflow: "hidden",
146
- textOverflow: "ellipsis",
147
- } }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
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) {
169
+ var _a;
170
+ return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
171
+ react_1.default.createElement("h2", null,
172
+ react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
173
+ (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
174
+ react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
148
175
  whiteSpace: "nowrap",
149
176
  overflow: "hidden",
150
177
  textOverflow: "ellipsis",
151
- } }, formatHeaderLabel(sec.label))),
152
- react_1.default.createElement(react_2.AccordionIcon, null))),
153
- react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
154
- react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && selected[sec.id][0]) || "", onChange: function (val) {
155
- return setSelected(function (prev) {
156
- var _a;
157
- return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [val] : [], _a)));
158
- });
159
- }, options: (sec.items || []).map(function (it) { return ({
160
- label: it.label,
161
- id: it.id,
162
- }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
163
- ((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })))) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
164
- var _a, _b;
165
- var checked = (selected[sec.id] || []).includes(it.id);
166
- return (react_1.default.createElement(react_1.default.Fragment, null,
167
- 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); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
168
- '.chakra-checkbox__control': {
169
- width: '12px',
170
- height: '12px',
171
- mt: '2px',
172
- },
173
- '.chakra-checkbox__label': {
174
- lineHeight: '1rem',
175
- whiteSpace: 'normal',
176
- wordBreak: 'break-word',
177
- },
178
- } }),
179
- checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "contains", value: ((_b = textFilters[it.id]) === null || _b === void 0 ? void 0 : _b.value) || "", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, onValueChange: function (val) { return setTextValue(it.id, val); } }))));
180
- }))))));
181
- }))) : (filteredSections.map(function (sec) {
182
- var _a, _b, _c;
183
- return (react_1.default.createElement(react_2.Box, { key: sec.id },
184
- react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" }, (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
185
- react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
178
+ } }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
186
179
  whiteSpace: "nowrap",
187
180
  overflow: "hidden",
188
181
  textOverflow: "ellipsis",
189
- } }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
190
- whiteSpace: "nowrap",
191
- overflow: "hidden",
192
- textOverflow: "ellipsis",
193
- } }, formatHeaderLabel(sec.label)))),
194
- react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
195
- react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && selected[sec.id][0]) || "", onChange: function (val) {
196
- return setSelected(function (prev) {
197
- var _a;
198
- return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [val] : [], _a)));
199
- });
200
- }, options: (sec.items || []).map(function (it) { return ({
201
- label: it.label,
202
- id: it.id,
203
- }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
204
- ((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })))) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
205
- var checked = (selected[sec.id] || []).includes(it.id);
206
- 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); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
182
+ } }, formatHeaderLabel(sec.label))),
183
+ react_1.default.createElement(react_2.AccordionIcon, null))),
184
+ react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
185
+ react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && ((_a = selected[sec.id][0]) === null || _a === void 0 ? void 0 : _a.id)) || "", onChange: function (val) {
186
+ var item = (sec.items || []).find(function (i) { return i.id === val; });
187
+ setSelected(function (prev) {
188
+ var _a;
189
+ return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [{ id: val, type: item === null || item === void 0 ? void 0 : item.type, condition: (item === null || item === void 0 ? void 0 : item.type) === "text" ? "contains" : "is", value: "" }] : [], _a)));
190
+ });
191
+ }, options: (sec.items || []).map(function (it) { return ({
192
+ label: it.label,
193
+ id: it.id,
194
+ }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
195
+ (function () {
196
+ var _a;
197
+ var activeItem = (_a = selected[sec.id]) === null || _a === void 0 ? void 0 : _a[0];
198
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
199
+ 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
+ }
201
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "select") {
202
+ var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
203
+ var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
204
+ return (react_1.default.createElement(react_1.default.Fragment, null,
205
+ 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 }),
206
+ react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
207
+ 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) {
208
+ setTextValue(sec.id, activeItem.id, option);
209
+ } }))));
210
+ }
211
+ return null;
212
+ })())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
213
+ var sectionItems = selected[sec.id] || [];
214
+ var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
215
+ var checked = !!activeItem;
216
+ return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
217
+ 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: {
207
218
  '.chakra-checkbox__control': {
208
219
  width: '12px',
209
220
  height: '12px',
@@ -214,12 +225,68 @@ var LeftFilterPane = function (_a) {
214
225
  whiteSpace: 'normal',
215
226
  wordBreak: 'break-word',
216
227
  },
217
- } }));
218
- }))))));
219
- })),
220
- hasSelection && (react_1.default.createElement(react_2.Box, { position: "sticky", bottom: 0, zIndex: 1, bg: "white", borderTop: "1px solid", borderColor: "gray.200", px: 3, py: 2 },
221
- react_1.default.createElement(react_2.VStack, { spacing: 2, m: 0 },
222
- react_1.default.createElement(react_2.Button, { size: "sm", width: "100%", colorScheme: "blue", onClick: handleApply, m: 0 }, "Apply Filter"),
223
- react_1.default.createElement(react_2.Button, { size: "sm", width: "100%", onClick: handleClear, m: 0 }, "Clear")))))));
228
+ } }),
229
+ 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 },
231
+ 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
+ react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
233
+ 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) {
234
+ setTextValue(sec.id, it.id, option);
235
+ } }))))));
236
+ }))))));
237
+ }))) : (filteredSections.map(function (sec) {
238
+ var _a;
239
+ return (react_1.default.createElement(react_2.Box, { key: sec.id },
240
+ react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" }, (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
241
+ react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
242
+ whiteSpace: "nowrap",
243
+ overflow: "hidden",
244
+ textOverflow: "ellipsis",
245
+ } }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
246
+ whiteSpace: "nowrap",
247
+ overflow: "hidden",
248
+ textOverflow: "ellipsis",
249
+ } }, formatHeaderLabel(sec.label)))),
250
+ react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
251
+ react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && ((_a = selected[sec.id][0]) === null || _a === void 0 ? void 0 : _a.id)) || "", onChange: function (val) {
252
+ var item = (sec.items || []).find(function (i) { return i.id === val; });
253
+ setSelected(function (prev) {
254
+ var _a;
255
+ return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [{ id: val, type: item === null || item === void 0 ? void 0 : item.type, condition: (item === null || item === void 0 ? void 0 : item.type) === "text" ? "contains" : "is", value: "" }] : [], _a)));
256
+ });
257
+ }, options: (sec.items || []).map(function (it) { return ({
258
+ label: it.label,
259
+ id: it.id,
260
+ }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
261
+ (function () {
262
+ var _a;
263
+ var activeItem = (_a = selected[sec.id]) === null || _a === void 0 ? void 0 : _a[0];
264
+ if ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.type) === "text") {
265
+ 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
+ }
267
+ return null;
268
+ })())) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
269
+ var sectionItems = selected[sec.id] || [];
270
+ var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
271
+ 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
+ } }));
284
+ }))))));
285
+ }))),
286
+ react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
287
+ 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"))));
224
291
  };
225
292
  exports.default = LeftFilterPane;
package/dist/Components/Table/SelectOperationControls.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ export declare function SelectOperationControls({ operator, onOperatorChange, size, ml, mt, }: {
3
+ operator: string;
4
+ onOperatorChange: (op: string) => void;
5
+ size?: "xs" | "sm";
6
+ ml?: string | number;
7
+ mt?: string | number;
8
+ }): React.JSX.Element;
package/dist/Components/Table/SelectOperationControls.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.SelectOperationControls = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var react_2 = require("@chakra-ui/react");
9
+ function SelectOperationControls(_a) {
10
+ var operator = _a.operator, onOperatorChange = _a.onOperatorChange, _b = _a.size, size = _b === void 0 ? "xs" : _b, _c = _a.ml, ml = _c === void 0 ? "1.25rem" : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d;
11
+ return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml },
12
+ react_1.default.createElement(react_2.Select, { size: size, value: operator, onChange: function (e) { return onOperatorChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "90px" },
13
+ react_1.default.createElement("option", { value: "is" }, "is"),
14
+ react_1.default.createElement("option", { value: "is not" }, "is not"))));
15
+ }
16
+ exports.SelectOperationControls = SelectOperationControls;
package/dist/Components/Table/Table.js CHANGED
@@ -46,30 +46,30 @@ var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
46
46
  var lucide_react_1 = require("lucide-react");
47
47
  var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
48
48
  function Table(_a) {
49
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
50
- var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _q = _a.isCheckbox, isCheckbox = _q === void 0 ? false : _q, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _r = _a.noBorders, noBorders = _r === void 0 ? false : _r, _s = _a.isPagination, isPagination = _s === void 0 ? true : _s, onRowClick = _a.onRowClick, selections = _a.selections, _t = _a.isActionFreeze, isActionFreeze = _t === void 0 ? true : _t, _u = _a.preferences, preferences = _u === void 0 ? {
49
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
50
+ var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _y = _a.isCheckbox, isCheckbox = _y === void 0 ? false : _y, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _z = _a.noBorders, noBorders = _z === void 0 ? false : _z, _0 = _a.isPagination, isPagination = _0 === void 0 ? true : _0, onRowClick = _a.onRowClick, selections = _a.selections, _1 = _a.isActionFreeze, isActionFreeze = _1 === void 0 ? true : _1, _2 = _a.preferences, preferences = _2 === void 0 ? {
51
51
  url: "",
52
52
  token: "",
53
53
  key: "",
54
54
  name: "",
55
55
  page: "",
56
56
  orgId: "",
57
- } : _u, _v = _a.paginationMode, paginationMode = _v === void 0 ? "client" : _v, _w = _a.noOfRowsPerPage, noOfRowsPerPage = _w === void 0 ? 50 : _w, _x = _a.totalRecords, totalRecords = _x === void 0 ? 0 : _x, onPagination = _a.onPagination, _y = _a.isTableSettings, isTableSettings = _y === void 0 ? false : _y, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
57
+ } : _2, _3 = _a.paginationMode, paginationMode = _3 === void 0 ? "client" : _3, _4 = _a.noOfRowsPerPage, noOfRowsPerPage = _4 === void 0 ? 50 : _4, _5 = _a.totalRecords, totalRecords = _5 === void 0 ? 0 : _5, onPagination = _a.onPagination, _6 = _a.isTableSettings, isTableSettings = _6 === void 0 ? false : _6, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
58
58
  // onColumnFilter
59
59
  ;
60
60
  var theme = (0, useCustomTheme_1.useCustomTheme)();
61
- var _z = (0, react_1.useState)({}), columnsSearch = _z[0], setColumnsSearch = _z[1];
61
+ var _7 = (0, react_1.useState)({}), columnsSearch = _7[0], setColumnsSearch = _7[1];
62
62
  var tableContainerRef = (0, react_1.useRef)(null);
63
- var _0 = (0, react_1.useState)(500), viewportAvailableH = _0[0], setViewportAvailableH = _0[1];
63
+ var _8 = (0, react_1.useState)(500), viewportAvailableH = _8[0], setViewportAvailableH = _8[1];
64
64
  var isServerPagination = paginationMode === "server";
65
- var _1 = (0, usePreferences_1.useGetPreferences)({
65
+ var _9 = (0, usePreferences_1.useGetPreferences)({
66
66
  baseUrl: preferences.url,
67
67
  page: preferences.page,
68
68
  key: preferences.key,
69
69
  name: preferences.name,
70
70
  authToken: preferences.token,
71
71
  orgId: preferences.orgId,
72
- }), tablePreferencesData = _1.preferences, loading = _1.loading;
72
+ }), tablePreferencesData = _9.preferences, loading = _9.loading;
73
73
  var savePreferences = (0, usePreferences_1.useSavePreferences)({
74
74
  baseUrl: preferences.url,
75
75
  page: preferences.page,
@@ -87,7 +87,7 @@ function Table(_a) {
87
87
  }
88
88
  return {};
89
89
  }, [tablePreferencesData]);
90
- var _2 = (0, useTable_1.default)({
90
+ var _10 = (0, useTable_1.default)({
91
91
  tableBorderColor: tableBorderColor,
92
92
  data: data,
93
93
  isPagination: isPagination,
@@ -100,7 +100,7 @@ function Table(_a) {
100
100
  totalRecords: totalRecords,
101
101
  isServerPagination: isServerPagination,
102
102
  onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
103
- }), tableData = _2.tableData, isContent = _2.isContent, isLink = _2.isLink, headerRefs = _2.headerRefs, columnWidths = _2.columnWidths, handleSort = _2.handleSort, handleCheckbox = _2.handleCheckbox, filteredData = _2.filteredData, startRow = _2.startRow, endRow = _2.endRow, selection = _2.selection, columnsSort = _2.columnsSort, currentPage = _2.currentPage, pages = _2.pages, rowsPerPage = _2.rowsPerPage, handlePageSizeChange = _2.handlePageSizeChange, setCurrentPage = _2.setCurrentPage, columnsList = _2.columnsList, handleColumnPreferences = _2.handleColumnPreferences;
103
+ }), tableData = _10.tableData, isContent = _10.isContent, isLink = _10.isLink, headerRefs = _10.headerRefs, columnWidths = _10.columnWidths, handleSort = _10.handleSort, handleCheckbox = _10.handleCheckbox, filteredData = _10.filteredData, startRow = _10.startRow, endRow = _10.endRow, selection = _10.selection, columnsSort = _10.columnsSort, currentPage = _10.currentPage, pages = _10.pages, rowsPerPage = _10.rowsPerPage, handlePageSizeChange = _10.handlePageSizeChange, setCurrentPage = _10.setCurrentPage, columnsList = _10.columnsList, handleColumnPreferences = _10.handleColumnPreferences;
104
104
  var _filteredData = (0, react_1.useMemo)(function () {
105
105
  return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
106
106
  }, [columnsSearch, filteredData]);
@@ -134,14 +134,37 @@ function Table(_a) {
134
134
  var dynamicMaxH = Math.min(500, rowsHeight);
135
135
  var fittedMaxH = autoFitViewport ? Math.min(dynamicMaxH, viewportAvailableH) : dynamicMaxH;
136
136
  var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : fittedMaxH;
137
+ var isCompactHeader = (0, react_2.useBreakpointValue)({ base: true, md: true, lg: false });
138
+ var sidebarActiveCount = (0, react_1.useMemo)(function () {
139
+ if (!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected))
140
+ return 0;
141
+ return Object.entries(filterSidebar.selected).reduce(function (acc, _a) {
142
+ var key = _a[0], items = _a[1];
143
+ if (key === "search")
144
+ return acc; // Don't count search in active filter count
145
+ return acc + (Array.isArray(items) ? items.length : 0);
146
+ }, 0);
147
+ }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
137
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 },
138
149
  react_1.default.createElement(react_2.Flex, { align: "start" },
139
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 } },
140
- 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 : [], onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onChange })),
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 })),
141
152
  react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
142
- react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, 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]) },
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]) },
143
154
  filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
144
- react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[500], onClick: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
155
+ react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block" },
156
+ react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.primary) === null || _l === void 0 ? void 0 : _l[500] : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.text) === null || _o === void 0 ? void 0 : _o[500], onClick: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
157
+ sidebarActiveCount > 0 && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: function (e) {
158
+ var _a;
159
+ e.stopPropagation();
160
+ if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
161
+ filterSidebar.onClearAllHandler();
162
+ }
163
+ else {
164
+ (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
165
+ }
166
+ }, _hover: { bg: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.red) === null || _s === void 0 ? void 0 : _s[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 },
167
+ react_1.default.createElement(lucide_react_1.X, { size: 10, strokeWidth: 3 })))),
145
168
  react_1.default.createElement(Divider_1.default, null))),
146
169
  react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
147
170
  isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -151,8 +174,15 @@ function Table(_a) {
151
174
  react_1.default.createElement(Divider_1.default, null),
152
175
  react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
153
176
  react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
154
- (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto", minW: 310 },
155
- react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true })))),
177
+ react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
178
+ (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 1 280px", minW: 0, overflow: "hidden" },
179
+ react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))),
180
+ (isPagination || isServerPagination) && isCompactHeader && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
181
+ react_1.default.createElement(react_2.PopoverTrigger, null,
182
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "More", size: "sm", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 18, color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.text) === null || _u === void 0 ? void 0 : _u[500] }) })),
183
+ react_1.default.createElement(react_2.PopoverContent, { maxW: "18rem", p: 2, overflow: "hidden" },
184
+ react_1.default.createElement(react_2.PopoverBody, { p: 0 },
185
+ react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true }))))))),
156
186
  react_1.default.createElement(react_2.TableContainer, { ref: tableContainerRef, position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
157
187
  '&::-webkit-scrollbar': {
158
188
  width: '6px',
@@ -187,12 +217,12 @@ function Table(_a) {
187
217
  },
188
218
  } },
189
219
  react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
190
- react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
220
+ react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
191
221
  ? true
192
222
  : selection.length === 0
193
223
  ? false
194
224
  : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
195
225
  react_1.default.createElement(react_3.Tbody, null,
196
- react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
226
+ react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
197
227
  }
198
228
  exports.default = Table;
package/dist/Components/Table/TextOperationControls.js CHANGED
@@ -8,9 +8,9 @@ var react_1 = __importDefault(require("react"));
8
8
  var react_2 = require("@chakra-ui/react");
9
9
  exports.TEXT_OPERATORS = [
10
10
  "is",
11
- "isn't",
11
+ "is not",
12
12
  "contains",
13
- "doesn't contain",
13
+ "does not contain",
14
14
  "starts with",
15
15
  "ends with",
16
16
  "is empty",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.110",
3
+ "version": "2.2.112",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/dist/Assets/defaultLogo.tsx DELETED
@@ -1,31 +0,0 @@
1
- import React from 'react';
2
- import { useCustomTheme } from "../Theme/useCustomTheme";
3
-
4
- const DefaultLogo = () => {
5
- const theme = useCustomTheme();
6
- return (
7
- <svg
8
- width="12.09"
9
- height="15.95"
10
- viewBox="0 0 31 29"
11
- fill="none"
12
- xmlns="http://www.w3.org/2000/svg"
13
- >
14
- <path
15
- d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
16
- fill={theme.colors.black}
17
- />
18
- <path
19
- d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
20
- fill={theme.colors.black}
21
- />
22
- <path
23
- d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
24
- fill={theme.colors.black}
25
- />
26
- </svg>
27
-
28
- )
29
- };
30
-
31
- export default DefaultLogo;