@flipdish/ui-library 0.43.2 → 0.45.0

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';
@@ -71,10 +71,26 @@ declare const Footer: {
     }): import("react").JSX.Element;
     displayName: string;
 };
+export interface SlideoutPageAreaProps {
+    /**
+     * The element under the box slideouts cover below `lg`: the page area, with a side panel that covers it, never the header
+     * or the sidebar. It goes `inert` while a slideout covers it and is restored as the slideout closes, so it must stay
+     * mounted meanwhile, and nothing else may write `inert` on it.
+     */
+    areaRef: RefObject<HTMLElement | null>;
+    /** The layout, wrapping every place a slideout renders from, such as the header as well as the page. */
+    children: ReactNode;
+}
+/** Names what the slideouts below it cover below `lg`, for a layout of its own; `AppShell` does it for its page area. */
+declare const PageArea: {
+    ({ areaRef, children }: SlideoutPageAreaProps): import("react").JSX.Element;
+    displayName: string;
+};
 /**
  * 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
  */
@@ -83,6 +99,7 @@ declare const SlideoutMenu: typeof Menu & {
     Content: typeof Content;
     Header: typeof Header;
     Footer: typeof Footer;
+    PageArea: typeof PageArea;
 };
 export { SlideoutMenu };
 //# sourceMappingURL=index.d.ts.map

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":"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"}

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

@@ -8,6 +8,7 @@ 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 { PageAreaContext } from './providers/PageArea.context.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';
 
@@ -45,10 +46,14 @@ const Footer = ({ 'data-testid': dataTestId, ...props }) => {
     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';
+/** Names what the slideouts below it cover below `lg`, for a layout of its own; `AppShell` does it for its page area. */
+const PageArea = ({ areaRef, children }) => jsx(PageAreaContext.Provider, { value: areaRef, children: children });
+PageArea.displayName = 'SlideoutPageArea';
 /**
  * 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
  */
@@ -58,6 +63,7 @@ SlideoutMenu.Trigger = DialogTrigger;
 SlideoutMenu.Content = Content;
 SlideoutMenu.Header = Header;
 SlideoutMenu.Footer = Footer;
+SlideoutMenu.PageArea = PageArea;
 
 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","_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`, or by `SlideoutMenu.PageArea` in a layout of its own: the element under the box a
+ * `SlideoutMenu` covers below `lg`, the page area together with a side panel beside it. The panel makes it
+ * inert while it covers it, so keyboard and assistive technology skip what nobody can see. Context, so a
+ * panel anywhere in the layout finds it, the header included.
+ */
+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`, or by `SlideoutMenu.PageArea` in a layout of its own: the element under the box a
+ * `SlideoutMenu` covers below `lg`, the page area together with a side panel beside it. The panel makes it
+ * inert while it covers it, so keyboard and assistive technology skip what nobody can see. Context, so a
+ * panel anywhere in the layout finds it, the header included.
+ */
+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`, or by `SlideoutMenu.PageArea` in a layout of its own: the element under the box a
+ * `SlideoutMenu` covers below `lg`, the page area together with a side panel beside it. The panel makes it
+ * inert while it covers it, so keyboard and assistive technology skip what nobody can see. Context, so a
+ * panel anywhere in the layout finds it, the header included.
+ */
+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/hooks/__internal__/usePanelFocus/usePanelFocus.cjs

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react');
+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`, neither disabled nor under a cover. */
+const canTakeFocus = (element) => element instanceof HTMLElement &&
+    (element.tabIndex >= 0 || element.hasAttribute('tabindex')) &&
+    !element.matches(':disabled') &&
+    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, else the first region inside that sibling given a `tabindex` that can take
+ * focus, as a host wraps its side panel. Nothing when none of those can.
+ */
+const coverOver = (element) => {
+    const covered = element.closest('[inert]');
+    if (!(covered instanceof HTMLElement))
+        return null;
+    const candidate = inert_utils.lastCoverOf(covered) ?? covered.nextElementSibling;
+    if (canTakeFocus(candidate))
+        return candidate;
+    const regions = candidate ? [...candidate.querySelectorAll('[tabindex]')] : [];
+    return regions.find(canTakeFocus) ?? 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,
+ * 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, `setOpener`, which points the hand-back on
+ *   close at another control after a content swap, and `liftCover`, which lifts the cover ahead of the close that follows
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }) => {
+    const openerRef = React.useRef(null);
+    const previousIsPresent = React.useRef(null);
+    const previousIsDesktop = React.useRef(isDesktop);
+    // Read while rendering, before the content mounts: an `autoFocus` input takes focus during commit, ahead of any effect.
+    const [focusedBeforeMount] = React.useState(focus_utils.getFocusedElement);
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const previous = previousIsPresent.current;
+        previousIsPresent.current = isPresent;
+        // Entering covers a fresh open and a reopen that interrupts the close animation.
+        const isEntering = isPresent && (previous === false || (previous === null && shouldFocusOnMount));
+        const isLeaving = !isPresent && previous === true;
+        const focused = focus_utils.getFocusedElement();
+        const hasFocusInside = focused !== null && panel.contains(focused);
+        // A panel reopened mid-close is still inert from leaving, and an inert element cannot take focus.
+        if (isPresent)
+            panel.inert = false;
+        if (isEntering) {
+            // On mount the content may already hold focus, so the opener is what was focused before it. A reopen mid-close finds focus still outside.
+            openerRef.current = previous === null ? focusedBeforeMount : focused;
+            // Content that focused itself (an `autoFocus` input) keeps focus; otherwise the region takes it.
+            // preventScroll: below `lg` the panel starts off-screen, and scrolling it into view would shift the layout.
+            if (!hasFocusInside)
+                panel.focus({ preventScroll: true });
+        }
+        // Hand focus back only if it is still in the panel, so a user who has moved on is left alone.
+        if (isLeaving && hasFocusInside) {
+            const opener = openerRef.current;
+            // The opener may have unmounted meanwhile, such as a header button that only renders at one breakpoint.
+            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 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, 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;
+    const liftCoverRef = React.useRef(null);
+    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 });
+        const lift = inert_utils.coverElement(covered, panel);
+        liftCoverRef.current = lift;
+        return () => {
+            lift();
+            liftCoverRef.current = null;
+        };
+    }, [panelRef, coveredRef, isCovering]);
+    // For a close that another panel caused: that panel is mounting under this cover in the same pass, and its focus call would
+    // be refused until the cover lifts at the next commit. Lifting is idempotent, so the effect's own cleanup stays harmless.
+    const liftCover = React.useCallback(() => liftCoverRef.current?.(), []);
+    // 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);
+    React.useLayoutEffect(() => {
+        if (previousContentKey.current === contentKey)
+            return;
+        previousContentKey.current = contentKey;
+        const panel = panelRef.current;
+        if (panel && isPresent && focus_utils.getFocusedElement() === null)
+            panel.focus({ preventScroll: true });
+    }, [panelRef, contentKey, isPresent]);
+    // A panel that was open on load has no opener, so closing hands focus back to wherever it first came in from.
+    const onFocusCapture = (event) => {
+        const from = event.relatedTarget;
+        if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
+            openerRef.current = from;
+    };
+    // A panel whose content swaps while open follows the user's latest gesture, so closing lands on the row they are on, not the first one.
+    const setOpener = React.useCallback((element) => {
+        openerRef.current = element;
+    }, []);
+    return { onFocusCapture, setOpener, liftCover };
+};
+
+exports.usePanelFocus = usePanelFocus;
+//# sourceMappingURL=usePanelFocus.cjs.map

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","useCallback","useLayoutEffect"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import type { FocusEvent, RefObject } from 'react';
+interface UsePanelFocusOptions {
+    panelRef: RefObject<HTMLElement | null>;
+    /** From `useIsPresent`: false once the panel is animating out. */
+    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. */
+    contentKey?: string;
+}
+/**
+ * Hands focus into the panel when it opens and back to the control that opened it when it closes,
+ * 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, `setOpener`, which points the hand-back on
+ *   close at another control after a content swap, and `liftCover`, which lifts the cover ahead of the close that follows
+ */
+export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, coveredRef, shouldFocusOnMount, contentKey }: UsePanelFocusOptions) => {
+    onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
+    setOpener: (element: HTMLElement) => void;
+    liftCover: () => void | undefined;
+};
+export {};
+//# sourceMappingURL=usePanelFocus.d.ts.map

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;AA6CnD,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;4BA2FjG,UAAU,CAAC,WAAW,CAAC;yBAMd,WAAW;;CAKpD,CAAC"}