@flipdish/ui-library 0.30.0 → 0.31.0

package/dist/components/organisms/SidePanel/components/side-panel-content.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+
+/** The scrolling body. It takes the height the header and footer leave. */
+const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    return (jsxRuntime.jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'content') : undefined), className: cx.cx('flex min-h-0 w-full flex-1 flex-col gap-6 overflow-y-auto px-4 lg:px-6', className) }));
+};
+SidePanelContent.displayName = 'SidePanelContent';
+
+exports.SidePanelContent = SidePanelContent;
+//# sourceMappingURL=side-panel-content.cjs.map

package/dist/components/organisms/SidePanel/components/side-panel-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-content.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-content.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAWA;AACO,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;AAEhC,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,EAC/E,SAAS,EAAEC,KAAE,CAAC,wEAAwE,EAAE,SAAS,CAAC,EAAA,CAClG;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-content.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithRef } from 'react';
+export type SidePanelContentProps = ComponentPropsWithRef<'div'> & {
+    /** Overrides the content's `data-testid` (defaults to `<root>--content`). */
+    'data-testid'?: string;
+};
+/** The scrolling body. It takes the height the header and footer leave. */
+export declare const SidePanelContent: {
+    ({ className, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=side-panel-content.d.ts.map

package/dist/components/organisms/SidePanel/components/side-panel-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-content.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-content.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;yDAAwD,qBAAqB;;CAUzG,CAAC"}

package/dist/components/organisms/SidePanel/components/side-panel-content.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+
+/** The scrolling body. It takes the height the header and footer leave. */
+const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    return (jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'content') : undefined), className: cx('flex min-h-0 w-full flex-1 flex-col gap-6 overflow-y-auto px-4 lg:px-6', className) }));
+};
+SidePanelContent.displayName = 'SidePanelContent';
+
+export { SidePanelContent };
+//# sourceMappingURL=side-panel-content.js.map

package/dist/components/organisms/SidePanel/components/side-panel-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-content.js","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-content.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAWA;AACO,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AAC5G,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAEhC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,EAC/E,SAAS,EAAE,EAAE,CAAC,wEAAwE,EAAE,SAAS,CAAC,EAAA,CAClG;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-footer.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+
+/** Pinned actions under the content, such as a message input. */
+const SidePanelFooter = ({ className, 'data-testid': dataTestId, ...props }) => {
+    const prefix = testIdUtils.useTestIdPrefix();
+    return (jsxRuntime.jsx("footer", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'footer') : undefined), className: cx.cx('w-full px-4 pb-4 lg:px-6 lg:pb-5', className) }));
+};
+SidePanelFooter.displayName = 'SidePanelFooter';
+
+exports.SidePanelFooter = SidePanelFooter;
+//# sourceMappingURL=side-panel-footer.cjs.map

package/dist/components/organisms/SidePanel/components/side-panel-footer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-footer.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-footer.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAWA;AACO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC1G,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;AAEhC,IAAA,QACEC,cAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAEC,KAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAAA,CAC5D;AAEN;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-footer.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithRef } from 'react';
+export type SidePanelFooterProps = ComponentPropsWithRef<'footer'> & {
+    /** Overrides the footer's `data-testid` (defaults to `<root>--footer`). */
+    'data-testid'?: string;
+};
+/** Pinned actions under the content, such as a message input. */
+export declare const SidePanelFooter: {
+    ({ className, "data-testid": dataTestId, ...props }: SidePanelFooterProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=side-panel-footer.d.ts.map

package/dist/components/organisms/SidePanel/components/side-panel-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-footer.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-footer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,GAAG;IACnE,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,eAAe;yDAAwD,oBAAoB;;CAUvG,CAAC"}

package/dist/components/organisms/SidePanel/components/side-panel-footer.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+
+/** Pinned actions under the content, such as a message input. */
+const SidePanelFooter = ({ className, 'data-testid': dataTestId, ...props }) => {
+    const prefix = useTestIdPrefix();
+    return (jsx("footer", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'footer') : undefined), className: cx('w-full px-4 pb-4 lg:px-6 lg:pb-5', className) }));
+};
+SidePanelFooter.displayName = 'SidePanelFooter';
+
+export { SidePanelFooter };
+//# sourceMappingURL=side-panel-footer.js.map

package/dist/components/organisms/SidePanel/components/side-panel-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-footer.js","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-footer.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAWA;AACO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AAC1G,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAEhC,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAAA,CAC5D;AAEN;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-header.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var CloseButton = require('@flipdish/ui-library/components/atoms/CloseButton');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
+var sidePanelContext = require('../providers/side-panel-context.cjs');
+
+/** Title area with a close button, which closes the panel unless `onClose` is passed. */
+const SidePanelHeader = ({ className, children, onClose, closeLabel, 'data-testid': dataTestId, ...props }) => {
+    const panel = React.useContext(sidePanelContext.SidePanelContext);
+    const prefix = testIdUtils.useTestIdPrefix();
+    return (jsxRuntime.jsxs("header", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'header') : undefined), className: cx.cx('relative w-full px-4 pt-6 pb-8 lg:px-6', className), children: [children, jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined), className: "absolute top-3 right-3 shrink-0", onClick: onClose ?? panel?.close, "data-testid": prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined })] }));
+};
+SidePanelHeader.displayName = 'SidePanelHeader';
+
+exports.SidePanelHeader = SidePanelHeader;
+//# sourceMappingURL=side-panel-header.cjs.map

package/dist/components/organisms/SidePanel/components/side-panel-header.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-header.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-header.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","_jsxs","joinTestId","cx","_jsx","CloseButton"],"mappings":";;;;;;;;;AAkBA;MACa,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AACzI,IAAA,MAAM,KAAK,GAAGA,gBAAU,CAACC,iCAAgB,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAGC,2BAAe,EAAE;AAEhC,IAAA,QACEC,eAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,iBACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAEC,KAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEjE,QAAQ,EACTC,cAAA,CAACC,uBAAW,IACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,KAAK,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAC,EACjE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,EAAA,aAAA,EACnB,MAAM,GAAGH,sBAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAA,CAC7D,CAAA,EAAA,CACK;AAEb;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-header.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface SidePanelHeaderProps extends ComponentPropsWithRef<'header'> {
+    /** Runs instead of closing the panel when the close button is pressed. */
+    onClose?: () => void;
+    /** Accessible name of the close button. Defaults to "Close" followed by the panel's `aria-label`. */
+    closeLabel?: string;
+    /** Overrides the header's `data-testid` (defaults to `<root>--header`). */
+    'data-testid'?: string;
+}
+/** Title area with a close button, which closes the panel unless `onClose` is passed. */
+export declare const SidePanelHeader: {
+    ({ className, children, onClose, closeLabel, "data-testid": dataTestId, ...props }: SidePanelHeaderProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=side-panel-header.d.ts.map

package/dist/components/organisms/SidePanel/components/side-panel-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-header.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-header.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAC3E,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,yFAAyF;AACzF,eAAO,MAAM,eAAe;wFAAuF,oBAAoB;;CAoBtI,CAAC"}

package/dist/components/organisms/SidePanel/components/side-panel-header.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { useContext } from 'react';
+import { SidePanelContext } from '../providers/side-panel-context.js';
+
+/** Title area with a close button, which closes the panel unless `onClose` is passed. */
+const SidePanelHeader = ({ className, children, onClose, closeLabel, 'data-testid': dataTestId, ...props }) => {
+    const panel = useContext(SidePanelContext);
+    const prefix = useTestIdPrefix();
+    return (jsxs("header", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'header') : undefined), className: cx('relative w-full px-4 pt-6 pb-8 lg:px-6', className), children: [children, jsx(CloseButton, { size: "md", label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined), className: "absolute top-3 right-3 shrink-0", onClick: onClose ?? panel?.close, "data-testid": prefix ? joinTestId(prefix, 'close') : undefined })] }));
+};
+SidePanelHeader.displayName = 'SidePanelHeader';
+
+export { SidePanelHeader };
+//# sourceMappingURL=side-panel-header.js.map

package/dist/components/organisms/SidePanel/components/side-panel-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-header.js","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-header.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAkBA;MACa,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAwB,KAAI;AACzI,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,gBAAgB,CAAC;AAC1C,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAEhC,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EAAA,GACM,KAAK,iBACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,EAC9E,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEjE,QAAQ,EACTC,GAAA,CAAC,WAAW,IACV,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,KAAK,CAAC,KAAK,CAAA,CAAE,GAAG,SAAS,CAAC,EACjE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,EAAA,aAAA,EACnB,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAA,CAC7D,CAAA,EAAA,CACK;AAEb;AACA,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-region.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var react = require('motion/react');
+var React = require('react');
+var usePanelFocus = require('../hooks/usePanelFocus.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;
+const SPRING = { type: 'spring', damping: 26, stiffness: 220, bounce: 0 };
+const DOCKED = {
+    closed: { width: 0, x: 0 },
+    open: { width: SIDE_PANEL_WIDTH, x: 0 },
+};
+const FULL_PAGE = {
+    closed: { width: '100%', x: '100%' },
+    open: { width: '100%', x: 0 },
+};
+/** The rendered region. A component of its own so it can tell, while animating out, that it is leaving. */
+const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, testId, isDesktop, shouldFocusOnMount }) => {
+    const panelRef = React.useRef(null);
+    const isPresent = react.useIsPresent();
+    const shouldReduceMotion = react.useReducedMotion();
+    const { onFocusCapture } = usePanelFocus.usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount });
+    // Crossing the breakpoint while open swaps the layout at once; only opening and closing animate.
+    const previousIsDesktop = React.useRef(isDesktop);
+    const hasCrossedBreakpoint = previousIsDesktop.current !== isDesktop;
+    React.useEffect(() => {
+        previousIsDesktop.current = isDesktop;
+    }, [isDesktop]);
+    const motionStates = isDesktop ? DOCKED : FULL_PAGE;
+    return (jsxRuntime.jsx(react.motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId, 
+        // Focusable by script only, so opening can land on the region without adding a tab stop.
+        tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING, 
+        // overflow-hidden clips the fixed-width content while the panel's own width animates.
+        className: cx.cx('flex h-full min-h-0 shrink-0 overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: children }) }));
+};
+
+exports.SIDE_PANEL_WIDTH = SIDE_PANEL_WIDTH;
+exports.SidePanelRegion = SidePanelRegion;
+//# sourceMappingURL=side-panel-region.cjs.map

package/dist/components/organisms/SidePanel/components/side-panel-region.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-region.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-region.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","usePanelFocus","useEffect","_jsx","motion","cx"],"mappings":";;;;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAElF,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;AAWV;MACa,eAAe,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAwB,KAAI;AAC/I,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,CAAC;;AAGhG,IAAA,MAAM,iBAAiB,GAAGH,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;;AAEjF,QAAA,SAAS,EAAEC,KAAE,CACX,sIAAsI,EACtI,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,EAAA,QAAA,EAGDF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,KAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EAAA,CAClH;AAEnB;;;;;"}

package/dist/components/organisms/SidePanel/components/side-panel-region.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
+export declare const SIDE_PANEL_WIDTH = 400;
+interface SidePanelRegionProps {
+    'aria-label': string;
+    children: ReactNode;
+    className?: string;
+    testId: string;
+    isDesktop: boolean;
+    shouldFocusOnMount: boolean;
+}
+/** The rendered region. A component of its own so it can tell, while animating out, that it is leaving. */
+export declare const SidePanelRegion: ({ "aria-label": ariaLabel, children, className, testId, isDesktop, shouldFocusOnMount }: SidePanelRegionProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=side-panel-region.d.ts.map

package/dist/components/organisms/SidePanel/components/side-panel-region.d.ts.map

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

package/dist/components/organisms/SidePanel/components/side-panel-region.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useIsPresent, useReducedMotion, motion } from 'motion/react';
+import { useRef, useEffect } from 'react';
+import { usePanelFocus } from '../hooks/usePanelFocus.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;
+const SPRING = { type: 'spring', damping: 26, stiffness: 220, bounce: 0 };
+const DOCKED = {
+    closed: { width: 0, x: 0 },
+    open: { width: SIDE_PANEL_WIDTH, x: 0 },
+};
+const FULL_PAGE = {
+    closed: { width: '100%', x: '100%' },
+    open: { width: '100%', x: 0 },
+};
+/** The rendered region. A component of its own so it can tell, while animating out, that it is leaving. */
+const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, testId, isDesktop, shouldFocusOnMount }) => {
+    const panelRef = useRef(null);
+    const isPresent = useIsPresent();
+    const shouldReduceMotion = useReducedMotion();
+    const { onFocusCapture } = usePanelFocus({ panelRef, isPresent, isDesktop, shouldFocusOnMount });
+    // Crossing the breakpoint while open swaps the layout at once; only opening and closing animate.
+    const previousIsDesktop = useRef(isDesktop);
+    const hasCrossedBreakpoint = previousIsDesktop.current !== isDesktop;
+    useEffect(() => {
+        previousIsDesktop.current = isDesktop;
+    }, [isDesktop]);
+    const motionStates = isDesktop ? DOCKED : FULL_PAGE;
+    return (jsx(motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId, 
+        // Focusable by script only, so opening can land on the region without adding a tab stop.
+        tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING, 
+        // overflow-hidden clips the fixed-width content while the panel's own width animates.
+        className: cx('flex h-full min-h-0 shrink-0 overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: children }) }));
+};
+
+export { SIDE_PANEL_WIDTH, SidePanelRegion };
+//# sourceMappingURL=side-panel-region.js.map

package/dist/components/organisms/SidePanel/components/side-panel-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-region.js","sources":["../../../../../src/components/organisms/SidePanel/components/side-panel-region.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAQA;AACO,MAAM,gBAAgB,GAAG;AAEhC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAW;AAElF,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;AAWV;MACa,eAAe,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAwB,KAAI;AAC/I,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,CAAC;;AAGhG,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;;AAEjF,QAAA,SAAS,EAAE,EAAE,CACX,sIAAsI,EACtI,CAAC,SAAS,IAAI,iCAAiC,EAC/C,SAAS,CACV,EAAA,QAAA,EAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,GAAG,iCAAiC,GAAG,QAAQ,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EAAA,CAClH;AAEnB;;;;"}

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+
+const subscribeToNothing = () => () => { };
+/**
+ * Tells the panel whether opening should move focus into it. A panel that is already open when the
+ * page loads must not pull focus away from the page, and "when the page loads" means the first render
+ * that knows the viewport: on the server and while hydrating nothing renders, so state restored right
+ * after hydration still counts as open on load.
+ *
+ * @returns whether the viewport is known yet, and whether an opening panel should take focus
+ */
+const useOpenOnMount = (isOpen) => {
+    // False on the server and while hydrating, where the viewport is unknown. True at once in a client-only app.
+    const canMeasureViewport = React.useSyncExternalStore(subscribeToNothing, () => true, () => false);
+    const wasOpenOnMount = React.useRef(null);
+    if (canMeasureViewport && wasOpenOnMount.current === null)
+        wasOpenOnMount.current = isOpen;
+    React.useEffect(() => {
+        // Once it has been closed, the next open is the user's doing and takes focus.
+        if (canMeasureViewport && !isOpen)
+            wasOpenOnMount.current = false;
+    }, [canMeasureViewport, isOpen]);
+    return { canMeasureViewport, shouldFocusOnMount: !wasOpenOnMount.current };
+};
+
+exports.useOpenOnMount = useOpenOnMount;
+//# sourceMappingURL=useOpenOnMount.cjs.map

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenOnMount.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/useOpenOnMount.ts"],"sourcesContent":[null],"names":["useSyncExternalStore","useRef","useEffect"],"mappings":";;;;AAIA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AAEzC;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,CAAC,MAAe,KAAI;;AAEhD,IAAA,MAAM,kBAAkB,GAAGA,0BAAoB,CAC7C,kBAAkB,EAClB,MAAM,IAAI,EACV,MAAM,KAAK,CACZ;AAED,IAAA,MAAM,cAAc,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAI,kBAAkB,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI;AAAE,QAAA,cAAc,CAAC,OAAO,GAAG,MAAM;IAC1FC,eAAS,CAAC,MAAK;;QAEb,IAAI,kBAAkB,IAAI,CAAC,MAAM;AAAE,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AACnE,IAAA,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAEhC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE;AAC5E;;;;"}

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tells the panel whether opening should move focus into it. A panel that is already open when the
+ * page loads must not pull focus away from the page, and "when the page loads" means the first render
+ * that knows the viewport: on the server and while hydrating nothing renders, so state restored right
+ * after hydration still counts as open on load.
+ *
+ * @returns whether the viewport is known yet, and whether an opening panel should take focus
+ */
+export declare const useOpenOnMount: (isOpen: boolean) => {
+    canMeasureViewport: boolean;
+    shouldFocusOnMount: boolean;
+};
+//# sourceMappingURL=useOpenOnMount.d.ts.map

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenOnMount.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/useOpenOnMount.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,OAAO;;;CAgB7C,CAAC"}

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.js

@@ -0,0 +1,27 @@
+import { useSyncExternalStore, useRef, useEffect } from 'react';
+
+const subscribeToNothing = () => () => { };
+/**
+ * Tells the panel whether opening should move focus into it. A panel that is already open when the
+ * page loads must not pull focus away from the page, and "when the page loads" means the first render
+ * that knows the viewport: on the server and while hydrating nothing renders, so state restored right
+ * after hydration still counts as open on load.
+ *
+ * @returns whether the viewport is known yet, and whether an opening panel should take focus
+ */
+const useOpenOnMount = (isOpen) => {
+    // False on the server and while hydrating, where the viewport is unknown. True at once in a client-only app.
+    const canMeasureViewport = useSyncExternalStore(subscribeToNothing, () => true, () => false);
+    const wasOpenOnMount = useRef(null);
+    if (canMeasureViewport && wasOpenOnMount.current === null)
+        wasOpenOnMount.current = isOpen;
+    useEffect(() => {
+        // Once it has been closed, the next open is the user's doing and takes focus.
+        if (canMeasureViewport && !isOpen)
+            wasOpenOnMount.current = false;
+    }, [canMeasureViewport, isOpen]);
+    return { canMeasureViewport, shouldFocusOnMount: !wasOpenOnMount.current };
+};
+
+export { useOpenOnMount };
+//# sourceMappingURL=useOpenOnMount.js.map

package/dist/components/organisms/SidePanel/hooks/useOpenOnMount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenOnMount.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/useOpenOnMount.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AAEzC;;;;;;;AAOG;AACI,MAAM,cAAc,GAAG,CAAC,MAAe,KAAI;;AAEhD,IAAA,MAAM,kBAAkB,GAAG,oBAAoB,CAC7C,kBAAkB,EAClB,MAAM,IAAI,EACV,MAAM,KAAK,CACZ;AAED,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAI,kBAAkB,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI;AAAE,QAAA,cAAc,CAAC,OAAO,GAAG,MAAM;IAC1F,SAAS,CAAC,MAAK;;QAEb,IAAI,kBAAkB,IAAI,CAAC,MAAM;AAAE,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AACnE,IAAA,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAEhC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE;AAC5E;;;;"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.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;
+};
+/**
+ * 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.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+    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.
+            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.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]);
+    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)) {
+            panel.focus({ preventScroll: true });
+        }
+    }, [panelRef, isDesktop]);
+    // 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;
+    };
+    return { onFocusCapture };
+};
+
+exports.usePanelFocus = usePanelFocus;
+//# sourceMappingURL=usePanelFocus.cjs.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.cjs","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":["useRef","useState","getFocusedElement","useEffect"],"mappings":";;;;;AAMA;AACA,MAAM,sBAAsB,GAAG,CAAC,KAAkB,KAAwB;AACxE,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,sBAAsB;AAE5C,IAAA,OAAO,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;AACjF,CAAC;AAYD;;;;;;AAMG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAwB,KAAI;AAC5G,IAAA,MAAM,SAAS,GAAGA,YAAM,CAAqB,IAAI,CAAC;AAClD,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,SAAS,CAAC;;IAE3C,MAAM,CAAC,kBAAkB,CAAC,GAAGC,cAAQ,CAAqBC,6BAAiB,CAAC;IAE5EC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO;AAC1C,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;;AAErC,QAAA,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,KAAK,KAAK,KAAK,QAAQ,KAAK,IAAI,IAAI,kBAAkB,CAAC,CAAC;QACjG,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,KAAK,IAAI;AACjD,QAAA,MAAM,OAAO,GAAGD,6BAAiB,EAAE;AACnC,QAAA,MAAM,cAAc,GAAG,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC;;AAGlE,QAAA,IAAI,SAAS;AAAE,YAAA,KAAK,CAAC,KAAK,GAAG,KAAK;QAClC,IAAI,UAAU,EAAE;;AAEd,YAAA,SAAS,CAAC,OAAO,GAAG,QAAQ,KAAK,IAAI,GAAG,kBAAkB,GAAG,OAAO;;;AAGpE,YAAA,IAAI,CAAC,cAAc;gBAAE,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QAC3D;;AAEA,QAAA,IAAI,SAAS,IAAI,cAAc,EAAE;AAC/B,YAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;;AAEhC,YAAA,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,sBAAsB,CAAC,KAAK,CAAC,GAAG,KAAK,EAAE;QACzE;;AAEA,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,KAAK,CAAC,KAAK,GAAG,IAAI;IACpC,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAEjEC,eAAS,CAAC,MAAK;QACb,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,OAAO,IAAI,CAAC,SAAS;AACtE,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AAErC,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,MAAM,OAAO,GAAGD,6BAAiB,EAAE;;QAEnC,IAAI,sBAAsB,IAAI,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE;YACpH,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QACtC;AACF,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;;AAGzB,IAAA,MAAM,cAAc,GAAG,CAAC,KAA8B,KAAI;AACxD,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa;AAChC,QAAA,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,YAAY,WAAW,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC;AAAE,YAAA,SAAS,CAAC,OAAO,GAAG,IAAI;AAChI,IAAA,CAAC;IAED,OAAO,EAAE,cAAc,EAAE;AAC3B;;;;"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts

@@ -0,0 +1,22 @@
+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;
+    /** False for a panel that is open on the first render, which must not pull focus away from the page. */
+    shouldFocusOnMount: boolean;
+}
+/**
+ * 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.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }: UsePanelFocusOptions) => {
+    onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
+};
+export {};
+//# sourceMappingURL=usePanelFocus.d.ts.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWnD,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,wGAAwG;IACxG,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,wDAAwD,oBAAoB;4BAmDzE,UAAU,CAAC,WAAW,CAAC;CAMvD,CAAC"}

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js

@@ -0,0 +1,74 @@
+import { useRef, useState, useEffect } from 'react';
+import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
+
+/** 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;
+};
+/**
+ * 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.
+ *
+ * @returns a capture-phase focus handler to spread onto the panel element
+ */
+const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount }) => {
+    const openerRef = useRef(null);
+    const previousIsPresent = useRef(null);
+    const previousIsDesktop = useRef(isDesktop);
+    // Read while rendering, before the content mounts: an `autoFocus` input takes focus during commit, ahead of any effect.
+    const [focusedBeforeMount] = useState(getFocusedElement);
+    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 = 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.
+            (opener?.isConnected ? opener : focusableSiblingBefore(panel))?.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]);
+    useEffect(() => {
+        const hasStartedCoveringPage = previousIsDesktop.current && !isDesktop;
+        previousIsDesktop.current = isDesktop;
+        const panel = panelRef.current;
+        const focused = 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)) {
+            panel.focus({ preventScroll: true });
+        }
+    }, [panelRef, isDesktop]);
+    // 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;
+    };
+    return { onFocusCapture };
+};
+
+export { usePanelFocus };
+//# sourceMappingURL=usePanelFocus.js.map

package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelFocus.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAMA;AACA,MAAM,sBAAsB,GAAG,CAAC,KAAkB,KAAwB;AACxE,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,sBAAsB;AAE5C,IAAA,OAAO,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI;AACjF,CAAC;AAYD;;;;;;AAMG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAwB,KAAI;AAC5G,IAAA,MAAM,SAAS,GAAG,MAAM,CAAqB,IAAI,CAAC;AAClD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;;IAE3C,MAAM,CAAC,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,iBAAiB,CAAC;IAE5E,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO;AAC1C,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;;AAErC,QAAA,MAAM,UAAU,GAAG,SAAS,KAAK,QAAQ,KAAK,KAAK,KAAK,QAAQ,KAAK,IAAI,IAAI,kBAAkB,CAAC,CAAC;QACjG,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,KAAK,IAAI;AACjD,QAAA,MAAM,OAAO,GAAG,iBAAiB,EAAE;AACnC,QAAA,MAAM,cAAc,GAAG,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC;;AAGlE,QAAA,IAAI,SAAS;AAAE,YAAA,KAAK,CAAC,KAAK,GAAG,KAAK;QAClC,IAAI,UAAU,EAAE;;AAEd,YAAA,SAAS,CAAC,OAAO,GAAG,QAAQ,KAAK,IAAI,GAAG,kBAAkB,GAAG,OAAO;;;AAGpE,YAAA,IAAI,CAAC,cAAc;gBAAE,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QAC3D;;AAEA,QAAA,IAAI,SAAS,IAAI,cAAc,EAAE;AAC/B,YAAA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO;;AAEhC,YAAA,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,sBAAsB,CAAC,KAAK,CAAC,GAAG,KAAK,EAAE;QACzE;;AAEA,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,KAAK,CAAC,KAAK,GAAG,IAAI;IACpC,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IAEjE,SAAS,CAAC,MAAK;QACb,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,OAAO,IAAI,CAAC,SAAS;AACtE,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AAErC,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,MAAM,OAAO,GAAG,iBAAiB,EAAE;;QAEnC,IAAI,sBAAsB,IAAI,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE;YACpH,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;QACtC;AACF,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;;AAGzB,IAAA,MAAM,cAAc,GAAG,CAAC,KAA8B,KAAI;AACxD,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa;AAChC,QAAA,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,YAAY,WAAW,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC;AAAE,YAAA,SAAS,CAAC,OAAO,GAAG,IAAI;AAChI,IAAA,CAAC;IAED,OAAO,EAAE,cAAc,EAAE;AAC3B;;;;"}