@flipdish/ui-library 0.43.1 → 0.44.0

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

@@ -1,26 +1,35 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { useThemeRoot } from '@flipdish/ui-library/providers/ThemeProvider';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
 import { AnimatePresence, useIsPresent, useReducedMotion, motion } from 'motion/react';
-import { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import { useContext, useRef, useMemo, useEffect, useState, useCallback } from 'react';
 import { Overlay, useOverlay, FocusScope } from 'react-aria';
 import { OverlayTriggerStateContext, Dialog } from 'react-aria-components';
+import { usePanelFocus } from '../../../../hooks/__internal__/usePanelFocus/usePanelFocus.js';
 import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
 import { isTypingInField } from '../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
-import { usePanelFocus } from '../../SidePanel/hooks/usePanelFocus.js';
 import { useSlideoutState } from '../hooks/useSlideoutState.js';
 import { OverlayBoundsContext } from '../providers/OverlayBounds.context.js';
+import { PageAreaContext } from '../providers/PageArea.context.js';
 import { SlideoutMenuContext } from '../providers/SlideoutMenu.context.js';
 import { resolveSlideoutBounds } from '../utilities/slideoutMenu.utils.js';
 
 const SLIDE = { type: 'tween', duration: 0.3, ease: 'easeOut' };
 const SLIDE_OUT = { type: 'tween', duration: 0.3, ease: 'easeIn' };
 /** The panel itself. A component of its own so it can tell, while animating out, that it is leaving. */
-const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId, isKeyboardDismissDisabled, children, className, dialogClassName, }) => {
+const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId, isDesktop, isKeyboardDismissDisabled, pageAreaRef, children, className, dialogClassName, }) => {
     const panelRef = useRef(null);
     const dialogRef = useRef(null);
     const isPresent = useIsPresent();
     const shouldReduceMotion = useReducedMotion();
+    const shellPageAreaRef = useContext(PageAreaContext);
+    // Outside `AppShell` the panel covers the app itself: in a micro-frontend the themed root is the page area under the host's
+    // chrome, and with `scopeId` overlays portal outside it. The hook leaves a root the panel sits inside alone, so an app that
+    // portals into its root passes `pageAreaRef`.
+    const themeRoot = useThemeRoot();
+    const themeRootRef = useMemo(() => ({ current: themeRoot }), [themeRoot]);
     // Escape inside the panel; nothing outside is listened to for clicks, so the page stays usable and a click there never closes it.
     const { overlayProps } = useOverlay({ isOpen: isPresent, onClose: openState.close, isDismissable: false, shouldCloseOnBlur: false, isKeyboardDismissDisabled }, panelRef);
     // Escape anywhere on the page closes it too: the panel is the transient thing the user opened. Not when another overlay
@@ -43,9 +52,17 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
         document.addEventListener('keydown', onKeyDown);
         return () => document.removeEventListener('keydown', onKeyDown);
     }, [isPresent, isKeyboardDismissDisabled]);
-    // react-aria's `useDialog` already focuses the dialog on mount; this hook is here for the hand-back on close and the inert exit,
-    // and `shouldFocusOnMount` is what makes it record the opener. The panel never covers the page, so `isDesktop` stays true.
-    const { onFocusCapture, setOpener } = usePanelFocus({ panelRef: dialogRef, isPresent, isDesktop: true, shouldFocusOnMount: true });
+    // react-aria's `useDialog` already focuses the dialog on mount; this hook is here for the hand-back on close, the inert exit,
+    // and below `lg` the page area under the panel, which it takes out of reach: keyboard and screen reader skip what nobody can
+    // see. The host's own page area wins over the shell's, and the shell's over the app root. `shouldFocusOnMount` is what makes
+    // the hook record the opener.
+    const { onFocusCapture, setOpener } = usePanelFocus({
+        panelRef: dialogRef,
+        isPresent,
+        isDesktop,
+        coveredRef: pageAreaRef ?? shellPageAreaRef ?? themeRootRef,
+        shouldFocusOnMount: true,
+    });
     // A row opened by mouse selects on pointerdown, so the panel focuses itself before the browser's own mousedown focus lands
     // back on the row. Settle one frame later: if nothing inside holds focus by then, the dialog takes it. A new gesture before
     // that frame means the user has moved on, such as to the next row, and the frame is dropped so focus is not pulled back.
@@ -98,10 +115,10 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
 };
 /**
  * Non-modal shell: portals the panel to the app's overlay root, keeps it mounted through its exit slide,
- * and shares the open state with a surrounding `SlideoutMenu.Trigger`. Nothing is dimmed, locked or
- * made inert; the page behind stays usable.
+ * and shares the open state with a surrounding `SlideoutMenu.Trigger`. Nothing is dimmed or locked; from
+ * `lg` the page beside the panel stays usable, and below `lg` only the page area it covers goes inert.
  */
-const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDisabled, bounds, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, children, className, dialogClassName, 'data-testid': dataTestId, }) => {
+const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDisabled, bounds, pageAreaRef, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, children, className, dialogClassName, 'data-testid': dataTestId, }) => {
     const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'slideout-menu', rootName: 'slideout-menu' });
     const triggerState = useContext(OverlayTriggerStateContext);
     const local = useSlideoutState({ isOpen, defaultOpen, onOpenChange });
@@ -109,9 +126,10 @@ const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDis
     const openState = isOpen !== undefined || defaultOpen !== undefined || !triggerState ? local : triggerState;
     const measured = useContext(OverlayBoundsContext);
     const boundsStyle = resolveSlideoutBounds(bounds, measured);
+    const isDesktop = useBreakpoints('lg');
     // A heading named through `aria-labelledby` replaces the default name; an explicit `aria-label` still wins.
     const label = ariaLabel ?? (labelledBy ? undefined : 'Slideout menu');
-    return (jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { children: openState.isOpen && (jsx(Overlay, { disableFocusManagement: true, children: jsx(OverlayTriggerStateContext.Provider, { value: openState, children: jsx(SlideoutPanel, { openState: openState, label: label, labelledBy: labelledBy, boundsStyle: boundsStyle, rootTestId: rootTestId, isKeyboardDismissDisabled: isKeyboardDismissDisabled, className: className, dialogClassName: dialogClassName, children: children }) }) }, "slideout-menu")) }) }));
+    return (jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { children: openState.isOpen && (jsx(Overlay, { disableFocusManagement: true, children: jsx(OverlayTriggerStateContext.Provider, { value: openState, children: jsx(SlideoutPanel, { openState: openState, label: label, labelledBy: labelledBy, boundsStyle: boundsStyle, rootTestId: rootTestId, isDesktop: isDesktop, isKeyboardDismissDisabled: isKeyboardDismissDisabled, pageAreaRef: pageAreaRef, className: className, dialogClassName: dialogClassName, children: children }) }) }, "slideout-menu")) }) }));
 };
 SlideoutShell.displayName = 'SlideoutShell';
 

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

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

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

@@ -50,7 +50,8 @@ Footer.displayName = 'SlideoutFooter';
 /**
  * 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.
+ * sidebar or a docked side panel; below `lg` it fills that area and the page under it goes inert until it
+ * closes. Compose `Header`, `Content` and `Footer` inside it.
  *
  * @summary non-modal right-edge panel for the selected record's detail
  */

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","SlideoutShell","useTestIdPrefix","joinTestId","cx","useContext","SlideoutMenuContext","useRef","useObjectRef","useLayoutEffect","_jsxs","ButtonUtility","ArrowUpRight","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,4 +1,4 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode, RefObject } from 'react';
 import { DialogTrigger as AriaDialogTrigger } from 'react-aria-components';
 import type { SlideoutRenderProps } from './components/SlideoutShell';
 import type { SlideoutBounds } from './utilities/slideoutMenu.utils';
@@ -24,6 +24,15 @@ export interface SlideoutMenuProps {
      * back to its variable when the others are omitted.
      */
     bounds?: SlideoutBounds;
+    /**
+     * The page area the panel covers below `lg`: the element `bounds` describes. The panel makes it `inert` while it covers it,
+     * so keyboard and screen reader skip what nobody can see, and restores it as it closes. Without it, inside `AppShell` the
+     * shell's page area is covered, and elsewhere the app's root from `UIProvider` when overlays portal outside that root, as
+     * they do with `scopeId`; in a micro-frontend that root is the page area under the host's chrome. Pass it when the root
+     * holds the app's own header, or when overlays portal into the root. The element must stay mounted while the panel is
+     * open, and nothing else may write `inert` on it.
+     */
+    pageAreaRef?: RefObject<HTMLElement | null>;
     /** 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`. */
@@ -74,7 +83,8 @@ declare const Footer: {
 /**
  * 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.
+ * sidebar or a docked side panel; below `lg` it fills that area and the page under it goes inert until it
+ * closes. Compose `Header`, `Content` and `Footer` inside it.
  *
  * @summary non-modal right-edge panel for the selected record's detail
  */

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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SlideoutMenu/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,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;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,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;;;;;;;GAOG;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

@@ -48,7 +48,8 @@ Footer.displayName = 'SlideoutFooter';
 /**
  * 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.
+ * sidebar or a docked side panel; below `lg` it fills that area and the page under it goes inert until it
+ * closes. Compose `Header`, `Content` and `Footer` inside it.
  *
  * @summary non-modal right-edge panel for the selected record's detail
  */

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","_jsxs","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/PageArea.context.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Provided by `AppShell`: the element under the box a `SlideoutMenu` covers below `lg`, the page area
+ * together with a side panel docked beside it. The panel makes it inert while it covers it, so keyboard
+ * and assistive technology skip what nobody can see. Context rather than a prop so a panel anywhere in
+ * the shell finds it; the `pageAreaRef` prop serves a host without the shell.
+ */
+const PageAreaContext = React.createContext(undefined);
+
+exports.PageAreaContext = PageAreaContext;
+//# sourceMappingURL=PageArea.context.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageArea.context.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/PageArea.context.ts"],"sourcesContent":[null],"names":["createContext"],"mappings":";;;;AAKA;;;;;AAKG;MACU,eAAe,GAAGA,mBAAa,CAA4C,SAAS;;"}

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

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+/**
+ * Provided by `AppShell`: the element under the box a `SlideoutMenu` covers below `lg`, the page area
+ * together with a side panel docked beside it. The panel makes it inert while it covers it, so keyboard
+ * and assistive technology skip what nobody can see. Context rather than a prop so a panel anywhere in
+ * the shell finds it; the `pageAreaRef` prop serves a host without the shell.
+ */
+export declare const PageAreaContext: import("react").Context<RefObject<HTMLElement | null> | undefined>;
+//# sourceMappingURL=PageArea.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageArea.context.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/PageArea.context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,eAAO,MAAM,eAAe,oEAAsE,CAAC"}

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

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+/**
+ * Provided by `AppShell`: the element under the box a `SlideoutMenu` covers below `lg`, the page area
+ * together with a side panel docked beside it. The panel makes it inert while it covers it, so keyboard
+ * and assistive technology skip what nobody can see. Context rather than a prop so a panel anywhere in
+ * the shell finds it; the `pageAreaRef` prop serves a host without the shell.
+ */
+const PageAreaContext = createContext(undefined);
+
+export { PageAreaContext };
+//# sourceMappingURL=PageArea.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageArea.context.js","sources":["../../../../../src/components/organisms/SlideoutMenu/providers/PageArea.context.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAKA;;;;;AAKG;MACU,eAAe,GAAG,aAAa,CAA4C,SAAS;;"}

package/dist/components/templates/AppShell/index.cjs

@@ -3,8 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
 var PageCover_context = require('../../organisms/SidePanel/providers/PageCover.context.cjs');
 var OverlayBounds_context = require('../../organisms/SlideoutMenu/providers/OverlayBounds.context.cjs');
+var PageArea_context = require('../../organisms/SlideoutMenu/providers/PageArea.context.cjs');
 var usePageAreaBounds = require('./hooks/usePageAreaBounds.cjs');
 var usePageCover = require('./hooks/usePageCover.cjs');
 
@@ -20,16 +22,18 @@ const AppShell = ({ sidebar, header, panel, children, scrollAreaProps, className
     const appShellTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'app-shell', rootName: 'app-shell' });
     // A `SidePanel` in the `panel` slot calls the setter while it covers the page area below `lg`.
     const { scrollAreaRef, setPageCovered } = usePageCover.usePageCover(scrollAreaProps?.ref);
-    // A `SlideoutMenu` anywhere in the shell reads the page area so it covers that box and nothing else.
+    // A `SlideoutMenu` anywhere in the shell reads the page area so it covers that box and nothing else, and below `lg` makes the
+    // row under that box inert: the page and a side panel covering it, which the slideout then covers in turn.
     const pageAreaBounds = usePageAreaBounds.usePageAreaBounds(scrollAreaRef);
+    const pageRowRef = React.useRef(null);
     return (
     // A column below `lg`, so a navigation that renders its own mobile top bar stacks above the content.
-    jsxRuntime.jsx("div", { "data-testid": appShellTestId, className: cx.cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: jsxRuntime.jsxs(OverlayBounds_context.OverlayBoundsContext.Provider, { value: pageAreaBounds, children: [sidebar, jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 overflow-clip", children: [jsxRuntime.jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaRef, "data-testid": scrollAreaProps?.['data-testid'] ?? testIdUtils.joinTestId(appShellTestId, 'scroll-area'), 
-                                    // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
-                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
-                                    tabIndex: 0, 
-                                    // isolate keeps the page's own stacked content (sticky headers) under a panel that covers it.
-                                    className: "isolate flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), jsxRuntime.jsx(PageCover_context.PageCoverContext.Provider, { value: setPageCovered, children: panel })] })] })] }) }));
+    jsxRuntime.jsx("div", { "data-testid": appShellTestId, className: cx.cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: jsxRuntime.jsx(OverlayBounds_context.OverlayBoundsContext.Provider, { value: pageAreaBounds, children: jsxRuntime.jsxs(PageArea_context.PageAreaContext.Provider, { value: pageRowRef, children: [sidebar, jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxRuntime.jsxs("div", { ref: pageRowRef, className: "relative flex min-h-0 flex-1 overflow-clip", children: [jsxRuntime.jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaRef, "data-testid": scrollAreaProps?.['data-testid'] ?? testIdUtils.joinTestId(appShellTestId, 'scroll-area'), 
+                                        // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
+                                        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                                        tabIndex: 0, 
+                                        // isolate keeps the page's own stacked content (sticky headers) under a panel that covers it.
+                                        className: "isolate flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), jsxRuntime.jsx(PageCover_context.PageCoverContext.Provider, { value: setPageCovered, children: panel })] })] })] }) }) }));
 };
 
 exports.AppShell = AppShell;

package/dist/components/templates/AppShell/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","usePageCover","usePageAreaBounds","_jsx","cx","_jsxs","OverlayBoundsContext","joinTestId","PageCoverContext"],"mappings":";;;;;;;;;;AAwCA;;;;;;;AAOG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAE7G,IAAA,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAGC,yBAAY,CAAC,eAAe,EAAE,GAAG,CAAC;;AAE5E,IAAA,MAAM,cAAc,GAAGC,mCAAiB,CAAC,aAAa,CAAC;IAEvD;;IAEEC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAEC,KAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAC7HC,eAAA,CAACC,0CAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAAA,CACjD,OAAO,EAGRD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClD,MAAM,EAGPA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDF,cAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,aAAa,EAAA,aAAA,EACL,eAAe,GAAG,aAAa,CAAC,IAAII,sBAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,oCAAA,QAAQ,EAAE,CAAC;;oCAEX,SAAS,EAAC,iIAAiI,EAAA,QAAA,EAE1I,QAAQ,GACL,EAENJ,cAAA,CAACK,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,YAAG,KAAK,EAAA,CAA6B,IACjF,CAAA,EAAA,CACF,CAAA,EAAA,CACwB,EAAA,CAC5B;AAEV;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","usePageCover","usePageAreaBounds","useRef","_jsx","cx","OverlayBoundsContext","_jsxs","PageAreaContext","joinTestId","PageCoverContext"],"mappings":";;;;;;;;;;;;AA2CA;;;;;;;AAOG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAE7G,IAAA,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAGC,yBAAY,CAAC,eAAe,EAAE,GAAG,CAAC;;;AAG5E,IAAA,MAAM,cAAc,GAAGC,mCAAiB,CAAC,aAAa,CAAC;AACvD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAiB,IAAI,CAAC;IAE/C;;AAEE,IAAAC,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAEC,KAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAC7HD,cAAA,CAACE,0CAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAClDC,eAAA,CAACC,gCAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAAA,CACxC,OAAO,EAGRD,yBAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClD,MAAM,EAGPA,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAC1EH,cAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,aAAa,EAAA,aAAA,EACL,eAAe,GAAG,aAAa,CAAC,IAAIK,sBAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,wCAAA,QAAQ,EAAE,CAAC;;wCAEX,SAAS,EAAC,iIAAiI,EAAA,QAAA,EAE1I,QAAQ,GACL,EAENL,cAAA,CAACM,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,EAAA,CAA6B,CAAA,EAAA,CACjF,IACF,CAAA,EAAA,CACmB,EAAA,CACG,EAAA,CAC5B;AAEV;;"}

package/dist/components/templates/AppShell/index.d.ts

@@ -15,7 +15,8 @@ export interface AppShellProps {
     /**
      * Side panel rendered under the header. From `lg` it sits beside the page area, which narrows to make
      * room. Below `lg` it covers the page area, which is then out of reach of keyboard and assistive
-     * technology until the panel closes. Compose one `<SidePanel>` here and switch its content.
+     * technology until the panel closes, as the panel itself is while a `SlideoutMenu` covers both. Compose
+     * one `<SidePanel>` here and switch its content.
      */
     panel?: ReactNode;
     /** Page content, normally a `<PageLayout>`. Rendered inside the shell's scroll area. */

package/dist/components/templates/AppShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/AppShell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,WAAW,uBAAuB;IACtC,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yGAAyG;IACzG,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wGAAwG;IACxG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sLAAsL;IACtL,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,sGAAsG;IACtG,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,6FAA6F,aAAa,KAAG,SAsCrI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/AppShell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAQ5C,MAAM,WAAW,uBAAuB;IACtC,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yGAAyG;IACzG,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,wGAAwG;IACxG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sLAAsL;IACtL,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB,sGAAsG;IACtG,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,6FAA6F,aAAa,KAAG,SA0CrI,CAAC"}

package/dist/components/templates/AppShell/index.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { useRef } from 'react';
 import { PageCoverContext } from '../../organisms/SidePanel/providers/PageCover.context.js';
 import { OverlayBoundsContext } from '../../organisms/SlideoutMenu/providers/OverlayBounds.context.js';
+import { PageAreaContext } from '../../organisms/SlideoutMenu/providers/PageArea.context.js';
 import { usePageAreaBounds } from './hooks/usePageAreaBounds.js';
 import { usePageCover } from './hooks/usePageCover.js';
 
@@ -18,16 +20,18 @@ const AppShell = ({ sidebar, header, panel, children, scrollAreaProps, className
     const appShellTestId = useResolvedTestId({ testId: dataTestId, segment: 'app-shell', rootName: 'app-shell' });
     // A `SidePanel` in the `panel` slot calls the setter while it covers the page area below `lg`.
     const { scrollAreaRef, setPageCovered } = usePageCover(scrollAreaProps?.ref);
-    // A `SlideoutMenu` anywhere in the shell reads the page area so it covers that box and nothing else.
+    // A `SlideoutMenu` anywhere in the shell reads the page area so it covers that box and nothing else, and below `lg` makes the
+    // row under that box inert: the page and a side panel covering it, which the slideout then covers in turn.
     const pageAreaBounds = usePageAreaBounds(scrollAreaRef);
+    const pageRowRef = useRef(null);
     return (
     // A column below `lg`, so a navigation that renders its own mobile top bar stacks above the content.
-    jsx("div", { "data-testid": appShellTestId, className: cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: jsxs(OverlayBoundsContext.Provider, { value: pageAreaBounds, children: [sidebar, jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxs("div", { className: "relative flex min-h-0 flex-1 overflow-clip", children: [jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaRef, "data-testid": scrollAreaProps?.['data-testid'] ?? joinTestId(appShellTestId, 'scroll-area'), 
-                                    // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
-                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
-                                    tabIndex: 0, 
-                                    // isolate keeps the page's own stacked content (sticky headers) under a panel that covers it.
-                                    className: "isolate flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), jsx(PageCoverContext.Provider, { value: setPageCovered, children: panel })] })] })] }) }));
+    jsx("div", { "data-testid": appShellTestId, className: cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: jsx(OverlayBoundsContext.Provider, { value: pageAreaBounds, children: jsxs(PageAreaContext.Provider, { value: pageRowRef, children: [sidebar, jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxs("div", { ref: pageRowRef, className: "relative flex min-h-0 flex-1 overflow-clip", children: [jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaRef, "data-testid": scrollAreaProps?.['data-testid'] ?? joinTestId(appShellTestId, 'scroll-area'), 
+                                        // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
+                                        // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
+                                        tabIndex: 0, 
+                                        // isolate keeps the page's own stacked content (sticky headers) under a panel that covers it.
+                                        className: "isolate flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), jsx(PageCoverContext.Provider, { value: setPageCovered, children: panel })] })] })] }) }) }));
 };
 
 export { AppShell };

package/dist/components/templates/AppShell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;AAwCA;;;;;;;AAOG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAE7G,IAAA,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC,eAAe,EAAE,GAAG,CAAC;;AAE5E,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,aAAa,CAAC;IAEvD;;IAEEA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAC7HC,IAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAAA,CACjD,OAAO,EAGRA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClD,MAAM,EAGPA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDD,GAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,aAAa,EAAA,aAAA,EACL,eAAe,GAAG,aAAa,CAAC,IAAI,UAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,oCAAA,QAAQ,EAAE,CAAC;;oCAEX,SAAS,EAAC,iIAAiI,EAAA,QAAA,EAE1I,QAAQ,GACL,EAENA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,YAAG,KAAK,EAAA,CAA6B,IACjF,CAAA,EAAA,CACF,CAAA,EAAA,CACwB,EAAA,CAC5B;AAEV;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AA2CA;;;;;;;AAOG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAE7G,IAAA,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC,eAAe,EAAE,GAAG,CAAC;;;AAG5E,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,aAAa,CAAC;AACvD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE/C;;AAEE,IAAAA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAC7HA,GAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAClDC,IAAA,CAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAAA,CACxC,OAAO,EAGRA,cAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClD,MAAM,EAGPA,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAC1ED,GAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,aAAa,EAAA,aAAA,EACL,eAAe,GAAG,aAAa,CAAC,IAAI,UAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,wCAAA,QAAQ,EAAE,CAAC;;wCAEX,SAAS,EAAC,iIAAiI,EAAA,QAAA,EAE1I,QAAQ,GACL,EAENA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,EAAA,CAA6B,CAAA,EAAA,CACjF,IACF,CAAA,EAAA,CACmB,EAAA,CACG,EAAA,CAC5B;AAEV;;"}

package/dist/{components/organisms/SidePanel/hooks → hooks/__internal__/usePanelFocus}/usePanelFocus.cjs

@@ -1,22 +1,48 @@
 'use strict';
 
 var React = require('react');
-var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
+var focus_utils = require('../../../utilities/__internal__/focusUtils/focus.utils.cjs');
+var inert_utils = require('../../../utilities/__internal__/inertUtils/inert.utils.cjs');
 
 /** The element before the panel when it can take focus, such as `AppShell`'s scroll area. */
 const focusableSiblingBefore = (panel) => {
     const sibling = panel.previousElementSibling;
     return sibling instanceof HTMLElement && sibling.tabIndex >= 0 ? sibling : null;
 };
+/** Whether a hand-back can land: a control, or a region given a `tabindex`, that no cover has taken out of reach. */
+const canTakeFocus = (element) => element instanceof HTMLElement && (element.tabIndex >= 0 || element.hasAttribute('tabindex')) && element.closest('[inert]') === null;
+/**
+ * What covers an element under an inert ancestor: the last panel to cover that ancestor, else the sibling after it, as a
+ * side panel sits after the page it covers. Nothing when that cannot take focus, such as a plain wrapper.
+ */
+const coverOver = (element) => {
+    const covered = element.closest('[inert]');
+    if (!(covered instanceof HTMLElement))
+        return null;
+    const candidate = inert_utils.lastCoverOf(covered) ?? covered.nextElementSibling;
+    return canTakeFocus(candidate) ? candidate : null;
+};
+/**
+ * What the panel covers: the given element, unless the panel sits inside it, as overlays do without a scoped anchor, when
+ * nothing is; without one, the panel's siblings.
+ */
+const resolveCovered = (panel, coveredRef) => {
+    if (!coveredRef)
+        return panel.parentElement;
+    const covered = coveredRef.current;
+    return covered && !covered.contains(panel) ? covered : null;
+};
 /**
  * Hands focus into the panel when it opens and back to the control that opened it when it closes,
- * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
- * reroute Tab at the panel's edges, as a popover does.
+ * makes a leaving panel inert, and takes what the panel covers out of reach while it covers it.
+ * Managed by hand, not with a focus scope: a scope would also reroute Tab at the panel's edges, as
+ * a popover does.
  *
+ * @param options See `UsePanelFocusOptions`.
  * @returns a capture-phase focus handler to spread onto the panel element, and `setOpener`, which points the hand-back on
  *   close at another control after a content swap
  */
-const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }) => {
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }) => {
     const openerRef = React.useRef(null);
     const previousIsPresent = React.useRef(null);
     const previousIsDesktop = React.useRef(isDesktop);
@@ -48,22 +74,44 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, con
         if (isLeaving && hasFocusInside) {
             const opener = openerRef.current;
             // The opener may have unmounted meanwhile, such as a header button that only renders at one breakpoint.
-            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.focus();
+            const target = opener?.isConnected ? opener : focusableSiblingBefore(panel);
+            target?.focus();
+            // An opener under a cover, a side panel or another panel over the page below `lg`, refuses focus: what covers it takes it instead.
+            if (target && focus_utils.getFocusedElement() !== target)
+                coverOver(target)?.focus();
         }
         // A leaving panel must not be reachable while another opens; set last, since inert drops any focus inside it.
         if (!isPresent)
             panel.inert = true;
     }, [panelRef, isPresent, shouldFocusOnMount, focusedBeforeMount]);
+    // Before the cover below is applied, so focus leaves the page while the page can still be read as holding it.
     React.useEffect(() => {
         const hasStartedCoveringPage = previousIsDesktop.current && !isDesktop;
         previousIsDesktop.current = isDesktop;
         const panel = panelRef.current;
         const focused = focus_utils.getFocusedElement();
-        // The page beside the panel is about to go out of reach, so focus must not be left in it.
-        if (hasStartedCoveringPage && panel && focused && !panel.contains(focused) && panel.parentElement?.contains(focused)) {
+        // The page the panel covers is about to go out of reach, so focus must not be left in it, where inert would drop it on nothing.
+        const covered = panel && resolveCovered(panel, coveredRef);
+        if (hasStartedCoveringPage && panel && focused && !panel.contains(focused) && covered?.contains(focused)) {
             panel.focus({ preventScroll: true });
         }
-    }, [panelRef, isDesktop]);
+    }, [panelRef, coveredRef, isDesktop]);
+    // React runs every cleanup before any effect in a commit, so the cover lifts before the hand-back above lands focus in the
+    // page. Covers are counted per element, so two panels over the same page restore its own `inert` only when the last lifts.
+    const isCovering = isPresent && !isDesktop;
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        // Only a given element is covered; the panel's siblings are the layout's to cover, as `AppShell` does for a side panel.
+        const covered = isCovering && panel && coveredRef ? resolveCovered(panel, coveredRef) : null;
+        if (!panel || !covered)
+            return;
+        // An area chosen while the panel is open, such as the app root arriving a commit late, may hold focus the hand-off above
+        // did not see: it moves into the panel before the area goes out of reach.
+        const focused = focus_utils.getFocusedElement();
+        if (focused && covered.contains(focused))
+            panel.focus({ preventScroll: true });
+        return inert_utils.coverElement(covered, panel);
+    }, [panelRef, coveredRef, isCovering]);
     // Swapping content unmounts whatever held focus, which drops it on the page. The region takes it, so Tab stays inside and
     // closing can still hand it back. Content that focuses itself on mount (an `autoFocus` input) has done so by now and keeps it.
     const previousContentKey = React.useRef(contentKey);

package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"sourcesContent":[null],"names":["lastCoverOf","useRef","useState","getFocusedElement","useEffect","coverElement","useLayoutEffect","useCallback"],"mappings":"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"}

package/dist/{components/organisms/SidePanel/hooks → hooks/__internal__/usePanelFocus}/usePanelFocus.d.ts

@@ -5,6 +5,13 @@ interface UsePanelFocusOptions {
     isPresent: boolean;
     /** Whether the panel is docked beside the page rather than covering it. */
     isDesktop: boolean;
+    /**
+     * What the panel covers when it is not docked, for a panel that is not the page's sibling, such as one portaled over it.
+     * Made inert while covered and restored as the panel leaves, before focus is handed back into it; left alone when the
+     * panel sits inside it. Read when the cover starts, so the element must stay mounted while the panel is open. Omitted,
+     * the page is taken to be the panel's siblings and its cover is the layout's job.
+     */
+    coveredRef?: RefObject<HTMLElement | null>;
     /** False for a panel that is open on the first render, which must not pull focus away from the page. */
     shouldFocusOnMount: boolean;
     /** Identifies the content shown; a change means the content, and whatever held focus in it, was replaced. */
@@ -12,13 +19,15 @@ interface UsePanelFocusOptions {
 }
 /**
  * Hands focus into the panel when it opens and back to the control that opened it when it closes,
- * and makes a leaving panel inert. Managed by hand, not with a focus scope: a scope would also
- * reroute Tab at the panel's edges, as a popover does.
+ * makes a leaving panel inert, and takes what the panel covers out of reach while it covers it.
+ * Managed by hand, not with a focus scope: a scope would also reroute Tab at the panel's edges, as
+ * a popover does.
  *
+ * @param options See `UsePanelFocusOptions`.
  * @returns a capture-phase focus handler to spread onto the panel element, and `setOpener`, which points the hand-back on
  *   close at another control after a content swap
  */
-export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }: UsePanelFocusOptions) => {
+export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }: UsePanelFocusOptions) => {
     onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
     setOpener: (element: HTMLElement) => void;
 };

package/dist/hooks/__internal__/usePanelFocus/usePanelFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/__internal__/usePanelFocus/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuCnD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,kEAAkE;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GAAI,gFAAgF,oBAAoB;4BAiFjG,UAAU,CAAC,WAAW,CAAC;yBAMd,WAAW;CAKpD,CAAC"}