@kawaiininja/layouts 3.0.1 → 3.1.0

package/README.md

@@ -184,6 +184,36 @@ const drawerItems = [
 
 The framework will automatically calculate the correct path from your `TabConfig` and trigger `onNavigate`.
 
+### 5. Triggering Drawers from Views
+
+Every component rendered inside a sub-tab `view` automatically receives the `openDrawer` prop (and its alias `onOpenDrawer`). This allows you to trigger your registered drawers from any button or interaction within your content.
+
+**New**: You can now pass a data object as the second argument. This data will be passed as props to the drawer component.
+
+```jsx
+// Inside a component used as a sub-tab 'view'
+const MyFeedView = ({ openDrawer }) => {
+  return (
+    <div className="p-6">
+      <h1>Welcome to the Feed</h1>
+      {/* Pass custom data to the drawer */}
+      <button onClick={() => openDrawer("editor", { initialTitle: "Hello World" })}>
+        Compose New Post
+      </button>
+    </div>
+  );
+};
+
+// The Drawer component then receives it as props
+const MyEditorDrawer = ({ initialTitle, isOpen, onClose }) => {
+  return (
+    <AdaptiveDrawer isOpen={isOpen} onClose={onClose} title="New Post">
+      <input defaultValue={initialTitle} />
+    </AdaptiveDrawer>
+  );
+};
+```
+
 ---
 
 ## 🔄 Data Refresh & Safety

package/dist/MobileLayout.js

@@ -317,12 +317,13 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                                                         .view, {
                                                         onOpenDrawer: handleOpenDrawer,
                                                         openDrawer: handleOpenDrawer,
-                                                    }) }) }, `${activeTab}-${activeSubTab}`) })] })] }), _jsxs("nav", { className: "absolute right-0 top-0 bottom-0 w-12 bg-[rgb(var(--bg-tertiary))] border-l border-[rgb(var(--color-border-subtle))] flex flex-col z-50 pb-[env(safe-area-inset-bottom,0px)]", children: [_jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto no-scrollbar py-4 w-full relative", children: [_jsx(RailNavIndicator, { height: activeHeight, offset: activeOffset }), tabs.map((tab, idx) => (_jsx(RailNavButton, { title: tab.label, icon: tab.icon, active: activeTab === tab.id, onClick: () => handleNavTouchEnd(tab.id), onTouchStart: (e) => handleNavTouchStart(e, tab), onTouchMove: handleNavTouchMove, onTouchEnd: () => handleNavTouchEnd(tab.id), onRegisterRef: (el) => registerButtonRef(idx, el), isMobile: true }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] })] }), _jsx(QuickMenu, { ...quickMenu, isMobile: true }), drawerStack.map((id, index) => {
+                                                    }) }) }, `${activeTab}-${activeSubTab}`) })] })] }), _jsxs("nav", { className: "absolute right-0 top-0 bottom-0 w-12 bg-[rgb(var(--bg-tertiary))] border-l border-[rgb(var(--color-border-subtle))] flex flex-col z-50 pb-[env(safe-area-inset-bottom,0px)]", children: [_jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto no-scrollbar py-4 w-full relative", children: [_jsx(RailNavIndicator, { height: activeHeight, offset: activeOffset }), tabs.map((tab, idx) => (_jsx(RailNavButton, { title: tab.label, icon: tab.icon, active: activeTab === tab.id, onClick: () => handleNavTouchEnd(tab.id), onTouchStart: (e) => handleNavTouchStart(e, tab), onTouchMove: handleNavTouchMove, onTouchEnd: () => handleNavTouchEnd(tab.id), onRegisterRef: (el) => registerButtonRef(idx, el), isMobile: true }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] })] }), _jsx(QuickMenu, { ...quickMenu, isMobile: true }), drawerStack.map((item, index) => {
+                const { id, data } = item;
                 const DrawerComp = drawers[id];
                 if (!DrawerComp)
                     return null;
                 const isTop = index === drawerStack.length - 1;
-                return (_jsx(DrawerComp, { isOpen: isTop, onClose: () => {
+                return (_jsx(DrawerComp, { isOpen: isTop, ...(data || {}), onClose: () => {
                         if (isTop) {
                             console.log("[OnyxMobileLayout] Drawer onClose Event:", id);
                             handleBackDrawer();

package/dist/PcLayout.js

@@ -106,12 +106,13 @@ const OnyxPcLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRe
                                             }) }) }, `${activeTab}-${activeSubTab}`) })] })] }), _jsxs("nav", { className: "w-16 bg-[rgb(var(--bg-surface))] border-l border-[rgb(var(--color-border-subtle))] flex flex-col z-50", children: [_jsxs("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto no-scrollbar py-4 w-full relative", children: [_jsx(RailNavIndicator, { height: activeHeight, offset: activeOffset }), tabs.map((tab, idx) => (_jsx(RailNavButton, { title: tab.label, icon: tab.icon, active: activeTab === tab.id, onClick: () => handleNavClick(tab.id), onMouseEnter: (e) => handleMouseEnter(tab, e), onMouseLeave: handleMouseLeave, onRegisterRef: (el) => registerButtonRef(idx, el) }, tab.id)))] }), _jsx(RailNavThemeToggle, {})] }), _jsx(QuickMenu, { ...quickMenu, onSelect: handleQuickAction, onMouseEnter: () => {
                     if (closeTimer.current)
                         clearTimeout(closeTimer.current);
-                }, onMouseLeave: handleMouseLeave }), drawerStack.map((id, index) => {
+                }, onMouseLeave: handleMouseLeave }), drawerStack.map((item, index) => {
+                const { id, data } = item;
                 const DrawerComp = drawers[id];
                 if (!DrawerComp)
                     return null;
                 const isTop = index === drawerStack.length - 1;
-                return (_jsx(DrawerComp, { isOpen: isTop, onClose: () => {
+                return (_jsx(DrawerComp, { isOpen: isTop, ...(data || {}), onClose: () => {
                         if (isTop)
                             handleBackDrawer();
                     }, onBack: () => {

package/dist/hooks/useDrawerStack.d.ts

@@ -1,12 +1,16 @@
+export interface DrawerStackItem {
+    id: string;
+    data?: any;
+}
 /**
  * useDrawerStack
  * Manages a stack of drawers for nested navigation.
  */
 export declare function useDrawerStack(): {
-    drawerStack: string[];
+    drawerStack: DrawerStackItem[];
     activeDrawer: string | null;
-    handleOpenDrawer: (id: string) => void;
+    handleOpenDrawer: (id: string, data?: any) => void;
     handleBackDrawer: () => void;
     handleCloseDrawers: () => void;
-    setDrawerStack: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    setDrawerStack: import("react").Dispatch<import("react").SetStateAction<DrawerStackItem[]>>;
 };

package/dist/hooks/useDrawerStack.js

@@ -5,27 +5,22 @@ import { useCallback, useMemo, useState } from "react";
  */
 export function useDrawerStack() {
     const [drawerStack, setDrawerStack] = useState([]);
-    const activeDrawer = useMemo(() => drawerStack[drawerStack.length - 1] || null, [drawerStack]);
-    const handleOpenDrawer = useCallback((id) => {
-        console.log("[useDrawerStack] Opening Drawer:", id);
+    const activeDrawer = useMemo(() => drawerStack[drawerStack.length - 1]?.id || null, [drawerStack]);
+    const handleOpenDrawer = useCallback((id, data) => {
+        console.log("[useDrawerStack] Opening Drawer:", id, "with data:", data);
         setDrawerStack((prev) => {
-            console.log("[useDrawerStack] Current Stack before push:", prev);
-            // Don't push if it's already the top drawer
-            if (prev[prev.length - 1] === id) {
-                console.log("[useDrawerStack] Drawer already at top, skipping push:", id);
+            // Don't push if it's already the top drawer with same data (optional check)
+            if (prev[prev.length - 1]?.id === id &&
+                prev[prev.length - 1]?.data === data) {
                 return prev;
             }
-            const next = [...prev, id];
-            console.log("[useDrawerStack] New Stack after push:", next);
-            return next;
+            return [...prev, { id, data }];
         });
     }, []);
     const handleBackDrawer = useCallback(() => {
-        console.log("[useDrawerStack] Popping Stack");
         setDrawerStack((prev) => (prev.length > 0 ? prev.slice(0, -1) : prev));
     }, []);
     const handleCloseDrawers = useCallback(() => {
-        console.log("[useDrawerStack] Clearing Stack");
         setDrawerStack([]);
     }, []);
     return {

package/dist/types/drawer.d.ts

@@ -4,6 +4,6 @@ export interface DrawerItemConfig {
     targetTab?: string;
     targetSubTab?: string;
     onClick?: (ctx: {
-        openDrawer: (id: string) => void;
+        openDrawer: (id: string, data?: any) => void;
     }) => void;
 }

package/dist/types/layout.d.ts

@@ -6,13 +6,7 @@ export interface OnyxMobileLayoutProps {
     tabs: TabConfig[];
     user: UserConfig;
     drawers?: {
-        [key: string]: ComponentType<{
-            isOpen: boolean;
-            onClose: () => void;
-            onBack?: () => void;
-            onOpenDrawer: (id: string) => void;
-            openDrawer?: (id: string) => void;
-        }>;
+        [key: string]: ComponentType<any>;
     };
     onSignOut?: () => void;
     onRefresh?: () => void | Promise<void>;

package/dist/types/navigation.d.ts

@@ -11,7 +11,7 @@ export interface QuickActionConfig {
     label: string;
     icon: ComponentType<any>;
     onClick?: (ctx: {
-        openDrawer: (id: string) => void;
+        openDrawer: (id: string, data?: any) => void;
     }) => void;
 }
 export interface TabConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/layouts",
-    "version": "3.0.1",
+    "version": "3.1.0",
     "category": "UI Components",
     "framework": "React / Framer Motion",
     "description": "High-performance, premium mobile-first layouts for the Onyx Framework, featuring gesture-driven navigation, radial quick actions, and integrated theme support.",