pixelize-design-library 1.1.47 → 1.1.50

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
-import { ButtonProps } from "../Button/ButtonProps";
+import { ReactElement } from "react";
 export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
     title: string;
-    content: string;
+    content: ReactElement;
     isCentered?: boolean;
     confirmButtonText?: string;
     cancelButtonText?: string;
@@ -16,5 +15,5 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
     button1Style?: React.CSSProperties;
     button2Style?: React.CSSProperties;
     key?: string | number;
-    confirmButtonColor?: ButtonProps["color"];
+    confirmButtonColor?: string;
 };

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,27 +1,4 @@
 "use strict";
-// import React, {
-//  useCallback,
-//  useEffect,
-//  useMemo,
-//  useRef,
-//  useState,
-// } from "react";
-// import {
-//  Box,
-//  Input,
-//  Spinner,
-//  VStack,
-//  Text,
-//  InputGroup,
-//  InputRightElement,
-//  HStack,
-//  Tag,
-//  TagLabel,
-//  TagCloseButton,
-// } from "@chakra-ui/react";
-// import { selectOptions, SelectSearchProps } from "./SelectSearchProps";
-// import { TextLabel } from "../Common/FormLabel";
-// import { useCustomTheme } from "../../Theme/useCustomTheme";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -66,236 +43,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// export default function SelectSearch({
-//  options,
-//  initialSelectedOption,
-//  onOptionSelect,
-//  inputOnchange,
-//  id,
-//  name,
-//  label,
-//  inputStyle,
-//  dropdownStyle,
-//  isOptionLoading,
-//  loadingText = "loading",
-//  boxStyle,
-//  placeholder = "Select Option",
-//  searchQuery = "",
-//  isInformation = false,
-//  informationMessage,
-//  rightIcon,
-//  rightElementStyle,
-//  isMultipleSelect,
-//  isRequired=false,
-//  onOptionMultiSelect,
-// }: Readonly<SelectSearchProps>) {
-//  const theme = useCustomTheme();
-//  const [selectedOptions, setSelectedOptions] = useState<selectOptions[]>(
-//     initialSelectedOption ? [initialSelectedOption] : []
-//   );
-//  const [inputValue, setInputValue] = useState(searchQuery);
-//  const [isOpen, setIsOpen] = useState(false);
-//  const [position, setPosition] = useState<"above" | "below">("below");
-//  const inputRef = useRef<HTMLInputElement>(null);
-//  const dropdownRef = useRef<HTMLDivElement>(null);
-//  const filteredOptions = useMemo(() => {
-//   return options.filter((option) =>
-//    option.label.toLowerCase().includes(inputValue.toLowerCase())
-//   );
-//  }, [options, inputValue]);
-//  const handleOptionClick = useCallback(
-//   (option: selectOptions) => {
-//    if (isMultipleSelect) {
-//     setSelectedOptions((prev) => {
-//      const isSelected = prev.some((selected) => selected.id === option.id);
-//      const newSelected = isSelected
-//       ? prev.filter((selected) => selected.id !== option.id)
-//       : [...prev, option];
-//      setInputValue("");
-//      if (onOptionMultiSelect) {
-//       onOptionMultiSelect(newSelected);
-//      }
-//      return newSelected;
-//     });
-//    } else {
-//     setInputValue(option.label);
-//     setIsOpen(false);
-//     if (onOptionSelect) {
-//      onOptionSelect(option);
-//     }
-//    }
-//   },
-//   [isMultipleSelect, onOptionSelect]
-//  );
-//  const handleRemoveOption = (option: selectOptions) => {
-//   setSelectedOptions((prev) =>
-//    prev.filter((selected) => selected.id !== option.id)
-//   );
-//   if (onOptionMultiSelect) {
-//    onOptionMultiSelect(selectedOptions.filter((selected) => selected.id !== option.id));
-//   }
-//  };
-//  const handleInputChange = (value: any) => {
-//   setInputValue(value);
-//   inputOnchange(value);
-//  };
-//  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-//   if (e.key === "Enter") {
-//    const matchingOption = options.find(
-//     (option) => option.label.toLowerCase() === inputValue.toLowerCase()
-//    );
-//    if (matchingOption) {
-//     handleOptionClick(matchingOption);
-//    }
-//   }
-//  };
-//  const updateDropdownPosition = () => {
-//   if (inputRef.current && dropdownRef.current) {
-//    const inputRect = inputRef.current.getBoundingClientRect();
-//    const dropdownRect = dropdownRef.current.getBoundingClientRect();
-//    const viewportHeight = window.innerHeight;
-//    const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
-//    const spaceAbove = inputRect.top + window.scrollY;
-//    if (spaceBelow >= dropdownRect.height) {
-//     setPosition("below");
-//    } else if (spaceAbove >= dropdownRect.height) {
-//     setPosition("above");
-//    } else {
-//     setPosition("below");
-//    }
-//   }
-//  };
-//  useEffect(() => {
-//   if (isOpen) {
-//    updateDropdownPosition();
-//   }
-//   const handleClickOutside = (event: MouseEvent) => {
-//    if (
-//     inputRef.current &&
-//     dropdownRef.current &&
-//     !inputRef.current.contains(event.target as Node) &&
-//     !dropdownRef.current.contains(event.target as Node)
-//    ) {
-//     setIsOpen(false);
-//    }
-//   };
-//   document.addEventListener("mousedown", handleClickOutside);
-//   return () => {
-//    document.removeEventListener("mousedown", handleClickOutside);
-//   };
-//  }, [isOpen]);
-//  const RenderOptions = useCallback(() => {
-//   if (isOptionLoading) {
-//    return (
-//     <VStack py={2}>
-//      <Spinner size="sm" color="blue.500" />
-//      <Text color="blue.500">{loadingText}</Text>
-//     </VStack>
-//    );
-//   }
-//   if (filteredOptions?.length) {
-//    return filteredOptions.map((option) => (
-//     <Box
-//      key={option.id}
-//      px={4}
-//      py={2}
-//      cursor="pointer"
-//      _hover={{ backgroundColor: "blue.50" }}
-//      onClick={() => handleOptionClick(option)}
-//     >
-//      {option.label}
-//     </Box>
-//    ));
-//   }
-//   return (
-//    <Text px={4} py={2} color="gray.500">
-//     No options found
-//    </Text>
-//   );
-//  }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
-//  return (
-//   <Box display="flex" flexDirection="column" position="relative" sx={boxStyle}>
-//    {label && (
-//     <TextLabel
-//      label={label}
-//      id={id}
-//      isRequired={isRequired}
-//      isInformation={isInformation}
-//      informationMessage={informationMessage}
-//     />
-//    )}
-//    {/* Display selected options as chips */}
-//    {isMultipleSelect && selectedOptions.length > 0 && (
-//     <HStack spacing={2} mb={2}>
-//      {selectedOptions.map((option) => (
-//       <Tag
-//        size="md"
-//        key={option.id}
-//        borderRadius="full"
-//        variant="solid"
-//        sx={{ backgroundColor: theme.colors.primary[500] }}
-//       >
-//        <TagLabel width={"50px"}>{option.label}</TagLabel>
-//        <TagCloseButton onClick={() => handleRemoveOption(option)} />
-//       </Tag>
-//      ))}
-//     </HStack>
-//    )}
-//    <InputGroup>
-//     <Input
-//      ref={inputRef}
-//      variant="flushed"
-//      value={inputValue}
-//      onClick={() => setIsOpen(true)}
-//      onChange={(e) => handleInputChange(e.target.value)}
-//      placeholder={placeholder}
-//      onKeyDown={handleKeyDown}
-//      id={id}
-//      name={name}
-//      cursor="pointer"
-//      borderColor="gray.300"
-//      _hover={{ borderColor: "blue.500" }}
-//      _focus={{ borderColor: "blue.500" }}
-//      style={{
-//       ...inputStyle,
-//       backgroundColor: theme.colors.backgroundColor.main,
-//       fontWeight: 800,
-//       color: theme.colors.gray[700],
-//       padding: "0 0.5rem",
-//       fontSize: 15,
-//       letterSpacing: 0.7,
-//      }}
-//     />
-//     {rightIcon && (
-//      <InputRightElement
-//       pointerEvents="none"
-//       children={rightIcon}
-//       style={{ ...rightElementStyle }}
-//      />
-//     )}
-//    </InputGroup>
-//    {isOpen && (
-//     <Box
-//      ref={dropdownRef}
-//      position="absolute"
-//      top={position === "below" ? "100%" : "auto"}
-//      bottom={position === "above" ? "100%" : "auto"}
-//      left={0}
-//      right={0}
-//      border="1px solid"
-//      borderColor="gray.300"
-//      borderRadius="md"
-//      bg="white"
-//      maxHeight="150px"
-//      overflowY="auto"
-//      zIndex={10}
-//     >
-//      {RenderOptions()}
-//     </Box>
-//    )}
-//   </Box>
-//  );
-// }
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
@@ -321,9 +68,34 @@ function SelectSearch(_a) {
     var _m = (0, react_1.useState)("below"), position = _m[0], setPosition = _m[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
+    // const filteredOptions = useMemo(() => {
+    //   return options.filter((option) => {
+    //     const optionLabel = option.label || '';
+    //     const searchValue = inputValue || '';
+    //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
+    //   });
+    // }, [options, inputValue]);
     var filteredOptions = (0, react_1.useMemo)(function () {
-        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()); });
-    }, [options, inputValue]);
+        return options
+            .filter(function (option) {
+            // First filter out already selected options
+            // const isNotSelected = !selectedOptions.some(
+            //   (selected) => selected.id === option.id
+            // );
+            var isNotSelected = isMultipleSelect ?
+                !selectedOptions.some(function (selected) { return selected.id === option.id; }) :
+                true;
+            // Then apply the search filter
+            var optionLabel = option.label || '';
+            var searchValue = inputValue || '';
+            return isNotSelected && optionLabel.toLowerCase().includes(searchValue.toLowerCase());
+        });
+    }, [options, inputValue, selectedOptions]);
+    // const filteredOptions = useMemo(() => {
+    //   return options.filter((option) =>
+    //     option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
+    //   );
+    // }, [options, inputValue]);
     //   const handleOptionClick = useCallback(
     //     (option: selectOptions) => {
     //       if (isMultipleSelect) {

package/dist/Components/Table/Components/TableActions.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TableActions: ({ row }: any) => React.JSX.Element;
+export default TableActions;

package/dist/Components/Table/Components/TableActions.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var fa_1 = require("react-icons/fa");
+var md_1 = require("react-icons/md");
+var icons_1 = require("@chakra-ui/icons");
+var TableActions = function (_a) {
+    var row = _a.row;
+    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start" },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(fa_1.FaEllipsisV, { fontSize: 12 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
+                react_1.default.createElement(react_2.PopoverBody, null,
+                    react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
+                        row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); } },
+                            react_1.default.createElement(icons_1.ExternalLinkIcon, null),
+                            " View")),
+                        row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
+                            react_1.default.createElement(icons_1.EditIcon, null),
+                            " Edit")),
+                        row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
+                            react_1.default.createElement(md_1.MdDelete, null),
+                            "Delete"))))))));
+};
+exports.default = TableActions;

package/dist/Components/Table/Components/TableBody.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, }: TableBodyPageProps) => React.JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;

package/dist/Components/Table/Components/TableBody.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
@@ -29,10 +32,10 @@ var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TableLoading_1 = require("./TableLoading");
 var fa_1 = require("react-icons/fa");
-var icons_1 = require("@chakra-ui/icons");
+var TableActions_1 = __importDefault(require("./TableActions"));
 var TableBody = function (_a) {
     var _b;
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _c = (0, react_2.useState)(new Set()), expandedRows = _c[0], setExpandedRows = _c[1];
     var toggleRowExpansion = function (rowIndex) {
@@ -52,27 +55,26 @@ var TableBody = function (_a) {
     };
     var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
         var _b;
-        var row = _a.row;
+        var row = _a.row, isChecked = _a.isChecked;
         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" },
-            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) })));
+            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)" } })));
     }, [
         freezedBgColor,
         freezedTextColor,
         handleCheckbox,
         noBorders,
-        selections,
         (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
     ]);
     var RenderContent = (0, react_2.useCallback)(function (_a) {
         var _b, _c;
         var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
-        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" }))));
+        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" }))));
     }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
     var RenderView = (0, react_2.useCallback)(function (_a) {
-        var _b, _c;
-        var row = _a.row;
-        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" }))));
-    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
+        var _b;
+        var row = _a.row, bgcolor = _a.bgcolor;
+        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: isActionFreeze ? freezedBgColor : bgcolor, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", 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".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
+    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors, isActionFreeze]);
     if (isLoading) {
         var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
             (isCheckbox ? 1 : 0);
@@ -80,7 +82,9 @@ var TableBody = function (_a) {
     }
     if (data.length === 0) {
         var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
-            (isCheckbox ? 1 : 0);
+            (isCheckbox ? 1 : 0) +
+            (isContent ? 1 : 0) +
+            (isLink ? 1 : 0);
         return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
                 react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
@@ -89,14 +93,22 @@ var TableBody = function (_a) {
     return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
         var rowIndex = startRow + index;
         var isExpanded = expandedRows.has(rowIndex);
+        var isChecked = selections.includes(row.id);
+        var freezeViewColor = index % 2 === 1 ? theme.colors.backgroundColor.light : "white";
         return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
-            react_2.default.createElement(react_1.Tr, { key: index + 1, _hover: {
+            react_2.default.createElement(react_1.Tr, { key: index + 1, sx: isChecked
+                    ? {
+                        "& td": {
+                            backgroundColor: theme.colors.gray[100],
+                        },
+                    }
+                    : {}, _hover: {
                     "& > td": {
                         backgroundColor: theme.colors.gray[100],
                     },
                 } },
                 isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!row.content })),
-                isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row }),
+                isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
                     var _a;
                     var isFrozen = header.isFreeze;
@@ -117,12 +129,15 @@ var TableBody = function (_a) {
                                 ? theme.colors.backgroundColor.light
                                 : "white", textOverflow: "ellipsis", border: noBorders
                             ? "none"
-                            : "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 },
+                            : "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 },
                         react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
                 }),
-                isLink && react_2.default.createElement(RenderView, { row: row })),
+                isLink && react_2.default.createElement(RenderView, { row: row, bgcolor: freezeViewColor })),
             row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
-                react_2.default.createElement(react_1.Td, { colSpan: columns.length + (isCheckbox ? 1 : 0) + (isContent ? 1 : 0), p: 2 },
+                react_2.default.createElement(react_1.Td, { colSpan: columns.length +
+                        (isCheckbox ? 1 : 0) +
+                        (isContent ? 1 : 0) +
+                        (isLink ? 1 : 0), p: 2 },
                     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)))))));
     })));
 };

package/dist/Components/Table/Components/TableHeader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, }: TableHeaderPageProps) => React.JSX.Element;
+declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, onColumnSearch, columnFilters, isActionFreeze, }: TableHeaderPageProps) => React.JSX.Element;
 export default TableHeader;

package/dist/Components/Table/Components/TableHeader.js

@@ -27,15 +27,42 @@ var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var icons_1 = require("@chakra-ui/icons");
 var fa_1 = require("react-icons/fa");
+var pi_1 = require("react-icons/pi");
+var lu_1 = require("react-icons/lu");
 var TableHeader = function (_a) {
     var _b;
-    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;
+    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, isActionFreeze = _a.isActionFreeze;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _d = (0, react_2.useState)(null), openPopoverId = _d[0], setOpenPopoverId = _d[1];
+    var handleSearchChange = (0, react_2.useCallback)(function (columnId, value) {
+        onColumnSearch === null || onColumnSearch === void 0 ? void 0 : onColumnSearch(columnId, value);
+    }, [onColumnSearch]);
+    (0, react_2.useEffect)(function () {
+        if (!columnFilters)
+            return;
+        var lastKey = Object.keys(columnFilters).pop() || null;
+        if (!lastKey)
+            return;
+        setOpenPopoverId(lastKey);
+    }, [columnFilters]);
+    (0, react_2.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            var target = event.target;
+            if (!(target === null || target === void 0 ? void 0 : target.closest(".search-popover"))) {
+                setOpenPopoverId(null);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [openPopoverId]);
     var RenderCheckbox = (0, react_2.useCallback)(function () {
         var _a;
-        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)" },
-            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" })));
+        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 },
+            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)" } })));
     }, [
         checked,
         freezedBgColor,
@@ -47,42 +74,77 @@ var TableHeader = function (_a) {
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
         var _a;
-        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)" },
+        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)" },
             react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
-                react_2.default.createElement(fa_1.FaExpandArrowsAlt, { fontSize: 14 }))));
+                react_2.default.createElement(pi_1.PiTreeViewFill, { fontSize: 18 }))));
     }, [freezedBgColor, noBorders, theme.colors.gray]);
     var RenderView = (0, react_2.useCallback)(function () {
         var _a;
-        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)" }));
-    }, [freezedBgColor, noBorders, theme.colors.gray]);
-    return (react_2.default.createElement(react_1.Tr, null,
+        var BgColor = isActionFreeze ? freezedBgColor : headerBgColor;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+            react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
+                react_2.default.createElement(lu_1.LuFileSymlink, { fontSize: 16 }))));
+    }, [
+        freezedBgColor,
+        noBorders,
+        theme.colors.gray,
+        headerBgColor,
+        isActionFreeze,
+    ]);
+    var Sorting = (0, react_2.useCallback)(function (_a) {
+        var _b;
+        var isSorting = _a.isSorting, header = _a.header;
+        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 () {
+                var direction = "asc";
+                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
+                    direction = "desc";
+                }
+                else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
+                    direction = "none";
+                }
+                handleSort(header.id, direction);
+            } }));
+    }, [handleSort]);
+    var Popvers = (0, react_2.useCallback)(function (_a) {
+        var header = _a.header;
+        return (react_2.default.createElement("div", { className: "search-popover" },
+            react_2.default.createElement(react_1.Popover, { isOpen: openPopoverId === header.id, onClose: function () { return setOpenPopoverId(null); }, placement: "bottom-start", closeOnBlur: false, closeOnEsc: false },
+                react_2.default.createElement(react_1.PopoverTrigger, null,
+                    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 () {
+                            return setOpenPopoverId(openPopoverId === header.id ? null : header.id);
+                        }, _hover: { bg: "none" } })),
+                react_2.default.createElement(react_1.PopoverContent, { width: "200px" },
+                    react_2.default.createElement(react_1.PopoverBody, { p: 2 },
+                        react_2.default.createElement(react_1.InputGroup, { flex: "1", size: "xs" },
+                            react_2.default.createElement(react_1.InputLeftElement, { pointerEvents: "none" },
+                                react_2.default.createElement(icons_1.SearchIcon, { color: "gray.300" })),
+                            react_2.default.createElement(react_1.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", value: columnFilters[header.id] || "", onChange: function (e) {
+                                    e.stopPropagation();
+                                    handleSearchChange(header.id, e.target.value);
+                                } })))))));
+    }, [columnFilters, openPopoverId, handleSearchChange]);
+    var renderColumnHeader = function (header, index) {
+        var _a;
+        var isFrozen = header.isFreeze;
+        var leftOffset = isFrozen
+            ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
+            : undefined;
+        var isSorting = header.isSort
+            ? columnsSort.find(function (o) { return o.column === header.id; })
+            : undefined;
+        var BgColor = isFrozen ? freezedBgColor : headerBgColor;
+        var TextColor = isFrozen ? freezedTextColor : headerTextColor;
+        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") },
+            react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center" },
+                react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
+                react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
+                    header.isSort ? (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })) : null,
+                    react_2.default.createElement(Popvers, { header: header }))))));
+    };
+    return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),
         isCheckbox && react_2.default.createElement(RenderCheckbox, null),
-        columns.map(function (header, index) {
-            var _a, _b;
-            var isFrozen = header.isFreeze;
-            var leftOffset = isFrozen
-                ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
-                : undefined;
-            var isSorting = header.isSort
-                ? columnsSort.find(function (o) { return o.column === header.id; })
-                : undefined;
-            var BgColor = isFrozen ? freezedBgColor : headerBgColor;
-            var TextColor = isFrozen ? freezedTextColor : headerTextColor;
-            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") },
-                react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center" },
-                    react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
-                    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 () {
-                            var direction = "asc";
-                            if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
-                                direction = "desc";
-                            }
-                            else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
-                                direction = "none";
-                            }
-                            handleSort(header.id, direction);
-                        } })))))));
-        }),
+        columns.map(function (header, index) { return renderColumnHeader(header, index); }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
 exports.default = TableHeader;

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, selections, isActionFreeze, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -58,18 +58,23 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var defaultPageSize = 5;
 function Table(_a) {
     var _b;
-    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;
+    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, _f = _a.isActionFreeze, isActionFreeze = _f === void 0 ? true : _f;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_4.useState)([]), selection = _f[0], setSelection = _f[1];
-    var _g = (0, react_4.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
-    var _h = (0, react_4.useState)(defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
-    var _j = (0, react_4.useState)(columns.reduce(function (acc, curr) {
+    var _g = (0, react_4.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _g[0], setSelection = _g[1];
+    var _h = (0, react_4.useState)(0), currentPage = _h[0], setCurrentPage = _h[1];
+    var _j = (0, react_4.useState)(defaultPageSize), rowsPerPage = _j[0], setRowsPerPage = _j[1];
+    var _k = (0, react_4.useState)({}), columnFilters = _k[0], setColumnFilters = _k[1];
+    var _l = (0, react_4.useState)(data), filteredData = _l[0], setFilteredData = _l[1];
+    (0, react_1.useEffect)(function () {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    var _m = (0, react_4.useState)(columns.reduce(function (acc, curr) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
-    }, {})), visibleColumns = _j[0], setVisibleColumns = _j[1];
-    var _k = (0, react_4.useState)([]), columnWidths = _k[0], setColumnWidths = _k[1];
+    }, {})), visibleColumns = _m[0], setVisibleColumns = _m[1];
+    var _o = (0, react_4.useState)([]), columnWidths = _o[0], setColumnWidths = _o[1];
     var headerRefs = (0, react_1.useRef)([]);
-    var _l = (0, react_4.useState)([]), columnsSort = _l[0], setColumnsSort = _l[1];
+    var _p = (0, react_4.useState)([]), columnsSort = _p[0], setColumnsSort = _p[1];
     (0, react_1.useEffect)(function () {
         // Measure widths after the component mounts
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
@@ -98,50 +103,69 @@ function Table(_a) {
         setColumnsSort(newSortState);
     }, [columnsSort]);
     var handleCheckbox = function (id) {
+        var selectedItems = [];
         if (id === 0) {
             if (selection.length === data.length) {
-                setSelection([]);
+                selectedItems = [];
             }
             else {
-                setSelection(data.map(function (item) { return item.id; }));
+                selectedItems = data.map(function (item) { return item.id; });
             }
         }
         else if (selection.includes(id)) {
-            setSelection(selection.filter(function (item) { return item !== id; }));
+            selectedItems = selection.filter(function (item) { return item !== id; });
         }
         else {
-            setSelection(__spreadArray(__spreadArray([], selection, true), [id], false));
+            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
         }
+        setSelection(selectedItems);
+        onSelection && onSelection(selectedItems);
     };
+    var pages = isPagintaion ? Math.ceil(data.length / rowsPerPage) : 0;
+    var startRow = !isPagintaion ? 0 : currentPage * rowsPerPage;
+    var endRow = !isPagintaion ? data.length : startRow + rowsPerPage;
     (0, react_1.useEffect)(function () {
-        onSelection && onSelection(selection);
-    }, [selection, onSelection]);
-    var pages = Math.ceil(data.length / rowsPerPage);
-    var startRow = currentPage * rowsPerPage;
-    var endRow = startRow + rowsPerPage;
-    var tableData = (0, react_1.useMemo)(function () {
-        return (0, table_1.SortMultiColumnData)(data, columnsSort);
-    }, [data, columnsSort]);
+        var sortedData = (0, table_1.SortMultiColumnData)(filteredData, columnsSort);
+        var data = sortedData.slice(startRow, endRow);
+        setFilteredData(data);
+    }, [columnsSort, startRow, endRow]);
     var handleColumnVisibilityChange = function (header) {
         setVisibleColumns(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
         });
     };
+    var handleColumnSearch = function (columnId, searchValue) {
+        var _a;
+        var newFilters = __assign(__assign({}, columnFilters), (_a = {}, _a[columnId] = searchValue, _a));
+        if (!searchValue) {
+            delete newFilters[columnId];
+        }
+        setColumnFilters(newFilters);
+        // Apply all active filters
+        var filtered = data.filter(function (row) {
+            return Object.entries(newFilters).every(function (_a) {
+                var colId = _a[0], filterValue = _a[1];
+                var cellValue = String(row[colId]).toLowerCase();
+                return cellValue.includes(filterValue.toLowerCase());
+            });
+        });
+        setFilteredData(filtered);
+    };
     var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
-    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink; }); }, [data]);
+    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [data]);
     var RenderTable = function (_a) {
         var _b, _c, _d;
         var columns = _a.columns;
         return (react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "sticky-columns" },
-            react_1.default.createElement(react_3.Thead, null,
+            react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
                 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
                         ? true
                         : selection.length === 0
                             ? false
-                            : "indeterminate", isContent: isContent, isLink: isLink })),
+                            : "indeterminate", isContent: isContent, isLink: isLink, onColumnSearch: handleColumnSearch, columnFilters: columnFilters, isActionFreeze: isActionFreeze })),
             react_1.default.createElement(react_3.Tbody, null,
-                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 }))));
+                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, isActionFreeze: isActionFreeze }))));
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_2.TableContainer, { sx: {
@@ -149,8 +173,10 @@ function Table(_a) {
                 borderWidth: "0px 0px 0px 5px",
                 borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[500],
                 boxShadow: theme.shadows.lg,
+                maxHeight: "50vh",
+                overflowY: "auto",
             } },
             react_1.default.createElement(RenderTable, { columns: columns })),
-        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 }))));
+        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 }))));
 }
 exports.default = Table;

package/dist/Components/Table/TableProps.d.ts

@@ -16,7 +16,9 @@ export type TableProps = {
     noBorders?: boolean;
     onSelection?: (selected: (string | number)[]) => void;
     isPagintaion?: boolean;
+    selections?: (string | number)[];
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    isActionFreeze?: boolean;
 };
 export type DataObject = {
     [key: string]: string | number | any;
@@ -37,7 +39,7 @@ export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading"> & {
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     visibleColumns: Record<string, boolean>;
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
@@ -52,8 +54,10 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     checked: boolean | "indeterminate";
     isContent: boolean;
     isLink: boolean;
+    onColumnSearch?: (columnId: string, searchValue: string) => void;
+    columnFilters?: Record<string, string>;
 };
-export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick"> & {
+export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick" | "isActionFreeze"> & {
     visibleColumns: Record<string, boolean>;
     startRow: number;
     endRow: number;

package/dist/Pages/alertdialog.js

@@ -39,6 +39,6 @@ var AlertdialogBox = function () {
         react_1.default.createElement(react_2.Button, { onClick: function () {
                 setAlertActive(true);
             } }, "AlertDialog"),
-        react_1.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: "hellobody", onConfirm: function () { return handleAlert(); }, size: "500" })));
+        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" })));
 };
 exports.default = AlertdialogBox;

package/dist/Pages/selectSearch.js

@@ -30,23 +30,43 @@ var react_1 = __importStar(require("react"));
 var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
 var fi_1 = require("react-icons/fi");
 var SelectSearchs = function () {
-    var _a = (0, react_1.useState)(""), selectSearchText = _a[0], setSelectSearchText = _a[1];
-    var _b = (0, react_1.useState)(), selectedOption = _b[0], setSelectedOption = _b[1];
+    var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
+    var _b = (0, react_1.useState)({ id: "1", label: "Option 1" }), selectedOption = _b[0], setSelectedOption = _b[1];
+    var _c = (0, react_1.useState)("Option 1"), multiSelectSearchText = _c[0], setMultiSelectSearchText = _c[1];
+    var _d = (0, react_1.useState)({ id: "1", label: "Option 1" }), multiselectedOption = _d[0], setMultiSelectedOption = _d[1];
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(SelectSearch_1.default, { options: [
-                { id: "1", label: "Option 1" },
-                { id: "2", label: "select 2" },
-                {
-                    id: "3",
-                    label: "clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3clone 3",
-                },
-            ], inputOnchange: function (value) {
-                setSelectSearchText(value.toString());
-                console.log(value);
-            }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function (data) {
-                setSelectSearchText(data.label);
-            }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
-                setSelectedOption(data);
-            } })));
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(SelectSearch_1.default, { options: [
+                    { id: "1", label: "Option 1" },
+                    { id: "2", label: "select 2" },
+                    { id: "3", label: "clone 3", },
+                ], inputOnchange: function (value) {
+                    setSelectSearchText(value.toString());
+                    console.log(value);
+                }, initialSelectedOption: selectedOption, onOptionSelect: function (data) {
+                    setSelectSearchText(data.label);
+                }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
+                    setSelectedOption(data);
+                } })),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(SelectSearch_1.default, { options: [
+                    { id: "1", label: "Option 1" },
+                    { id: "2", label: "select 2" },
+                    { id: "3", label: "clone 3", },
+                ], inputOnchange: function (value) {
+                    setMultiSelectSearchText(value.toString());
+                    // console.log(value);
+                }, initialSelectedOption: multiselectedOption, 
+                // onOptionSelect={(data) => {
+                //   setMultiSelectSearchText(data.label);
+                // }}
+                name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
+                    setMultiSelectedOption(data);
+                } }))));
 };
 exports.default = SelectSearchs;

package/dist/Pages/table.js

@@ -21,11 +21,9 @@ var tableData = [
         name: "Jane Doe",
         age: 25,
         gender: "Female",
-        content: function (data) {
+        content: function () {
             return (react_1.default.createElement("div", null,
-                data.name,
-                " - ",
-                data.age));
+                react_1.default.createElement(Table_1.default, { columns: column, data: [] })));
         },
     },
     {
@@ -34,6 +32,78 @@ var tableData = [
         age: 40,
         gender: "Male",
     },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 33,
+        name: "Bob Smith333",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
 ];
 var column = [
     {
@@ -63,6 +133,6 @@ var column = [
 ];
 var TableExample = function () {
     return (react_1.default.createElement("div", null,
-        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); } })));
+        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 })));
 };
 exports.TableExample = TableExample;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.47",
+  "version": "1.1.50",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",