@flipdish/ui-library 0.44.0 → 0.45.1

package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs

@@ -5,6 +5,7 @@ var cx = require('@flipdish/ui-library/utilities/cx');
 var react = require('motion/react');
 var React = require('react');
 var usePanelFocus = require('../../../../hooks/__internal__/usePanelFocus/usePanelFocus.cjs');
+var pageCover_utils = require('../../../../utilities/__internal__/pageCoverUtils/pageCover.utils.cjs');
 
 /** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
 const SIDE_PANEL_WIDTH = 400;
@@ -23,6 +24,13 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
     const panelRef = React.useRef(null);
     const isPresent = react.useIsPresent();
     const shouldReduceMotion = react.useReducedMotion();
+    // Starting to cover the page, on open below `lg` or on narrowing, is announced so a slideout over the page can close. Declared
+    // before the focus hook, so a slideout lifts its cover before this panel's focus call, which the cover would refuse.
+    const isCovering = isPresent && !isDesktop;
+    React.useEffect(() => {
+        if (isCovering && panelRef.current)
+            pageCover_utils.dispatchPageCover(panelRef.current);
+    }, [isCovering]);
     const { onFocusCapture } = usePanelFocus.usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey });
     // The first content arrives with the panel's own opening animation; only a later swap fades in.
     const firstContentKey = React.useRef(contentKey);

package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","usePanelFocus","useEffect","_jsx","motion","cx"],"mappings":";;;;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAGC,kBAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,2BAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAGH,YAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpEI,eAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEC,cAAA,CAACC,YAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;AAEnB,QAAA,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAC5B,OAAO,EAAE,YAAY,CAAC,IAAI,EAC1B,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,UAAU,EAAE,kBAAkB,IAAI,oBAAoB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM;;;QAGjF,SAAS,EAAEC,KAAE,CACX,kJAAkJ,EAClJ,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,KAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GF,cAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAEE,KAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;;"}
+{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":"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"}

package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAepC,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCAoDtB,CAAC"}
+{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAepC,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCA4DtB,CAAC"}

package/dist/components/organisms/SidePanel/components/SidePanelRegion.js

@@ -3,6 +3,7 @@ import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useIsPresent, useReducedMotion, motion } from 'motion/react';
 import { useRef, useEffect } from 'react';
 import { usePanelFocus } from '../../../../hooks/__internal__/usePanelFocus/usePanelFocus.js';
+import { dispatchPageCover } from '../../../../utilities/__internal__/pageCoverUtils/pageCover.utils.js';
 
 /** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
 const SIDE_PANEL_WIDTH = 400;
@@ -21,6 +22,13 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
     const panelRef = useRef(null);
     const isPresent = useIsPresent();
     const shouldReduceMotion = useReducedMotion();
+    // Starting to cover the page, on open below `lg` or on narrowing, is announced so a slideout over the page can close. Declared
+    // before the focus hook, so a slideout lifts its cover before this panel's focus call, which the cover would refuse.
+    const isCovering = isPresent && !isDesktop;
+    useEffect(() => {
+        if (isCovering && panelRef.current)
+            dispatchPageCover(panelRef.current);
+    }, [isCovering]);
     const { onFocusCapture } = usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey });
     // The first content arrives with the panel's own opening animation; only a later swap fades in.
     const firstContentKey = useRef(contentKey);

package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;AAC7C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpE,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;AAEnB,QAAA,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAC5B,OAAO,EAAE,YAAY,CAAC,IAAI,EAC1B,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,UAAU,EAAE,kBAAkB,IAAI,oBAAoB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM;;;QAGjF,SAAS,EAAE,EAAE,CACX,kJAAkJ,EAClJ,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;"}
+{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AASA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;;;AAI7C,IAAA,MAAM,UAAU,GAAG,SAAS,IAAI,CAAC,SAAS;IAC1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO;AAAE,YAAA,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACzE,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpE,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;AAEnB,QAAA,QAAQ,EAAE,EAAE,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAC5B,OAAO,EAAE,YAAY,CAAC,IAAI,EAC1B,IAAI,EAAE,YAAY,CAAC,MAAM,EACzB,UAAU,EAAE,kBAAkB,IAAI,oBAAoB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,MAAM;;;QAGjF,SAAS,EAAE,EAAE,CACX,kJAAkJ,EAClJ,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,YAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAE3GA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,iBAAiB,CAAC,OAAO,IAAI,4DAA4D,CAAC,EAAA,QAAA,EAEvI,QAAQ,EAAA,EAHJ,UAAU,CAIX,EAAA,CACF,EAAA,CACO;AAEnB;;"}

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

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
-var ThemeProvider = require('@flipdish/ui-library/providers/ThemeProvider');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var react = require('motion/react');
@@ -11,7 +10,10 @@ var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var usePanelFocus = require('../../../../hooks/__internal__/usePanelFocus/usePanelFocus.cjs');
 var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
-var hotkeys_utils = require('../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
+var Theme_context = require('../../../../providers/ThemeProvider/Theme.context.cjs');
+var useCloseWhenCovered = require('../hooks/useCloseWhenCovered.cjs');
+var useDialogFocusSettle = require('../hooks/useDialogFocusSettle.cjs');
+var usePageEscapeDismiss = require('../hooks/usePageEscapeDismiss.cjs');
 var useSlideoutState = require('../hooks/useSlideoutState.cjs');
 var OverlayBounds_context = require('../providers/OverlayBounds.context.cjs');
 var PageArea_context = require('../providers/PageArea.context.cjs');
@@ -19,77 +21,42 @@ var SlideoutMenu_context = require('../providers/SlideoutMenu.context.cjs');
 var slideoutMenu_utils = require('../utilities/slideoutMenu.utils.cjs');
 
 const SLIDE = { type: 'tween', duration: 0.3, ease: 'easeOut' };
-const SLIDE_OUT = { type: 'tween', duration: 0.3, ease: 'easeIn' };
+// Leaves faster than it arrives, as `Modal` and the navigation drawer do.
+const SLIDE_OUT = { type: 'tween', duration: 0.2, 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, isDesktop, isKeyboardDismissDisabled, pageAreaRef, children, className, dialogClassName, }) => {
+const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId, isDesktop, isKeyboardDismissDisabled, children, className, dialogClassName, }) => {
     const panelRef = React.useRef(null);
     const dialogRef = React.useRef(null);
     const isPresent = react.useIsPresent();
     const shouldReduceMotion = react.useReducedMotion();
-    const shellPageAreaRef = React.useContext(PageArea_context.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 = ThemeProvider.useThemeRoot();
+    const pageAreaRef = React.useContext(PageArea_context.PageAreaContext);
+    // Without `AppShell` or `SlideoutMenu.PageArea` 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 names its page area instead.
+    const themeRoot = Theme_context.useThemeRoot();
     const themeRootRef = React.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 } = reactAria.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
-    // took the key first (they prevent default on their own Escape and run before a document listener), and not from a field
-    // outside the panel, where Escape belongs to the field. Focus is left where the user put it.
-    const closeRef = React.useRef(openState.close);
-    closeRef.current = openState.close;
-    React.useEffect(() => {
-        if (!isPresent || isKeyboardDismissDisabled)
-            return;
-        const onKeyDown = (event) => {
-            if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing)
-                return;
-            if (event.target instanceof Node && panelRef.current?.contains(event.target))
-                return;
-            if (hotkeys_utils.isTypingInField(event))
-                return;
-            closeRef.current();
-        };
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [isPresent, isKeyboardDismissDisabled]);
+    usePageEscapeDismiss.usePageEscapeDismiss({ panelRef, enabled: isPresent && !isKeyboardDismissDisabled, onClose: openState.close });
     // 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.usePanelFocus({
+    // see. A named page area wins over the app root. `shouldFocusOnMount` is what makes the hook record the opener.
+    const coveredRef = pageAreaRef ?? themeRootRef;
+    const { onFocusCapture, setOpener, liftCover } = usePanelFocus.usePanelFocus({
         panelRef: dialogRef,
         isPresent,
         isDesktop,
-        coveredRef: pageAreaRef ?? shellPageAreaRef ?? themeRootRef,
+        coveredRef,
         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.
-    React.useEffect(() => {
-        if (!isPresent)
-            return;
-        const stopWatching = () => {
-            document.removeEventListener('pointerdown', cancel, true);
-            document.removeEventListener('keydown', cancel, true);
-        };
-        const frame = requestAnimationFrame(() => {
-            stopWatching();
-            const dialog = dialogRef.current;
-            const focused = focus_utils.getFocusedElement();
-            if (dialog && !(focused && dialog.contains(focused)))
-                dialog.focus({ preventScroll: true });
-        });
-        const cancel = () => {
-            cancelAnimationFrame(frame);
-            stopWatching();
-        };
-        document.addEventListener('pointerdown', cancel, true);
-        document.addEventListener('keydown', cancel, true);
-        return cancel;
-    }, [isPresent]);
+    // A side panel starting to cover the page below `lg`, the shell's or a host's, closes the panel: it would otherwise sit over
+    // what the user just opened. The cover lifts at once, so that panel, mounting under it, can take focus in the same pass.
+    const closeForCoveringPanel = React.useCallback(() => {
+        liftCover();
+        openState.close();
+    }, [liftCover, openState.close]);
+    useCloseWhenCovered.useCloseWhenCovered({ isOpen: isPresent, onClose: closeForCoveringPanel });
+    useDialogFocusSettle.useDialogFocusSettle({ dialogRef, isPresent });
     // A content swap leaves focus on the row the user clicked, so the new title is spoken instead; with focus inside, the user
     // is already reading the panel and hears the change as they move. The last title lives here, not in `Header`, since a swap
     // between loading and loaded content remounts the header; the first title is the open, which the dialog announces itself.
@@ -120,7 +87,7 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
  * 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, pageAreaRef, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, children, className, dialogClassName, 'data-testid': dataTestId, }) => {
+const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDisabled, bounds, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, children, className, dialogClassName, 'data-testid': dataTestId, }) => {
     const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'slideout-menu', rootName: 'slideout-menu' });
     const triggerState = React.useContext(reactAriaComponents.OverlayTriggerStateContext);
     const local = useSlideoutState.useSlideoutState({ isOpen, defaultOpen, onOpenChange });
@@ -131,7 +98,7 @@ const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDis
     const isDesktop = useBreakpoints.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 (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { children: openState.isOpen && (jsxRuntime.jsx(reactAria.Overlay, { disableFocusManagement: true, children: jsxRuntime.jsx(reactAriaComponents.OverlayTriggerStateContext.Provider, { value: openState, children: jsxRuntime.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")) }) }));
+    return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(react.AnimatePresence, { children: openState.isOpen && (jsxRuntime.jsx(reactAria.Overlay, { disableFocusManagement: true, children: jsxRuntime.jsx(reactAriaComponents.OverlayTriggerStateContext.Provider, { value: openState, children: jsxRuntime.jsx(SlideoutPanel, { openState: openState, label: label, labelledBy: labelledBy, boundsStyle: boundsStyle, rootTestId: rootTestId, isDesktop: isDesktop, isKeyboardDismissDisabled: isKeyboardDismissDisabled, className: className, dialogClassName: dialogClassName, children: children }) }) }, "slideout-menu")) }) }));
 };
 SlideoutShell.displayName = 'SlideoutShell';
 

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

@@ -1 +1 @@
-{"version":3,"file":"SlideoutShell.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useContext","PageAreaContext","useThemeRoot","useMemo","useOverlay","useEffect","isTypingInField","usePanelFocus","getFocusedElement","useState","useCallback","_jsx","_jsxs","motion","cx","SlideoutMenuContext","FocusScope","AriaDialog","useResolvedTestId","OverlayTriggerStateContext","useSlideoutState","OverlayBoundsContext","resolveSlideoutBounds","useBreakpoints","TestIdProvider","AnimatePresence","Overlay"],"mappings":"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"}
+{"version":3,"file":"SlideoutShell.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useContext","PageAreaContext","useThemeRoot","useMemo","useOverlay","usePageEscapeDismiss","usePanelFocus","useCallback","useCloseWhenCovered","useDialogFocusSettle","useState","getFocusedElement","_jsx","_jsxs","motion","cx","SlideoutMenuContext","FocusScope","AriaDialog","useResolvedTestId","OverlayTriggerStateContext","useSlideoutState","OverlayBoundsContext","resolveSlideoutBounds","useBreakpoints","TestIdProvider","AnimatePresence","Overlay"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ReactNode } from 'react';
 import type { SlideoutBounds } from '../utilities/slideoutMenu.utils';
 /** What the render-prop form of `children` receives. */
 export interface SlideoutRenderProps {
@@ -11,7 +11,6 @@ export interface SlideoutShellProps {
     onOpenChange?: (isOpen: boolean) => void;
     isKeyboardDismissDisabled?: boolean;
     bounds?: SlideoutBounds;
-    pageAreaRef?: RefObject<HTMLElement | null>;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     children: ReactNode | ((state: SlideoutRenderProps) => ReactNode);
@@ -25,7 +24,7 @@ export interface SlideoutShellProps {
  * `lg` the page beside the panel stays usable, and below `lg` only the page area it covers goes inert.
  */
 export declare const SlideoutShell: {
-    ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDisabled, bounds, pageAreaRef, "aria-label": ariaLabel, "aria-labelledby": labelledBy, children, className, dialogClassName, "data-testid": dataTestId, }: SlideoutShellProps): import("react").JSX.Element;
+    ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDisabled, bounds, "aria-label": ariaLabel, "aria-labelledby": labelledBy, children, className, dialogClassName, "data-testid": dataTestId, }: SlideoutShellProps): import("react").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=SlideoutShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SlideoutShell.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAiB,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6JD;;;;GAIG;AACH,eAAO,MAAM,aAAa;sNAavB,kBAAkB;;CAsCpB,CAAC"}
+{"version":3,"file":"SlideoutShell.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAetD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGtE,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA8HD;;;;GAIG;AACH,eAAO,MAAM,aAAa;yMAYvB,kBAAkB;;CAqCpB,CAAC"}

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

@@ -1,15 +1,17 @@
 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, useMemo, useEffect, useState, useCallback } from 'react';
+import { useContext, useRef, useMemo, useCallback, useState } 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 { useThemeRoot } from '../../../../providers/ThemeProvider/Theme.context.js';
+import { useCloseWhenCovered } from '../hooks/useCloseWhenCovered.js';
+import { useDialogFocusSettle } from '../hooks/useDialogFocusSettle.js';
+import { usePageEscapeDismiss } from '../hooks/usePageEscapeDismiss.js';
 import { useSlideoutState } from '../hooks/useSlideoutState.js';
 import { OverlayBoundsContext } from '../providers/OverlayBounds.context.js';
 import { PageAreaContext } from '../providers/PageArea.context.js';
@@ -17,77 +19,42 @@ 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' };
+// Leaves faster than it arrives, as `Modal` and the navigation drawer do.
+const SLIDE_OUT = { type: 'tween', duration: 0.2, 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, isDesktop, isKeyboardDismissDisabled, pageAreaRef, children, className, dialogClassName, }) => {
+const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId, isDesktop, isKeyboardDismissDisabled, 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 pageAreaRef = useContext(PageAreaContext);
+    // Without `AppShell` or `SlideoutMenu.PageArea` 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 names its page area instead.
     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
-    // took the key first (they prevent default on their own Escape and run before a document listener), and not from a field
-    // outside the panel, where Escape belongs to the field. Focus is left where the user put it.
-    const closeRef = useRef(openState.close);
-    closeRef.current = openState.close;
-    useEffect(() => {
-        if (!isPresent || isKeyboardDismissDisabled)
-            return;
-        const onKeyDown = (event) => {
-            if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing)
-                return;
-            if (event.target instanceof Node && panelRef.current?.contains(event.target))
-                return;
-            if (isTypingInField(event))
-                return;
-            closeRef.current();
-        };
-        document.addEventListener('keydown', onKeyDown);
-        return () => document.removeEventListener('keydown', onKeyDown);
-    }, [isPresent, isKeyboardDismissDisabled]);
+    usePageEscapeDismiss({ panelRef, enabled: isPresent && !isKeyboardDismissDisabled, onClose: openState.close });
     // 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({
+    // see. A named page area wins over the app root. `shouldFocusOnMount` is what makes the hook record the opener.
+    const coveredRef = pageAreaRef ?? themeRootRef;
+    const { onFocusCapture, setOpener, liftCover } = usePanelFocus({
         panelRef: dialogRef,
         isPresent,
         isDesktop,
-        coveredRef: pageAreaRef ?? shellPageAreaRef ?? themeRootRef,
+        coveredRef,
         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.
-    useEffect(() => {
-        if (!isPresent)
-            return;
-        const stopWatching = () => {
-            document.removeEventListener('pointerdown', cancel, true);
-            document.removeEventListener('keydown', cancel, true);
-        };
-        const frame = requestAnimationFrame(() => {
-            stopWatching();
-            const dialog = dialogRef.current;
-            const focused = getFocusedElement();
-            if (dialog && !(focused && dialog.contains(focused)))
-                dialog.focus({ preventScroll: true });
-        });
-        const cancel = () => {
-            cancelAnimationFrame(frame);
-            stopWatching();
-        };
-        document.addEventListener('pointerdown', cancel, true);
-        document.addEventListener('keydown', cancel, true);
-        return cancel;
-    }, [isPresent]);
+    // A side panel starting to cover the page below `lg`, the shell's or a host's, closes the panel: it would otherwise sit over
+    // what the user just opened. The cover lifts at once, so that panel, mounting under it, can take focus in the same pass.
+    const closeForCoveringPanel = useCallback(() => {
+        liftCover();
+        openState.close();
+    }, [liftCover, openState.close]);
+    useCloseWhenCovered({ isOpen: isPresent, onClose: closeForCoveringPanel });
+    useDialogFocusSettle({ dialogRef, isPresent });
     // A content swap leaves focus on the row the user clicked, so the new title is spoken instead; with focus inside, the user
     // is already reading the panel and hears the change as they move. The last title lives here, not in `Header`, since a swap
     // between loading and loaded content remounts the header; the first title is the open, which the dialog announces itself.
@@ -118,7 +85,7 @@ const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId,
  * 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, pageAreaRef, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, children, className, dialogClassName, 'data-testid': dataTestId, }) => {
+const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDisabled, bounds, '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 });
@@ -129,7 +96,7 @@ const SlideoutShell = ({ isOpen, defaultOpen, onOpenChange, isKeyboardDismissDis
     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, isDesktop: isDesktop, isKeyboardDismissDisabled: isKeyboardDismissDisabled, pageAreaRef: pageAreaRef, 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, 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/hooks/useCloseWhenCovered.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var pageCover_utils = require('../../../../utilities/__internal__/pageCoverUtils/pageCover.utils.cjs');
+
+/**
+ * Closes the panel when a side panel starts covering the page, in the shell or in a host such as the Portal. The panel is
+ * the transient thing the user opened, and left open it would sit over what they just asked for.
+ *
+ * @param options Whether the panel is open, and how to close it.
+ */
+const useCloseWhenCovered = ({ isOpen, onClose }) => {
+    // Written in an effect, so a render React discards never leaves the listener a callback from a state it threw away; a
+    // layout effect, declared first, so the listener below calls the committed one even in the commit that opened the panel.
+    const closeRef = React.useRef(onClose);
+    React.useLayoutEffect(() => {
+        closeRef.current = onClose;
+    });
+    // Listening for as long as the panel is open, not only once it covers the page itself: narrowing flips the side panel and
+    // this panel at once, and a host's panel in another React root may announce before this one has re-rendered. The event
+    // only fires below `lg`, where a side panel covers the page, so it never closes a panel docked beside one. A layout
+    // effect, so a listener mounting in the same commit as the announcement is in place before passive effects run.
+    React.useLayoutEffect(() => {
+        if (!isOpen)
+            return;
+        return pageCover_utils.subscribePageCover(() => closeRef.current());
+    }, [isOpen]);
+};
+
+exports.useCloseWhenCovered = useCloseWhenCovered;
+//# sourceMappingURL=useCloseWhenCovered.cjs.map

package/dist/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseWhenCovered.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.ts"],"sourcesContent":[null],"names":["useRef","useLayoutEffect","subscribePageCover"],"mappings":";;;;;AAYA;;;;;AAKG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAA8B,KAAU;;;AAG3F,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAC,OAAO,CAAC;IAChCC,qBAAe,CAAC,MAAK;AACnB,QAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;AAC5B,IAAA,CAAC,CAAC;;;;;IAMFA,qBAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,MAAM;YAAE;QACb,OAAOC,kCAAkB,CAAC,MAAM,QAAQ,CAAC,OAAO,EAAE,CAAC;AACrD,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;;"}

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

@@ -0,0 +1,15 @@
+interface UseCloseWhenCoveredOptions {
+    /** True while the panel is open, until it starts to leave. */
+    isOpen: boolean;
+    /** Closes the panel. */
+    onClose: () => void;
+}
+/**
+ * Closes the panel when a side panel starts covering the page, in the shell or in a host such as the Portal. The panel is
+ * the transient thing the user opened, and left open it would sit over what they just asked for.
+ *
+ * @param options Whether the panel is open, and how to close it.
+ */
+export declare const useCloseWhenCovered: ({ isOpen, onClose }: UseCloseWhenCoveredOptions) => void;
+export {};
+//# sourceMappingURL=useCloseWhenCovered.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseWhenCovered.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.ts"],"names":[],"mappings":"AAKA,UAAU,0BAA0B;IAClC,8DAA8D;IAC9D,MAAM,EAAE,OAAO,CAAC;IAChB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,qBAAqB,0BAA0B,KAAG,IAgBrF,CAAC"}

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

@@ -0,0 +1,29 @@
+import { useRef, useLayoutEffect } from 'react';
+import { subscribePageCover } from '../../../../utilities/__internal__/pageCoverUtils/pageCover.utils.js';
+
+/**
+ * Closes the panel when a side panel starts covering the page, in the shell or in a host such as the Portal. The panel is
+ * the transient thing the user opened, and left open it would sit over what they just asked for.
+ *
+ * @param options Whether the panel is open, and how to close it.
+ */
+const useCloseWhenCovered = ({ isOpen, onClose }) => {
+    // Written in an effect, so a render React discards never leaves the listener a callback from a state it threw away; a
+    // layout effect, declared first, so the listener below calls the committed one even in the commit that opened the panel.
+    const closeRef = useRef(onClose);
+    useLayoutEffect(() => {
+        closeRef.current = onClose;
+    });
+    // Listening for as long as the panel is open, not only once it covers the page itself: narrowing flips the side panel and
+    // this panel at once, and a host's panel in another React root may announce before this one has re-rendered. The event
+    // only fires below `lg`, where a side panel covers the page, so it never closes a panel docked beside one. A layout
+    // effect, so a listener mounting in the same commit as the announcement is in place before passive effects run.
+    useLayoutEffect(() => {
+        if (!isOpen)
+            return;
+        return subscribePageCover(() => closeRef.current());
+    }, [isOpen]);
+};
+
+export { useCloseWhenCovered };
+//# sourceMappingURL=useCloseWhenCovered.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseWhenCovered.js","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useCloseWhenCovered.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAYA;;;;;AAKG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAA8B,KAAU;;;AAG3F,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,eAAe,CAAC,MAAK;AACnB,QAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;AAC5B,IAAA,CAAC,CAAC;;;;;IAMF,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,MAAM;YAAE;QACb,OAAO,kBAAkB,CAAC,MAAM,QAAQ,CAAC,OAAO,EAAE,CAAC;AACrD,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AACd;;"}

package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
+
+/**
+ * Focuses the dialog one frame after the panel opens, when a row opened by mouse selects on
+ * pointerdown and the browser then lands focus back on that row. If nothing inside holds focus
+ * by that frame, the dialog takes it. A pointer or key before the frame means the user has moved
+ * on, such as to the next row, and the frame is dropped so focus is not pulled back.
+ *
+ * @param options The dialog element and whether the panel is still present.
+ * @returns Nothing. Focus is moved on the dialog element.
+ */
+const useDialogFocusSettle = ({ dialogRef, isPresent }) => {
+    React.useEffect(() => {
+        if (!isPresent)
+            return;
+        const stopWatching = () => {
+            document.removeEventListener('pointerdown', cancel, true);
+            document.removeEventListener('keydown', cancel, true);
+        };
+        const frame = requestAnimationFrame(() => {
+            stopWatching();
+            const dialog = dialogRef.current;
+            const focused = focus_utils.getFocusedElement();
+            if (dialog && !(focused && dialog.contains(focused)))
+                dialog.focus({ preventScroll: true });
+        });
+        const cancel = () => {
+            cancelAnimationFrame(frame);
+            stopWatching();
+        };
+        document.addEventListener('pointerdown', cancel, true);
+        document.addEventListener('keydown', cancel, true);
+        return cancel;
+    }, [dialogRef, isPresent]);
+};
+
+exports.useDialogFocusSettle = useDialogFocusSettle;
+//# sourceMappingURL=useDialogFocusSettle.cjs.map

package/dist/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogFocusSettle.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useDialogFocusSettle.ts"],"sourcesContent":[null],"names":["useEffect","getFocusedElement"],"mappings":";;;;;AAaA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAA+B,KAAU;IAClGA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,MAAM,YAAY,GAAG,MAAK;YACxB,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;AACvD,QAAA,CAAC;AACD,QAAA,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAK;AACvC,YAAA,YAAY,EAAE;AACd,YAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;AAChC,YAAA,MAAM,OAAO,GAAGC,6BAAiB,EAAE;AACnC,YAAA,IAAI,MAAM,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAAE,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AAC7F,QAAA,CAAC,CAAC;QACF,MAAM,MAAM,GAAG,MAAK;YAClB,oBAAoB,CAAC,KAAK,CAAC;AAC3B,YAAA,YAAY,EAAE;AAChB,QAAA,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC;AAClD,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAC5B;;"}