@trackunit/react-drawer 2.6.22-alpha-3e7014314a8.0 → 2.6.25

package/index.cjs.js

@@ -102,10 +102,18 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
  *
  * - `portaled` → `fixed` (viewport-relative; escapes parent layout)
  * - in-tree → `absolute` (parent must establish a containing block, e.g. `relative`)
+ *
+ * The viewport container sits at `z-drawer` (35) — below `z-main-menu` (50) and
+ * `z-main-menu-drawer` (40), so the navigation rail and its flyout drawer always
+ * stack above regular drawers. Consumers that need drawer content to cover the
+ * navigation (e.g. the flyout drawer itself) override via `containerClassName`.
+ * Everything painted inside this container — the panel and modal backdrop — stacks
+ * within this local context, so their in-panel `z-overlay` still keeps the panel
+ * above the backdrop.
  */
 const cvaDrawerViewport = cssClassVarianceUtilities.cvaMerge([
     "inset-0",
-    "z-overlay",
+    "z-drawer",
     "overflow-hidden",
     "overscroll-none",
     // Let non-modal drawers keep the page interactive; panel/overlay opt back in.
@@ -296,7 +304,7 @@ const PANEL_FOCUSABLE_SELECTOR = [
  * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
-const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, open: _open, close: _close, toggle: _toggle, requestClose: _requestClose, children, "data-testid": dataTestId, className, renderInPortal = false, containerClassName, ariaLabel, ariaLabelledBy, ...others }) => {
+const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, children, "data-testid": dataTestId, className, renderInPortal = false, containerClassName, ariaLabel, ariaLabelledBy, }) => {
     const { isSm } = reactComponents.useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const panelRef = react.useRef(null);
@@ -410,7 +418,7 @@ const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, open: _open,
             mode: drawerState.mode,
             position: position,
             className,
-        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, ...others, style: {
+        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, style: {
             ...getDrawerMotionStyle({ mode: drawerState.mode, position }),
         }, children: jsxRuntime.jsx("div", { className: cvaDrawerContent({ position }), children: children }) }));
     const content = (jsxRuntime.jsxs("div", { className: cvaDrawerViewport({ portaled: shouldUsePortal, className: containerClassName }), "data-testid": "drawer-viewport", children: [isModal ? jsxRuntime.jsx(Overlay, { open: isOpen ? drawerState.mode === "open" : false }) : null, showFocusManager ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: floatingUi.context, initialFocus: -1, returnFocus: true, children: panel })) : (panel)] }));

package/index.esm.js

@@ -100,10 +100,18 @@ const cvaOverlayContainer = cvaMerge([
  *
  * - `portaled` → `fixed` (viewport-relative; escapes parent layout)
  * - in-tree → `absolute` (parent must establish a containing block, e.g. `relative`)
+ *
+ * The viewport container sits at `z-drawer` (35) — below `z-main-menu` (50) and
+ * `z-main-menu-drawer` (40), so the navigation rail and its flyout drawer always
+ * stack above regular drawers. Consumers that need drawer content to cover the
+ * navigation (e.g. the flyout drawer itself) override via `containerClassName`.
+ * Everything painted inside this container — the panel and modal backdrop — stacks
+ * within this local context, so their in-panel `z-overlay` still keeps the panel
+ * above the backdrop.
  */
 const cvaDrawerViewport = cvaMerge([
     "inset-0",
-    "z-overlay",
+    "z-drawer",
     "overflow-hidden",
     "overscroll-none",
     // Let non-modal drawers keep the page interactive; panel/overlay opt back in.
@@ -294,7 +302,7 @@ const PANEL_FOCUSABLE_SELECTOR = [
  * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
-const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, open: _open, close: _close, toggle: _toggle, requestClose: _requestClose, children, "data-testid": dataTestId, className, renderInPortal = false, containerClassName, ariaLabel, ariaLabelledBy, ...others }) => {
+const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, children, "data-testid": dataTestId, className, renderInPortal = false, containerClassName, ariaLabel, ariaLabelledBy, }) => {
     const { isSm } = useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const panelRef = useRef(null);
@@ -408,7 +416,7 @@ const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, open: _open,
             mode: drawerState.mode,
             position: position,
             className,
-        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, ...others, style: {
+        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, style: {
             ...getDrawerMotionStyle({ mode: drawerState.mode, position }),
         }, children: jsx("div", { className: cvaDrawerContent({ position }), children: children }) }));
     const content = (jsxs("div", { className: cvaDrawerViewport({ portaled: shouldUsePortal, className: containerClassName }), "data-testid": "drawer-viewport", children: [isModal ? jsx(Overlay, { open: isOpen ? drawerState.mode === "open" : false }) : null, showFocusManager ? (jsx(FloatingFocusManager, { context: floatingUi.context, initialFocus: -1, returnFocus: true, children: panel })) : (panel)] }));

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "2.6.22-alpha-3e7014314a8.0",
+  "version": "2.6.25",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.10.16-alpha-3e7014314a8.0",
-    "@trackunit/css-class-variance-utilities": "1.14.20-alpha-3e7014314a8.0",
-    "@trackunit/i18n-library-translation": "2.4.22-alpha-3e7014314a8.0",
+    "@trackunit/react-components": "2.10.19",
+    "@trackunit/css-class-variance-utilities": "1.14.19",
+    "@trackunit/i18n-library-translation": "2.4.25",
     "@floating-ui/react": "^0.26.25",
     "tailwind-merge": "^2.0.0"
   },

package/src/components/Drawer/Drawer.d.ts

@@ -1,12 +1,48 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-import type { UseDrawerReturnValue } from "./useDrawer";
+import type { DrawerPosition } from "../../types";
+import type { DrawerFloatingUiProps, DrawerVariant } from "./useDrawer";
 /**
- * Presentational props for `Drawer`. State, dismiss wiring, variant, focus-trap
- * opt-in, and position all flow in via {@link UseDrawerReturnValue} — call
- * `useDrawer()` and spread its return onto `<Drawer>`.
+ * Presentational props for `Drawer`. State (`isOpen`), resolved `variant`,
+ * focus-trap opt-in (`trapFocus`), `position`, and Floating UI wiring
+ * (`floatingUi`) all flow in from `useDrawer()`.
+ *
+ * Decoupled from the full `UseDrawerReturnValue` — `Drawer` only declares the
+ * props it actually reads. Consumers spread the hook return
+ * (`<Drawer {...drawer} />`) and TypeScript allows extra properties on spread
+ * expressions, so the imperative actions (`open` / `close` / `toggle` /
+ * `requestClose`) travel through the JSX without being typed here. This keeps
+ * the Storybook autodocs table (and the component's declared surface) focused
+ * on what `Drawer` genuinely consumes. Mirrors `Sheet`'s pattern in
+ * `@trackunit/react-components`.
  */
-export interface DrawerProps extends CommonProps, UseDrawerReturnValue {
+export interface DrawerProps extends CommonProps {
+    /**
+     * Current open state — spread from `useDrawer()`. Drives the enter / exit
+     * animation and whether the overlay renders (when `variant="modal"`).
+     */
+    readonly isOpen: boolean;
+    /**
+     * Semantic variant controlling backdrop, focus trap, and dismiss behavior.
+     * Spread from `useDrawer()`. See {@link DrawerVariant}.
+     */
+    readonly variant: DrawerVariant;
+    /**
+     * Whether to trap focus inside the panel when `variant="modal"`. Ignored for
+     * `variant="default"` (which never traps focus). Spread from `useDrawer()`.
+     */
+    readonly trapFocus: boolean;
+    /**
+     * Which edge of the viewport the panel is anchored to and slides in from.
+     * Spread from `useDrawer()`.
+     */
+    readonly position: DrawerPosition;
+    /**
+     * Floating UI wiring for the panel's focus manager and dismiss bindings.
+     * `Drawer` merges `refs.setFloating` onto the panel and uses `context` for
+     * its `FloatingFocusManager`. Spread from `useDrawer()`.
+     */
+    readonly floatingUi: DrawerFloatingUiProps;
     /**
      * Content rendered inside the drawer panel. Compose layout parts explicitly — typically
      * `<DrawerHeader />` (or a custom header such as `CardHeader`) followed by the body.
@@ -99,6 +135,6 @@ export interface DrawerProps extends CommonProps, UseDrawerReturnValue {
  * @param {DrawerProps} props - The props for the Drawer component
  */
 export declare const Drawer: {
-    ({ isOpen, variant, trapFocus, position, floatingUi, open: _open, close: _close, toggle: _toggle, requestClose: _requestClose, children, "data-testid": dataTestId, className, renderInPortal, containerClassName, ariaLabel, ariaLabelledBy, ...others }: DrawerProps): ReactElement | null;
+    ({ isOpen, variant, trapFocus, position, floatingUi, children, "data-testid": dataTestId, className, renderInPortal, containerClassName, ariaLabel, ariaLabelledBy, }: DrawerProps): ReactElement | null;
     displayName: string;
 };

package/src/components/Drawer/Drawer.variants.d.ts

@@ -4,13 +4,21 @@
  *
  * - `portaled` → `fixed` (viewport-relative; escapes parent layout)
  * - in-tree → `absolute` (parent must establish a containing block, e.g. `relative`)
+ *
+ * The viewport container sits at `z-drawer` (35) — below `z-main-menu` (50) and
+ * `z-main-menu-drawer` (40), so the navigation rail and its flyout drawer always
+ * stack above regular drawers. Consumers that need drawer content to cover the
+ * navigation (e.g. the flyout drawer itself) override via `containerClassName`.
+ * Everything painted inside this container — the panel and modal backdrop — stacks
+ * within this local context, so their in-panel `z-overlay` still keeps the panel
+ * above the backdrop.
  */
 export declare const cvaDrawerViewport: (props?: ({
     portaled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaDrawer: (props?: ({
     position?: "left" | "right" | null | undefined;
-    mode?: "open" | "closed" | null | undefined;
+    mode?: "closed" | "open" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaDrawerContent: (props?: ({
     position?: "left" | "right" | null | undefined;

package/src/components/Drawer/useDrawer.d.ts

@@ -58,9 +58,27 @@ export type UseDrawerProps = UseOverlayDismissibleProps & {
 };
 /** Return value of the {@link useDrawer} hook. */
 export type UseDrawerReturnValue = {
+    /**
+     * Current open state. Spread onto `Drawer` — the component reads this to drive
+     * its enter / exit animation and to decide whether to render the overlay.
+     */
     readonly isOpen: boolean;
+    /**
+     * Open the drawer imperatively. Wire to a trigger, e.g. `onClick={drawer.open}`.
+     * Fires `onOpen` and `onOpenChange(true)` and flips `isOpen` to `true`. Bypasses
+     * the `onBeforeClose` guard (which only runs on close attempts).
+     */
     readonly open: () => void;
+    /**
+     * Close the drawer imperatively. Equivalent to `requestClose(undefined, "programmatic")`
+     * — runs the `onBeforeClose` guard (when provided) and only fires `onClose` /
+     * flips state if the guard resolves to `true`.
+     */
     readonly close: () => void;
+    /**
+     * Toggle open state. Convenience wrapper — calls `open()` when closed and
+     * `close()` when open.
+     */
     readonly toggle: () => void;
     /**
      * Close the drawer with a specific reason. Runs `onBeforeClose` first

package/translation.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation10.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation10.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation11.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation11.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation12.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation12.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation13.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation13.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation14.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation14.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation15.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation15.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation16.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation16.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation17.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation17.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation2.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation2.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation3.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation3.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation4.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation4.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation5.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation5.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation6.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation6.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation7.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation7.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation8.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation8.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };

package/translation9.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 exports.default = translation;

package/translation9.esm.js

@@ -1,5 +1,8 @@
 var translation = {
-	
+	"drawer.header.back": "Back",
+	"drawer.header.close": "Close",
+	"drawer.header.forward": "Forward",
+	"drawer.header.moreMenu": "More actions"
 };
 
 export { translation as default };