pixelize-design-library 2.2.113 → 2.2.115

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/ProductCard/ProductPrice.js

@@ -116,8 +116,7 @@ var ProductPrice = function (_a) {
         isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", display: "inline-block", w: "100%" },
             react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
             react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "70%" },
-                    react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label))),
+                react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "70%", fontSize: cfg.label, fontWeight: "medium", whiteSpace: "nowrap" }, selected.label)),
             react_1.default.createElement(react_2.Text, { fontSize: cfg.font, color: "red.400", transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s" }, "\u25BE"))),
         !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
             react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "fixed", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", borderRadius: "md", overflow: "hidden", maxH: "14rem", overflowY: "auto", shadow: "md", zIndex: 100000 }, options.map(function (option) {
@@ -129,8 +128,7 @@ var ProductPrice = function (_a) {
                     }, templateColumns: { base: '1fr auto', md: '1fr auto' }, columnGap: { base: 2, md: 3 }, rowGap: { base: 1.5, md: 2 }, alignItems: "center" },
                     react_1.default.createElement(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0 },
                         react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%" },
-                                react_1.default.createElement(react_2.Text, { fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label))),
+                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap" }, option.label)),
                         option.offer > 0 && (react_1.default.createElement(react_2.Badge, { bg: "green.100", color: "green.700", borderRadius: "md", px: { base: 1, md: 2 }, py: { base: 0, md: 0.5 }, fontWeight: "bold", fontSize: { base: "2xs", md: "xs" }, flexShrink: 0 }, isMobile ? "".concat(option.offer, "%") : "".concat(option.offer, "% OFF")))),
                     react_1.default.createElement(react_2.Box, { gridColumn: { base: 1, md: 2 }, gridRow: { base: 2, md: 'auto' }, mt: { base: 1, md: 0 }, textAlign: { base: 'left', md: 'right' } },
                         react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: "red.500", whiteSpace: "nowrap" },

package/dist/Components/SideBar/SecondaryBar.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { MenuProps } from "./SideBarProps";
+type SecondaryBarProps = {
+    items?: MenuProps[];
+    defaultCollapsed?: boolean;
+    collapsedWidth?: string | number;
+    expandedWidth?: string | number;
+    headerFontSize?: string;
+    itemFontSize?: string;
+    selected?: string | number | null;
+    onItemClick?: (item: MenuProps) => void;
+    title?: string;
+};
+declare const SecondaryBar: React.FC<SecondaryBarProps>;
+export default SecondaryBar;

package/dist/Components/SideBar/SecondaryBar.js

@@ -0,0 +1,90 @@
+"use strict";
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var SecondaryBar = function (_a) {
+    var _b, _c, _d;
+    var _e = _a.items, items = _e === void 0 ? [] : _e, _f = _a.defaultCollapsed, defaultCollapsed = _f === void 0 ? true : _f, _g = _a.collapsedWidth, collapsedWidth = _g === void 0 ? "3.5rem" : _g, _h = _a.expandedWidth, expandedWidth = _h === void 0 ? "10rem" : _h, _j = _a.headerFontSize, headerFontSize = _j === void 0 ? "0.95rem" : _j, _k = _a.itemFontSize, itemFontSize = _k === void 0 ? "0.875rem" : _k, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _l = (0, react_1.useState)(defaultCollapsed), collapsed = _l[0], setCollapsed = _l[1];
+    var width = collapsed ? collapsedWidth : expandedWidth;
+    var showText = !collapsed;
+    var textMaxWidth = expandedWidth !== null && expandedWidth !== void 0 ? expandedWidth : "10rem";
+    return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: (_d = (_c = (_b = theme.colors.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], boxShadow: theme.shadows.md, zIndex: 1 },
+        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0 },
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: showText ? "space-between" : "center", px: showText ? "0.75rem" : 0, h: "3.91rem", overflow: "hidden" },
+                showText ? (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
+                    react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))) : null,
+                react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "100%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { return setCollapsed(function (c) { return !c; }); } }, collapsed ? (react_1.default.createElement(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right" },
+                    react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.white }))) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.white })))),
+            react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[300] }),
+            react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", overflowY: "auto", overflowX: "hidden" }, items.map(function (item) {
+                var _a, _b, _c, _d, _e;
+                var isActive = String(selected) === String(item.id) ||
+                    String(selected) === String(item.title);
+                var isObj = typeof item.badge === "object" && item.badge !== null;
+                var badgeVal = isObj ? item.badge.count : item.badge;
+                var colorScheme = (_a = (isObj ? item.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
+                var radius = (_b = (isObj ? item.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
+                var variant = (_c = (isObj ? item.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
+                if (!showText) {
+                    return (react_1.default.createElement(react_2.Popover, { key: String((_d = item.id) !== null && _d !== void 0 ? _d : item.title), trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
+                        react_1.default.createElement(react_2.PopoverTrigger, null,
+                            react_1.default.createElement(react_2.Box, { py: "0.625rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: {
+                                    bg: item.disabled ? "transparent" : theme.colors.primary[700],
+                                }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); } },
+                                react_1.default.createElement(react_2.Box, { position: "relative" },
+                                    react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
+                                    badgeVal != null && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))))),
+                        react_1.default.createElement(react_2.Portal, null,
+                            react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white" },
+                                react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem" },
+                                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
+                                        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
+                                            react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
+                                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
+                                        badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null))))));
+                }
+                return (react_1.default.createElement(react_2.Flex, { key: String((_e = item.id) !== null && _e !== void 0 ? _e : item.title), px: "1rem", py: "0.625rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: {
+                        bg: item.disabled ? "transparent" : theme.colors.primary[700],
+                    }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive
+                        ? "0.188rem solid ".concat(theme.colors.background[300])
+                        : "0.188rem solid transparent" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
+                        react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
+                        react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
+                    badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null));
+            })))));
+};
+exports.default = SecondaryBar;

package/dist/Components/SideBar/SideBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SidebarProps } from "./SideBarProps";
-export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -22,37 +22,42 @@ var lucide_react_1 = require("lucide-react");
 var MenuItems_1 = __importDefault(require("./components/MenuItems"));
 var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
+var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
 function Sidebar(_a) {
-    var _b;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
+    var _b, _c;
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _d = _a.isDisableAddNew, isDisableAddNew = _d === void 0 ? false : _d, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "4.688rem" : "15.625rem", flexDir: "column", justifyContent: "space-between", background: theme.colors.sidebar.background[500] },
-        react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
-            isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
-                react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
-                react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
-                react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_1.default.Fragment, null, logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
-                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
-                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
-                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
-                    react_1.default.createElement(defaultLogo_1.default, null)),
-                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 },
-                    react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right" }, companyName)))))),
-            react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
-            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
-                react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
-                    react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
-                    react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
-                    react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
-                react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
-                !isDisableAddNew &&
-                    (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
-                        react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
-                        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
-                            react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
-                        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
-                react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
-                    react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
-                    react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))));
+    var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
+        menus.find(function (m) { return String(m.id) === String(activeMenu); });
+    var secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
+        react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", display: "flex", flexDirection: "column", justifyContent: "space-between" },
+            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
+                isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
+                    react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
+                    react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
+                    react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))) : (react_1.default.createElement(react_2.Box, null, logo ? (react_1.default.createElement(react_2.Flex, { h: "4.688rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
+                    react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
+                    !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName)))) : (react_1.default.createElement(react_2.Flex, { h: "3.91rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
+                    react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
+                        react_1.default.createElement(defaultLogo_1.default, null)),
+                    !toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : "")))))),
+                react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
+                react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
+                    react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
+                        react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
+                        react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
+                        react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))))); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
+                    react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
+                    !isDisableAddNew &&
+                        (isLoading ? (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
+                            react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" }))) : (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
+                            react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
+                                react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
+                            react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")))),
+                    react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
+                        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
+                        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))),
+        secondaryItems.length ? (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title })) : null));
 }
 exports.default = Sidebar;

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -2,6 +2,7 @@ export type SidebarProps = {
     menus: MenuProps[];
     activeMenu: string;
     handleMenuClick?: (menu: MenuProps) => void;
+    handleSecondaryNavClick?: (menu: MenuProps) => void;
     toggle: boolean;
     changeToggle: () => void;
     logo?: string;
@@ -9,6 +10,7 @@ export type SidebarProps = {
     isDisableAddNew?: boolean;
     onAddNewClick?: () => void;
     selectedSubMenu?: string | null;
+    selectedSecondaryItem?: string | number | null;
     isLoading?: boolean;
     loadingLines?: number;
 };
@@ -19,8 +21,14 @@ export type MenuProps = {
     url: string;
     disabled?: boolean;
     locked?: boolean;
-    badge?: string | number;
+    badge?: {
+        count?: number;
+        color?: string;
+        radius?: string | number;
+        variant?: string;
+    };
     subMenu?: MenuProps[];
+    secondaryItems?: MenuProps[];
 };
 export type RenderMenuType = {
     menus: MenuProps[];
@@ -28,4 +36,5 @@ export type RenderMenuType = {
     handleMenuClick: (menu: MenuProps) => void;
     toggle: boolean;
     selectedSubMenu?: string | null;
+    selectedSecondaryItem?: string | number | null;
 };

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -21,11 +21,18 @@ var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TextTruncation_1 = __importDefault(require("./TextTruncation"));
 var MenuItemBox = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e;
     var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick, isOpen = _a.isOpen, onToggle = _a.onToggle;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var title = menu.title, icon = menu.icon, disabled = menu.disabled, locked = menu.locked, badge = menu.badge, subMenu = menu.subMenu;
     var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    var isBadgeObj = typeof badge === "object" && badge !== null;
+    var badgeValue = isBadgeObj ? badge.count : badge;
+    var hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) {
+        var isObj = typeof sub.badge === "object" && sub.badge !== null;
+        var value = isObj ? sub.badge.count : sub.badge;
+        return value != null;
+    })) !== null && _b !== void 0 ? _b : false;
     var isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
     var isParentActive = activeMenu === menu.id;
     var isAnyActive = isParentActive || isChildActive;
@@ -54,11 +61,20 @@ var MenuItemBox = function (_a) {
         opacity: disabled ? 0.6 : 1,
     };
     var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", justify: "space-between" },
-        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "auto" },
-            react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "hidden" },
+            react_1.default.createElement(react_2.Box, { position: "relative" },
+                react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
+                toggle && (badgeValue != null || hasSubmenuBadge) && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))),
             !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", flex: "1" }, title))),
         !toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
-            badge && (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, badge)),
+            (function () {
+                var _a, _b, _c;
+                var value = badgeValue;
+                var colorScheme = (_a = (isBadgeObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
+                var radius = (_b = (isBadgeObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
+                var variant = (_c = (isBadgeObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
+                return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
+            })(),
             locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" }),
             hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", onClick: function (e) {
                     e.stopPropagation();
@@ -68,16 +84,16 @@ var MenuItemBox = function (_a) {
         // Collapsed sidebar: show Popover
         return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
             react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_b = menu.id) !== null && _b !== void 0 ? _b : title) }), buttonContent)),
+                react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent)),
             react_1.default.createElement(react_2.Portal, null,
                 react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
                     react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem", color: "white" },
                         react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent),
+        react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title) }), buttonContent),
         hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
-            react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), "data-open": isOpen ? "true" : "false", sx: {
+            react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", sx: {
                     transition: "opacity 0.28s ease, transform 0.28s ease",
                     opacity: isOpen ? 1 : 0,
                     transform: isOpen ? "translateY(0)" : "translateY(-6px)",
@@ -92,7 +108,15 @@ var MenuItemBox = function (_a) {
                     react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
                         react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
                         react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", open: isOpen }, sub.title)),
-                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : sub.badge ? (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, sub.badge)) : null));
+                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
+                        var _a, _b, _c;
+                        var isObj = typeof sub.badge === "object" && sub.badge !== null;
+                        var value = isObj ? sub.badge.count : sub.badge;
+                        var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
+                        var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
+                        var variant = (_c = (isObj ? sub.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
+                        return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
+                    })()));
             }))))));
 };
 exports.default = MenuItemBox;

package/dist/Components/SideBar/components/MenuPopoverContent.js

@@ -20,7 +20,15 @@ var MenuPopoverContent = function (_a) {
                 }
             }, cursor: !(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) ? "pointer" : "default" },
             react_1.default.createElement(TextTruncation_1.default, { fontWeight: "medium", fontSize: "1rem", flex: "1" }, title),
-            badge && (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, badge)),
+            (function () {
+                var _a, _b, _c;
+                var isObj = typeof badge === "object" && badge !== null;
+                var value = isObj ? badge.count : badge;
+                var colorScheme = (_a = (isObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
+                var radius = (_b = (isObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
+                var variant = (_c = (isObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
+                return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
+            })(),
             locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })), subMenu === null || subMenu === void 0 ? void 0 :
         subMenu.map(function (sub) {
             var isSubActive = activeMenu === sub.id;
@@ -33,7 +41,15 @@ var MenuPopoverContent = function (_a) {
                 react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
                     react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
                     react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", flex: 1 }, sub.title)),
-                sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : sub.badge ? (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, sub.badge)) : null));
+                sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
+                    var _a, _b, _c;
+                    var isObj = typeof sub.badge === "object" && sub.badge !== null;
+                    var value = isObj ? sub.badge.count : sub.badge;
+                    var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
+                    var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
+                    var variant = (_c = (isObj ? sub.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
+                    return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
+                })()));
         })));
 };
 exports.default = MenuPopoverContent;

package/dist/Components/SideBar/components/OverflowTooltipText.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-interface OverflowWrapperWithTooltipProps {
-    children: React.ReactNode;
+import { TextProps } from "@chakra-ui/react";
+interface OverflowTooltipTextProps extends TextProps {
+    children: string;
     placement?: "top" | "bottom" | "left" | "right";
     maxWidth?: string | number;
     isTooltipDisabled?: boolean;
 }
-declare const OverflowTooltipText: React.FC<OverflowWrapperWithTooltipProps>;
+declare const OverflowTooltipText: React.FC<OverflowTooltipTextProps>;
 export default OverflowTooltipText;

package/dist/Components/SideBar/components/OverflowTooltipText.js

@@ -1,4 +1,15 @@
 "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);
@@ -22,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,34 +52,31 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 var OverflowTooltipText = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "200px" : _c, _d = _a.isTooltipDisabled, isTooltipDisabled = _d === void 0 ? false : _d;
-    var contentRef = (0, react_1.useRef)(null);
-    var _e = (0, react_1.useState)(""), textContent = _e[0], setTextContent = _e[1];
-    var _f = (0, react_1.useState)(false), isOverflowing = _f[0], setIsOverflowing = _f[1];
+    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "100%" : _c, _d = _a.isTooltipDisabled, isTooltipDisabled = _d === void 0 ? false : _d, textProps = __rest(_a, ["children", "placement", "maxWidth", "isTooltipDisabled"]);
+    var textRef = (0, react_1.useRef)(null);
+    var shadowRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(false), isTruncated = _e[0], setIsTruncated = _e[1];
     (0, react_1.useEffect)(function () {
-        var el = contentRef.current;
-        if (!el)
-            return;
-        var checkOverflow = function () {
-            setTextContent(el.textContent || "");
-            var sw = Math.round(el.scrollWidth);
-            var cw = Math.round(el.clientWidth);
-            setIsOverflowing(sw > cw + 1);
-        };
-        checkOverflow();
-        var ro = new ResizeObserver(function () { return checkOverflow(); });
-        ro.observe(el);
-        var mo = new MutationObserver(function () { return checkOverflow(); });
-        mo.observe(el, { childList: true, subtree: true, characterData: true });
-        window.addEventListener("resize", checkOverflow);
-        return function () {
-            ro.disconnect();
-            mo.disconnect();
-            window.removeEventListener("resize", checkOverflow);
+        var checkTruncation = function () {
+            var textEl = textRef.current;
+            var shadowEl = shadowRef.current;
+            if (textEl && shadowEl) {
+                var visibleWidth = textEl.offsetWidth;
+                var fullTextWidth = shadowEl.scrollWidth;
+                setIsTruncated(fullTextWidth > visibleWidth + 1);
+            }
         };
+        checkTruncation();
+        var resizeObserver = new ResizeObserver(checkTruncation);
+        if (textRef.current) {
+            resizeObserver.observe(textRef.current);
+        }
+        return function () { return resizeObserver.disconnect(); };
     }, [children]);
-    var shouldShowTooltip = isOverflowing && !isTooltipDisabled;
-    return (react_1.default.createElement(ToolTip_1.default, { label: textContent, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
-        react_1.default.createElement(react_2.Box, { ref: contentRef, as: "span", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
+    var shouldShowTooltip = isTruncated && !isTooltipDisabled;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
+            react_1.default.createElement(react_2.Text, __assign({ ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: maxWidth }, textProps), children)),
+        react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py }, children)));
 };
 exports.default = OverflowTooltipText;

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

@@ -35,9 +35,10 @@ var TableActions_1 = __importDefault(require("./TableActions"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableBody = function (_a) {
+    var _b, _c, _d;
     var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, 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 _b = (0, react_2.useState)(new Set()), expandedRows = _b[0], setExpandedRows = _b[1];
+    var _e = (0, react_2.useState)(new Set()), expandedRows = _e[0], setExpandedRows = _e[1];
     var toggleRowExpansion = function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -77,9 +78,9 @@ var TableBody = function (_a) {
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
     }
     if (data.length === 0) {
-        return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
+        return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
-                react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
+                react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] },
                     react_2.default.createElement("p", null, "No data found")))));
     }
     return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {

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

@@ -29,6 +29,7 @@ export type LeftFilterPaneProps = {
     onApply?: (selected: any) => void;
     onClear?: () => void;
     theme: any;
+    isApplyLoading?: boolean;
 };
-declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, }: LeftFilterPaneProps) => React.JSX.Element;
+declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, }: LeftFilterPaneProps) => React.JSX.Element;
 export default LeftFilterPane;

package/dist/Components/Table/LeftFilterPane.js

@@ -58,9 +58,9 @@ var SelectOperationControls_1 = require("./SelectOperationControls");
 var CompactSelect_1 = __importDefault(require("./CompactSelect"));
 var LeftFilterPane = function (_a) {
     var _b, _c;
-    var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 300 : _e, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme;
-    var _f = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _f[0], setIsSearching = _f[1];
-    var _g = (0, react_1.useState)({}), localSelected = _g[0], setLocalSelected = _g[1];
+    var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 300 : _e, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _f = _a.isApplyLoading, isApplyLoading = _f === void 0 ? false : _f;
+    var _g = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _g[0], setIsSearching = _g[1];
+    var _h = (0, react_1.useState)({}), localSelected = _h[0], setLocalSelected = _h[1];
     var searchRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setLocalSelected(selectedProp || {});
@@ -148,6 +148,15 @@ var LeftFilterPane = function (_a) {
             .map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); })
             .filter(function (sec) { return (sec.items || []).length > 0; });
     }, [search, sections]);
+    var hasActiveFilters = (0, react_1.useMemo)(function () {
+        return Object.entries(localSelected).some(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (key === "search") {
+                return !!(value && typeof value === "string" && value.trim() !== "");
+            }
+            return Array.isArray(value) && value.length > 0;
+        });
+    }, [localSelected]);
     var handleApply = function () {
         onApply === null || onApply === void 0 ? void 0 : onApply(selected);
     };
@@ -309,12 +318,8 @@ var LeftFilterPane = function (_a) {
                 }))))));
         }))) : (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
             react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")))),
-        react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
+        hasActiveFilters && (react_1.default.createElement(react_2.HStack, { px: 4, py: 3, borderTop: "1px solid", borderColor: "gray.200", spacing: 3 },
             react_1.default.createElement(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red" }, "Clear All"),
-            react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary", 
-                // bg={theme.colors?.red?.[500]}
-                color: "white", size: "sm", onClick: handleApply, 
-                // _hover={{ bg: theme.colors?.red?.[600] }}
-                fontSize: "xs" }, "Apply"))));
+            react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading }, "Apply")))));
 };
 exports.default = LeftFilterPane;

package/dist/Components/Table/Table.js

@@ -113,8 +113,8 @@ function Table(_a) {
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
     var actualRows = _filteredData.length;
-    var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : 5;
-    var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : 10;
+    var minRows = typeof minVisibleRows === "number" ? Math.max(0, minVisibleRows) : (actualRows === 0 ? 1 : 5);
+    var maxRows = typeof maxVisibleRows === "number" ? Math.max(minRows, maxVisibleRows) : (actualRows === 0 ? 1 : 10);
     var visibleRowsCount = Math.max(minRows, Math.min(actualRows, maxRows));
     (0, react_1.useEffect)(function () {
         if (!autoFitViewport)
@@ -148,7 +148,7 @@ function Table(_a) {
     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.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 : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler })),
+                react_1.default.createElement(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_f = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _f !== void 0 ? _f : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading })),
             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, flexWrap: "nowrap", bg: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], borderBottom: "0.063rem solid ".concat((_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500]) },
                     filterSidebar && (react_1.default.createElement(react_1.default.Fragment, null,

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

@@ -43,6 +43,7 @@ export type TableProps = {
         isFilterSidebar?: boolean;
         handleSidebarFilterClick?: (filters: Record<string, any>) => void;
         filterSidebarToggle?: () => void;
+        isApplyLoading?: boolean;
     };
     preferences?: {
         url: string;

package/package.json

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