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

package/index.cjs.js

@@ -102,18 +102,10 @@ 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-drawer",
+    "z-overlay",
     "overflow-hidden",
     "overscroll-none",
     // Let non-modal drawers keep the page interactive; panel/overlay opt back in.
@@ -304,7 +296,7 @@ const PANEL_FOCUSABLE_SELECTOR = [
  * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
-const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, children, "data-testid": dataTestId, className, renderInPortal = false, containerClassName, ariaLabel, ariaLabelledBy, }) => {
+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 { isSm } = reactComponents.useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const panelRef = react.useRef(null);
@@ -418,7 +410,7 @@ const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, children, "d
             mode: drawerState.mode,
             position: position,
             className,
-        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, style: {
+        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, ...others, 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,18 +100,10 @@ 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-drawer",
+    "z-overlay",
     "overflow-hidden",
     "overscroll-none",
     // Let non-modal drawers keep the page interactive; panel/overlay opt back in.
@@ -302,7 +294,7 @@ const PANEL_FOCUSABLE_SELECTOR = [
  * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
-const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, children, "data-testid": dataTestId, className, renderInPortal = false, containerClassName, ariaLabel, ariaLabelledBy, }) => {
+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 { isSm } = useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const panelRef = useRef(null);
@@ -416,7 +408,7 @@ const Drawer = ({ isOpen, variant, trapFocus, position, floatingUi, children, "d
             mode: drawerState.mode,
             position: position,
             className,
-        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, style: {
+        }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: mergedPanelRef, role: isModal ? "dialog" : "complementary", ...floatingProps, ...others, 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.20",
+  "version": "2.6.22-alpha-3e7014314a8.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.10.14",
-    "@trackunit/css-class-variance-utilities": "1.14.19",
-    "@trackunit/i18n-library-translation": "2.4.20",
+    "@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",
     "@floating-ui/react": "^0.26.25",
     "tailwind-merge": "^2.0.0"
   },

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

@@ -1,48 +1,12 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-import type { DrawerPosition } from "../../types";
-import type { DrawerFloatingUiProps, DrawerVariant } from "./useDrawer";
+import type { UseDrawerReturnValue } from "./useDrawer";
 /**
- * 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`.
+ * 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>`.
  */
-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;
+export interface DrawerProps extends CommonProps, UseDrawerReturnValue {
     /**
      * Content rendered inside the drawer panel. Compose layout parts explicitly — typically
      * `<DrawerHeader />` (or a custom header such as `CardHeader`) followed by the body.
@@ -135,6 +99,6 @@ export interface DrawerProps extends CommonProps {
  * @param {DrawerProps} props - The props for the Drawer component
  */
 export declare const Drawer: {
-    ({ isOpen, variant, trapFocus, position, floatingUi, children, "data-testid": dataTestId, className, renderInPortal, containerClassName, ariaLabel, ariaLabelledBy, }: DrawerProps): ReactElement | null;
+    ({ 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;
     displayName: string;
 };

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

@@ -4,21 +4,13 @@
  *
  * - `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?: "closed" | "open" | null | undefined;
+    mode?: "open" | "closed" | 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,27 +58,9 @@ 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 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,10 +1,7 @@
 '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,8 +1,5 @@
 var translation = {
-	"drawer.header.back": "Back",
-	"drawer.header.close": "Close",
-	"drawer.header.forward": "Forward",
-	"drawer.header.moreMenu": "More actions"
+	
 };
 
 export { translation as default };

package/migrations/entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/drawer/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}