opus-toolkit-components 1.7.4 → 1.7.6

package/lib/opus-components.main.js

@@ -5558,66 +5558,72 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * A single menu item (no children).
- * @typedef {Object} SidebarMenuItem
- * @property {string|number} key
- * @property {string} name
- * @property {string} [icon]        // optional icon name depending on your app
- * @property {string} [href]        // optional link target
+/**
+ * A single menu item (no children).
+ * @typedef {Object} SidebarMenuItem
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [icon]        // optional icon name depending on your app
+ * @property {string} [href]        // optional link target
  */
 
-/**
- * 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]   // optional depending on your design
+/**
+ * Minimal shape expected for SidebarProfile.
+ * @typedef {Object} SidebarUser
+ * @property {string|number} id
+ * @property {string} name
+ * @property {string} role
+ * @property {string} [avatar]   // optional depending on your design
  */
 
-/**
- * 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='']
- *
- * @property {(value: string) => void} [onSearchChange]
+/**
+ * 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='']
+ /**
+ * @property {string|number|null} [openGroupKey]
+ *   Key of the currently expanded group (controlled).
+ *
+ * @property {(key: string|number) => void} [onGroupToggle]
+ *   Fired when a group header is clicked.
+ *
+ * @property {(value: string) => void} [onSearchChange]
  */
 
-/**
- * Fully typed Sidebar component.
- *
- * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed Sidebar component.
+ *
+ * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Sidebar(_ref) {
@@ -5628,7 +5634,9 @@ function Sidebar(_ref) {
     onItemClick,
     logo,
     searchValue = "",
-    onSearchChange
+    onSearchChange,
+    openGroupKey,
+    onGroupToggle
   } = _ref;
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
@@ -5685,7 +5693,9 @@ function Sidebar(_ref) {
             open: open,
             activeItem: activeItem,
             onItemClick: onItemClick,
-            toggleSidebar: setOpen
+            toggleSidebar: setOpen,
+            isOpen: openGroupKey === menu.key,
+            onToggle: () => onGroupToggle === null || onGroupToggle === void 0 ? void 0 : onGroupToggle(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"], {
             // composite key
             menu: menu,
@@ -46323,46 +46333,46 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 
 
-/**
- * Icon props (importing from your Icon component typedef).
- * @typedef {import('../Icon/Icon').IconProps} IconProps
+/**
+ * Icon props (importing from your Icon component typedef).
+ * @typedef {import('../Icon/Icon').IconProps} IconProps
  */
 
-/**
- * A sidebar leaf item (no children).
- * @typedef {Object} SidebarItemMenu
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {IconProps} [iconProps]
+/**
+ * A sidebar leaf item (no children).
+ * @typedef {Object} SidebarItemMenu
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Props for SidebarItem.
- *
- * @typedef {Object} SidebarItemProps
- *
- * @property {SidebarItemMenu} menu
- *   The menu item to render.
- *
- * @property {boolean} open
- *   Whether the sidebar is expanded.
- *
- * @property {boolean} [active=false]
- *   Whether this item is currently active.
- *
- * @property {keyof JSX.IntrinsicElements | React.ComponentType<any>} [as='div']
- *   Polymorphic wrapper: div, a, button, Link, etc.
- *
- * @property {() => void} [onClick]
- *   Fired when the item is clicked.
+/**
+ * Props for SidebarItem.
+ *
+ * @typedef {Object} SidebarItemProps
+ *
+ * @property {SidebarItemMenu} menu
+ *   The menu item to render.
+ *
+ * @property {boolean} open
+ *   Whether the sidebar is expanded.
+ *
+ * @property {boolean} [active=false]
+ *   Whether this item is currently active.
+ *
+ * @property {keyof JSX.IntrinsicElements | React.ComponentType<any>} [as='div']
+ *   Polymorphic wrapper: div, a, button, Link, etc.
+ *
+ * @property {() => void} [onClick]
+ *   Fired when the item is clicked.
  */
 
-/**
- * Fully typed SidebarItem component.
- *
- * @param {SidebarItemProps & React.HTMLAttributes<HTMLElement>} props
+/**
+ * Fully typed SidebarItem component.
+ *
+ * @param {SidebarItemProps & React.HTMLAttributes<HTMLElement>} props
  */
 
 function SidebarItem(_ref) {
@@ -46370,12 +46380,22 @@ function SidebarItem(_ref) {
       menu,
       open,
       active = false,
-      as: Component = "div",
+      as: Component = "a",
       onClick
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(Component, _objectSpread(_objectSpread({
-    onClick: onClick,
+  // Support both "href" and "path"
+  const navTarget = menu.href || menu.path;
+  const wrapperProps = {};
+  if (Component === "a" && navTarget) {
+    wrapperProps.href = navTarget;
+  }
+  if ((Component === null || Component === void 0 ? void 0 : Component.displayName) === "Link" && navTarget) {
+    wrapperProps.to = navTarget;
+  }
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(Component, _objectSpread(_objectSpread(_objectSpread({
+    onClick: onClick
+  }, wrapperProps), {}, {
     className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out ".concat(active ? "bg-[--color-primary-hover]" : "", " ")
   }, props), {}, {
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
@@ -50651,55 +50671,64 @@ 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]
+/**
+ * A single child menu item.
+ * @typedef {Object} SidebarChild
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * 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 is currently expanded.
- *
- * @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
- *   Used to open the sidebar when clicking a group.
+/**
+ * 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.
+ *
+ *
+ * // NEW CONTROLLED STATE PROPS:
+ *
+ * @property {boolean} isOpen
+ *   Whether THIS group’s children are currently expanded.
+ *
+ * @property {(key: string|number) => void} onToggle
+ *   Fired when the group header is clicked. Parent controls open/close.
  */
 
-/**
- * Fully typed SidebarGroup component.
- *
- * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed SidebarGroup component.
+ *
+ * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function SidebarGroup(_ref) {
@@ -50708,25 +50737,26 @@ function SidebarGroup(_ref) {
     open,
     activeItem,
     onItemClick,
-    toggleSidebar
+    toggleSidebar,
+    isOpen,
+    onToggle
   } = _ref;
-  const [expanded, setExpanded] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
       className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out",
       onClick: () => {
         if (!open) toggleSidebar(true);
-        setExpanded(!expanded);
+        onToggle(menu.key); // let parent handle open/close
       },
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-        className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(expanded || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]", " ")
+        className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(isOpen || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]")
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
         className: "flex items-center gap-3",
         children: [menu.iconProps && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Icon_Icon__WEBPACK_IMPORTED_MODULE_4__["default"], _objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
           className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100",
           children: menu.name
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-          className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0", " "),
+          className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0"),
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_3__["default"], {
             as: "span",
             variant: "label",
@@ -50734,12 +50764,11 @@ function SidebarGroup(_ref) {
           })
         })]
       }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ChevronDownIcon, {
-        className: "h-4 w-4 transition-transform duration-300 ".concat(expanded ? "rotate-180" : "")
+        className: "h-4 w-4 transition-transform duration-300 ".concat(isOpen ? "rotate-180" : "")
       })]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-      className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(expanded && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"),
+      className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(isOpen && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"),
       children: menu.children.map(child => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
-        // composite unique key
         menu: child,
         open: open,
         active: activeItem === child.key,