pixelize-design-library 1.1.46 → 1.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/Components/AlertDialog/AlertDialog.d.ts +1 -1
  2. package/dist/Components/AlertDialog/AlertDialog.js +3 -3
  3. package/dist/Components/AlertDialog/AlertDialogProps.d.ts +3 -2
  4. package/dist/Components/SelectSearch/SelectSearch.js +27 -255
  5. package/dist/Components/Switch/Switch.js +3 -3
  6. package/dist/Components/Table/Components/TableBody.js +22 -11
  7. package/dist/Components/Table/Components/TableHeader.d.ts +1 -1
  8. package/dist/Components/Table/Components/TableHeader.js +87 -32
  9. package/dist/Components/Table/Table.d.ts +1 -1
  10. package/dist/Components/Table/Table.js +42 -16
  11. package/dist/Components/Table/TableProps.d.ts +3 -0
  12. package/dist/Pages/alertdialog.js +1 -1
  13. package/dist/Pages/selectSearch.js +37 -17
  14. package/dist/Pages/table.js +75 -5
  15. package/package.json +1 -1
package/dist/Components/AlertDialog/AlertDialog.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { AlertDialogsProps } from "./AlertDialogProps";
3
- declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key }: AlertDialogsProps) => React.JSX.Element;
3
+ declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React.JSX.Element;
4
4
  export default AlertDialog;
package/dist/Components/AlertDialog/AlertDialog.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = require("@chakra-ui/react");
7
7
  var react_2 = __importDefault(require("react"));
8
8
  var AlertDialog = function (_a) {
9
- var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, key = _a.key;
9
+ var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, _d = _a.confirmButtonColor, confirmButtonColor = _d === void 0 ? "red" : _d, key = _a.key;
10
10
  return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, key: key },
11
11
  react_2.default.createElement(react_1.AlertDialogOverlay, null),
12
12
  react_2.default.createElement(react_1.AlertDialogContent, null,
@@ -14,7 +14,7 @@ var AlertDialog = function (_a) {
14
14
  react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
15
15
  react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
16
16
  react_2.default.createElement(react_1.AlertDialogFooter, { sx: footerStyle },
17
- react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, sx: button1Style }, cancelButtonText),
18
- react_2.default.createElement(react_1.Button, { colorScheme: "red", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, sx: button2Style }, confirmButtonText)))));
17
+ react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, size: "sm", sx: button1Style }, cancelButtonText),
18
+ react_2.default.createElement(react_1.Button, { colorScheme: confirmButtonColor, onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style }, confirmButtonText)))));
19
19
  };
20
20
  exports.default = AlertDialog;
package/dist/Components/AlertDialog/AlertDialogProps.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- /// <reference types="react" />
2
1
  import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
2
+ import { ReactElement } from "react";
3
3
  export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
4
4
  title: string;
5
- content: string;
5
+ content: ReactElement;
6
6
  isCentered?: boolean;
7
7
  confirmButtonText?: string;
8
8
  cancelButtonText?: string;
@@ -15,4 +15,5 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
15
15
  button1Style?: React.CSSProperties;
16
16
  button2Style?: React.CSSProperties;
17
17
  key?: string | number;
18
+ confirmButtonColor?: string;
18
19
  };
package/dist/Components/SelectSearch/SelectSearch.js CHANGED
@@ -1,27 +1,4 @@
1
1
  "use strict";
2
- // import React, {
3
- // useCallback,
4
- // useEffect,
5
- // useMemo,
6
- // useRef,
7
- // useState,
8
- // } from "react";
9
- // import {
10
- // Box,
11
- // Input,
12
- // Spinner,
13
- // VStack,
14
- // Text,
15
- // InputGroup,
16
- // InputRightElement,
17
- // HStack,
18
- // Tag,
19
- // TagLabel,
20
- // TagCloseButton,
21
- // } from "@chakra-ui/react";
22
- // import { selectOptions, SelectSearchProps } from "./SelectSearchProps";
23
- // import { TextLabel } from "../Common/FormLabel";
24
- // import { useCustomTheme } from "../../Theme/useCustomTheme";
25
2
  var __assign = (this && this.__assign) || function () {
26
3
  __assign = Object.assign || function(t) {
27
4
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -66,236 +43,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
66
43
  return to.concat(ar || Array.prototype.slice.call(from));
67
44
  };
68
45
  Object.defineProperty(exports, "__esModule", { value: true });
69
- // export default function SelectSearch({
70
- // options,
71
- // initialSelectedOption,
72
- // onOptionSelect,
73
- // inputOnchange,
74
- // id,
75
- // name,
76
- // label,
77
- // inputStyle,
78
- // dropdownStyle,
79
- // isOptionLoading,
80
- // loadingText = "loading",
81
- // boxStyle,
82
- // placeholder = "Select Option",
83
- // searchQuery = "",
84
- // isInformation = false,
85
- // informationMessage,
86
- // rightIcon,
87
- // rightElementStyle,
88
- // isMultipleSelect,
89
- // isRequired=false,
90
- // onOptionMultiSelect,
91
- // }: Readonly<SelectSearchProps>) {
92
- // const theme = useCustomTheme();
93
- // const [selectedOptions, setSelectedOptions] = useState<selectOptions[]>(
94
- // initialSelectedOption ? [initialSelectedOption] : []
95
- // );
96
- // const [inputValue, setInputValue] = useState(searchQuery);
97
- // const [isOpen, setIsOpen] = useState(false);
98
- // const [position, setPosition] = useState<"above" | "below">("below");
99
- // const inputRef = useRef<HTMLInputElement>(null);
100
- // const dropdownRef = useRef<HTMLDivElement>(null);
101
- // const filteredOptions = useMemo(() => {
102
- // return options.filter((option) =>
103
- // option.label.toLowerCase().includes(inputValue.toLowerCase())
104
- // );
105
- // }, [options, inputValue]);
106
- // const handleOptionClick = useCallback(
107
- // (option: selectOptions) => {
108
- // if (isMultipleSelect) {
109
- // setSelectedOptions((prev) => {
110
- // const isSelected = prev.some((selected) => selected.id === option.id);
111
- // const newSelected = isSelected
112
- // ? prev.filter((selected) => selected.id !== option.id)
113
- // : [...prev, option];
114
- // setInputValue("");
115
- // if (onOptionMultiSelect) {
116
- // onOptionMultiSelect(newSelected);
117
- // }
118
- // return newSelected;
119
- // });
120
- // } else {
121
- // setInputValue(option.label);
122
- // setIsOpen(false);
123
- // if (onOptionSelect) {
124
- // onOptionSelect(option);
125
- // }
126
- // }
127
- // },
128
- // [isMultipleSelect, onOptionSelect]
129
- // );
130
- // const handleRemoveOption = (option: selectOptions) => {
131
- // setSelectedOptions((prev) =>
132
- // prev.filter((selected) => selected.id !== option.id)
133
- // );
134
- // if (onOptionMultiSelect) {
135
- // onOptionMultiSelect(selectedOptions.filter((selected) => selected.id !== option.id));
136
- // }
137
- // };
138
- // const handleInputChange = (value: any) => {
139
- // setInputValue(value);
140
- // inputOnchange(value);
141
- // };
142
- // const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
143
- // if (e.key === "Enter") {
144
- // const matchingOption = options.find(
145
- // (option) => option.label.toLowerCase() === inputValue.toLowerCase()
146
- // );
147
- // if (matchingOption) {
148
- // handleOptionClick(matchingOption);
149
- // }
150
- // }
151
- // };
152
- // const updateDropdownPosition = () => {
153
- // if (inputRef.current && dropdownRef.current) {
154
- // const inputRect = inputRef.current.getBoundingClientRect();
155
- // const dropdownRect = dropdownRef.current.getBoundingClientRect();
156
- // const viewportHeight = window.innerHeight;
157
- // const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
158
- // const spaceAbove = inputRect.top + window.scrollY;
159
- // if (spaceBelow >= dropdownRect.height) {
160
- // setPosition("below");
161
- // } else if (spaceAbove >= dropdownRect.height) {
162
- // setPosition("above");
163
- // } else {
164
- // setPosition("below");
165
- // }
166
- // }
167
- // };
168
- // useEffect(() => {
169
- // if (isOpen) {
170
- // updateDropdownPosition();
171
- // }
172
- // const handleClickOutside = (event: MouseEvent) => {
173
- // if (
174
- // inputRef.current &&
175
- // dropdownRef.current &&
176
- // !inputRef.current.contains(event.target as Node) &&
177
- // !dropdownRef.current.contains(event.target as Node)
178
- // ) {
179
- // setIsOpen(false);
180
- // }
181
- // };
182
- // document.addEventListener("mousedown", handleClickOutside);
183
- // return () => {
184
- // document.removeEventListener("mousedown", handleClickOutside);
185
- // };
186
- // }, [isOpen]);
187
- // const RenderOptions = useCallback(() => {
188
- // if (isOptionLoading) {
189
- // return (
190
- // <VStack py={2}>
191
- // <Spinner size="sm" color="blue.500" />
192
- // <Text color="blue.500">{loadingText}</Text>
193
- // </VStack>
194
- // );
195
- // }
196
- // if (filteredOptions?.length) {
197
- // return filteredOptions.map((option) => (
198
- // <Box
199
- // key={option.id}
200
- // px={4}
201
- // py={2}
202
- // cursor="pointer"
203
- // _hover={{ backgroundColor: "blue.50" }}
204
- // onClick={() => handleOptionClick(option)}
205
- // >
206
- // {option.label}
207
- // </Box>
208
- // ));
209
- // }
210
- // return (
211
- // <Text px={4} py={2} color="gray.500">
212
- // No options found
213
- // </Text>
214
- // );
215
- // }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
216
- // return (
217
- // <Box display="flex" flexDirection="column" position="relative" sx={boxStyle}>
218
- // {label && (
219
- // <TextLabel
220
- // label={label}
221
- // id={id}
222
- // isRequired={isRequired}
223
- // isInformation={isInformation}
224
- // informationMessage={informationMessage}
225
- // />
226
- // )}
227
- // {/* Display selected options as chips */}
228
- // {isMultipleSelect && selectedOptions.length > 0 && (
229
- // <HStack spacing={2} mb={2}>
230
- // {selectedOptions.map((option) => (
231
- // <Tag
232
- // size="md"
233
- // key={option.id}
234
- // borderRadius="full"
235
- // variant="solid"
236
- // sx={{ backgroundColor: theme.colors.primary[500] }}
237
- // >
238
- // <TagLabel width={"50px"}>{option.label}</TagLabel>
239
- // <TagCloseButton onClick={() => handleRemoveOption(option)} />
240
- // </Tag>
241
- // ))}
242
- // </HStack>
243
- // )}
244
- // <InputGroup>
245
- // <Input
246
- // ref={inputRef}
247
- // variant="flushed"
248
- // value={inputValue}
249
- // onClick={() => setIsOpen(true)}
250
- // onChange={(e) => handleInputChange(e.target.value)}
251
- // placeholder={placeholder}
252
- // onKeyDown={handleKeyDown}
253
- // id={id}
254
- // name={name}
255
- // cursor="pointer"
256
- // borderColor="gray.300"
257
- // _hover={{ borderColor: "blue.500" }}
258
- // _focus={{ borderColor: "blue.500" }}
259
- // style={{
260
- // ...inputStyle,
261
- // backgroundColor: theme.colors.backgroundColor.main,
262
- // fontWeight: 800,
263
- // color: theme.colors.gray[700],
264
- // padding: "0 0.5rem",
265
- // fontSize: 15,
266
- // letterSpacing: 0.7,
267
- // }}
268
- // />
269
- // {rightIcon && (
270
- // <InputRightElement
271
- // pointerEvents="none"
272
- // children={rightIcon}
273
- // style={{ ...rightElementStyle }}
274
- // />
275
- // )}
276
- // </InputGroup>
277
- // {isOpen && (
278
- // <Box
279
- // ref={dropdownRef}
280
- // position="absolute"
281
- // top={position === "below" ? "100%" : "auto"}
282
- // bottom={position === "above" ? "100%" : "auto"}
283
- // left={0}
284
- // right={0}
285
- // border="1px solid"
286
- // borderColor="gray.300"
287
- // borderRadius="md"
288
- // bg="white"
289
- // maxHeight="150px"
290
- // overflowY="auto"
291
- // zIndex={10}
292
- // >
293
- // {RenderOptions()}
294
- // </Box>
295
- // )}
296
- // </Box>
297
- // );
298
- // }
299
46
  var react_1 = __importStar(require("react"));
300
47
  var react_2 = require("@chakra-ui/react");
301
48
  var FormLabel_1 = require("../Common/FormLabel");
@@ -321,9 +68,34 @@ function SelectSearch(_a) {
321
68
  var _m = (0, react_1.useState)("below"), position = _m[0], setPosition = _m[1];
322
69
  var inputRef = (0, react_1.useRef)(null);
323
70
  var dropdownRef = (0, react_1.useRef)(null);
71
+ // const filteredOptions = useMemo(() => {
72
+ // return options.filter((option) => {
73
+ // const optionLabel = option.label || '';
74
+ // const searchValue = inputValue || '';
75
+ // return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
76
+ // });
77
+ // }, [options, inputValue]);
324
78
  var filteredOptions = (0, react_1.useMemo)(function () {
325
- return options.filter(function (option) { var _a, _b; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
326
- }, [options, inputValue]);
79
+ return options
80
+ .filter(function (option) {
81
+ // First filter out already selected options
82
+ // const isNotSelected = !selectedOptions.some(
83
+ // (selected) => selected.id === option.id
84
+ // );
85
+ var isNotSelected = isMultipleSelect ?
86
+ !selectedOptions.some(function (selected) { return selected.id === option.id; }) :
87
+ true;
88
+ // Then apply the search filter
89
+ var optionLabel = option.label || '';
90
+ var searchValue = inputValue || '';
91
+ return isNotSelected && optionLabel.toLowerCase().includes(searchValue.toLowerCase());
92
+ });
93
+ }, [options, inputValue, selectedOptions]);
94
+ // const filteredOptions = useMemo(() => {
95
+ // return options.filter((option) =>
96
+ // option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
97
+ // );
98
+ // }, [options, inputValue]);
327
99
  // const handleOptionClick = useCallback(
328
100
  // (option: selectOptions) => {
329
101
  // if (isMultipleSelect) {
package/dist/Components/Switch/Switch.js CHANGED
@@ -17,11 +17,11 @@ var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __m
17
17
  });
18
18
  // background-color: ${({ backgroundColor }) => backgroundColor};
19
19
  var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n list-style-type: none;\n margin: 0;\n padding: 1px;\n height: 100%;\n z-index: 1;\n"], ["\n display: flex;\n list-style-type: none;\n margin: 0;\n padding: 1px;\n height: 100%;\n z-index: 1;\n"])));
20
- var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n ", "\n"])), function (_a) {
20
+ var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n font-size: 14px;\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: 110px;\n height: 100%;\n color: black;\n transition: color 0.3s ease;\n font-weight: 400;\n padding: 2px;\n font-size: 14px;\n ", "\n"])), function (_a) {
21
21
  var isActive = _a.isActive;
22
- return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n background-color: transparent;\n z-index: 1;\n "], ["\n font-weight: 700;\n background-color: transparent;\n z-index: 1;\n "])));
22
+ return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 600;\n background-color: transparent;\n z-index: 1;\n "], ["\n font-weight: 600;\n background-color: transparent;\n z-index: 1;\n "])));
23
23
  });
24
- var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: white;\n height: auto;\n padding: 3px 3px 3px 3px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"], ["\n background-color: white;\n height: auto;\n padding: 3px 3px 3px 3px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"])));
24
+ var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: white;\n height: auto;\n padding: 1px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"], ["\n background-color: white;\n height: auto;\n padding: 1px;\n width: 200px;\n border-radius: 20px;\n border: 1px solid #e2e7ee;\n"])));
25
25
  function Switch(_a) {
26
26
  var leftText = _a.leftText, rightText = _a.rightText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onSwitchToggle = _a.onSwitchToggle, switchActive = _a.switchActive;
27
27
  return (react_1.default.createElement(SwitchContainerHeader, null,
package/dist/Components/Table/Components/TableBody.js CHANGED
@@ -52,27 +52,26 @@ var TableBody = function (_a) {
52
52
  };
53
53
  var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
54
54
  var _b;
55
- var row = _a.row;
55
+ var row = _a.row, isChecked = _a.isChecked;
56
56
  return (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
57
- react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(row.id); }, isChecked: selections.includes(row.id) })));
57
+ react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked, _hover: { transform: "scale(1.1)" } })));
58
58
  }, [
59
59
  freezedBgColor,
60
60
  freezedTextColor,
61
61
  handleCheckbox,
62
62
  noBorders,
63
- selections,
64
63
  (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
65
64
  ]);
66
65
  var RenderContent = (0, react_2.useCallback)(function (_a) {
67
66
  var _b, _c;
68
67
  var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
69
- return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(fa_1.FaAngleDown, { fontSize: 16 })) : (react_2.default.createElement(fa_1.FaAngleRight, { fontSize: 16 })), size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
68
+ return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(fa_1.FaAngleDown, { fontSize: 16 })) : (react_2.default.createElement(fa_1.FaAngleRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
70
69
  }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
71
70
  var RenderView = (0, react_2.useCallback)(function (_a) {
72
71
  var _b, _c;
73
72
  var row = _a.row;
74
- return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns" }, !!row.onLink && (react_2.default.createElement(react_1.IconButton, { "aria-label": "Link", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: react_2.default.createElement(icons_1.ExternalLinkIcon, { fontSize: 16 }), size: "sm", onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); }, variant: "ghost" }))));
75
- }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
73
+ return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns" }, !!row.onLink && (react_2.default.createElement(react_1.IconButton, { "aria-label": "Link", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.blue[500], icon: react_2.default.createElement(icons_1.ExternalLinkIcon, { fontSize: 16 }), size: "sm", onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); }, variant: "ghost", _hover: { transform: "scale(1.1)" } }))));
74
+ }, [freezedBgColor, freezedTextColor, noBorders, theme.colors]);
76
75
  if (isLoading) {
77
76
  var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
78
77
  (isCheckbox ? 1 : 0);
@@ -80,7 +79,9 @@ var TableBody = function (_a) {
80
79
  }
81
80
  if (data.length === 0) {
82
81
  var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
83
- (isCheckbox ? 1 : 0);
82
+ (isCheckbox ? 1 : 0) +
83
+ (isContent ? 1 : 0) +
84
+ (isLink ? 1 : 0);
84
85
  return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
85
86
  react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
86
87
  react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
@@ -89,14 +90,21 @@ var TableBody = function (_a) {
89
90
  return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
90
91
  var rowIndex = startRow + index;
91
92
  var isExpanded = expandedRows.has(rowIndex);
93
+ var isChecked = selections.includes(row.id);
92
94
  return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
93
- react_2.default.createElement(react_1.Tr, { key: index + 1, _hover: {
95
+ react_2.default.createElement(react_1.Tr, { key: index + 1, sx: isChecked
96
+ ? {
97
+ "& td": {
98
+ backgroundColor: theme.colors.gray[100],
99
+ },
100
+ }
101
+ : {}, _hover: {
94
102
  "& > td": {
95
103
  backgroundColor: theme.colors.gray[100],
96
104
  },
97
105
  } },
98
106
  isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!row.content })),
99
- isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row }),
107
+ isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
100
108
  columns.map(function (header, headerIndex) {
101
109
  var _a;
102
110
  var isFrozen = header.isFreeze;
@@ -117,12 +125,15 @@ var TableBody = function (_a) {
117
125
  ? theme.colors.backgroundColor.light
118
126
  : "white", textOverflow: "ellipsis", border: noBorders
119
127
  ? "none"
120
- : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
128
+ : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
121
129
  react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
122
130
  }),
123
131
  isLink && react_2.default.createElement(RenderView, { row: row })),
124
132
  row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
125
- react_2.default.createElement(react_1.Td, { colSpan: columns.length + (isCheckbox ? 1 : 0) + (isContent ? 1 : 0), p: 2 },
133
+ react_2.default.createElement(react_1.Td, { colSpan: columns.length +
134
+ (isCheckbox ? 1 : 0) +
135
+ (isContent ? 1 : 0) +
136
+ (isLink ? 1 : 0), p: 2 },
126
137
  react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
127
138
  })));
128
139
  };
package/dist/Components/Table/Components/TableHeader.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { TableHeaderPageProps } from "../TableProps";
3
- declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, }: TableHeaderPageProps) => React.JSX.Element;
3
+ declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, onColumnSearch, columnFilters, }: TableHeaderPageProps) => React.JSX.Element;
4
4
  export default TableHeader;
package/dist/Components/Table/Components/TableHeader.js CHANGED
@@ -27,15 +27,42 @@ var react_1 = require("@chakra-ui/react");
27
27
  var react_2 = __importStar(require("react"));
28
28
  var table_1 = require("../../../Utils/table");
29
29
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
30
+ var icons_1 = require("@chakra-ui/icons");
30
31
  var fa_1 = require("react-icons/fa");
32
+ var pi_1 = require("react-icons/pi");
33
+ var lu_1 = require("react-icons/lu");
31
34
  var TableHeader = function (_a) {
32
35
  var _b;
33
- var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink;
36
+ var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, onColumnSearch = _a.onColumnSearch, _c = _a.columnFilters, columnFilters = _c === void 0 ? {} : _c;
34
37
  var theme = (0, useCustomTheme_1.useCustomTheme)();
38
+ var _d = (0, react_2.useState)(null), openPopoverId = _d[0], setOpenPopoverId = _d[1];
39
+ var handleSearchChange = (0, react_2.useCallback)(function (columnId, value) {
40
+ onColumnSearch === null || onColumnSearch === void 0 ? void 0 : onColumnSearch(columnId, value);
41
+ }, [onColumnSearch]);
42
+ (0, react_2.useEffect)(function () {
43
+ if (!columnFilters)
44
+ return;
45
+ var lastKey = Object.keys(columnFilters).pop() || null;
46
+ if (!lastKey)
47
+ return;
48
+ setOpenPopoverId(lastKey);
49
+ }, [columnFilters]);
50
+ (0, react_2.useEffect)(function () {
51
+ var handleClickOutside = function (event) {
52
+ var target = event.target;
53
+ if (!(target === null || target === void 0 ? void 0 : target.closest(".search-popover"))) {
54
+ setOpenPopoverId(null);
55
+ }
56
+ };
57
+ document.addEventListener("mousedown", handleClickOutside);
58
+ return function () {
59
+ document.removeEventListener("mousedown", handleClickOutside);
60
+ };
61
+ }, [openPopoverId]);
35
62
  var RenderCheckbox = (0, react_2.useCallback)(function () {
36
63
  var _a;
37
- return (react_2.default.createElement(react_1.Th, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
38
- react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
64
+ return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)", top: 0 },
65
+ react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate", _hover: { transform: "scale(1.1)" } })));
39
66
  }, [
40
67
  checked,
41
68
  freezedBgColor,
@@ -47,42 +74,70 @@ var TableHeader = function (_a) {
47
74
  ]);
48
75
  var RenderConent = (0, react_2.useCallback)(function () {
49
76
  var _a;
50
- return (react_2.default.createElement(react_1.Th, { w: "6", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
77
+ return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
51
78
  react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
52
- react_2.default.createElement(fa_1.FaExpandArrowsAlt, { fontSize: 14 }))));
79
+ react_2.default.createElement(pi_1.PiTreeViewFill, { fontSize: 18 }))));
53
80
  }, [freezedBgColor, noBorders, theme.colors.gray]);
54
81
  var RenderView = (0, react_2.useCallback)(function () {
55
82
  var _a;
56
- return (react_2.default.createElement(react_1.Th, { w: "6", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
83
+ return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
84
+ react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
85
+ react_2.default.createElement(lu_1.LuFileSymlink, { fontSize: 16 }))));
57
86
  }, [freezedBgColor, noBorders, theme.colors.gray]);
58
- return (react_2.default.createElement(react_1.Tr, null,
87
+ var Sorting = (0, react_2.useCallback)(function (_a) {
88
+ var _b;
89
+ var isSorting = _a.isSorting, header = _a.header;
90
+ return (react_2.default.createElement(SortingIcon, { sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", handleSortClick: function () {
91
+ var direction = "asc";
92
+ if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
93
+ direction = "desc";
94
+ }
95
+ else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
96
+ direction = "none";
97
+ }
98
+ handleSort(header.id, direction);
99
+ } }));
100
+ }, [handleSort]);
101
+ var Popvers = (0, react_2.useCallback)(function (_a) {
102
+ var header = _a.header;
103
+ return (react_2.default.createElement("div", { className: "search-popover" },
104
+ react_2.default.createElement(react_1.Popover, { isOpen: openPopoverId === header.id, onClose: function () { return setOpenPopoverId(null); }, placement: "bottom-start", closeOnBlur: false, closeOnEsc: false },
105
+ react_2.default.createElement(react_1.PopoverTrigger, null,
106
+ react_2.default.createElement(react_1.IconButton, { "aria-label": "Search", icon: react_2.default.createElement(fa_1.FaEllipsisV, null), size: "xs", variant: "ghost", onClick: function () {
107
+ return setOpenPopoverId(openPopoverId === header.id ? null : header.id);
108
+ }, _hover: { bg: "none" } })),
109
+ react_2.default.createElement(react_1.PopoverContent, { width: "200px" },
110
+ react_2.default.createElement(react_1.PopoverBody, { p: 2 },
111
+ react_2.default.createElement(react_1.InputGroup, { flex: "1", size: "xs" },
112
+ react_2.default.createElement(react_1.InputLeftElement, { pointerEvents: "none" },
113
+ react_2.default.createElement(icons_1.SearchIcon, { color: "gray.300" })),
114
+ react_2.default.createElement(react_1.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", value: columnFilters[header.id] || "", onChange: function (e) {
115
+ e.stopPropagation();
116
+ handleSearchChange(header.id, e.target.value);
117
+ } })))))));
118
+ }, [columnFilters, openPopoverId, handleSearchChange]);
119
+ var renderColumnHeader = function (header, index) {
120
+ var _a;
121
+ var isFrozen = header.isFreeze;
122
+ var leftOffset = isFrozen
123
+ ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
124
+ : undefined;
125
+ var isSorting = header.isSort
126
+ ? columnsSort.find(function (o) { return o.column === header.id; })
127
+ : undefined;
128
+ var BgColor = isFrozen ? freezedBgColor : headerBgColor;
129
+ var TextColor = isFrozen ? freezedTextColor : headerTextColor;
130
+ return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns") },
131
+ react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center" },
132
+ react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
133
+ react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
134
+ header.isSort ? (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })) : null,
135
+ react_2.default.createElement(Popvers, { header: header }))))));
136
+ };
137
+ return (react_2.default.createElement(react_1.Tr, { pr: 0 },
59
138
  isContent && react_2.default.createElement(RenderConent, null),
60
139
  isCheckbox && react_2.default.createElement(RenderCheckbox, null),
61
- columns.map(function (header, index) {
62
- var _a, _b;
63
- var isFrozen = header.isFreeze;
64
- var leftOffset = isFrozen
65
- ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
66
- : undefined;
67
- var isSorting = header.isSort
68
- ? columnsSort.find(function (o) { return o.column === header.id; })
69
- : undefined;
70
- var BgColor = isFrozen ? freezedBgColor : headerBgColor;
71
- var TextColor = isFrozen ? freezedTextColor : headerTextColor;
72
- return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns") },
73
- react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center" },
74
- react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
75
- react_2.default.createElement("span", null, header.isSort && (react_2.default.createElement(SortingIcon, { sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", handleSortClick: function () {
76
- var direction = "asc";
77
- if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
78
- direction = "desc";
79
- }
80
- else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
81
- direction = "none";
82
- }
83
- handleSort(header.id, direction);
84
- } })))))));
85
- }),
140
+ columns.map(function (header, index) { return renderColumnHeader(header, index); }),
86
141
  isLink && react_2.default.createElement(RenderView, null)));
87
142
  };
88
143
  exports.default = TableHeader;
package/dist/Components/Table/Table.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { TableProps } from "./TableProps";
3
- export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, }: TableProps): React.JSX.Element;
3
+ export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, selections, }: TableProps): React.JSX.Element;
package/dist/Components/Table/Table.js CHANGED
@@ -58,18 +58,23 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
58
58
  var defaultPageSize = 5;
59
59
  function Table(_a) {
60
60
  var _b;
61
- var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _c = _a.isCheckbox, isCheckbox = _c === void 0 ? false : _c, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _d = _a.noBorders, noBorders = _d === void 0 ? false : _d, _e = _a.isPagintaion, isPagintaion = _e === void 0 ? true : _e, onRowClick = _a.onRowClick;
61
+ var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _c = _a.isCheckbox, isCheckbox = _c === void 0 ? false : _c, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _d = _a.noBorders, noBorders = _d === void 0 ? false : _d, _e = _a.isPagintaion, isPagintaion = _e === void 0 ? true : _e, onRowClick = _a.onRowClick, selections = _a.selections;
62
62
  var theme = (0, useCustomTheme_1.useCustomTheme)();
63
- var _f = (0, react_4.useState)([]), selection = _f[0], setSelection = _f[1];
63
+ var _f = (0, react_4.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _f[0], setSelection = _f[1];
64
64
  var _g = (0, react_4.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
65
65
  var _h = (0, react_4.useState)(defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
66
- var _j = (0, react_4.useState)(columns.reduce(function (acc, curr) {
66
+ var _j = (0, react_4.useState)({}), columnFilters = _j[0], setColumnFilters = _j[1];
67
+ var _k = (0, react_4.useState)(data), filteredData = _k[0], setFilteredData = _k[1];
68
+ (0, react_1.useEffect)(function () {
69
+ setSelection(selections !== null && selections !== void 0 ? selections : []);
70
+ }, [selections]);
71
+ var _l = (0, react_4.useState)(columns.reduce(function (acc, curr) {
67
72
  var _a;
68
73
  return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
69
- }, {})), visibleColumns = _j[0], setVisibleColumns = _j[1];
70
- var _k = (0, react_4.useState)([]), columnWidths = _k[0], setColumnWidths = _k[1];
74
+ }, {})), visibleColumns = _l[0], setVisibleColumns = _l[1];
75
+ var _m = (0, react_4.useState)([]), columnWidths = _m[0], setColumnWidths = _m[1];
71
76
  var headerRefs = (0, react_1.useRef)([]);
72
- var _l = (0, react_4.useState)([]), columnsSort = _l[0], setColumnsSort = _l[1];
77
+ var _o = (0, react_4.useState)([]), columnsSort = _o[0], setColumnsSort = _o[1];
73
78
  (0, react_1.useEffect)(function () {
74
79
  // Measure widths after the component mounts
75
80
  var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
@@ -116,32 +121,51 @@ function Table(_a) {
116
121
  (0, react_1.useEffect)(function () {
117
122
  onSelection && onSelection(selection);
118
123
  }, [selection, onSelection]);
119
- var pages = Math.ceil(data.length / rowsPerPage);
120
- var startRow = currentPage * rowsPerPage;
121
- var endRow = startRow + rowsPerPage;
122
- var tableData = (0, react_1.useMemo)(function () {
123
- return (0, table_1.SortMultiColumnData)(data, columnsSort);
124
- }, [data, columnsSort]);
124
+ var pages = isPagintaion ? Math.ceil(data.length / rowsPerPage) : 0;
125
+ var startRow = !isPagintaion ? 0 : currentPage * rowsPerPage;
126
+ var endRow = !isPagintaion ? data.length : startRow + rowsPerPage;
127
+ (0, react_1.useEffect)(function () {
128
+ var sortedData = (0, table_1.SortMultiColumnData)(filteredData, columnsSort);
129
+ var data = sortedData.slice(startRow, endRow);
130
+ setFilteredData(data);
131
+ }, [columnsSort, startRow, endRow]);
125
132
  var handleColumnVisibilityChange = function (header) {
126
133
  setVisibleColumns(function (prev) {
127
134
  var _a;
128
135
  return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
129
136
  });
130
137
  };
138
+ var handleColumnSearch = function (columnId, searchValue) {
139
+ var _a;
140
+ var newFilters = __assign(__assign({}, columnFilters), (_a = {}, _a[columnId] = searchValue, _a));
141
+ if (!searchValue) {
142
+ delete newFilters[columnId];
143
+ }
144
+ setColumnFilters(newFilters);
145
+ // Apply all active filters
146
+ var filtered = data.filter(function (row) {
147
+ return Object.entries(newFilters).every(function (_a) {
148
+ var colId = _a[0], filterValue = _a[1];
149
+ var cellValue = String(row[colId]).toLowerCase();
150
+ return cellValue.includes(filterValue.toLowerCase());
151
+ });
152
+ });
153
+ setFilteredData(filtered);
154
+ };
131
155
  var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
132
156
  var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink; }); }, [data]);
133
157
  var RenderTable = function (_a) {
134
158
  var _b, _c, _d;
135
159
  var columns = _a.columns;
136
160
  return (react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "sticky-columns" },
137
- react_1.default.createElement(react_3.Thead, null,
161
+ react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 9 },
138
162
  react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isLoading, checked: data.length !== 0 && selection.length === data.length
139
163
  ? true
140
164
  : selection.length === 0
141
165
  ? false
142
- : "indeterminate", isContent: isContent, isLink: isLink })),
166
+ : "indeterminate", isContent: isContent, isLink: isLink, onColumnSearch: handleColumnSearch, columnFilters: columnFilters })),
143
167
  react_1.default.createElement(react_3.Tbody, null,
144
- react_1.default.createElement(TableBody_1.default, { data: tableData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink }))));
168
+ react_1.default.createElement(TableBody_1.default, { data: filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink }))));
145
169
  };
146
170
  return (react_1.default.createElement(react_1.default.Fragment, null,
147
171
  react_1.default.createElement(react_2.TableContainer, { sx: {
@@ -149,8 +173,10 @@ function Table(_a) {
149
173
  borderWidth: "0px 0px 0px 5px",
150
174
  borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[500],
151
175
  boxShadow: theme.shadows.lg,
176
+ maxHeight: "50vh",
177
+ overflowY: "auto",
152
178
  } },
153
179
  react_1.default.createElement(RenderTable, { columns: columns })),
154
- isPagintaion && !!tableData.length && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(data.length), handlePageSizeChange: handlePageSizeChange, dataLength: data.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
180
+ isPagintaion && !!filteredData.length && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(data.length), handlePageSizeChange: handlePageSizeChange, dataLength: data.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
155
181
  }
156
182
  exports.default = Table;
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -16,6 +16,7 @@ export type TableProps = {
16
16
  noBorders?: boolean;
17
17
  onSelection?: (selected: (string | number)[]) => void;
18
18
  isPagintaion?: boolean;
19
+ selections?: (string | number)[];
19
20
  onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
20
21
  };
21
22
  export type DataObject = {
@@ -52,6 +53,8 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
52
53
  checked: boolean | "indeterminate";
53
54
  isContent: boolean;
54
55
  isLink: boolean;
56
+ onColumnSearch?: (columnId: string, searchValue: string) => void;
57
+ columnFilters?: Record<string, string>;
55
58
  };
56
59
  export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick"> & {
57
60
  visibleColumns: Record<string, boolean>;
package/dist/Pages/alertdialog.js CHANGED
@@ -39,6 +39,6 @@ var AlertdialogBox = function () {
39
39
  react_1.default.createElement(react_2.Button, { onClick: function () {
40
40
  setAlertActive(true);
41
41
  } }, "AlertDialog"),
42
- react_1.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: "hellobody", onConfirm: function () { return handleAlert(); }, size: "500" })));
42
+ react_1.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: react_1.default.createElement("div", { style: { color: "red", height: "200px" } }, "hellobody"), onConfirm: function () { return handleAlert(); }, size: "500" })));
43
43
  };
44
44
  exports.default = AlertdialogBox;
package/dist/Pages/selectSearch.js CHANGED
@@ -30,23 +30,43 @@ var react_1 = __importStar(require("react"));
30
30
  var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
31
31
  var fi_1 = require("react-icons/fi");
32
32
  var SelectSearchs = function () {
33
- var _a = (0, react_1.useState)(""), selectSearchText = _a[0], setSelectSearchText = _a[1];
34
- var _b = (0, react_1.useState)(), selectedOption = _b[0], setSelectedOption = _b[1];
33
+ var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
34
+ var _b = (0, react_1.useState)({ id: "1", label: "Option 1" }), selectedOption = _b[0], setSelectedOption = _b[1];
35
+ var _c = (0, react_1.useState)("Option 1"), multiSelectSearchText = _c[0], setMultiSelectSearchText = _c[1];
36
+ var _d = (0, react_1.useState)({ id: "1", label: "Option 1" }), multiselectedOption = _d[0], setMultiSelectedOption = _d[1];
35
37
  return (react_1.default.createElement("div", null,
36
- react_1.default.createElement(SelectSearch_1.default, { options: [
37
- { id: "1", label: "Option 1" },
38
- { id: "2", label: "select 2" },
39
- {
40
- id: "3",
41
- label: "clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3",
42
- },
43
- ], inputOnchange: function (value) {
44
- setSelectSearchText(value.toString());
45
- console.log(value);
46
- }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function (data) {
47
- setSelectSearchText(data.label);
48
- }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
49
- setSelectedOption(data);
50
- } })));
38
+ react_1.default.createElement("div", null,
39
+ react_1.default.createElement(SelectSearch_1.default, { options: [
40
+ { id: "1", label: "Option 1" },
41
+ { id: "2", label: "select 2" },
42
+ { id: "3", label: "clone 3", },
43
+ ], inputOnchange: function (value) {
44
+ setSelectSearchText(value.toString());
45
+ console.log(value);
46
+ }, initialSelectedOption: selectedOption, onOptionSelect: function (data) {
47
+ setSelectSearchText(data.label);
48
+ }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
49
+ setSelectedOption(data);
50
+ } })),
51
+ react_1.default.createElement("br", null),
52
+ react_1.default.createElement("br", null),
53
+ react_1.default.createElement("br", null),
54
+ react_1.default.createElement("br", null),
55
+ react_1.default.createElement("br", null),
56
+ react_1.default.createElement("div", null,
57
+ react_1.default.createElement(SelectSearch_1.default, { options: [
58
+ { id: "1", label: "Option 1" },
59
+ { id: "2", label: "select 2" },
60
+ { id: "3", label: "clone 3", },
61
+ ], inputOnchange: function (value) {
62
+ setMultiSelectSearchText(value.toString());
63
+ // console.log(value);
64
+ }, initialSelectedOption: multiselectedOption,
65
+ // onOptionSelect={(data) => {
66
+ // setMultiSelectSearchText(data.label);
67
+ // }}
68
+ name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
69
+ setMultiSelectedOption(data);
70
+ } }))));
51
71
  };
52
72
  exports.default = SelectSearchs;
package/dist/Pages/table.js CHANGED
@@ -21,11 +21,9 @@ var tableData = [
21
21
  name: "Jane Doe",
22
22
  age: 25,
23
23
  gender: "Female",
24
- content: function (data) {
24
+ content: function () {
25
25
  return (react_1.default.createElement("div", null,
26
- data.name,
27
- " - ",
28
- data.age));
26
+ react_1.default.createElement(Table_1.default, { columns: column, data: [] })));
29
27
  },
30
28
  },
31
29
  {
@@ -34,6 +32,78 @@ var tableData = [
34
32
  age: 40,
35
33
  gender: "Male",
36
34
  },
35
+ {
36
+ id: 3,
37
+ name: "Bob Smith",
38
+ age: 40,
39
+ gender: "Male",
40
+ },
41
+ {
42
+ id: 3,
43
+ name: "Bob Smith",
44
+ age: 40,
45
+ gender: "Male",
46
+ },
47
+ {
48
+ id: 3,
49
+ name: "Bob Smith",
50
+ age: 40,
51
+ gender: "Male",
52
+ },
53
+ {
54
+ id: 3,
55
+ name: "Bob Smith",
56
+ age: 40,
57
+ gender: "Male",
58
+ },
59
+ {
60
+ id: 3,
61
+ name: "Bob Smith",
62
+ age: 40,
63
+ gender: "Male",
64
+ },
65
+ {
66
+ id: 3,
67
+ name: "Bob Smith",
68
+ age: 40,
69
+ gender: "Male",
70
+ },
71
+ {
72
+ id: 33,
73
+ name: "Bob Smith333",
74
+ age: 40,
75
+ gender: "Male",
76
+ },
77
+ {
78
+ id: 3,
79
+ name: "Bob Smith",
80
+ age: 40,
81
+ gender: "Male",
82
+ },
83
+ {
84
+ id: 3,
85
+ name: "Bob Smith",
86
+ age: 40,
87
+ gender: "Male",
88
+ },
89
+ {
90
+ id: 3,
91
+ name: "Bob Smith",
92
+ age: 40,
93
+ gender: "Male",
94
+ },
95
+ {
96
+ id: 3,
97
+ name: "Bob Smith",
98
+ age: 40,
99
+ gender: "Male",
100
+ },
101
+ {
102
+ id: 3,
103
+ name: "Bob Smith",
104
+ age: 40,
105
+ gender: "Male",
106
+ },
37
107
  ];
38
108
  var column = [
39
109
  {
@@ -63,6 +133,6 @@ var column = [
63
133
  ];
64
134
  var TableExample = function () {
65
135
  return (react_1.default.createElement("div", null,
66
- react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); } })));
136
+ react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagintaion: false })));
67
137
  };
68
138
  exports.TableExample = TableExample;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.46",
3
+ "version": "1.1.49",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",