opus-toolkit-components 1.8.5 → 1.8.6

package/lib/components/PageTemplate/index.d.ts

@@ -1,4 +1,15 @@
+import type { SidebarMenu, SidebarUser } from "../Sidebar";
+
 export interface PageTemplateProps {
+  sidebarMenus?: SidebarMenu[];
+  sidebarUser?: SidebarUser;
+  sidebarActiveItem?: string | number | null;
+  onSidebarItemClick?: (key: string | number) => void;
+  sidebarLogo?: string;
+  sidebarSearchValue?: string;
+  onSidebarSearchChange?: (value: string) => void;
+  sidebarOpenGroupKey?: string | number | null;
+  onSidebarGroupToggle?: (openGroupKey: string | number | null) => void;
   headerTitle?: string;
   headerCenter?: React.ReactNode;
   headerRight?: React.ReactNode;

package/lib/components/Sidebar/index.d.ts

@@ -1,58 +1,57 @@
-import type { IconProps } from "../Icon";
-
-export interface SidebarMenuItem {
-  key: string | number;
-  name: string;
-  path?: string;
-  href?: string;
-  iconProps?: IconProps;
-  onClick?: (key: string | number) => void;
-}
-
-export interface SidebarMenuGroup {
-  key: string | number;
-  name: string;
-  iconProps?: IconProps;
-  children: SidebarMenuItem[];
-}
-
-export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
-
-export interface SidebarUser {
-  id: string | number;
-  name: string;
-  role: string;
-  avatar?: string;
-}
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  menus: SidebarMenu[];
-  user: SidebarUser;
-
-  /** Currently selected (active) menu item */
-  activeItem?: string | number | null;
-  onItemClick?: (key: string | number) => void;
-
-  /** Optional logo override */
-  logo?: string;
-
-  /** Controlled search input state */
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-
-  /**
-   * REQUIRED.
-   * Key of the currently expanded group.
-   * Set to `null` to collapse all groups.
-   */
-  openGroupKey: string | number | null;
-
-  /**
-   * REQUIRED.
-   * Fired when the open group changes.
-   * Receives the NEXT openGroupKey value.
-   */
-  onGroupToggle: (openGroupKey: string | number | null) => void;
-}
-
-export const Sidebar: React.FC<SidebarProps>;
+import type { IconProps } from "../Icon";
+
+export interface SidebarMenuItem {
+  key: string | number;
+  name: string;
+  path?: string;
+  href?: string;
+  iconProps?: IconProps;
+  onClick?: (key: string | number) => void;
+}
+
+export interface SidebarMenuGroup {
+  key: string | number;
+  name: string;
+  iconProps?: IconProps;
+  children: SidebarMenuItem[];
+}
+
+export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
+
+export interface SidebarUser {
+  id: string | number;
+  name: string;
+  role: string;
+  avatar?: string;
+}
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  menus: SidebarMenu[];
+  user: SidebarUser;
+
+  /** Currently selected (active) menu item */
+  activeItem?: string | number | null;
+  onItemClick?: (key: string | number) => void;
+
+  /** Optional logo override */
+  logo?: string;
+
+  /** Controlled search input state */
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+
+  /**
+   * Optional controlled key of the currently expanded group.
+   * Set to `null` to collapse all groups.
+   * When omitted, the Sidebar manages expansion state internally.
+   */
+  openGroupKey?: string | number | null;
+
+  /**
+   * Optional controlled change handler.
+   * Receives the NEXT openGroupKey value.
+   */
+  onGroupToggle?: (openGroupKey: string | number | null) => void;
+}
+
+export const Sidebar: React.FC<SidebarProps>;

package/lib/main.js

@@ -1555,33 +1555,54 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _Header_Header__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(38195);
 /* harmony import */ var _Footer_Footer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3047);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(94178);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(11775);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(94178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
 
 
 
 
-/**
- * @typedef {Object} PageTemplateProps
- *
- * @property {string} [headerTitle]                  Title passed to left Header
- * @property {React.ReactNode} [headerCenter]        Center slot of Header
- * @property {React.ReactNode} [headerRight]         Right slot of Header
- *
- * @property {React.ReactNode} [footerLeft]          Left slot of Footer
- * @property {React.ReactNode} [footerCenter]        Center slot of Footer
- * @property {React.ReactNode} [footerRight]         Right slot of Footer
- *
- * @property {React.ReactNode} children              Main page content
- * @property {string} [className]                    Optional wrapper class
+
+/**
+ * @typedef {Object} PageTemplateProps
+ *
+ * @property {import('../Sidebar').SidebarMenu[]} [sidebarMenus] Sidebar menu configuration
+ * @property {import('../Sidebar').SidebarUser} [sidebarUser]   Sidebar user profile data
+ * @property {string|number|null} [sidebarActiveItem]          Active sidebar item key
+ * @property {(key: string|number) => void} [onSidebarItemClick]
+ * @property {string} [sidebarLogo]                            Optional sidebar logo override
+ * @property {string} [sidebarSearchValue]                     Controlled search input value
+ * @property {(value: string) => void} [onSidebarSearchChange]
+ * @property {string|number|null} [sidebarOpenGroupKey]        Expanded sidebar group key
+ * @property {(openGroupKey: string|number|null) => void} [onSidebarGroupToggle]
+ *
+ * @property {string} [headerTitle]                  Title passed to left Header
+ * @property {React.ReactNode} [headerCenter]        Center slot of Header
+ * @property {React.ReactNode} [headerRight]         Right slot of Header
+ *
+ * @property {React.ReactNode} [footerLeft]          Left slot of Footer
+ * @property {React.ReactNode} [footerCenter]        Center slot of Footer
+ * @property {React.ReactNode} [footerRight]         Right slot of Footer
+ *
+ * @property {React.ReactNode} children              Main page content
+ * @property {string} [className]                    Optional wrapper class
  */
 
-/**
- * @param {PageTemplateProps} props
+/**
+ * @param {PageTemplateProps} props
  */
 
 const PageTemplate = _ref => {
   let {
+    sidebarMenus,
+    sidebarUser,
+    sidebarActiveItem,
+    onSidebarItemClick,
+    sidebarLogo,
+    sidebarSearchValue = "",
+    onSidebarSearchChange,
+    sidebarOpenGroupKey,
+    onSidebarGroupToggle,
     headerTitle,
     headerCenter,
     headerRight,
@@ -1591,19 +1612,37 @@ const PageTemplate = _ref => {
     children,
     className = ""
   } = _ref;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-    className: "flex min-h-screen w-full flex-col ".concat(className),
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Header_Header__WEBPACK_IMPORTED_MODULE_1__["default"], {
-      title: headerTitle,
-      center: headerCenter,
-      right: headerRight
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("main", {
-      className: "flex-1 p-4",
-      children: children
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Footer_Footer__WEBPACK_IMPORTED_MODULE_2__["default"], {
-      left: footerLeft,
-      center: footerCenter,
-      right: footerRight
+  const hasSidebar = Boolean((sidebarMenus === null || sidebarMenus === void 0 ? void 0 : sidebarMenus.length) && sidebarUser);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+    className: "flex min-h-screen w-full ".concat(className),
+    children: [hasSidebar ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("aside", {
+      className: "shrink-0",
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Sidebar_Sidebar__WEBPACK_IMPORTED_MODULE_3__["default"], {
+        menus: sidebarMenus,
+        user: sidebarUser,
+        activeItem: sidebarActiveItem,
+        onItemClick: onSidebarItemClick,
+        logo: sidebarLogo,
+        searchValue: sidebarSearchValue,
+        onSearchChange: onSidebarSearchChange,
+        openGroupKey: sidebarOpenGroupKey,
+        onGroupToggle: onSidebarGroupToggle
+      })
+    }) : null, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+      className: "flex min-h-screen min-w-0 flex-1 flex-col",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Header_Header__WEBPACK_IMPORTED_MODULE_1__["default"], {
+        title: headerTitle,
+        center: headerCenter,
+        right: headerRight
+        // className="bg-[--color-primary]"
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("main", {
+        className: "flex-1 p-4",
+        children: children
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Footer_Footer__WEBPACK_IMPORTED_MODULE_2__["default"], {
+        left: footerLeft,
+        center: footerCenter,
+        right: footerRight
+      })]
     })]
   });
 };
@@ -5577,75 +5616,75 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-/**
- * A single menu item (no children).
- * @typedef {Object} SidebarMenuItem
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {import('../Icon').IconProps} [iconProps]
- * @property {(key: string|number) => void} [onClick]
+/**
+ * A single menu item (no children).
+ * @typedef {Object} SidebarMenuItem
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {import('../Icon').IconProps} [iconProps]
+ * @property {(key: string|number) => void} [onClick]
  */
 
-/**
- * A grouped menu entry with children.
- * @typedef {Object} SidebarMenuGroup
- * @property {string|number} key
- * @property {string} name
- * @property {SidebarMenuItem[]} children
+/**
+ * A grouped menu entry with children.
+ * @typedef {Object} SidebarMenuGroup
+ * @property {string|number} key
+ * @property {string} name
+ * @property {SidebarMenuItem[]} children
  */
 
-/**
- * A full menu entry (either group or leaf item).
- * @typedef {SidebarMenuItem | SidebarMenuGroup} SidebarMenu
+/**
+ * A full menu entry (either group or leaf item).
+ * @typedef {SidebarMenuItem | SidebarMenuGroup} SidebarMenu
  */
 
-/**
- * Minimal shape expected for SidebarProfile.
- * @typedef {Object} SidebarUser
- * @property {string|number} id
- * @property {string} name
- * @property {string} role
- * @property {string} [avatar]
+/**
+ * Minimal shape expected for SidebarProfile.
+ * @typedef {Object} SidebarUser
+ * @property {string|number} id
+ * @property {string} name
+ * @property {string} role
+ * @property {string} [avatar]
  */
 
-/**
- * Props for Sidebar.
- *
- * @typedef {Object} SidebarProps
- *
- * @property {SidebarMenu[]} menus
- *   All sidebar menu items (groups + items).
- *
- * @property {SidebarUser} user
- *   The current logged-in user.
- *
- * @property {string|number|null} [activeItem]
- *   Key of the currently selected item.
- *
- * @property {(key: string|number) => void} [onItemClick]
- *   Fired when a menu item is clicked.
- *
- * @property {string} [logo]
- *   Optional logo override.
- *
- * @property {string} [searchValue]
- *   Controlled search input value.
- *
- * @property {(value: string) => void} [onSearchChange]
- *
- * @property {string|number|null} openGroupKey
- *   REQUIRED. Key of the currently expanded group.
- *
- * @property {(openGroupKey: string|number|null) => void} onGroupToggle
- *   REQUIRED. Receives the NEXT open group key.
+/**
+ * Props for Sidebar.
+ *
+ * @typedef {Object} SidebarProps
+ *
+ * @property {SidebarMenu[]} menus
+ *   All sidebar menu items (groups + items).
+ *
+ * @property {SidebarUser} user
+ *   The current logged-in user.
+ *
+ * @property {string|number|null} [activeItem]
+ *   Key of the currently selected item.
+ *
+ * @property {(key: string|number) => void} [onItemClick]
+ *   Fired when a menu item is clicked.
+ *
+ * @property {string} [logo]
+ *   Optional logo override.
+ *
+ * @property {string} [searchValue]
+ *   Controlled search input value.
+ *
+ * @property {(value: string) => void} [onSearchChange]
+ *
+ * @property {string|number|null} [openGroupKey]
+ *   Optional controlled key of the currently expanded group.
+ *
+ * @property {(openGroupKey: string|number|null) => void} [onGroupToggle]
+ *   Optional controlled change handler. If omitted, Sidebar manages group state internally.
  */
 
-/**
- * Fully typed Sidebar component.
- *
- * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed Sidebar component.
+ *
+ * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Sidebar(_ref) {
@@ -5662,15 +5701,21 @@ function Sidebar(_ref) {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const [internalOpenGroupKey, setInternalOpenGroupKey] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const currentOpenGroupKey = openGroupKey !== undefined ? openGroupKey : internalOpenGroupKey;
   const handleGroupToggle = key => {
-    const nextOpenGroupKey = openGroupKey === key ? null : key;
-    onGroupToggle(nextOpenGroupKey);
+    const nextOpenGroupKey = currentOpenGroupKey === key ? null : key;
+    if (onGroupToggle) {
+      onGroupToggle(nextOpenGroupKey);
+      return;
+    }
+    setInternalOpenGroupKey(nextOpenGroupKey);
   };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", _objectSpread(_objectSpread({
     className: "flex"
   }, rest), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
-      className: "".concat(open ? "w-[20rem]" : "w-[3rem]", " transition-width flex min-h-screen flex-col rounded bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out"),
+      className: "".concat(open ? "w-[20rem]" : "w-[3rem]", " transition-width flex min-h-screen flex-col bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out"),
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
         className: "flex items-center justify-between p-3 pr-0",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("img", {
@@ -5721,7 +5766,7 @@ function Sidebar(_ref) {
             activeItem: activeItem,
             onItemClick: onItemClick,
             toggleSidebar: setOpen,
-            isOpen: openGroupKey === menu.key,
+            isOpen: currentOpenGroupKey === menu.key,
             onToggle: () => handleGroupToggle(menu.key)
           }, "group-".concat(menu.key, "-").concat(menu.name)) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
             menu: menu,
@@ -50958,62 +51003,62 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 
 
 
-/**
- * Icon props used by your dynamic Icon component (optional).
- * @typedef {import('../Icon/Icon').IconProps} IconProps
+/**
+ * Icon props used by your dynamic Icon component (optional).
+ * @typedef {import('../Icon/Icon').IconProps} IconProps
  */
 
-/**
- * A single child menu item.
- * @typedef {Object} SidebarChild
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {IconProps} [iconProps]
- * @property {(key: string|number) => void} [onClick]
+/**
+ * A single child menu item.
+ * @typedef {Object} SidebarChild
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {IconProps} [iconProps]
+ * @property {(key: string|number) => void} [onClick]
  */
 
-/**
- * Sidebar group object containing children.
- * @typedef {Object} SidebarGroupMenu
- * @property {string|number} key
- * @property {string} name
- * @property {SidebarChild[]} children
- * @property {IconProps} [iconProps]
+/**
+ * Sidebar group object containing children.
+ * @typedef {Object} SidebarGroupMenu
+ * @property {string|number} key
+ * @property {string} name
+ * @property {SidebarChild[]} children
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Props for SidebarGroup component.
- *
- * @typedef {Object} SidebarGroupProps
- *
- * @property {SidebarGroupMenu} menu
- *   The group menu containing children.
- *
- * @property {boolean} open
- *   Whether the sidebar itself is expanded (wide mode vs collapsed).
- *
- * @property {string|number|null} activeItem
- *   The currently selected menu item key.
- *
- * @property {(key: string|number) => void} onItemClick
- *   Handler fired when a child item is selected.
- *
- * @property {(open: boolean) => void} toggleSidebar
- *   Opens the sidebar when a user clicks a collapsed group.
- *
- * @property {boolean} isOpen
- *   REQUIRED. Whether this group’s children are expanded.
- *
- * @property {() => void} onToggle
- *   REQUIRED. Called when the group header is clicked.
+/**
+ * Props for SidebarGroup component.
+ *
+ * @typedef {Object} SidebarGroupProps
+ *
+ * @property {SidebarGroupMenu} menu
+ *   The group menu containing children.
+ *
+ * @property {boolean} open
+ *   Whether the sidebar itself is expanded (wide mode vs collapsed).
+ *
+ * @property {string|number|null} activeItem
+ *   The currently selected menu item key.
+ *
+ * @property {(key: string|number) => void} onItemClick
+ *   Handler fired when a child item is selected.
+ *
+ * @property {(open: boolean) => void} toggleSidebar
+ *   Opens the sidebar when a user clicks a collapsed group.
+ *
+ * @property {boolean} isOpen
+ *   REQUIRED. Whether this group’s children are expanded.
+ *
+ * @property {() => void} onToggle
+ *   REQUIRED. Called when the group header is clicked.
  */
 
-/**
- * Fully typed SidebarGroup component.
- *
- * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed SidebarGroup component.
+ *
+ * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function SidebarGroup(_ref) {
@@ -51060,7 +51105,7 @@ function SidebarGroup(_ref) {
         onClick: () => {
           var _child$onClick;
           (_child$onClick = child.onClick) === null || _child$onClick === void 0 || _child$onClick.call(child, child.key);
-          onItemClick(child.key);
+          onItemClick === null || onItemClick === void 0 || onItemClick(child.key);
         }
       }, "child-".concat(child.key, "-").concat(child.path)))
     })]