@flipdish/ui-library 0.29.0 → 0.31.0

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

@@ -1,25 +1,31 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { PageCoverContext } from '../../organisms/SidePanel/providers/page-cover-context.js';
+import { usePageCover } from './hooks/usePageCover.js';
 
 /**
  * Layout-only template for an app shell: navigation beside a content column that stacks the
- * header above the page, with an optional side panel that pushes the page instead of covering it.
- * The shell is exactly the height of the window and the document never scrolls: the page content
- * scrolls in its own area under the header, so the header, navigation and side panel stay in place
- * with no sticky positioning. It holds no state and renders whatever is passed to its slots, so the
- * app keeps ownership of navigation, search and panel state.
+ * header above the page, with an optional side panel under the header. The shell is exactly the
+ * height of the window and the document never scrolls: the page content scrolls in its own area
+ * under the header, so the header, navigation and side panel stay in place with no sticky
+ * positioning. It holds no state and renders whatever is passed to its slots, so the app keeps
+ * ownership of navigation, search and panel state.
  *
  * @summary window-height layout template placing navigation, header, a scrolling page area and a side panel
  */
 const AppShell = ({ sidebar, header, panel, children, scrollAreaProps, className, 'data-testid': dataTestId }) => {
     const appShellTestId = useResolvedTestId({ testId: dataTestId, segment: 'app-shell', rootName: 'app-shell' });
+    // A `SidePanel` in the `panel` slot calls the setter while it covers the page area below `lg`.
+    const { scrollAreaRef, setPageCovered } = usePageCover(scrollAreaProps?.ref);
     return (
     // A column below `lg`, so a navigation that renders its own mobile top bar stacks above the content.
-    jsxs("div", { "data-testid": appShellTestId, className: cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: [sidebar, jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxs("div", { className: "flex min-h-0 flex-1", children: [jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaProps?.ref, "data-testid": scrollAreaProps?.['data-testid'] ?? joinTestId(appShellTestId, 'scroll-area'), 
+    jsxs("div", { "data-testid": appShellTestId, className: cx('flex h-dvh w-full flex-col overflow-hidden bg-primary lg:flex-row', className), children: [sidebar, jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [header, jsxs("div", { className: "relative flex min-h-0 flex-1 overflow-clip", children: [jsx("div", { id: scrollAreaProps?.id, ref: scrollAreaRef, "data-testid": scrollAreaProps?.['data-testid'] ?? joinTestId(appShellTestId, 'scroll-area'), 
                                 // Focusable so keyboard users can scroll a page that has no focusable content of its own (axe: scrollable-region-focusable).
                                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrollable region must be reachable by keyboard
-                                tabIndex: 0, className: "flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), panel] })] })] }));
+                                tabIndex: 0, 
+                                // isolate keeps the page's own stacked content (sticky headers) under a panel that covers it.
+                                className: "isolate flex min-w-0 flex-1 flex-col overflow-y-auto outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2", children: children }), jsx(PageCoverContext.Provider, { value: setPageCovered, children: panel })] })] })] }));
 };
 
 export { AppShell };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAmCA;;;;;;;;;AASG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAE7G;;IAEEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC5H,OAAO,EAGRA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,aAClD,MAAM,EAEPA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,aAClCC,GAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,eAAe,EAAE,GAAG,iBACZ,eAAe,GAAG,aAAa,CAAC,IAAI,UAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,gCAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,yHAAyH,EAAA,QAAA,EAElI,QAAQ,EAAA,CACL,EAEL,KAAK,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/templates/AppShell/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAsCA;;;;;;;;;AASG;MACU,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAiB,KAAe;AAChJ,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;;AAE7G,IAAA,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,YAAY,CAAC,eAAe,EAAE,GAAG,CAAC;IAE5E;;IAEEA,IAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,mEAAmE,EAAE,SAAS,CAAC,aAC5H,OAAO,EAGRA,cAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClD,MAAM,EAGPA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDC,GAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,eAAe,EAAE,EAAE,EACvB,GAAG,EAAE,aAAa,EAAA,aAAA,EACL,eAAe,GAAG,aAAa,CAAC,IAAI,UAAU,CAAC,cAAc,EAAE,aAAa,CAAC;;;AAG1F,gCAAA,QAAQ,EAAE,CAAC;;gCAEX,SAAS,EAAC,iIAAiI,EAAA,QAAA,EAE1I,QAAQ,GACL,EAENA,GAAA,CAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAA,QAAA,EAAG,KAAK,GAA6B,CAAA,EAAA,CACjF,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var usePlatform = require('@flipdish/ui-library/hooks/usePlatform');
+var hotkeys_utils = require('../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
+
+/**
+ * Turns a shortcut into the label for the user's device: `mod+k` and `⌘K` both read `⌘K` on macOS and
+ * `Ctrl K` elsewhere. Serves every shortcut label in the library, whether the value is a real hotkey or
+ * display text: text that is not a hotkey (`Hold to talk`) is returned exactly as written. Reads as
+ * the non-Mac form on the server and during hydration.
+ *
+ * @param hotkey `react-hotkeys-hook` syntax (`mod+k`, `mod+slash`, a sequence such as `g>p`), the symbol
+ * shorthand (`⌘K`), a shortcut written out (`Ctrl+K`), or any other text.
+ * @returns The label, or `undefined` when nothing is given.
+ *
+ * @summary format a hotkey as a platform-aware label such as ⌘K or Ctrl K
+ */
+const useHotkeyHint = (hotkey, { commandOn = 'mac' } = {}) => {
+    const { isMac, isApple } = usePlatform.usePlatform();
+    return hotkey ? hotkeys_utils.formatHotkeyLabel(hotkey, commandOn === 'apple' ? isApple : isMac) : undefined;
+};
+
+exports.useHotkeyHint = useHotkeyHint;
+//# sourceMappingURL=useHotkeyHint.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.cjs","sources":["../../../../src/hooks/__internal__/useHotkeyHint/useHotkeyHint.ts"],"sourcesContent":[null],"names":["usePlatform","formatHotkeyLabel"],"mappings":";;;;;AAcA;;;;;;;;;;;AAWG;AACI,MAAM,aAAa,GAAG,CAAC,MAAiC,EAAE,EAAE,SAAS,GAAG,KAAK,EAAA,GAAwB,EAAE,KAAwB;IACpI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAGA,uBAAW,EAAE;IAExC,OAAO,MAAM,GAAGC,+BAAiB,CAAC,MAAM,EAAE,SAAS,KAAK,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,GAAG,SAAS;AAChG;;;;"}

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

@@ -0,0 +1,22 @@
+export interface HotkeyHintOptions {
+    /**
+     * Which devices press ⌘ for `mod`. `mac` matches `react-hotkeys-hook`, which uses ⌘ on macOS only.
+     * `apple` matches editors built on ProseMirror, which also use ⌘ on iPhone and iPad.
+     * @default "mac"
+     */
+    commandOn?: 'mac' | 'apple';
+}
+/**
+ * Turns a shortcut into the label for the user's device: `mod+k` and `⌘K` both read `⌘K` on macOS and
+ * `Ctrl K` elsewhere. Serves every shortcut label in the library, whether the value is a real hotkey or
+ * display text: text that is not a hotkey (`Hold to talk`) is returned exactly as written. Reads as
+ * the non-Mac form on the server and during hydration.
+ *
+ * @param hotkey `react-hotkeys-hook` syntax (`mod+k`, `mod+slash`, a sequence such as `g>p`), the symbol
+ * shorthand (`⌘K`), a shortcut written out (`Ctrl+K`), or any other text.
+ * @returns The label, or `undefined` when nothing is given.
+ *
+ * @summary format a hotkey as a platform-aware label such as ⌘K or Ctrl K
+ */
+export declare const useHotkeyHint: (hotkey: string | null | undefined, { commandOn }?: HotkeyHintOptions) => string | undefined;
+//# sourceMappingURL=useHotkeyHint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/__internal__/useHotkeyHint/useHotkeyHint.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,gBAAuB,iBAAsB,KAAG,MAAM,GAAG,SAIzH,CAAC"}

package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.js

@@ -0,0 +1,22 @@
+import { usePlatform } from '@flipdish/ui-library/hooks/usePlatform';
+import { formatHotkeyLabel } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
+
+/**
+ * Turns a shortcut into the label for the user's device: `mod+k` and `⌘K` both read `⌘K` on macOS and
+ * `Ctrl K` elsewhere. Serves every shortcut label in the library, whether the value is a real hotkey or
+ * display text: text that is not a hotkey (`Hold to talk`) is returned exactly as written. Reads as
+ * the non-Mac form on the server and during hydration.
+ *
+ * @param hotkey `react-hotkeys-hook` syntax (`mod+k`, `mod+slash`, a sequence such as `g>p`), the symbol
+ * shorthand (`⌘K`), a shortcut written out (`Ctrl+K`), or any other text.
+ * @returns The label, or `undefined` when nothing is given.
+ *
+ * @summary format a hotkey as a platform-aware label such as ⌘K or Ctrl K
+ */
+const useHotkeyHint = (hotkey, { commandOn = 'mac' } = {}) => {
+    const { isMac, isApple } = usePlatform();
+    return hotkey ? formatHotkeyLabel(hotkey, commandOn === 'apple' ? isApple : isMac) : undefined;
+};
+
+export { useHotkeyHint };
+//# sourceMappingURL=useHotkeyHint.js.map

package/dist/hooks/__internal__/useHotkeyHint/useHotkeyHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeyHint.js","sources":["../../../../src/hooks/__internal__/useHotkeyHint/useHotkeyHint.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAcA;;;;;;;;;;;AAWG;AACI,MAAM,aAAa,GAAG,CAAC,MAAiC,EAAE,EAAE,SAAS,GAAG,KAAK,EAAA,GAAwB,EAAE,KAAwB;IACpI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,WAAW,EAAE;IAExC,OAAO,MAAM,GAAG,iBAAiB,CAAC,MAAM,EAAE,SAAS,KAAK,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,GAAG,SAAS;AAChG;;;;"}

package/dist/hooks/__internal__/useKeySequences/useKeySequences.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var hotkeys_utils = require('../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
+var platform_utils = require('../../../utilities/__internal__/platformUtils/platform.utils.cjs');
+
+/**
+ * Listens for plain-key shortcuts typed anywhere on the page: single keys (`?`) and sequences
+ * (`g` then `p`), including sequences that share a first key, which `react-hotkeys-hook` cannot
+ * tell apart. Keys pressed with ⌘/Ctrl/Alt or Shift plus a letter, or while focus is in a field, are ignored so ordinary
+ * typing and other shortcuts are never hijacked. A sequence must be completed within `timeoutMs`
+ * of its previous key.
+ *
+ * @summary match single-key and multi-key plain shortcuts outside form fields
+ */
+const useKeySequences = (sequences, onMatch, timeoutMs = 1000) => {
+    const latest = React.useRef({ sequences, onMatch });
+    React.useEffect(() => {
+        latest.current = { sequences, onMatch };
+    });
+    const hasSequences = sequences.length > 0;
+    React.useEffect(() => {
+        if (!hasSequences)
+            return;
+        let buffer = [];
+        let lastKeyAt = 0;
+        const onKeyDown = (event) => {
+            // A key name longer than one character (Shift, Enter, ArrowDown) is not a typed character.
+            if (event.defaultPrevented || event.repeat || event.key.length !== 1 || hotkeys_utils.isTypingInField(event))
+                return;
+            // AltGr (reported as Ctrl+Alt on Windows) and Option on Apple keyboards type characters such as `@` or `[` on many layouts.
+            const os = platform_utils.getPlatformOs();
+            const typesCharacter = event.getModifierState('AltGraph') || ((os === 'macos' || os === 'ios') && event.altKey && !event.ctrlKey);
+            if (event.metaKey || ((event.ctrlKey || event.altKey) && !typesCharacter))
+                return;
+            // Shift plus a letter is its own shortcut (`⇧d`), not the letter.
+            if (event.shiftKey && event.key.toLowerCase() !== event.key.toUpperCase())
+                return;
+            const now = Date.now();
+            const result = hotkeys_utils.advanceKeySequence(now - lastKeyAt > timeoutMs ? [] : buffer, event.key.toLowerCase(), latest.current.sequences);
+            buffer = result.buffer;
+            lastKeyAt = now;
+            if (result.matched !== undefined) {
+                event.preventDefault();
+                latest.current.onMatch(result.matched);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [hasSequences, timeoutMs]);
+};
+
+exports.useKeySequences = useKeySequences;
+//# sourceMappingURL=useKeySequences.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeySequences.cjs","sources":["../../../../src/hooks/__internal__/useKeySequences/useKeySequences.ts"],"sourcesContent":[null],"names":["useRef","useEffect","isTypingInField","getPlatformOs","advanceKeySequence"],"mappings":";;;;;;AAMA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,SAAqB,EAAE,OAAgC,EAAE,SAAS,GAAG,IAAI,KAAU;IACjH,MAAM,MAAM,GAAGA,YAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;IAC7CC,eAAS,CAAC,MAAK;QACb,MAAM,CAAC,OAAO,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE;AACzC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC;IAEzCA,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;QAEnB,IAAI,MAAM,GAAa,EAAE;QACzB,IAAI,SAAS,GAAG,CAAC;AAEjB,QAAA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;;AAEzC,YAAA,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,IAAIC,6BAAe,CAAC,KAAK,CAAC;gBAAE;;AAEhG,YAAA,MAAM,EAAE,GAAGC,4BAAa,EAAE;AAC1B,YAAA,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,KAAK,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AACjI,YAAA,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;gBAAE;;AAE3E,YAAA,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE;gBAAE;AAE3E,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,YAAA,MAAM,MAAM,GAAGC,gCAAkB,CAAC,GAAG,GAAG,SAAS,GAAG,SAAS,GAAG,EAAE,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/H,YAAA,MAAM,GAAG,MAAM,CAAC,MAAM;YACtB,SAAS,GAAG,GAAG;AAEf,YAAA,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS,EAAE;gBAChC,KAAK,CAAC,cAAc,EAAE;gBACtB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC;YACxC;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC/B;;;;"}

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

@@ -0,0 +1,11 @@
+/**
+ * Listens for plain-key shortcuts typed anywhere on the page: single keys (`?`) and sequences
+ * (`g` then `p`), including sequences that share a first key, which `react-hotkeys-hook` cannot
+ * tell apart. Keys pressed with ⌘/Ctrl/Alt or Shift plus a letter, or while focus is in a field, are ignored so ordinary
+ * typing and other shortcuts are never hijacked. A sequence must be completed within `timeoutMs`
+ * of its previous key.
+ *
+ * @summary match single-key and multi-key plain shortcuts outside form fields
+ */
+export declare const useKeySequences: (sequences: string[][], onMatch: (index: number) => void, timeoutMs?: number) => void;
+//# sourceMappingURL=useKeySequences.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useKeySequences.d.ts","sourceRoot":"","sources":["../../../../src/hooks/__internal__/useKeySequences/useKeySequences.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,EAAE,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAE,kBAAgB,KAAG,IAsC3G,CAAC"}

package/dist/hooks/__internal__/useKeySequences/useKeySequences.js

@@ -0,0 +1,52 @@
+import { useRef, useEffect } from 'react';
+import { isTypingInField, advanceKeySequence } from '../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
+import { getPlatformOs } from '../../../utilities/__internal__/platformUtils/platform.utils.js';
+
+/**
+ * Listens for plain-key shortcuts typed anywhere on the page: single keys (`?`) and sequences
+ * (`g` then `p`), including sequences that share a first key, which `react-hotkeys-hook` cannot
+ * tell apart. Keys pressed with ⌘/Ctrl/Alt or Shift plus a letter, or while focus is in a field, are ignored so ordinary
+ * typing and other shortcuts are never hijacked. A sequence must be completed within `timeoutMs`
+ * of its previous key.
+ *
+ * @summary match single-key and multi-key plain shortcuts outside form fields
+ */
+const useKeySequences = (sequences, onMatch, timeoutMs = 1000) => {
+    const latest = useRef({ sequences, onMatch });
+    useEffect(() => {
+        latest.current = { sequences, onMatch };
+    });
+    const hasSequences = sequences.length > 0;
+    useEffect(() => {
+        if (!hasSequences)
+            return;
+        let buffer = [];
+        let lastKeyAt = 0;
+        const onKeyDown = (event) => {
+            // A key name longer than one character (Shift, Enter, ArrowDown) is not a typed character.
+            if (event.defaultPrevented || event.repeat || event.key.length !== 1 || isTypingInField(event))
+                return;
+            // AltGr (reported as Ctrl+Alt on Windows) and Option on Apple keyboards type characters such as `@` or `[` on many layouts.
+            const os = getPlatformOs();
+            const typesCharacter = event.getModifierState('AltGraph') || ((os === 'macos' || os === 'ios') && event.altKey && !event.ctrlKey);
+            if (event.metaKey || ((event.ctrlKey || event.altKey) && !typesCharacter))
+                return;
+            // Shift plus a letter is its own shortcut (`⇧d`), not the letter.
+            if (event.shiftKey && event.key.toLowerCase() !== event.key.toUpperCase())
+                return;
+            const now = Date.now();
+            const result = advanceKeySequence(now - lastKeyAt > timeoutMs ? [] : buffer, event.key.toLowerCase(), latest.current.sequences);
+            buffer = result.buffer;
+            lastKeyAt = now;
+            if (result.matched !== undefined) {
+                event.preventDefault();
+                latest.current.onMatch(result.matched);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [hasSequences, timeoutMs]);
+};
+
+export { useKeySequences };
+//# sourceMappingURL=useKeySequences.js.map

package/dist/hooks/__internal__/useKeySequences/useKeySequences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeySequences.js","sources":["../../../../src/hooks/__internal__/useKeySequences/useKeySequences.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAAG,CAAC,SAAqB,EAAE,OAAgC,EAAE,SAAS,GAAG,IAAI,KAAU;IACjH,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;IAC7C,SAAS,CAAC,MAAK;QACb,MAAM,CAAC,OAAO,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE;AACzC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC;IAEzC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;QAEnB,IAAI,MAAM,GAAa,EAAE;QACzB,IAAI,SAAS,GAAG,CAAC;AAEjB,QAAA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;;AAEzC,YAAA,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,IAAI,eAAe,CAAC,KAAK,CAAC;gBAAE;;AAEhG,YAAA,MAAM,EAAE,GAAG,aAAa,EAAE;AAC1B,YAAA,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,KAAK,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AACjI,YAAA,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,cAAc,CAAC;gBAAE;;AAE3E,YAAA,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE;gBAAE;AAE3E,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,YAAA,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,GAAG,SAAS,GAAG,SAAS,GAAG,EAAE,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/H,YAAA,MAAM,GAAG,MAAM,CAAC,MAAM;YACtB,SAAS,GAAG,GAAG;AAEf,YAAA,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS,EAAE;gBAChC,KAAK,CAAC,cAAc,EAAE;gBACtB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC;YACxC;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;QAC/C,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC/B;;;;"}

package/dist/hooks/usePlatform/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var platform_utils = require('../../utilities/__internal__/platformUtils/platform.utils.cjs');
+
+const subscribeToNothing = () => () => { };
+const getServerOs = () => 'unknown';
+/**
+ * Reports the operating system of the user's device, for wording that depends on it: a shortcut
+ * label, a download link, a help article. Detection reads the user agent, so treat it as a best
+ * guess and never as a reason to change behaviour; use `useBreakpoints` or feature detection for
+ * that. Every flag is `false` on the server and during hydration, then settles on the real device.
+ *
+ * @summary detect the user's operating system, safely across hydration
+ */
+const usePlatform = () => {
+    const os = React.useSyncExternalStore(subscribeToNothing, platform_utils.getPlatformOs, getServerOs);
+    return React.useMemo(() => ({ os, isMac: os === 'macos', isApple: os === 'macos' || os === 'ios', isWindows: os === 'windows' }), [os]);
+};
+
+exports.usePlatform = usePlatform;
+//# sourceMappingURL=index.cjs.map

package/dist/hooks/usePlatform/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/hooks/usePlatform/index.ts"],"sourcesContent":[null],"names":["useSyncExternalStore","getPlatformOs","useMemo"],"mappings":";;;;;AAmBA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AACzC,MAAM,WAAW,GAAG,MAAkB,SAAS;AAE/C;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,MAAmB;IAC5C,MAAM,EAAE,GAAGA,0BAAoB,CAAC,kBAAkB,EAAEC,4BAAa,EAAE,WAAW,CAAC;AAE/E,IAAA,OAAOC,aAAO,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnI;;;;"}

package/dist/hooks/usePlatform/index.d.ts

@@ -0,0 +1,22 @@
+import type { PlatformOs } from '../../utilities/__internal__/platformUtils/platform.utils';
+export type { PlatformOs };
+export interface PlatformInfo {
+    /** The operating system, or `unknown` on the server, during hydration and when it cannot be told. */
+    os: PlatformOs;
+    /** macOS only, where ⌘ is the primary shortcut modifier. Also true for an iPad in desktop mode, which reports itself as a Mac. */
+    isMac: boolean;
+    /** Any Apple device: macOS, iPhone or iPad. */
+    isApple: boolean;
+    /** Windows only, where the primary shortcut modifier is `ctrl`. */
+    isWindows: boolean;
+}
+/**
+ * Reports the operating system of the user's device, for wording that depends on it: a shortcut
+ * label, a download link, a help article. Detection reads the user agent, so treat it as a best
+ * guess and never as a reason to change behaviour; use `useBreakpoints` or feature detection for
+ * that. Every flag is `false` on the server and during hydration, then settles on the real device.
+ *
+ * @summary detect the user's operating system, safely across hydration
+ */
+export declare const usePlatform: () => PlatformInfo;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/usePlatform/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePlatform/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2DAA2D,CAAC;AAE5F,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,MAAM,WAAW,YAAY;IAC3B,qGAAqG;IACrG,EAAE,EAAE,UAAU,CAAC;IACf,kIAAkI;IAClI,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,mEAAmE;IACnE,SAAS,EAAE,OAAO,CAAC;CACpB;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,QAAO,YAI9B,CAAC"}

package/dist/hooks/usePlatform/index.js

@@ -0,0 +1,20 @@
+import { useSyncExternalStore, useMemo } from 'react';
+import { getPlatformOs } from '../../utilities/__internal__/platformUtils/platform.utils.js';
+
+const subscribeToNothing = () => () => { };
+const getServerOs = () => 'unknown';
+/**
+ * Reports the operating system of the user's device, for wording that depends on it: a shortcut
+ * label, a download link, a help article. Detection reads the user agent, so treat it as a best
+ * guess and never as a reason to change behaviour; use `useBreakpoints` or feature detection for
+ * that. Every flag is `false` on the server and during hydration, then settles on the real device.
+ *
+ * @summary detect the user's operating system, safely across hydration
+ */
+const usePlatform = () => {
+    const os = useSyncExternalStore(subscribeToNothing, getPlatformOs, getServerOs);
+    return useMemo(() => ({ os, isMac: os === 'macos', isApple: os === 'macos' || os === 'ios', isWindows: os === 'windows' }), [os]);
+};
+
+export { usePlatform };
+//# sourceMappingURL=index.js.map

package/dist/hooks/usePlatform/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/hooks/usePlatform/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAmBA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AACzC,MAAM,WAAW,GAAG,MAAkB,SAAS;AAE/C;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,MAAmB;IAC5C,MAAM,EAAE,GAAG,oBAAoB,CAAC,kBAAkB,EAAE,aAAa,EAAE,WAAW,CAAC;AAE/E,IAAA,OAAO,OAAO,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,OAAO,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACnI;;;;"}

package/dist/hooks/useSidePanel/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var useBreakpoints = require('@flipdish/ui-library/hooks/useBreakpoints');
+var localStorageUtils = require('@flipdish/ui-library/utilities/localStorageUtils');
+var React = require('react');
+
+const subscribeToNothing = () => () => { };
+const isPersisted = (persist, panel) => persist?.some((id) => id === panel) ?? false;
+/**
+ * State for one `SidePanel` slot shared by several panels, such as notifications and an assistant.
+ * It holds a single value, so only one panel is ever open, and it can remember chosen panels so they
+ * reopen on the next visit. Pass each header button `active === id` and `toggle(id)`, and pass
+ * `SidePanel` `isOpen` and `onOpenChange`.
+ *
+ * @summary one-at-a-time side panel state that can reopen a panel on the next visit
+ */
+const useSidePanel = ({ persist } = {}) => {
+    // undefined until the user opens or closes a panel; until then the remembered panel shows.
+    const [chosen, setChosen] = React.useState(undefined);
+    const isDesktop = useBreakpoints.useBreakpoints('lg');
+    // False on the server and while hydrating, so storage is first read once the markup already matches.
+    const canReadStorage = React.useSyncExternalStore(subscribeToNothing, () => true, () => false);
+    // Read once, on the first render that may: a later resize or a new `persist` array must not reopen a panel.
+    const remembered = React.useRef(undefined);
+    if (canReadStorage && remembered.current === undefined) {
+        const stored = isDesktop ? localStorageUtils.sidePanelStorage.get() : null;
+        remembered.current = stored !== null && isPersisted(persist, stored) ? stored : null;
+    }
+    const active = chosen === undefined ? (remembered.current ?? null) : chosen;
+    // The actions read these instead of closing over a render, so a memoised handler and two calls in one tick both see the latest state.
+    const latest = React.useRef({ active, persist });
+    React.useEffect(() => {
+        latest.current = { active, persist };
+    });
+    const actions = React.useMemo(() => {
+        const show = (panel) => {
+            latest.current.active = panel;
+            setChosen(panel);
+            const { persist: persisted } = latest.current;
+            if (!persisted?.length)
+                return;
+            if (panel !== null && isPersisted(persisted, panel))
+                localStorageUtils.sidePanelStorage.set(panel);
+            else
+                localStorageUtils.sidePanelStorage.clear();
+        };
+        return {
+            open: (panel) => show(panel),
+            toggle: (panel) => show(latest.current.active === panel ? null : panel),
+            close: () => show(null),
+            onOpenChange: (isOpen) => {
+                if (!isOpen)
+                    show(null);
+            },
+        };
+    }, []);
+    return { active, isOpen: active !== null, ...actions };
+};
+
+exports.useSidePanel = useSidePanel;
+//# sourceMappingURL=index.cjs.map

package/dist/hooks/useSidePanel/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useSidePanel/index.ts"],"sourcesContent":[null],"names":["useState","useBreakpoints","useSyncExternalStore","useRef","sidePanelStorage","useEffect","useMemo"],"mappings":";;;;;;AA6BA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AAEzC,MAAM,WAAW,GAAG,CAAmB,OAAiC,EAAE,KAAa,KAAiB,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,IAAI,KAAK;AAEpJ;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAmB,EAAE,OAAO,EAAA,GAA6B,EAAE,KAAuB;;IAE5G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAuB,SAAS,CAAC;AACrE,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;;AAEtC,IAAA,MAAM,cAAc,GAAGC,0BAAoB,CACzC,kBAAkB,EAClB,MAAM,IAAI,EACV,MAAM,KAAK,CACZ;;AAGD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAuB,SAAS,CAAC;IAC1D,IAAI,cAAc,IAAI,UAAU,CAAC,OAAO,KAAK,SAAS,EAAE;AACtD,QAAA,MAAM,MAAM,GAAG,SAAS,GAAGC,kCAAgB,CAAC,GAAG,EAAE,GAAG,IAAI;QACxD,UAAU,CAAC,OAAO,GAAG,MAAM,KAAK,IAAI,IAAI,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI;IACtF;AAEA,IAAA,MAAM,MAAM,GAAG,MAAM,KAAK,SAAS,IAAI,UAAU,CAAC,OAAO,IAAI,IAAI,IAAI,MAAM;;IAG3E,MAAM,MAAM,GAAGD,YAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;IAC1CE,eAAS,CAAC,MAAK;QACb,MAAM,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE;AACtC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGC,aAAO,CAAwE,MAAK;AAClG,QAAA,MAAM,IAAI,GAAG,CAAC,KAAe,KAAI;AAC/B,YAAA,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK;YAC7B,SAAS,CAAC,KAAK,CAAC;YAChB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO;YAC7C,IAAI,CAAC,SAAS,EAAE,MAAM;gBAAE;YACxB,IAAI,KAAK,KAAK,IAAI,IAAI,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC;AAAE,gBAAAF,kCAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;;gBAC3EA,kCAAgB,CAAC,KAAK,EAAE;AAC/B,QAAA,CAAC;QAED,OAAO;YACL,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAC5B,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;AACvE,YAAA,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;AACvB,YAAA,YAAY,EAAE,CAAC,MAAM,KAAI;AACvB,gBAAA,IAAI,CAAC,MAAM;oBAAE,IAAI,CAAC,IAAI,CAAC;YACzB,CAAC;SACF;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,EAAE,GAAG,OAAO,EAAE;AACxD;;;;"}

package/dist/hooks/useSidePanel/index.d.ts

@@ -0,0 +1,31 @@
+export interface UseSidePanelOptions<T extends string> {
+    /**
+     * Panels to reopen on the next visit, remembered in `localStorage`. A remembered panel reopens from
+     * `lg` only, since below it the panel would cover the page on load. Leave out to remember nothing.
+     */
+    persist?: readonly T[];
+}
+export interface SidePanelState<T extends string> {
+    /** The open panel, or `null` when none is open. */
+    active: T | null;
+    /** Whether any panel is open. Pass it to `SidePanel`'s `isOpen`. */
+    isOpen: boolean;
+    /** Opens a panel, replacing the one that is open. */
+    open: (panel: T) => void;
+    /** Opens a panel, or closes it when it is the one already open. Use it for a header button. */
+    toggle: (panel: T) => void;
+    /** Closes whichever panel is open. */
+    close: () => void;
+    /** Closes the panel when called with `false`. Pass it to `SidePanel`'s `onOpenChange`. */
+    onOpenChange: (isOpen: boolean) => void;
+}
+/**
+ * State for one `SidePanel` slot shared by several panels, such as notifications and an assistant.
+ * It holds a single value, so only one panel is ever open, and it can remember chosen panels so they
+ * reopen on the next visit. Pass each header button `active === id` and `toggle(id)`, and pass
+ * `SidePanel` `isOpen` and `onOpenChange`.
+ *
+ * @summary one-at-a-time side panel state that can reopen a panel on the next visit
+ */
+export declare const useSidePanel: <T extends string>({ persist }?: UseSidePanelOptions<T>) => SidePanelState<T>;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useSidePanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSidePanel/index.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM;IAC9C,mDAAmD;IACnD,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,oEAAoE;IACpE,MAAM,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,+FAA+F;IAC/F,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,0FAA0F;IAC1F,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM,EAAE,cAAa,mBAAmB,CAAC,CAAC,CAAM,KAAG,cAAc,CAAC,CAAC,CA+CzG,CAAC"}

package/dist/hooks/useSidePanel/index.js

@@ -0,0 +1,59 @@
+import { useBreakpoints } from '@flipdish/ui-library/hooks/useBreakpoints';
+import { sidePanelStorage } from '@flipdish/ui-library/utilities/localStorageUtils';
+import { useState, useSyncExternalStore, useRef, useEffect, useMemo } from 'react';
+
+const subscribeToNothing = () => () => { };
+const isPersisted = (persist, panel) => persist?.some((id) => id === panel) ?? false;
+/**
+ * State for one `SidePanel` slot shared by several panels, such as notifications and an assistant.
+ * It holds a single value, so only one panel is ever open, and it can remember chosen panels so they
+ * reopen on the next visit. Pass each header button `active === id` and `toggle(id)`, and pass
+ * `SidePanel` `isOpen` and `onOpenChange`.
+ *
+ * @summary one-at-a-time side panel state that can reopen a panel on the next visit
+ */
+const useSidePanel = ({ persist } = {}) => {
+    // undefined until the user opens or closes a panel; until then the remembered panel shows.
+    const [chosen, setChosen] = useState(undefined);
+    const isDesktop = useBreakpoints('lg');
+    // False on the server and while hydrating, so storage is first read once the markup already matches.
+    const canReadStorage = useSyncExternalStore(subscribeToNothing, () => true, () => false);
+    // Read once, on the first render that may: a later resize or a new `persist` array must not reopen a panel.
+    const remembered = useRef(undefined);
+    if (canReadStorage && remembered.current === undefined) {
+        const stored = isDesktop ? sidePanelStorage.get() : null;
+        remembered.current = stored !== null && isPersisted(persist, stored) ? stored : null;
+    }
+    const active = chosen === undefined ? (remembered.current ?? null) : chosen;
+    // The actions read these instead of closing over a render, so a memoised handler and two calls in one tick both see the latest state.
+    const latest = useRef({ active, persist });
+    useEffect(() => {
+        latest.current = { active, persist };
+    });
+    const actions = useMemo(() => {
+        const show = (panel) => {
+            latest.current.active = panel;
+            setChosen(panel);
+            const { persist: persisted } = latest.current;
+            if (!persisted?.length)
+                return;
+            if (panel !== null && isPersisted(persisted, panel))
+                sidePanelStorage.set(panel);
+            else
+                sidePanelStorage.clear();
+        };
+        return {
+            open: (panel) => show(panel),
+            toggle: (panel) => show(latest.current.active === panel ? null : panel),
+            close: () => show(null),
+            onOpenChange: (isOpen) => {
+                if (!isOpen)
+                    show(null);
+            },
+        };
+    }, []);
+    return { active, isOpen: active !== null, ...actions };
+};
+
+export { useSidePanel };
+//# sourceMappingURL=index.js.map

package/dist/hooks/useSidePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useSidePanel/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AA6BA,MAAM,kBAAkB,GAAG,MAAM,MAAK,EAAE,CAAC;AAEzC,MAAM,WAAW,GAAG,CAAmB,OAAiC,EAAE,KAAa,KAAiB,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,IAAI,KAAK;AAEpJ;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAmB,EAAE,OAAO,EAAA,GAA6B,EAAE,KAAuB;;IAE5G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAuB,SAAS,CAAC;AACrE,IAAA,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC;;AAEtC,IAAA,MAAM,cAAc,GAAG,oBAAoB,CACzC,kBAAkB,EAClB,MAAM,IAAI,EACV,MAAM,KAAK,CACZ;;AAGD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAuB,SAAS,CAAC;IAC1D,IAAI,cAAc,IAAI,UAAU,CAAC,OAAO,KAAK,SAAS,EAAE;AACtD,QAAA,MAAM,MAAM,GAAG,SAAS,GAAG,gBAAgB,CAAC,GAAG,EAAE,GAAG,IAAI;QACxD,UAAU,CAAC,OAAO,GAAG,MAAM,KAAK,IAAI,IAAI,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI;IACtF;AAEA,IAAA,MAAM,MAAM,GAAG,MAAM,KAAK,SAAS,IAAI,UAAU,CAAC,OAAO,IAAI,IAAI,IAAI,MAAM;;IAG3E,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;IAC1C,SAAS,CAAC,MAAK;QACb,MAAM,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE;AACtC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,OAAO,CAAwE,MAAK;AAClG,QAAA,MAAM,IAAI,GAAG,CAAC,KAAe,KAAI;AAC/B,YAAA,MAAM,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK;YAC7B,SAAS,CAAC,KAAK,CAAC;YAChB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO;YAC7C,IAAI,CAAC,SAAS,EAAE,MAAM;gBAAE;YACxB,IAAI,KAAK,KAAK,IAAI,IAAI,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC;AAAE,gBAAA,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;;gBAC3E,gBAAgB,CAAC,KAAK,EAAE;AAC/B,QAAA,CAAC;QAED,OAAO;YACL,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAC5B,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC;AACvE,YAAA,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;AACvB,YAAA,YAAY,EAAE,CAAC,MAAM,KAAI;AACvB,gBAAA,IAAI,CAAC,MAAM;oBAAE,IAAI,CAAC,IAAI,CAAC;YACzB,CAAC;SACF;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,EAAE,GAAG,OAAO,EAAE;AACxD;;;;"}

package/dist/native/components/organisms/SidePanel/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `SidePanel` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/components/organisms/SidePanel` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `SidePanel` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/hooks/usePlatform/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `usePlatform` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/hooks/usePlatform` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `usePlatform` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/hooks/useSidePanel/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `useSidePanel` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/hooks/useSidePanel` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `useSidePanel` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/utilities/__internal__/focusUtils/focus.utils.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+/** The element that has keyboard focus, or `null` on the server and when focus rests on the page itself. */
+const getFocusedElement = () => {
+    if (typeof document === 'undefined')
+        return null;
+    const { activeElement } = document;
+    return activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null;
+};
+
+exports.getFocusedElement = getFocusedElement;
+//# sourceMappingURL=focus.utils.cjs.map

package/dist/utilities/__internal__/focusUtils/focus.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.utils.cjs","sources":["../../../../src/utilities/__internal__/focusUtils/focus.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACO,MAAM,iBAAiB,GAAG,MAAyB;IACxD,IAAI,OAAO,QAAQ,KAAK,WAAW;AAAE,QAAA,OAAO,IAAI;AAChD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ;AAElC,IAAA,OAAO,aAAa,YAAY,WAAW,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,GAAG,aAAa,GAAG,IAAI;AACvG;;;;"}

package/dist/utilities/__internal__/focusUtils/focus.utils.d.ts

@@ -0,0 +1,3 @@
+/** The element that has keyboard focus, or `null` on the server and when focus rests on the page itself. */
+export declare const getFocusedElement: () => HTMLElement | null;
+//# sourceMappingURL=focus.utils.d.ts.map

package/dist/utilities/__internal__/focusUtils/focus.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.utils.d.ts","sourceRoot":"","sources":["../../../../src/utilities/__internal__/focusUtils/focus.utils.ts"],"names":[],"mappings":"AAAA,4GAA4G;AAC5G,eAAO,MAAM,iBAAiB,QAAO,WAAW,GAAG,IAKlD,CAAC"}

package/dist/utilities/__internal__/focusUtils/focus.utils.js

@@ -0,0 +1,10 @@
+/** The element that has keyboard focus, or `null` on the server and when focus rests on the page itself. */
+const getFocusedElement = () => {
+    if (typeof document === 'undefined')
+        return null;
+    const { activeElement } = document;
+    return activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null;
+};
+
+export { getFocusedElement };
+//# sourceMappingURL=focus.utils.js.map

package/dist/utilities/__internal__/focusUtils/focus.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.utils.js","sources":["../../../../src/utilities/__internal__/focusUtils/focus.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACO,MAAM,iBAAiB,GAAG,MAAyB;IACxD,IAAI,OAAO,QAAQ,KAAK,WAAW;AAAE,QAAA,OAAO,IAAI;AAChD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ;AAElC,IAAA,OAAO,aAAa,YAAY,WAAW,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,GAAG,aAAa,GAAG,IAAI;AACvG;;;;"}