opus-toolkit-components 1.8.1 → 1.8.2

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

@@ -1,48 +1,53 @@
-export interface SidebarMenuItem {
-  key: string | number;
-  name: string;
-  icon?: string;
-  href?: string;
-}
-
-export interface SidebarMenuGroup {
-  key: string | number;
-  name: string;
-  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;
-
-  /** Controlled open/closed state for menu groups */
-  openGroupKey?: string | number | null;
-
-  /**
-   * Fired when the user clicks a group header.
-   * Use this to update `openGroupKey` in the parent.
-   */
-  onGroupToggle?: (key: string | number) => void;
-}
-
-export const Sidebar: React.FC<SidebarProps>;
+export interface SidebarMenuItem {
+  key: string | number;
+  name: string;
+  icon?: string;
+  href?: string;
+}
+
+export interface SidebarMenuGroup {
+  key: string | number;
+  name: string;
+  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>;

package/lib/main.js

@@ -5563,8 +5563,8 @@ __webpack_require__.r(__webpack_exports__);
  * @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
+ * @property {string} [icon]
+ * @property {string} [href]
  */
 
 /**
@@ -5586,7 +5586,7 @@ __webpack_require__.r(__webpack_exports__);
  * @property {string|number} id
  * @property {string} name
  * @property {string} role
- * @property {string} [avatar]   // optional depending on your design
+ * @property {string} [avatar]
  */
 
 /**
@@ -5609,15 +5609,16 @@ __webpack_require__.r(__webpack_exports__);
  * @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 {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.
  */
 
 /**
@@ -5639,10 +5640,14 @@ function Sidebar(_ref) {
     onGroupToggle
   } = _ref;
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const handleGroupToggle = key => {
+    const nextOpenGroupKey = openGroupKey === key ? null : key;
+    onGroupToggle(nextOpenGroupKey);
+  };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
     className: "flex",
     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 rounded 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", {
@@ -5651,7 +5656,7 @@ function Sidebar(_ref) {
           alt: "C247 Logo",
           className: "sidebar-logo w-75 object-contain"
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("button", {
-          className: "duration-400 rounded-l-lg bg-[--color-primary-btn] p-2 transition-all ease-in-out hover:bg-[--color-primary-btn-hover] focus:outline-none ".concat(open ? "translate-x-0 opacity-100" : "translate-x-4 opacity-0", " "),
+          className: "duration-400 rounded-l-lg bg-[--color-primary-btn] p-2 transition-all ease-in-out hover:bg-[--color-primary-btn-hover] focus:outline-none ".concat(open ? "translate-x-0 opacity-100" : "translate-x-4 opacity-0"),
           onClick: () => setOpen(!open),
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ArrowLeftIcon, {
             className: "h-5 w-5 text-[--color-white]"
@@ -5659,7 +5664,7 @@ function Sidebar(_ref) {
         })]
       }), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("button", {
         className: "p-3 transition-all duration-700 ease-in-out focus:outline-none",
-        onClick: () => setOpen(!open),
+        onClick: () => setOpen(true),
         children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.Bars3Icon, {
           className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
         })
@@ -5688,20 +5693,18 @@ function Sidebar(_ref) {
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
           className: "menu-item-container",
           children: menus.map(menu => menu.children ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarGroup__WEBPACK_IMPORTED_MODULE_3__["default"], {
-            // composite key
             menu: menu,
             open: open,
             activeItem: activeItem,
             onItemClick: onItemClick,
             toggleSidebar: setOpen,
             isOpen: openGroupKey === menu.key,
-            onToggle: () => onGroupToggle === null || onGroupToggle === void 0 ? void 0 : onGroupToggle(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"], {
-            // composite key
             menu: menu,
             open: open,
             active: activeItem === menu.key,
-            onClick: () => onItemClick(menu.key)
+            onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(menu.key)
           }, "item-".concat(menu.key, "-").concat(menu.name)))
         })]
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarProfile__WEBPACK_IMPORTED_MODULE_4__["default"], {
@@ -50782,14 +50785,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* binding */ SidebarGroup)
 /* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(58964);
-/* harmony import */ var _SidebarItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(69374);
-/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21111);
-/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(57739);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(94178);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(58964);
+/* harmony import */ var _SidebarItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(69374);
+/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(21111);
+/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(57739);
+/* 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__);
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -50800,7 +50801,6 @@ 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
@@ -50845,14 +50845,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @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.
+ *   REQUIRED. Whether this group’s children are expanded.
  *
- * @property {(key: string|number) => void} onToggle
- *   Fired when the group header is clicked. Parent controls open/close.
+ * @property {() => void} onToggle
+ *   REQUIRED. Called when the group header is clicked.
  */
 
 /**
@@ -50871,34 +50868,34 @@ function SidebarGroup(_ref) {
     isOpen,
     onToggle
   } = _ref;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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);
-        onToggle(menu.key); // let parent handle open/close
+        onToggle(); // Sidebar computes next openGroupKey
       },
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
         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", {
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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", {
+        children: [menu.iconProps && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Icon_Icon__WEBPACK_IMPORTED_MODULE_3__["default"], _objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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", {
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.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"),
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_3__["default"], {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_2__["default"], {
             as: "span",
             variant: "label",
             children: menu.name
           })
         })]
-      }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ChevronDownIcon, {
+      }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__.ChevronDownIcon, {
         className: "h-4 w-4 transition-transform duration-300 ".concat(isOpen ? "rotate-180" : "")
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
       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"], {
+      children: menu.children.map(child => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_1__["default"], {
         menu: child,
         open: open,
         active: activeItem === child.key,