pixelize-design-library 2.2.106 → 2.2.108

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, }: CheckboxProps): React.JSX.Element;
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, }: CheckboxProps): React.JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -10,10 +10,10 @@ var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function CheckBox(_a) {
-    var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick;
+    var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
+        react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,6 +1,10 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
 export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick"> & {
     label?: string;
+    labelFontSize?: string;
+    showLabelTooltip?: boolean;
+    labelTooltip?: string;
+    labelClampLines?: number;
     width?: string | number;
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";

package/dist/Components/Common/FormLabel.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
-export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, }: {
+export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, }: {
     label: string;
     id?: string | undefined;
     isInformation?: boolean | undefined;
     informationMessage?: string | undefined;
     isRequired?: boolean | undefined;
+    fontSize?: string | undefined;
+    showTooltip?: boolean | undefined;
+    tooltipLabel?: string | undefined;
+    clampLines?: number | undefined;
 }) => React.JSX.Element;

package/dist/Components/Common/FormLabel.js

@@ -9,12 +9,21 @@ var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var TextLabel = function (_a) {
-    var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d;
+    var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var clampStyles = clampLines ? {
+        display: "-webkit-box",
+        WebkitLineClamp: clampLines,
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "normal",
+    } : {};
     return (react_1.default.createElement(react_2.Box, null,
-        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem", mb: "0" },
+        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.875rem", mb: "0" },
             react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
-                label,
+                showTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                    react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label)),
                 isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500] } }, "*")),
                 isInformation && informationMessage && (react_1.default.createElement(react_2.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
                     react_1.default.createElement(react_2.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.gray[500], boxSize: 4 })))))));

package/dist/Components/RadioButton/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ChakraRadioProps, ChakraRadioGroupProps } from "./RadioButtonProps";
-declare const RadioButton: ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, }: ChakraRadioProps) => React.JSX.Element;
-declare const RadioButtonGroup: ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, }: ChakraRadioGroupProps) => React.JSX.Element;
+declare const RadioButton: ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize, labelClampLines, showLabelTooltip, labelTooltip, }: ChakraRadioProps) => React.JSX.Element;
+declare const RadioButtonGroup: ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction, align, labelFontSize, labelClampLines, showLabelTooltip, }: ChakraRadioGroupProps) => React.JSX.Element;
 export { RadioButton, RadioButtonGroup };

package/dist/Components/RadioButton/RadioButton.js

@@ -7,8 +7,9 @@ exports.RadioButtonGroup = exports.RadioButton = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormLabel_1 = require("../Common/FormLabel");
 var RadioButton = function (_a) {
-    var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked;
+    var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, _b = _a.labelFontSize, labelFontSize = _b === void 0 ? "0.75rem" : _b, _c = _a.labelClampLines, labelClampLines = _c === void 0 ? 2 : _c, _d = _a.showLabelTooltip, showLabelTooltip = _d === void 0 ? (label || "").length > 18 : _d, _e = _a.labelTooltip, labelTooltip = _e === void 0 ? label : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, sx: {
             "&[data-checked]": {
@@ -16,16 +17,19 @@ var RadioButton = function (_a) {
                 borderColor: theme.colors.primary[500]
             },
             "&[data-checked]:hover": {
-                backgroundColor: theme.colors.primary[300],
-                borderColor: theme.colors.primary[300], // Change this to your desired hover color
+                backgroundColor: theme.colors.primary[500],
+                borderColor: theme.colors.primary[500],
+                boxShadow: "0 0 0 2px ".concat(theme.colors.primary[200]),
             },
+            // alignItems: "flex-start",
+            mt: "2px",
         } },
-        react_1.default.createElement(react_2.Box, { as: "span" }, label)));
+        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines })));
 };
 exports.RadioButton = RadioButton;
 var RadioButtonGroup = function (_a) {
-    var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme;
+    var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme, spacing = _a.spacing, _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "" : _c, labelFontSize = _a.labelFontSize, labelClampLines = _a.labelClampLines, showLabelTooltip = _a.showLabelTooltip;
     return (react_1.default.createElement(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue },
-        react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 4 }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme })); }))));
+        react_1.default.createElement(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip })); }))));
 };
 exports.RadioButtonGroup = RadioButtonGroup;

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -1,6 +1,10 @@
 import { RadioProps, RadioGroupProps } from '@chakra-ui/react';
 export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
     label: string;
+    labelFontSize?: string;
+    labelClampLines?: number;
+    showLabelTooltip?: boolean;
+    labelTooltip?: string;
 };
 export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
     options: {
@@ -8,4 +12,13 @@ export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme"
         id: string;
     }[];
     onChange?: (value: string) => void;
+    spacing?: string;
+    direction?: "row" | "column";
+    align?: "start" | "center" | "end" | "";
+    labelFontSize?: string;
+    labelClampLines?: number;
+    showLabelTooltip?: boolean | ((item: {
+        label: string;
+        id: string;
+    }) => boolean);
 };

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

@@ -9,6 +9,7 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
     isServerPagination: boolean;
+    pageSizeOptions?: (number | string)[];
 };
-declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, pageSizeOptions, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

package/dist/Components/Table/Components/Pagination.js

@@ -8,16 +8,20 @@ var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var Pagination = function (_a) {
-    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
-    var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
+    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, pageSizeOptions = _a.pageSizeOptions;
+    var computedOptions = pageSizeOptions && pageSizeOptions.length
+        ? pageSizeOptions
+        : (0, table_1.pageSizeCalculation)(dataLength);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
     return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center" },
         !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
-            dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
-            pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
+            !pageSizeOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
+            computedOptions.map(function (size, index) {
+                return (react_1.default.createElement("option", { key: index, value: size }, String(size)));
+            }))),
         dataLength > 0 && (react_1.default.createElement(react_2.Flex, null,
             react_1.default.createElement(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
                 react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),

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

@@ -12,8 +12,9 @@ type UseTableProps = {
     noOfRowsPerPage?: number;
     isServerPagination: boolean;
     totalRecords: number;
+    onNoOfRowsPerPageChange?: (noOfRows: number) => void;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, }: UseTableProps) => {
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, }: UseTableProps) => {
     tableData: DataObject[];
     tableContainerStyles: {
         borderRadius: string;

package/dist/Components/Table/Components/useTable.js

@@ -25,7 +25,7 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var table_1 = require("../../../Utils/table");
 var defaultPageSize = 50;
 var useTable = function (_a) {
-    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
     var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
@@ -90,6 +90,9 @@ var useTable = function (_a) {
     var handlePageSizeChange = function (event) {
         var value = Number(event.target.value);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        if (onNoOfRowsPerPageChange) {
+            onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
+        }
         setCurrentPage(0);
     };
     var handleSort = (0, react_1.useCallback)(function (field, sort) {

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

@@ -0,0 +1,23 @@
+import React from "react";
+export type FilterItem = {
+    id: string;
+    label: string;
+    type?: "text";
+};
+export type FilterSection = {
+    id: string;
+    label: string;
+    items?: FilterItem[];
+    initiallyExpanded?: boolean;
+    radio?: boolean;
+};
+export type LeftFilterPaneProps = {
+    title?: string;
+    height?: number | string;
+    sections: FilterSection[];
+    onApply?: (selected: Record<string, string[]>) => void;
+    onClear?: () => void;
+    theme: any;
+};
+declare const LeftFilterPane: ({ title, height, sections, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
+export default LeftFilterPane;

package/dist/Components/Table/LeftFilterPane.js

@@ -0,0 +1,225 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var framer_motion_1 = require("framer-motion");
+var react_3 = require("@chakra-ui/react");
+var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+var RadioButton_1 = require("../RadioButton/RadioButton");
+var TextOperationControls_1 = require("./TextOperationControls");
+var LeftFilterPane = function (_a) {
+    var _b, _c;
+    var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 500 : _e, sections = _a.sections, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme;
+    var _f = (0, react_1.useState)(""), search = _f[0], setSearch = _f[1];
+    var _g = (0, react_1.useState)(false), isSearching = _g[0], setIsSearching = _g[1];
+    var _h = (0, react_1.useState)({}), selected = _h[0], setSelected = _h[1];
+    var _j = (0, react_1.useState)({}), textFilters = _j[0], setTextFilters = _j[1];
+    var searchRef = (0, react_1.useRef)(null);
+    var setTextOperator = function (itemId, operator) {
+        setTextFilters(function (prev) {
+            var _a;
+            var _b;
+            return (__assign(__assign({}, prev), (_a = {}, _a[itemId] = { operator: operator, value: ((_b = prev[itemId]) === null || _b === void 0 ? void 0 : _b.value) || "" }, _a)));
+        });
+    };
+    var setTextValue = function (itemId, value) {
+        setTextFilters(function (prev) {
+            var _a;
+            var _b;
+            return (__assign(__assign({}, prev), (_a = {}, _a[itemId] = { operator: ((_b = prev[itemId]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: value }, _a)));
+        });
+    };
+    var formatHeaderLabel = function (label) {
+        var text = (label || "").trim();
+        var MAX = 18;
+        if (text.length <= MAX)
+            return text;
+        var removable = new Set(["filters", "fields", "modules", "status", "action"]);
+        var parts = text.split(/\s+/);
+        if (parts.length < 2)
+            return text;
+        var last = parts[parts.length - 1].toLowerCase();
+        if (removable.has(last)) {
+            parts = parts.slice(0, -1);
+        }
+        else {
+            parts = parts.slice(0, -1);
+        }
+        while (parts.join(" ").length > MAX && parts.length > 2) {
+            parts = parts.slice(0, -1);
+        }
+        return "".concat(parts.join(" "), "..");
+    };
+    (0, react_3.useOutsideClick)({
+        ref: searchRef,
+        handler: function () {
+            if (isSearching) {
+                setIsSearching(false);
+                setSearch("");
+            }
+        },
+    });
+    var filteredSections = (0, react_1.useMemo)(function () {
+        if (!search.trim())
+            return sections;
+        var q = search.toLowerCase();
+        return sections.map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); });
+    }, [search, sections]);
+    var toggleItem = function (sectionId, itemId, checked) {
+        setSelected(function (prev) {
+            var _a;
+            var cur = new Set(prev[sectionId] || []);
+            if (checked)
+                cur.add(itemId);
+            else
+                cur.delete(itemId);
+            return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = Array.from(cur), _a));
+        });
+    };
+    var handleApply = function () { return onApply === null || onApply === void 0 ? void 0 : onApply(selected); };
+    var handleClear = function () {
+        setSelected({});
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    var hasSelection = (0, react_1.useMemo)(function () { return Object.values(selected).some(function (arr) { return (arr || []).length > 0; }); }, [selected]);
+    return (react_1.default.createElement(react_2.Box, { width: "180px", height: height, bg: "white", borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column" },
+        react_1.default.createElement(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200" }, !isSearching ? (react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between" },
+            react_1.default.createElement(react_2.Text, { fontWeight: "semibold", fontSize: "sm" }, title),
+            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: function () { return setIsSearching(true); } }))) : (react_1.default.createElement(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 } },
+            react_1.default.createElement(react_2.InputGroup, { size: "sm" },
+                react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                    react_1.default.createElement(lucide_react_1.Search, { size: 16, color: "#555a64" })),
+                react_1.default.createElement(react_2.Input, { placeholder: "Search", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true }),
+                search.length > 0 && (react_1.default.createElement(react_2.InputRightElement, null,
+                    react_1.default.createElement(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), onClick: function () {
+                            setSearch("");
+                            setIsSearching(false);
+                        } }))))))),
+        react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" },
+            filteredSections.length > 1 ? (react_1.default.createElement(react_2.Accordion, { allowMultiple: true, defaultIndex: sections.map(function (s, i) { return (s.initiallyExpanded ? i : -1); }).filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) {
+                var _a, _b, _c;
+                return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
+                    react_1.default.createElement("h2", null,
+                        react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
+                            (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                                react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
+                                        whiteSpace: "nowrap",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                    } }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                } }, formatHeaderLabel(sec.label))),
+                            react_1.default.createElement(react_2.AccordionIcon, null))),
+                    react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && selected[sec.id][0]) || "", onChange: function (val) {
+                                return setSelected(function (prev) {
+                                    var _a;
+                                    return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [val] : [], _a)));
+                                });
+                            }, options: (sec.items || []).map(function (it) { return ({
+                                label: it.label,
+                                id: it.id,
+                            }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
+                        ((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })))) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
+                        var _a, _b;
+                        var checked = (selected[sec.id] || []).includes(it.id);
+                        return (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(Checkbox_1.default, { key: it.id, label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
+                                    '.chakra-checkbox__control': {
+                                        width: '12px',
+                                        height: '12px',
+                                        mt: '2px',
+                                    },
+                                    '.chakra-checkbox__label': {
+                                        lineHeight: '1rem',
+                                        whiteSpace: 'normal',
+                                        wordBreak: 'break-word',
+                                    },
+                                } }),
+                            checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_a = textFilters[it.id]) === null || _a === void 0 ? void 0 : _a.operator) || "contains", value: ((_b = textFilters[it.id]) === null || _b === void 0 ? void 0 : _b.value) || "", onOperatorChange: function (op) { return setTextOperator(it.id, op); }, onValueChange: function (val) { return setTextValue(it.id, val); } }))));
+                    }))))));
+            }))) : (filteredSections.map(function (sec) {
+                var _a, _b, _c;
+                return (react_1.default.createElement(react_2.Box, { key: sec.id },
+                    react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" }, (sec.label || "").length > 18 ? (react_1.default.createElement(react_2.Tooltip, { label: sec.label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
+                        react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
+                                whiteSpace: "nowrap",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                            } }, formatHeaderLabel(sec.label)))) : (react_1.default.createElement(react_2.Box, { as: "span", textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: {
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                        } }, formatHeaderLabel(sec.label)))),
+                    react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 }, sec.radio ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (selected[sec.id] && selected[sec.id][0]) || "", onChange: function (val) {
+                                return setSelected(function (prev) {
+                                    var _a;
+                                    return (__assign(__assign({}, prev), (_a = {}, _a[sec.id] = val ? [val] : [], _a)));
+                                });
+                            }, options: (sec.items || []).map(function (it) { return ({
+                                label: it.label,
+                                id: it.id,
+                            }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > 18; } }),
+                        ((((_a = (sec.items || []).find(function (i) { return i.id === ((selected[sec.id] && selected[sec.id][0]) || ""); })) === null || _a === void 0 ? void 0 : _a.type) === "text")) && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: ((_b = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _b === void 0 ? void 0 : _b.operator) || "contains", value: ((_c = textFilters[((selected[sec.id] && selected[sec.id][0]) || "")]) === null || _c === void 0 ? void 0 : _c.value) || "", onOperatorChange: function (op) { return setTextOperator(((selected[sec.id] && selected[sec.id][0]) || ""), op); }, onValueChange: function (val) { return setTextValue(((selected[sec.id] && selected[sec.id][0]) || ""), val); } })))) : (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
+                        var checked = (selected[sec.id] || []).includes(it.id);
+                        return (react_1.default.createElement(Checkbox_1.default, { key: it.id, label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > 18, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return toggleItem(sec.id, it.id, e.target.checked); }, size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
+                                '.chakra-checkbox__control': {
+                                    width: '12px',
+                                    height: '12px',
+                                    mt: '2px',
+                                },
+                                '.chakra-checkbox__label': {
+                                    lineHeight: '1rem',
+                                    whiteSpace: 'normal',
+                                    wordBreak: 'break-word',
+                                },
+                            } }));
+                    }))))));
+            })),
+            hasSelection && (react_1.default.createElement(react_2.Box, { position: "sticky", bottom: 0, zIndex: 1, bg: "white", borderTop: "1px solid", borderColor: "gray.200", px: 3, py: 2 },
+                react_1.default.createElement(react_2.VStack, { spacing: 2, m: 0 },
+                    react_1.default.createElement(react_2.Button, { size: "sm", width: "100%", colorScheme: "blue", onClick: handleApply, m: 0 }, "Apply Filter"),
+                    react_1.default.createElement(react_2.Button, { size: "sm", width: "100%", onClick: handleClear, m: 0 }, "Clear")))))));
+};
+exports.default = LeftFilterPane;

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, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, tableSettings, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, tableSettings, filterSidebar }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -29,6 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var react_3 = require("@chakra-ui/react");
+var framer_motion_1 = require("framer-motion");
+var LeftFilterPane_1 = __importDefault(require("./LeftFilterPane"));
 var Pagination_1 = __importDefault(require("./Components/Pagination"));
 var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
 var TableBody_1 = __importDefault(require("./Components/TableBody"));
@@ -41,27 +43,31 @@ var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
 var Divider_1 = __importDefault(require("../Divider/Divider"));
 var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
 var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
+var lucide_react_1 = require("lucide-react");
+var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 function Table(_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferences, preferences = _m === void 0 ? {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _q = _a.isCheckbox, isCheckbox = _q === void 0 ? false : _q, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _r = _a.noBorders, noBorders = _r === void 0 ? false : _r, _s = _a.isPagination, isPagination = _s === void 0 ? true : _s, onRowClick = _a.onRowClick, selections = _a.selections, _t = _a.isActionFreeze, isActionFreeze = _t === void 0 ? true : _t, _u = _a.preferences, preferences = _u === void 0 ? {
         url: "",
         token: "",
         key: "",
         name: "",
         page: "",
         orgId: "",
-    } : _m, _o = _a.paginationMode, paginationMode = _o === void 0 ? "client" : _o, _p = _a.noOfRowsPerPage, noOfRowsPerPage = _p === void 0 ? 50 : _p, _q = _a.totalRecords, totalRecords = _q === void 0 ? 0 : _q, onPagination = _a.onPagination, _r = _a.isTableSettings, isTableSettings = _r === void 0 ? false : _r, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, tableSettings = _a.tableSettings;
+    } : _u, _v = _a.paginationMode, paginationMode = _v === void 0 ? "client" : _v, _w = _a.noOfRowsPerPage, noOfRowsPerPage = _w === void 0 ? 50 : _w, _x = _a.totalRecords, totalRecords = _x === void 0 ? 0 : _x, onPagination = _a.onPagination, _y = _a.isTableSettings, isTableSettings = _y === void 0 ? false : _y, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar
+    // onColumnFilter
+    ;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
+    var _z = (0, react_1.useState)({}), columnsSearch = _z[0], setColumnsSearch = _z[1];
     var isServerPagination = paginationMode === "server";
-    var _t = (0, usePreferences_1.useGetPreferences)({
+    var _0 = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), tablePreferencesData = _t.preferences, loading = _t.loading;
+    }), tablePreferencesData = _0.preferences, loading = _0.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.url,
         page: preferences.page,
@@ -79,7 +85,7 @@ function Table(_a) {
         }
         return {};
     }, [tablePreferencesData]);
-    var _u = (0, useTable_1.default)({
+    var _1 = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -91,7 +97,8 @@ function Table(_a) {
         noOfRowsPerPage: noOfRowsPerPage,
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
-    }), tableData = _u.tableData, isContent = _u.isContent, isLink = _u.isLink, headerRefs = _u.headerRefs, columnWidths = _u.columnWidths, handleSort = _u.handleSort, handleCheckbox = _u.handleCheckbox, filteredData = _u.filteredData, startRow = _u.startRow, endRow = _u.endRow, selection = _u.selection, columnsSort = _u.columnsSort, currentPage = _u.currentPage, pages = _u.pages, rowsPerPage = _u.rowsPerPage, handlePageSizeChange = _u.handlePageSizeChange, setCurrentPage = _u.setCurrentPage, columnsList = _u.columnsList, handleColumnPreferences = _u.handleColumnPreferences;
+        onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
+    }), tableData = _1.tableData, isContent = _1.isContent, isLink = _1.isLink, headerRefs = _1.headerRefs, columnWidths = _1.columnWidths, handleSort = _1.handleSort, handleCheckbox = _1.handleCheckbox, filteredData = _1.filteredData, startRow = _1.startRow, endRow = _1.endRow, selection = _1.selection, columnsSort = _1.columnsSort, currentPage = _1.currentPage, pages = _1.pages, rowsPerPage = _1.rowsPerPage, handlePageSizeChange = _1.handlePageSizeChange, setCurrentPage = _1.setCurrentPage, columnsList = _1.columnsList, handleColumnPreferences = _1.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -101,58 +108,70 @@ function Table(_a) {
         }
     }, [currentPage, onPagination, noOfRowsPerPage]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
+    var controlsHeight = 45;
+    var estimatedRowHeight = 45;
+    var visibleRowsCount = isServerPagination ? (noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : 0) : _filteredData.length;
+    var dynamicMaxH = Math.min(500, (visibleRowsCount * estimatedRowHeight) + estimatedRowHeight);
+    var tableMaxH = typeof tableMaxHeight === "number" ? tableMaxHeight : dynamicMaxH;
     return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: 45, gap: 2 },
-            react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
-            isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Divider_1.default, null),
-                react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
-            selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Divider_1.default, null),
-                react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
-            react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
-            (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto", minW: 310 },
-                react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true })))),
-        react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto", sx: {
-                '&::-webkit-scrollbar': {
-                    width: '6px',
-                    height: '6px',
-                },
-                '&::-webkit-scrollbar-track': {
-                    background: theme.colors.gray[100],
-                    borderRadius: '3px',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                    background: theme.colors.gray[400],
-                    borderRadius: '3px',
-                },
-                '&::-webkit-scrollbar-thumb:hover': {
-                    background: theme.colors.gray[500],
-                },
-                scrollbarWidth: 'thin',
-                scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
-            } },
-            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper", sx: {
-                    width: "100%",
-                    borderCollapse: "collapse",
-                    "th .resize-handle": {
-                        position: "absolute",
-                        top: 0,
-                        right: 0,
-                        width: "8px",
-                        height: "100%",
-                        cursor: "col-resize",
-                        backgroundColor: "transparent",
-                        zIndex: 999,
-                    },
-                } },
-                react_1.default.createElement(react_3.Thead, { position: "sticky", top: -0.5, zIndex: 2 },
-                    react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
-                            ? true
-                            : selection.length === 0
-                                ? false
-                                : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
-                react_1.default.createElement(react_3.Tbody, null,
-                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))));
+        react_1.default.createElement(react_2.Flex, { align: "start" },
+            react_1.default.createElement(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.25 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500], style: { height: controlsHeight + tableMaxH } },
+                react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onChange })),
+            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 2, bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
+                    filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[500], onClick: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle }),
+                        react_1.default.createElement(Divider_1.default, null))),
+                    react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
+                    isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Divider_1.default, null),
+                        react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); }, tableSettings: tableSettings }))),
+                    selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(Divider_1.default, null),
+                        react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
+                    react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
+                    (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto", minW: 310 },
+                        react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, pageSizeOptions: paginationSelectOptions, isVisiblity: true })))),
+                react_1.default.createElement(react_2.TableContainer, { position: "relative", maxH: tableMaxH, overflowY: "auto", overflowX: "auto", sx: {
+                        '&::-webkit-scrollbar': {
+                            width: '6px',
+                            height: '6px',
+                        },
+                        '&::-webkit-scrollbar-track': {
+                            background: theme.colors.gray[100],
+                            borderRadius: '3px',
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            background: theme.colors.gray[400],
+                            borderRadius: '3px',
+                        },
+                        '&::-webkit-scrollbar-thumb:hover': {
+                            background: theme.colors.gray[500],
+                        },
+                        scrollbarWidth: 'thin',
+                        scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
+                    } },
+                    react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
+                            width: "100%",
+                            borderCollapse: "collapse",
+                            "th .resize-handle": {
+                                position: "absolute",
+                                top: 0,
+                                right: 0,
+                                width: "8px",
+                                height: "100%",
+                                cursor: "col-resize",
+                                backgroundColor: "transparent",
+                                zIndex: 999,
+                            },
+                        } },
+                        react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 4 },
+                            react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                                    ? true
+                                    : selection.length === 0
+                                        ? false
+                                        : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
+                        react_1.default.createElement(react_3.Tbody, null,
+                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
 }
 exports.default = Table;

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

@@ -1,4 +1,5 @@
 import { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { FilterSidebarProps } from "../FilterSidebar/FilterSidebar";
 export type TableProps = {
     data: DataObject[];
     columns: TableHeaderProps[];
@@ -23,6 +24,9 @@ export type TableProps = {
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number) => void;
+    onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    paginationSelectOptions?: (number | string)[];
+    tableMaxHeight?: number;
     headerActions?: HeaderActionsProps;
     onGlobalSearch?: (searchVal: string) => void;
     onColumnFilter?: (filters: Record<string, any>) => void;
@@ -32,6 +36,11 @@ export type TableProps = {
         filterSelected?: string[];
         onFilterSelection?: (filters: string[]) => void;
     };
+    filterSidebar?: Partial<FilterSidebarProps> & {
+        isFilterSidebar?: boolean;
+        handleSidebarFilterClick?: (filters: Record<string, any>) => void;
+        filterSidebarToggle?: () => void;
+    };
     preferences?: {
         url: string;
         token: string;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export declare const TEXT_OPERATORS: string[];
+export declare const requiresValue: (op: string) => boolean;
+export declare function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size, ml, mt, }: {
+    operator: string;
+    value: string;
+    onOperatorChange: (op: string) => void;
+    onValueChange: (val: string) => void;
+    size?: "xs" | "sm";
+    ml?: string | number;
+    mt?: string | number;
+}): React.JSX.Element;

package/dist/Components/Table/TextOperationControls.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextOperationControls = exports.requiresValue = exports.TEXT_OPERATORS = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+exports.TEXT_OPERATORS = [
+    "is",
+    "isn't",
+    "contains",
+    "doesn't contain",
+    "starts with",
+    "ends with",
+    "is empty",
+    "is not empty",
+];
+var requiresValue = function (op) {
+    return !(op === "is empty" || op === "is not empty");
+};
+exports.requiresValue = requiresValue;
+function TextOperationControls(_a) {
+    var operator = _a.operator, value = _a.value, onOperatorChange = _a.onOperatorChange, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "xs" : _b, _c = _a.ml, ml = _c === void 0 ? "1.25rem" : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d;
+    return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml },
+        react_1.default.createElement(react_2.Select, { size: size, value: operator, onChange: function (e) { return onOperatorChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "110px" }, exports.TEXT_OPERATORS.map(function (op) { return (react_1.default.createElement("option", { key: op, value: op }, op)); })),
+        (0, exports.requiresValue)(operator) && (react_1.default.createElement(react_2.Input, { size: size, placeholder: "Type here", value: value, onChange: function (e) { return onValueChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))));
+}
+exports.TextOperationControls = TextOperationControls;

package/package.json

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