@flipdish/ui-library 0.41.2 → 0.43.0

package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.d.ts

@@ -0,0 +1,23 @@
+interface UseSlideoutStateOptions {
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/** The open state in the shape react-aria's `OverlayTriggerState` has, so `Dialog` and `DialogTrigger` can share it. */
+export interface SlideoutOpenState {
+    isOpen: boolean;
+    setOpen: (isOpen: boolean) => void;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+/**
+ * Owns the panel's open state, controlled or uncontrolled by the usual pair of props, in the shape
+ * react-aria's trigger state has so a surrounding `DialogTrigger` and the `Dialog` inside can share it.
+ *
+ * @param options The open props as the consumer passed them.
+ * @returns The open state, with a stable identity across renders.
+ */
+export declare const useSlideoutState: ({ isOpen, defaultOpen, onOpenChange }: UseSlideoutStateOptions) => SlideoutOpenState;
+export {};
+//# sourceMappingURL=useSlideoutState.d.ts.map

package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlideoutState.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useSlideoutState.ts"],"names":[],"mappings":"AAIA,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,wHAAwH;AACxH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,uCAAuC,uBAAuB,KAAG,iBA+BjG,CAAC"}

package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.js

@@ -0,0 +1,37 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+
+/**
+ * Owns the panel's open state, controlled or uncontrolled by the usual pair of props, in the shape
+ * react-aria's trigger state has so a surrounding `DialogTrigger` and the `Dialog` inside can share it.
+ *
+ * @param options The open props as the consumer passed them.
+ * @returns The open state, with a stable identity across renders.
+ */
+const useSlideoutState = ({ isOpen, defaultOpen, onOpenChange }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpenControlled = isOpen !== undefined;
+    const resolvedOpen = isOpenControlled ? isOpen : uncontrolledOpen;
+    // The latest callback and value live in refs so the returned API keeps its identity across renders.
+    const onOpenChangeRef = useRef(onOpenChange);
+    const isOpenRef = useRef(resolvedOpen);
+    useEffect(() => {
+        onOpenChangeRef.current = onOpenChange;
+        isOpenRef.current = resolvedOpen;
+    });
+    const setOpen = useCallback((next) => {
+        if (!isOpenControlled)
+            setUncontrolledOpen(next);
+        if (next !== isOpenRef.current)
+            onOpenChangeRef.current?.(next);
+    }, [isOpenControlled]);
+    return useMemo(() => ({
+        isOpen: resolvedOpen,
+        setOpen,
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+        toggle: () => setOpen(!isOpenRef.current),
+    }), [resolvedOpen, setOpen]);
+};
+
+export { useSlideoutState };
+//# sourceMappingURL=useSlideoutState.js.map

package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlideoutState.js","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useSlideoutState.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAmBA;;;;;;AAMG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAA2B,KAAuB;AACpH,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,WAAW,IAAI,KAAK,CAAC;AAC9E,IAAA,MAAM,gBAAgB,GAAG,MAAM,KAAK,SAAS;IAC7C,MAAM,YAAY,GAAG,gBAAgB,GAAG,MAAM,GAAG,gBAAgB;;AAGjE,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC;AAC5C,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;IACtC,SAAS,CAAC,MAAK;AACb,QAAA,eAAe,CAAC,OAAO,GAAG,YAAY;AACtC,QAAA,SAAS,CAAC,OAAO,GAAG,YAAY;AAClC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAAa,KAAI;AAChB,QAAA,IAAI,CAAC,gBAAgB;YAAE,mBAAmB,CAAC,IAAI,CAAC;AAChD,QAAA,IAAI,IAAI,KAAK,SAAS,CAAC,OAAO;AAAE,YAAA,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;AACjE,IAAA,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB;AAED,IAAA,OAAO,OAAO,CACZ,OAAO;AACL,QAAA,MAAM,EAAE,YAAY;QACpB,OAAO;AACP,QAAA,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC;AACzB,QAAA,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC;QAC3B,MAAM,EAAE,MAAM,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;AAC1C,KAAA,CAAC,EACF,CAAC,YAAY,EAAE,OAAO,CAAC,CACxB;AACH;;"}

package/dist/components/organisms/SlideoutMenu/index.cjs

@@ -1,61 +1,58 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
 var CloseButton = require('@flipdish/ui-library/components/atoms/CloseButton');
+var UtilityButton = require('@flipdish/ui-library/components/atoms/UtilityButton');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var utils = require('@react-aria/utils');
+var React = require('react');
 var reactAriaComponents = require('react-aria-components');
+var SlideoutShell = require('./components/SlideoutShell.cjs');
+var SlideoutMenu_context = require('./providers/SlideoutMenu.context.cjs');
+var slideoutMenu_utils = require('./utilities/slideoutMenu.utils.cjs');
 
-/** Full-screen layer that dims the page and aligns the slideout panel to the right edge. */
-const ModalOverlay = ({ children, ...props }) => {
-    return (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { ...props, className: (state) => cx.cx('fixed inset-0 z-50 flex min-h-dvh w-full items-center justify-end pl-6 outline-hidden md:pl-10', 
-        // Nothing visible changes on the overlay itself; the bare animation keeps it mounted while its children animate.
-        state.isEntering && 'duration-300 animate-in', state.isExiting && 'duration-500 animate-out', typeof props.className === 'function' ? props.className(state) : props.className), children: (state) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: cx.cx('absolute inset-0 bg-overlay/70 ease-linear', state.isEntering && 'duration-300 animate-in fade-in', state.isExiting && 'duration-500 animate-out fade-out') }), typeof children === 'function' ? children(state) : children] })) }));
-};
-ModalOverlay.displayName = 'ModalOverlay';
-/** Panel that slides in from the right edge, wrapping react-aria-components `Modal`. */
-const Modal = (props) => (jsxRuntime.jsx(reactAriaComponents.Modal, { ...props, className: (state) => cx.cx(
-    // relative, so the panel paints above the dimmer layer.
-    'relative inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition', 
-    // The distance is spelled out: the bare utilities resolve to 0.25rem here, which reads as a fade, not a slide.
-    state.isEntering && 'duration-300 animate-in slide-in-from-right-[100%]', state.isExiting && 'duration-500 animate-out slide-out-to-right-[100%]', typeof props.className === 'function' ? props.className(state) : props.className) }));
-Modal.displayName = 'Modal';
-/** Scrollable dialog surface inside the panel that sets the `data-testid` prefix for its header, content and footer. */
-const Dialog = ({ 'data-testid': dataTestId, ...props }) => {
-    const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'slideout-menu', rootName: 'slideout-menu' });
-    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(reactAriaComponents.Dialog, { role: "dialog", "aria-label": "Slideout menu", ...props, "data-testid": rootTestId, className: cx.cx('relative flex size-full flex-col items-start gap-6 overflow-y-auto bg-primary ring-1 ring-secondary_alt outline-hidden', props.className) }) }));
-};
-Dialog.displayName = 'Dialog';
-const Menu = ({ children, dialogClassName, 'data-testid': dataTestId, ...props }) => {
-    return (jsxRuntime.jsx(ModalOverlay, { ...props, children: jsxRuntime.jsx(Modal, { className: (state) => cx.cx(typeof props.className === 'function' ? props.className(state) : props.className), children: (state) => (jsxRuntime.jsx(Dialog, { className: dialogClassName, "data-testid": dataTestId, children: ({ close }) => {
-                    return typeof children === 'function' ? children({ ...state, close }) : children;
-                } })) }) }));
-};
+const Menu = (props) => jsxRuntime.jsx(SlideoutShell.SlideoutShell, { ...props });
 Menu.displayName = 'SlideoutMenu';
-const Content = ({ role = 'main', 'data-testid': dataTestId, ...props }) => {
+const Content = ({ 'data-testid': dataTestId, ...props }) => {
     const prefix = testIdUtils.useTestIdPrefix();
     const contentTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'content') : undefined);
-    return (jsxRuntime.jsx("div", { role: role, ...props, "data-testid": contentTestId, className: cx.cx('flex size-full flex-col gap-6 overflow-y-auto overscroll-auto px-4 md:px-6', props.className) }));
+    // No landmark role: the panel floats over a page that has its own `main`, and a dialog's content is not a second one.
+    return (jsxRuntime.jsx("div", { ...props, "data-testid": contentTestId, className: cx.cx('flex size-full flex-col gap-6 overflow-y-auto overscroll-auto px-4 md:px-6', props.className) }));
 };
 Content.displayName = 'SlideoutContent';
-const Header = ({ className, children, onClose, 'data-testid': dataTestId, ...props }) => {
+const Header = ({ className, children, onClose, closeLabel, href, linkLabel = 'Open full page', onLinkPress, 'data-testid': dataTestId, ref, ...props }) => {
+    const panel = React.useContext(SlideoutMenu_context.SlideoutMenuContext);
     const prefix = testIdUtils.useTestIdPrefix();
     const headerTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'header') : undefined);
-    return (jsxRuntime.jsxs("header", { ...props, "data-testid": headerTestId, className: cx.cx('relative z-1 w-full px-4 pt-6 md:px-6', className), children: [children, jsxRuntime.jsx(CloseButton.CloseButton, { size: "sm", className: "absolute top-3 right-3 shrink-0", onClick: onClose, "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined })] }));
+    const titleRef = React.useRef(null);
+    const headerRef = utils.useObjectRef(ref);
+    // The shell decides what to speak: a swap between loading and loaded content remounts this header, so it cannot remember the last title itself.
+    // The heading alone when there is one, since the whole header read as one run would join avatar initials, name and email.
+    React.useLayoutEffect(() => {
+        const title = titleRef.current?.querySelector('h1, h2, h3, h4, h5, h6') ?? titleRef.current;
+        panel?.announceTitle(title?.textContent?.trim() ?? '');
+    });
+    // A `div`, not `header`: inside a dialog that element maps to `banner` and would duplicate the page's own.
+    return (jsxRuntime.jsxs("div", { ...props, ref: headerRef, "data-testid": headerTestId, 
+        // Right padding clears the close button, and the link beside it, so a long title wraps instead of running under them.
+        className: cx.cx('relative z-1 w-full pt-6 pl-4 md:pl-6', href ? 'pr-24' : 'pr-12', className), children: [jsxRuntime.jsx("div", { ref: titleRef, className: "contents", children: children }), href && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { href: href, onPress: onLinkPress, icon: uiIcons.ArrowUpRight, tooltip: linkLabel, color: "tertiary", size: "sm", className: "absolute top-3 right-12 size-9 shrink-0", "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'link') : undefined })), jsxRuntime.jsx(CloseButton.CloseButton, { size: "sm", label: closeLabel ?? (panel?.label ? `Close ${panel.label}` : undefined), className: "absolute top-3 right-3 shrink-0", onClick: onClose ?? panel?.close, "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined })] }));
 };
 Header.displayName = 'SlideoutHeader';
 const Footer = ({ 'data-testid': dataTestId, ...props }) => {
     const prefix = testIdUtils.useTestIdPrefix();
     const footerTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'footer') : undefined);
-    return (jsxRuntime.jsx("footer", { ...props, "data-testid": footerTestId, className: cx.cx('w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6', props.className) }));
+    // A `div`, not `footer`: inside a dialog that element maps to `contentinfo` and would duplicate the page's own.
+    return (jsxRuntime.jsx("div", { ...props, "data-testid": footerTestId, className: cx.cx('w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6', props.className) }));
 };
 Footer.displayName = 'SlideoutFooter';
 /**
- * Drawer that slides in from the right to host navigation, settings or a focused form without
- * leaving the page. Traps focus and locks scroll; compose `Header`, `Content` and `Footer`
- * inside it.
+ * Panel that slides in from the right edge and floats over the page without dimming or blocking it,
+ * for the detail of the record the user just selected. It covers the page area only, never the header, the
+ * sidebar or a docked side panel; compose `Header`, `Content` and `Footer` inside it.
  *
- * @summary right-edge drawer for navigation, settings or a focused form
+ * @summary non-modal right-edge panel for the selected record's detail
  */
 const SlideoutMenu = Menu;
 SlideoutMenu.displayName = 'SlideoutMenu';
@@ -64,8 +61,8 @@ SlideoutMenu.Content = Content;
 SlideoutMenu.Header = Header;
 SlideoutMenu.Footer = Footer;
 
-exports.Dialog = Dialog;
-exports.Modal = Modal;
-exports.ModalOverlay = ModalOverlay;
+exports.APP_HEADER_HEIGHT_VAR = slideoutMenu_utils.APP_HEADER_HEIGHT_VAR;
+exports.APP_SIDEBAR_WIDTH_VAR = slideoutMenu_utils.APP_SIDEBAR_WIDTH_VAR;
+exports.APP_SIDE_PANEL_WIDTH_VAR = slideoutMenu_utils.APP_SIDE_PANEL_WIDTH_VAR;
 exports.SlideoutMenu = SlideoutMenu;
 //# sourceMappingURL=index.cjs.map

package/dist/components/organisms/SlideoutMenu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaModalOverlay","cx","_jsxs","_Fragment","AriaModal","useResolvedTestId","TestIdProvider","AriaDialog","useTestIdPrefix","joinTestId","CloseButton","AriaDialogTrigger"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","SlideoutShell","useTestIdPrefix","joinTestId","cx","useContext","SlideoutMenuContext","useRef","useObjectRef","useLayoutEffect","_jsxs","ButtonUtility","ArrowUpRight","CloseButton","AriaDialogTrigger"],"mappings":"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"}

package/dist/components/organisms/SlideoutMenu/index.d.ts

@@ -1,71 +1,82 @@
-import type { ComponentPropsWithRef, ReactNode, RefAttributes } from 'react';
-import type { DialogProps as AriaDialogProps, ModalOverlayProps as AriaModalOverlayProps, ModalRenderProps as AriaModalRenderProps } from 'react-aria-components';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { DialogTrigger as AriaDialogTrigger } from 'react-aria-components';
-interface ModalOverlayProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {
-}
-/** Full-screen layer that dims the page and aligns the slideout panel to the right edge. */
-export declare const ModalOverlay: {
-    ({ children, ...props }: ModalOverlayProps): import("react").JSX.Element;
-    displayName: string;
-};
-interface ModalProps extends AriaModalOverlayProps, RefAttributes<HTMLDivElement> {
-}
-/** Panel that slides in from the right edge, wrapping react-aria-components `Modal`. */
-export declare const Modal: {
-    (props: ModalProps): import("react").JSX.Element;
-    displayName: string;
-};
-interface DialogProps extends AriaDialogProps, RefAttributes<HTMLElement> {
-    /** Overrides the root `data-testid` (defaults to `fd-slideout-menu`). Descendants derive their ids from this prefix. */
-    'data-testid'?: string;
-}
-/** Scrollable dialog surface inside the panel that sets the `data-testid` prefix for its header, content and footer. */
-export declare const Dialog: {
-    ({ "data-testid": dataTestId, ...props }: DialogProps): import("react").JSX.Element;
-    displayName: string;
-};
-export interface SlideoutMenuProps extends Omit<AriaModalOverlayProps, 'children'>, RefAttributes<HTMLDivElement> {
-    /** Menu content, or a function that receives the modal state and a `close` callback. */
-    children: ReactNode | ((children: AriaModalRenderProps & {
-        close: () => void;
-    }) => ReactNode);
-    /** Extra classes merged onto the scrollable dialog surface inside the sliding panel. */
+import type { SlideoutRenderProps } from './components/SlideoutShell';
+import type { SlideoutBounds } from './utilities/slideoutMenu.utils';
+export type { SlideoutRenderProps } from './components/SlideoutShell';
+export type { SlideoutBounds } from './utilities/slideoutMenu.utils';
+export { APP_HEADER_HEIGHT_VAR, APP_SIDE_PANEL_WIDTH_VAR, APP_SIDEBAR_WIDTH_VAR } from './utilities/slideoutMenu.utils';
+export interface SlideoutMenuProps {
+    /** Controlled open state. Pair with `onOpenChange`; omit both to let `SlideoutMenu.Trigger` own it. */
+    isOpen?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /**
+     * Called with the new open state when the panel asks to open or close. Applies with `isOpen` or `defaultOpen`; inside a
+     * `SlideoutMenu.Trigger` the trigger owns the state, so pass `onOpenChange` to the trigger instead.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Keeps the panel open on Escape, pressed inside the panel or anywhere on the page. */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * The box the panel may cover, as distances from the viewport edges; a number is pixels, a string any CSS length. Defaults to
+     * the `AppShell` page area, else the host's `--app-header-height`, `--app-sidebar-width` and `--app-side-panel-width`, read
+     * from `:root`, `body` or any ancestor of the element overlays portal into, each `0px` when unset. A key given here falls
+     * back to its variable when the others are omitted.
+     */
+    bounds?: SlideoutBounds;
+    /** Names the dialog for assistive technology. Defaults to "Slideout menu"; prefer the name of what the panel shows. */
+    'aria-label'?: string;
+    /** Names the dialog by an element inside it, such as the heading in `Header`, instead of `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Menu content, or a function that receives `close`. */
+    children: ReactNode | ((state: SlideoutRenderProps) => ReactNode);
+    /** Extra classes merged onto the sliding panel. */
+    className?: string;
+    /** Extra classes merged onto the scrollable dialog surface inside the panel. */
     dialogClassName?: string;
     /** Overrides the root `data-testid` (defaults to `fd-slideout-menu`). Descendants derive their ids from this prefix. */
     'data-testid'?: string;
 }
 declare const Menu: {
-    ({ children, dialogClassName, "data-testid": dataTestId, ...props }: SlideoutMenuProps): import("react").JSX.Element;
+    (props: SlideoutMenuProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const Content: {
-    ({ role, "data-testid": dataTestId, ...props }: ComponentPropsWithRef<"div"> & {
+    ({ "data-testid": dataTestId, ...props }: ComponentPropsWithRef<"div"> & {
         "data-testid"?: string;
     }): import("react").JSX.Element;
     displayName: string;
 };
-export interface SlideoutHeaderProps extends ComponentPropsWithRef<'header'> {
-    /** Called when the close button in the header's top-right corner is pressed. */
+export interface SlideoutHeaderProps extends ComponentPropsWithRef<'div'> {
+    /** Runs instead of closing the panel when the close button is pressed. */
     onClose?: () => void;
+    /** Accessible name of the close button. Defaults to "Close {aria-label}", or "Close" for a panel named by `aria-labelledby`. */
+    closeLabel?: string;
+    /** The record's own page. Given, a link button beside the close button opens it through the app's router; omitted, nothing renders. */
+    href?: string;
+    /** Accessible name of the link button. Defaults to "Open full page". */
+    linkLabel?: string;
+    /** Runs when the link button is pressed, alongside the navigation, e.g. to record it or to follow the `href` where links are intercepted. */
+    onLinkPress?: () => void;
     /** Overrides the header's `data-testid` (defaults to `<root>--header`). */
     'data-testid'?: string;
 }
 declare const Header: {
-    ({ className, children, onClose, "data-testid": dataTestId, ...props }: SlideoutHeaderProps): import("react").JSX.Element;
+    ({ className, children, onClose, closeLabel, href, linkLabel, onLinkPress, "data-testid": dataTestId, ref, ...props }: SlideoutHeaderProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const Footer: {
-    ({ "data-testid": dataTestId, ...props }: ComponentPropsWithRef<"footer"> & {
+    ({ "data-testid": dataTestId, ...props }: ComponentPropsWithRef<"div"> & {
         "data-testid"?: string;
     }): import("react").JSX.Element;
     displayName: string;
 };
 /**
- * Drawer that slides in from the right to host navigation, settings or a focused form without
- * leaving the page. Traps focus and locks scroll; compose `Header`, `Content` and `Footer`
- * inside it.
+ * Panel that slides in from the right edge and floats over the page without dimming or blocking it,
+ * for the detail of the record the user just selected. It covers the page area only, never the header, the
+ * sidebar or a docked side panel; compose `Header`, `Content` and `Footer` inside it.
  *
- * @summary right-edge drawer for navigation, settings or a focused form
+ * @summary non-modal right-edge panel for the selected record's detail
  */
 declare const SlideoutMenu: typeof Menu & {
     Trigger: typeof AriaDialogTrigger;

package/dist/components/organisms/SlideoutMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,IAAI,qBAAqB,EAC1C,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,aAAa,IAAI,iBAAiB,EAGnC,MAAM,uBAAuB,CAAC;AAE/B,UAAU,iBAAkB,SAAQ,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC;CAAG;AAE3F,4FAA4F;AAC5F,eAAO,MAAM,YAAY;6BAA4B,iBAAiB;;CA8BrE,CAAC;AAGF,UAAU,UAAW,SAAQ,qBAAqB,EAAE,aAAa,CAAC,cAAc,CAAC;CAAG;AAEpF,wFAAwF;AACxF,eAAO,MAAM,KAAK;YAAW,UAAU;;CActC,CAAC;AAGF,UAAU,WAAY,SAAQ,eAAe,EAAE,aAAa,CAAC,WAAW,CAAC;IACvE,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wHAAwH;AACxH,eAAO,MAAM,MAAM;8CAA6C,WAAW;;CAiB1E,CAAC;AAGF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC;IAC/G,wFAAwF;IACxF,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,oBAAoB,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC9F,wFAAwF;IACxF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,IAAI;yEAAwE,iBAAiB;;CAclG,CAAC;AAGF,QAAA,MAAM,OAAO;oDAA4D,qBAAqB,CAAC,KAAK,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAYjI,CAAC;AAGF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC1E,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,MAAM;4EAA2E,mBAAmB;;CAezG,CAAC;AAGF,QAAA,MAAM,MAAM;8CAA6C,qBAAqB,CAAC,QAAQ,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAWpH,CAAC;AAGF;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,EAAW,OAAO,IAAI,GAAG;IACzC,OAAO,EAAE,OAAO,iBAAiB,CAAC;IAClC,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAQF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAGtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAExH,MAAM,WAAW,iBAAiB;IAChC,uGAAuG;IACvG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wFAAwF;IACxF,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,uHAAuH;IACvH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0GAA0G;IAC1G,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC,CAAC;IAClE,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,IAAI;YAAW,iBAAiB;;CAAiC,CAAC;AAGxE,QAAA,MAAM,OAAO;8CAA6C,qBAAqB,CAAC,KAAK,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAYlH,CAAC;AAGF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACvE,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gIAAgI;IAChI,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uIAAuI;IACvI,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6IAA6I;IAC7I,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,MAAM;2HAWT,mBAAmB;;CA+CrB,CAAC;AAGF,QAAA,MAAM,MAAM;8CAA6C,qBAAqB,CAAC,KAAK,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE;;CAYjH,CAAC;AAGF;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,EAAW,OAAO,IAAI,GAAG;IACzC,OAAO,EAAE,OAAO,iBAAiB,CAAC;IAClC,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAQF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/organisms/SlideoutMenu/index.js

@@ -1,59 +1,56 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ArrowUpRight } from '@flipdish/ui-icons';
 import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
+import { ButtonUtility } from '@flipdish/ui-library/components/atoms/UtilityButton';
 import { cx } from '@flipdish/ui-library/utilities/cx';
-import { useResolvedTestId, TestIdProvider, useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
-import { Dialog as Dialog$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, DialogTrigger } from 'react-aria-components';
+import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { useObjectRef } from '@react-aria/utils';
+import { useContext, useRef, useLayoutEffect } from 'react';
+import { DialogTrigger } from 'react-aria-components';
+import { SlideoutShell } from './components/SlideoutShell.js';
+import { SlideoutMenuContext } from './providers/SlideoutMenu.context.js';
+export { APP_HEADER_HEIGHT_VAR, APP_SIDEBAR_WIDTH_VAR, APP_SIDE_PANEL_WIDTH_VAR } from './utilities/slideoutMenu.utils.js';
 
-/** Full-screen layer that dims the page and aligns the slideout panel to the right edge. */
-const ModalOverlay = ({ children, ...props }) => {
-    return (jsx(ModalOverlay$1, { ...props, className: (state) => cx('fixed inset-0 z-50 flex min-h-dvh w-full items-center justify-end pl-6 outline-hidden md:pl-10', 
-        // Nothing visible changes on the overlay itself; the bare animation keeps it mounted while its children animate.
-        state.isEntering && 'duration-300 animate-in', state.isExiting && 'duration-500 animate-out', typeof props.className === 'function' ? props.className(state) : props.className), children: (state) => (jsxs(Fragment, { children: [jsx("div", { "aria-hidden": "true", className: cx('absolute inset-0 bg-overlay/70 ease-linear', state.isEntering && 'duration-300 animate-in fade-in', state.isExiting && 'duration-500 animate-out fade-out') }), typeof children === 'function' ? children(state) : children] })) }));
-};
-ModalOverlay.displayName = 'ModalOverlay';
-/** Panel that slides in from the right edge, wrapping react-aria-components `Modal`. */
-const Modal = (props) => (jsx(Modal$1, { ...props, className: (state) => cx(
-    // relative, so the panel paints above the dimmer layer.
-    'relative inset-y-0 right-0 h-full w-full max-w-100 shadow-xl transition', 
-    // The distance is spelled out: the bare utilities resolve to 0.25rem here, which reads as a fade, not a slide.
-    state.isEntering && 'duration-300 animate-in slide-in-from-right-[100%]', state.isExiting && 'duration-500 animate-out slide-out-to-right-[100%]', typeof props.className === 'function' ? props.className(state) : props.className) }));
-Modal.displayName = 'Modal';
-/** Scrollable dialog surface inside the panel that sets the `data-testid` prefix for its header, content and footer. */
-const Dialog = ({ 'data-testid': dataTestId, ...props }) => {
-    const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'slideout-menu', rootName: 'slideout-menu' });
-    return (jsx(TestIdProvider, { value: rootTestId, children: jsx(Dialog$1, { role: "dialog", "aria-label": "Slideout menu", ...props, "data-testid": rootTestId, className: cx('relative flex size-full flex-col items-start gap-6 overflow-y-auto bg-primary ring-1 ring-secondary_alt outline-hidden', props.className) }) }));
-};
-Dialog.displayName = 'Dialog';
-const Menu = ({ children, dialogClassName, 'data-testid': dataTestId, ...props }) => {
-    return (jsx(ModalOverlay, { ...props, children: jsx(Modal, { className: (state) => cx(typeof props.className === 'function' ? props.className(state) : props.className), children: (state) => (jsx(Dialog, { className: dialogClassName, "data-testid": dataTestId, children: ({ close }) => {
-                    return typeof children === 'function' ? children({ ...state, close }) : children;
-                } })) }) }));
-};
+const Menu = (props) => jsx(SlideoutShell, { ...props });
 Menu.displayName = 'SlideoutMenu';
-const Content = ({ role = 'main', 'data-testid': dataTestId, ...props }) => {
+const Content = ({ 'data-testid': dataTestId, ...props }) => {
     const prefix = useTestIdPrefix();
     const contentTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'content') : undefined);
-    return (jsx("div", { role: role, ...props, "data-testid": contentTestId, className: cx('flex size-full flex-col gap-6 overflow-y-auto overscroll-auto px-4 md:px-6', props.className) }));
+    // No landmark role: the panel floats over a page that has its own `main`, and a dialog's content is not a second one.
+    return (jsx("div", { ...props, "data-testid": contentTestId, className: cx('flex size-full flex-col gap-6 overflow-y-auto overscroll-auto px-4 md:px-6', props.className) }));
 };
 Content.displayName = 'SlideoutContent';
-const Header = ({ className, children, onClose, 'data-testid': dataTestId, ...props }) => {
+const Header = ({ className, children, onClose, closeLabel, href, linkLabel = 'Open full page', onLinkPress, 'data-testid': dataTestId, ref, ...props }) => {
+    const panel = useContext(SlideoutMenuContext);
     const prefix = useTestIdPrefix();
     const headerTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'header') : undefined);
-    return (jsxs("header", { ...props, "data-testid": headerTestId, className: cx('relative z-1 w-full px-4 pt-6 md:px-6', className), children: [children, jsx(CloseButton, { size: "sm", className: "absolute top-3 right-3 shrink-0", onClick: onClose, "data-testid": prefix ? joinTestId(prefix, 'close') : undefined })] }));
+    const titleRef = useRef(null);
+    const headerRef = useObjectRef(ref);
+    // The shell decides what to speak: a swap between loading and loaded content remounts this header, so it cannot remember the last title itself.
+    // The heading alone when there is one, since the whole header read as one run would join avatar initials, name and email.
+    useLayoutEffect(() => {
+        const title = titleRef.current?.querySelector('h1, h2, h3, h4, h5, h6') ?? titleRef.current;
+        panel?.announceTitle(title?.textContent?.trim() ?? '');
+    });
+    // A `div`, not `header`: inside a dialog that element maps to `banner` and would duplicate the page's own.
+    return (jsxs("div", { ...props, ref: headerRef, "data-testid": headerTestId, 
+        // Right padding clears the close button, and the link beside it, so a long title wraps instead of running under them.
+        className: cx('relative z-1 w-full pt-6 pl-4 md:pl-6', href ? 'pr-24' : 'pr-12', className), children: [jsx("div", { ref: titleRef, className: "contents", children: children }), href && (jsx(ButtonUtility, { href: href, onPress: onLinkPress, icon: ArrowUpRight, tooltip: linkLabel, color: "tertiary", size: "sm", className: "absolute top-3 right-12 size-9 shrink-0", "data-testid": prefix ? joinTestId(prefix, 'link') : undefined })), jsx(CloseButton, { size: "sm", label: closeLabel ?? (panel?.label ? `Close ${panel.label}` : undefined), className: "absolute top-3 right-3 shrink-0", onClick: onClose ?? panel?.close, "data-testid": prefix ? joinTestId(prefix, 'close') : undefined })] }));
 };
 Header.displayName = 'SlideoutHeader';
 const Footer = ({ 'data-testid': dataTestId, ...props }) => {
     const prefix = useTestIdPrefix();
     const footerTestId = dataTestId ?? (prefix ? joinTestId(prefix, 'footer') : undefined);
-    return (jsx("footer", { ...props, "data-testid": footerTestId, className: cx('w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6', props.className) }));
+    // A `div`, not `footer`: inside a dialog that element maps to `contentinfo` and would duplicate the page's own.
+    return (jsx("div", { ...props, "data-testid": footerTestId, className: cx('w-full p-4 shadow-[inset_0px_1px_0px_0px] shadow-border-secondary md:px-6', props.className) }));
 };
 Footer.displayName = 'SlideoutFooter';
 /**
- * Drawer that slides in from the right to host navigation, settings or a focused form without
- * leaving the page. Traps focus and locks scroll; compose `Header`, `Content` and `Footer`
- * inside it.
+ * Panel that slides in from the right edge and floats over the page without dimming or blocking it,
+ * for the detail of the record the user just selected. It covers the page area only, never the header, the
+ * sidebar or a docked side panel; compose `Header`, `Content` and `Footer` inside it.
  *
- * @summary right-edge drawer for navigation, settings or a focused form
+ * @summary non-modal right-edge panel for the selected record's detail
  */
 const SlideoutMenu = Menu;
 SlideoutMenu.displayName = 'SlideoutMenu';
@@ -62,5 +59,5 @@ SlideoutMenu.Content = Content;
 SlideoutMenu.Header = Header;
 SlideoutMenu.Footer = Footer;
 
-export { Dialog, Modal, ModalOverlay, SlideoutMenu };
+export { SlideoutMenu };
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/SlideoutMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaModalOverlay","_jsxs","_Fragment","AriaModal","AriaDialog","AriaDialogTrigger"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaDialogTrigger"],"mappings":"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"}

package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Provided by `AppShell` from its measured page area, read by `SlideoutMenu` as the box it may cover.
+ * Context rather than a CSS variable because the shell sits below the themed root the overlay portals
+ * into, so nothing it sets in CSS could reach the panel; context crosses the portal.
+ */
+const OverlayBoundsContext = React.createContext(undefined);
+
+exports.OverlayBoundsContext = OverlayBoundsContext;
+//# sourceMappingURL=OverlayBounds.context.cjs.map

package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayBounds.context.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/OverlayBounds.context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAYA;;;;AAIG;MACU,oBAAoB,GAAGA,mBAAa,CAA4B,SAAS;;"}

package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.d.ts

@@ -0,0 +1,14 @@
+/** The page area's position and size in the viewport, in pixels. */
+export interface OverlayBounds {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * Provided by `AppShell` from its measured page area, read by `SlideoutMenu` as the box it may cover.
+ * Context rather than a CSS variable because the shell sits below the themed root the overlay portals
+ * into, so nothing it sets in CSS could reach the panel; context crosses the portal.
+ */
+export declare const OverlayBoundsContext: import("react").Context<OverlayBounds | undefined>;
+//# sourceMappingURL=OverlayBounds.context.d.ts.map

package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayBounds.context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/OverlayBounds.context.ts"],"names":[],"mappings":"AAIA,oEAAoE;AACpE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oDAAsD,CAAC"}

package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+/**
+ * Provided by `AppShell` from its measured page area, read by `SlideoutMenu` as the box it may cover.
+ * Context rather than a CSS variable because the shell sits below the themed root the overlay portals
+ * into, so nothing it sets in CSS could reach the panel; context crosses the portal.
+ */
+const OverlayBoundsContext = createContext(undefined);
+
+export { OverlayBoundsContext };
+//# sourceMappingURL=OverlayBounds.context.js.map

package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayBounds.context.js","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/OverlayBounds.context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAYA;;;;AAIG;MACU,oBAAoB,GAAG,aAAa,CAA4B,SAAS;;"}

package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+/** Provided by the shell, read by `Header`, so the sections never import `../index`. */
+const SlideoutMenuContext = React.createContext(undefined);
+
+exports.SlideoutMenuContext = SlideoutMenuContext;
+//# sourceMappingURL=SlideoutMenu.context.cjs.map

package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoutMenu.context.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAeA;MACa,mBAAmB,GAAGA,mBAAa,CAAuC,SAAS;;"}

package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.d.ts

@@ -0,0 +1,13 @@
+export interface SlideoutMenuContextValue {
+    close: () => void;
+    /** The panel's `aria-label`, so the close button can say which panel it closes; absent when the panel is named by `aria-labelledby`. */
+    label?: string;
+    /**
+     * Reports the `Header` title on every render. The shell speaks a change politely when the user's focus is outside the panel,
+     * and treats the first title it hears as the open, which the dialog announces itself.
+     */
+    announceTitle: (title: string) => void;
+}
+/** Provided by the shell, read by `Header`, so the sections never import `../index`. */
+export declare const SlideoutMenuContext: import("react").Context<SlideoutMenuContextValue | undefined>;
+//# sourceMappingURL=SlideoutMenu.context.d.ts.map

package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoutMenu.context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,wIAAwI;IACxI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,wFAAwF;AACxF,eAAO,MAAM,mBAAmB,+DAAiE,CAAC"}

package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/** Provided by the shell, read by `Header`, so the sections never import `../index`. */
+const SlideoutMenuContext = createContext(undefined);
+
+export { SlideoutMenuContext };
+//# sourceMappingURL=SlideoutMenu.context.js.map

package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoutMenu.context.js","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAeA;MACa,mBAAmB,GAAG,aAAa,CAAuC,SAAS;;"}