pixelize-design-library 2.2.132 → 2.2.137

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, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, }: SidebarProps): React.JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, }: SidebarProps): React.JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -10,12 +10,45 @@ var __assign = (this && this.__assign) || function () {
     };
     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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
 exports.default = Sidebar;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Sidebar_1 = require("../../Constants/Sidebar");
@@ -72,11 +105,31 @@ var CollapseButton = function (_a) {
 // --- Main Sidebar component ---
 function Sidebar(_a) {
     var _b;
-    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, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
+    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, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Refs let the effects read the latest values without adding them to dep arrays,
+    // which would cause infinite toggle loops since changeToggle flips state.
+    var toggleRef = (0, react_1.useRef)(toggle);
+    toggleRef.current = toggle;
+    var changeToggleRef = (0, react_1.useRef)(changeToggle);
+    changeToggleRef.current = changeToggle;
     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 : [];
+    // Sync toggle with external `open` prop.
+    // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
+    (0, react_1.useEffect)(function () {
+        var shouldBeCollapsed = !open;
+        if (shouldBeCollapsed !== toggleRef.current) {
+            changeToggleRef.current();
+        }
+    }, [open]);
+    // Auto-collapse the main sidebar whenever a secondary panel is active.
+    (0, react_1.useEffect)(function () {
+        if (secondaryItems.length > 0 && !toggleRef.current) {
+            changeToggleRef.current();
+        }
+    }, [secondaryItems.length]); // eslint-disable-line react-hooks/exhaustive-deps
     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", transition: "width 0.5s ease", 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" },

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

@@ -13,6 +13,7 @@ export type SidebarProps = {
     selectedSecondaryItem?: string | number | null;
     isLoading?: boolean;
     loadingLines?: number;
+    open?: boolean;
 };
 export type MenuProps = {
     id: string | number;

package/package.json

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