@flipdish/ui-library 0.42.0 → 0.43.0

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Link03, FileIcon, Stars02, Edit04, DownloadCloud02, RefreshCcw02, Copy01 } from '@flipdish/ui-icons';
+import { FileIcon, Link03, Stars02, Edit04, DownloadCloud02, RefreshCcw02, Copy01 } from '@flipdish/ui-icons';
 import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
 import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
 import { cx } from '@flipdish/ui-library/utilities/cx';
@@ -9,8 +9,14 @@ import { Button } from 'react-aria-components';
 /** Delivery tick for a message, showing sent, read or failed with a tooltip that names the state. */
 const MessageStatus = ({ status, readAt, 'data-testid': dataTestId }) => {
     const messageStatusTestId = useResolvedTestId({ testId: dataTestId, segment: 'message-status', rootName: 'message-status' });
-    const statusLabel = status === 'sent' ? 'Message unread' : status === 'read' ? `Message read${readAt ? ` ${readAt}` : ''}` : 'Message failed to send, retry';
-    return (jsx(Tooltip, { title: status === 'sent' ? 'Unread' : status === 'read' ? `Read${readAt ? ` ${readAt}` : ''}` : 'Failed', children: jsx(Button, { "aria-label": statusLabel, "data-testid": messageStatusTestId, className: "focus:outline-hidden", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [status === 'sent' && (jsx("path", { d: "M13 5L7 11L4 8", className: "stroke-fg-quaternary", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), status === 'read' && (jsx("path", { d: "M10.5 5L4.5 11L1.5 8M14.5 5L8.5 11L6.5 9", className: "stroke-fg-brand-secondary", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), status === 'failed' && (jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 5C7.25 4.58579 7.58579 4.25 8 4.25C8.41421 4.25 8.75 4.58579 8.75 5V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V5ZM8 11.75C8.41421 11.75 8.75 11.4142 8.75 11C8.75 10.5858 8.41421 10.25 8 10.25C7.58579 10.25 7.25 10.5858 7.25 11C7.25 11.4142 7.58579 11.75 8 11.75Z", className: "fill-fg-error-primary" }))] }) }) }));
+    const readSuffix = readAt ? ` ${readAt}` : '';
+    const statusLabel = {
+        sent: 'Message unread',
+        read: `Message read${readSuffix}`,
+        failed: 'Message failed to send, retry',
+    }[status];
+    const tooltipTitle = { sent: 'Unread', read: `Read${readSuffix}`, failed: 'Failed' }[status];
+    return (jsx(Tooltip, { title: tooltipTitle, children: jsx(Button, { "aria-label": statusLabel, "data-testid": messageStatusTestId, className: "focus:outline-hidden", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [status === 'sent' && (jsx("path", { d: "M13 5L7 11L4 8", className: "stroke-fg-quaternary", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), status === 'read' && (jsx("path", { d: "M10.5 5L4.5 11L1.5 8M14.5 5L8.5 11L6.5 9", className: "stroke-fg-brand-secondary", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })), status === 'failed' && (jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 5C7.25 4.58579 7.58579 4.25 8 4.25C8.41421 4.25 8.75 4.58579 8.75 5V8.5C8.75 8.91421 8.41421 9.25 8 9.25C7.58579 9.25 7.25 8.91421 7.25 8.5V5ZM8 11.75C8.41421 11.75 8.75 11.4142 8.75 11C8.75 10.5858 8.41421 10.25 8 10.25C7.58579 10.25 7.25 10.5858 7.25 11C7.25 11.4142 7.58579 11.75 8 11.75Z", className: "fill-fg-error-primary" }))] }) }) }));
 };
 /**
  * One chat bubble in a conversation thread, aligned left for incoming and right for outgoing
@@ -24,9 +30,21 @@ const MessageItem = ({ msg, showUserLabel = true, 'data-testid': dataTestId, ...
     const renderActions = () => (jsxs("div", { className: "dark-mode absolute right-2 -bottom-5 z-1 flex gap-1.5 rounded-lg bg-primary_alt px-2 py-1.5 opacity-0 shadow-xl transition duration-100 ease-linear group-hover/msg:opacity-100", children: [jsx("button", { title: "Generate with AI", "aria-label": "Generate with AI", className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(Stars02, { className: "size-4" }) }), (msg.text || msg.attachment || msg.audio || msg.image) && (
             // biome-ignore lint/a11y/useButtonType: we don't need a type for this button
             jsx("button", { title: msg.text ? 'Edit message' : 'Download', "aria-label": msg.text ? 'Edit message' : 'Download', className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: msg.text ? jsx(Edit04, { className: "size-4" }) : jsx(DownloadCloud02, { className: "size-4" }) })), jsx("button", { title: "Reply", "aria-label": "Reply", className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(RefreshCcw02, { className: "size-4" }) }), jsx("button", { title: "Copy", "aria-label": "Copy", className: "cursor-pointer rounded p-0.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx(Copy01, { className: "size-4" }) })] }));
-    return (jsx(TestIdProvider, { value: messageItemTestId, children: jsxs("li", { ...props, "data-testid": messageItemTestId, className: cx('relative flex items-start gap-3', msg.user?.me ? 'self-end pl-10' : 'pr-8 lg:pr-10', props.className), children: [msg.user && !msg.user.me && jsx(Avatar, { src: msg.user.avatarUrl, alt: msg.user.name ?? '', size: "sm", status: msg.user.status }), jsxs("article", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [((msg.user && showUserLabel) || msg.sentAt || msg.status) && (jsxs("header", { className: "flex items-center gap-2", children: [msg.user && showUserLabel && (jsx("cite", { className: "flex-1 truncate text-sm font-medium text-secondary not-italic", children: msg.user.me ? 'You' : msg.user.name })), !msg.typing && (msg.sentAt || msg.status) && (jsxs("div", { className: "flex items-center gap-0.5", children: [msg.sentAt && (jsx("time", { className: "text-xs text-tertiary", dateTime: msg.sentAt, children: msg.sentAt })), msg.status && jsx(MessageStatus, { status: msg.status, readAt: msg.readAt })] }))] })), msg.text ? (jsxs("div", { className: cx('group/msg relative rounded-lg px-3 py-2 text-md wrap-break-word text-primary ring-1 ring-secondary ring-inset', msg.user?.me ? 'rounded-tr-none bg-primary pr-4' : 'rounded-tl-none bg-secondary', 
-                            // Link styles
-                            '[&_a]:rounded-xs [&_a]:text-brand-secondary [&_a]:underline [&_a]:underline-offset-2 [&_a]:outline-focus-ring [&_a]:transition [&_a]:duration-100 [&_a]:ease-linear [&_a]:hover:text-brand-secondary_hover [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2'), children: [msg.reply && (jsx("blockquote", { className: "relative mb-1.5 rounded-lg bg-primary px-3 py-2 text-sm text-tertiary ring-1 ring-secondary ring-inset before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border-l-[3px] before:border-brand", children: msg.reply.text })), msg.image && (jsx("figure", { className: "mt-1 mb-1.5", children: jsx("img", { src: msg.image.src, alt: msg.image.alt, className: "w-full rounded-md object-cover outline-1 -outline-offset-[0.5px] outline-black/10" }) })), msg.urlPreview && (jsxs("aside", { className: "mt-1 mb-1.5 flex items-start gap-1.5 rounded-lg bg-primary p-2 pr-3 ring-1 ring-secondary ring-inset", children: [jsx(Link03, { className: "mt-0.5 size-4 shrink-0 text-fg-quaternary" }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "w-full truncate text-sm font-medium text-secondary", children: msg.urlPreview.title }), jsx("p", { className: "w-full truncate text-sm text-tertiary", children: msg.urlPreview.description })] })] })), msg.text, renderActions()] })) : msg.image ? (jsxs("figure", { className: "flex flex-col gap-1.5", children: [jsxs("div", { className: "group/msg relative", children: [jsx("img", { src: msg.image.src, alt: msg.image.alt, className: "w-full rounded-md object-cover outline-1 -outline-offset-[0.5px] outline-black/10" }), renderActions()] }), jsxs("figcaption", { className: "flex items-center gap-1", children: [jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: msg.image.name }), jsx("span", { className: "text-sm text-tertiary", children: msg.image.size })] })] })) : msg.audio ? (jsxs("div", { className: "group/msg relative flex items-center gap-2 rounded-lg rounded-tl-none bg-primary p-3 ring-1 ring-secondary", children: [jsx("button", { "aria-label": "Play audio message", className: "flex size-8 cursor-pointer items-center justify-center rounded-full bg-fg-brand-primary_alt outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx("svg", { width: "12.8", height: "14", viewBox: "0 0 16 16", fill: "none", className: "translate-x-[1px] text-fg-white", children: jsx("path", { d: "M2.19995 2.86327C2.19995 1.61155 3.57248 0.844595 4.63851 1.50061L12.9856 6.63731C14.0009 7.26209 14.0009 8.73784 12.9856 9.36262L4.63851 14.4993C3.57247 15.1553 2.19995 14.3884 2.19995 13.1367V2.86327Z", fill: "currentColor" }) }) }), jsx("svg", { width: "206", height: "34", viewBox: "0 0 206 34", fill: "none", className: "flex-1 text-fg-brand-primary_alt", children: jsx("path", { d: "M1 15V19M5 15V19M9 15V19M13 15V19M17 9.00005V25M21 5.00005V29M25 1.00005V33M29 1.00005V33M33 5.00005V29M37 13V21M41 9.00005V25M45 13V21M49 5.00005V29M53 5.00005V29M57 9.00005V25M61 9.00005V25M65 1.00005V33M69 1.00005V33M73 5.00005V29M77 1.00005V33M81 9.00005V25M85 13V21M89 15V19.0001M93 15V19.0001M97 13V21.0001M101 13V21.0001M105 9V25.0001M109 5V29.0001M113 1V33.0001M117 5V29.0001M121 5V29.0001M125 5V29.0001M129 9V25.0001M133 13V21.0001M137 9V25.0001M141 13V21.0001M145 9V25.0001M149 5V29.0001M153 5V29.0001M157 9V25.0001M161 1V33.0001M165 5V29.0001M169 9V25.0001M173 13V21.0001M177 15V19.0001M181 9V25.0001M185 5V29.0001M189 5V29.0001M193 9V25.0001M197 15V19.0001M201 15V19.0001M205 15V19.0001", stroke: "currentColor", strokeLinecap: "round" }) }), jsx("p", { className: "text-xs text-tertiary", children: msg.audio.duration }), renderActions()] })) : null, msg.attachment && (jsxs("div", { className: "group/msg relative flex gap-3 rounded-lg rounded-tl-none bg-primary px-3.5 py-2.5 ring-1 ring-secondary", children: [jsx(FileIcon, { type: msg.attachment.type, theme: "light", className: "size-10 dark:hidden" }), jsx(FileIcon, { type: msg.attachment.type, theme: "dark", className: "size-10 not-dark:hidden" }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "truncate text-sm font-medium text-secondary", children: msg.attachment.name }), jsx("p", { className: "text-sm text-tertiary", children: msg.attachment.size })] }), renderActions()] })), msg.reactions && msg.reactions.length > 0 && (jsx("ul", { className: "flex justify-end gap-1", children: msg.reactions?.map((reaction) => (jsxs("li", { className: "flex h-6 items-center gap-1 rounded-2xl bg-secondary px-2 py-0.5 ring-1 ring-secondary ring-inset", children: [reaction.content, reaction.count > 1 && jsx("span", { className: "text-sm font-medium text-secondary", children: reaction.count })] }, reaction.content))) })), msg.typing && (jsxs("div", { className: "flex h-7 w-10 items-center justify-center gap-1 self-start rounded-lg rounded-tl-none bg-secondary text-md text-primary ring-1 ring-secondary ring-inset", children: [jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary [animation-delay:-0.3s]" }), jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-quaternary [animation-delay:-0.15s]" }), jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary" })] }))] })] }, msg.id) }));
+    const renderBody = () => {
+        if (msg.text) {
+            return (jsxs("div", { className: cx('group/msg relative rounded-lg px-3 py-2 text-md wrap-break-word text-primary ring-1 ring-secondary ring-inset', msg.user?.me ? 'rounded-tr-none bg-primary pr-4' : 'rounded-tl-none bg-secondary', 
+                // Link styles
+                '[&_a]:rounded-xs [&_a]:text-brand-secondary [&_a]:underline [&_a]:underline-offset-2 [&_a]:outline-focus-ring [&_a]:transition [&_a]:duration-100 [&_a]:ease-linear [&_a]:hover:text-brand-secondary_hover [&_a]:focus-visible:outline-2 [&_a]:focus-visible:outline-offset-2'), children: [msg.reply && (jsx("blockquote", { className: "relative mb-1.5 rounded-lg bg-primary px-3 py-2 text-sm text-tertiary ring-1 ring-secondary ring-inset before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border-l-[3px] before:border-brand", children: msg.reply.text })), msg.image && (jsx("figure", { className: "mt-1 mb-1.5", children: jsx("img", { src: msg.image.src, alt: msg.image.alt, className: "w-full rounded-md object-cover outline-1 -outline-offset-[0.5px] outline-black/10" }) })), msg.urlPreview && (jsxs("aside", { className: "mt-1 mb-1.5 flex items-start gap-1.5 rounded-lg bg-primary p-2 pr-3 ring-1 ring-secondary ring-inset", children: [jsx(Link03, { className: "mt-0.5 size-4 shrink-0 text-fg-quaternary" }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "w-full truncate text-sm font-medium text-secondary", children: msg.urlPreview.title }), jsx("p", { className: "w-full truncate text-sm text-tertiary", children: msg.urlPreview.description })] })] })), msg.text, renderActions()] }));
+        }
+        if (msg.image) {
+            return (jsxs("figure", { className: "flex flex-col gap-1.5", children: [jsxs("div", { className: "group/msg relative", children: [jsx("img", { src: msg.image.src, alt: msg.image.alt, className: "w-full rounded-md object-cover outline-1 -outline-offset-[0.5px] outline-black/10" }), renderActions()] }), jsxs("figcaption", { className: "flex items-center gap-1", children: [jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: msg.image.name }), jsx("span", { className: "text-sm text-tertiary", children: msg.image.size })] })] }));
+        }
+        if (msg.audio) {
+            return (jsxs("div", { className: "group/msg relative flex items-center gap-2 rounded-lg rounded-tl-none bg-primary p-3 ring-1 ring-secondary", children: [jsx("button", { "aria-label": "Play audio message", className: "flex size-8 cursor-pointer items-center justify-center rounded-full bg-fg-brand-primary_alt outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2", children: jsx("svg", { width: "12.8", height: "14", viewBox: "0 0 16 16", fill: "none", className: "translate-x-[1px] text-fg-white", children: jsx("path", { d: "M2.19995 2.86327C2.19995 1.61155 3.57248 0.844595 4.63851 1.50061L12.9856 6.63731C14.0009 7.26209 14.0009 8.73784 12.9856 9.36262L4.63851 14.4993C3.57247 15.1553 2.19995 14.3884 2.19995 13.1367V2.86327Z", fill: "currentColor" }) }) }), jsx("svg", { width: "206", height: "34", viewBox: "0 0 206 34", fill: "none", className: "flex-1 text-fg-brand-primary_alt", children: jsx("path", { d: "M1 15V19M5 15V19M9 15V19M13 15V19M17 9.00005V25M21 5.00005V29M25 1.00005V33M29 1.00005V33M33 5.00005V29M37 13V21M41 9.00005V25M45 13V21M49 5.00005V29M53 5.00005V29M57 9.00005V25M61 9.00005V25M65 1.00005V33M69 1.00005V33M73 5.00005V29M77 1.00005V33M81 9.00005V25M85 13V21M89 15V19.0001M93 15V19.0001M97 13V21.0001M101 13V21.0001M105 9V25.0001M109 5V29.0001M113 1V33.0001M117 5V29.0001M121 5V29.0001M125 5V29.0001M129 9V25.0001M133 13V21.0001M137 9V25.0001M141 13V21.0001M145 9V25.0001M149 5V29.0001M153 5V29.0001M157 9V25.0001M161 1V33.0001M165 5V29.0001M169 9V25.0001M173 13V21.0001M177 15V19.0001M181 9V25.0001M185 5V29.0001M189 5V29.0001M193 9V25.0001M197 15V19.0001M201 15V19.0001M205 15V19.0001", stroke: "currentColor", strokeLinecap: "round" }) }), jsx("p", { className: "text-xs text-tertiary", children: msg.audio.duration }), renderActions()] }));
+        }
+        return null;
+    };
+    return (jsx(TestIdProvider, { value: messageItemTestId, children: jsxs("li", { ...props, "data-testid": messageItemTestId, className: cx('relative flex items-start gap-3', msg.user?.me ? 'self-end pl-10' : 'pr-8 lg:pr-10', props.className), children: [msg.user && !msg.user.me && jsx(Avatar, { src: msg.user.avatarUrl, alt: msg.user.name ?? '', size: "sm", status: msg.user.status }), jsxs("article", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [((msg.user && showUserLabel) || msg.sentAt || msg.status) && (jsxs("header", { className: "flex items-center gap-2", children: [msg.user && showUserLabel && (jsx("cite", { className: "flex-1 truncate text-sm font-medium text-secondary not-italic", children: msg.user.me ? 'You' : msg.user.name })), !msg.typing && (msg.sentAt || msg.status) && (jsxs("div", { className: "flex items-center gap-0.5", children: [msg.sentAt && (jsx("time", { className: "text-xs text-tertiary", dateTime: msg.sentAt, children: msg.sentAt })), msg.status && jsx(MessageStatus, { status: msg.status, readAt: msg.readAt })] }))] })), renderBody(), msg.attachment && (jsxs("div", { className: "group/msg relative flex gap-3 rounded-lg rounded-tl-none bg-primary px-3.5 py-2.5 ring-1 ring-secondary", children: [jsx(FileIcon, { type: msg.attachment.type, theme: "light", className: "size-10 dark:hidden" }), jsx(FileIcon, { type: msg.attachment.type, theme: "dark", className: "size-10 not-dark:hidden" }), jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "truncate text-sm font-medium text-secondary", children: msg.attachment.name }), jsx("p", { className: "text-sm text-tertiary", children: msg.attachment.size })] }), renderActions()] })), msg.reactions && msg.reactions.length > 0 && (jsx("ul", { className: "flex justify-end gap-1", children: msg.reactions?.map((reaction) => (jsxs("li", { className: "flex h-6 items-center gap-1 rounded-2xl bg-secondary px-2 py-0.5 ring-1 ring-secondary ring-inset", children: [reaction.content, reaction.count > 1 && jsx("span", { className: "text-sm font-medium text-secondary", children: reaction.count })] }, reaction.content))) })), msg.typing && (jsxs("div", { className: "flex h-7 w-10 items-center justify-center gap-1 self-start rounded-lg rounded-tl-none bg-secondary text-md text-primary ring-1 ring-secondary ring-inset", children: [jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary [animation-delay:-0.3s]" }), jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-quaternary [animation-delay:-0.15s]" }), jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary" })] }))] })] }, msg.id) }));
 };
 
 export { MessageItem, MessageStatus };

package/dist/components/organisms/Messaging/index.js.map

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

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

@@ -13,7 +13,8 @@ const focusableSiblingBefore = (panel) => {
  * 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
+ * @returns a capture-phase focus handler to spread onto the panel element, and `setOpener`, which points the hand-back on
+ *   close at another control after a content swap
  */
 const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }) => {
     const openerRef = React.useRef(null);
@@ -80,7 +81,11 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, con
         if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
             openerRef.current = from;
     };
-    return { onFocusCapture };
+    // A panel whose content swaps while open follows the user's latest gesture, so closing lands on the row they are on, not the first one.
+    const setOpener = React.useCallback((element) => {
+        openerRef.current = element;
+    }, []);
+    return { onFocusCapture, setOpener };
 };
 
 exports.usePanelFocus = usePanelFocus;

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

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

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

@@ -15,10 +15,12 @@ interface UsePanelFocusOptions {
  * 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
+ * @returns a capture-phase focus handler to spread onto the panel element, and `setOpener`, which points the hand-back on
+ *   close at another control after a content swap
  */
 export declare const usePanelFocus: ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }: UsePanelFocusOptions) => {
     onFocusCapture: (event: FocusEvent<HTMLElement>) => void;
+    setOpener: (element: HTMLElement) => void;
 };
 export {};
 //# sourceMappingURL=usePanelFocus.d.ts.map

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

@@ -1 +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;IAC5B,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,oEAAoE,oBAAoB;4BA6DrF,UAAU,CAAC,WAAW,CAAC;CAMvD,CAAC"}
+{"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;IAC5B,6GAA6G;IAC7G,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,oEAAoE,oBAAoB;4BA6DrF,UAAU,CAAC,WAAW,CAAC;yBAMd,WAAW;CAKpD,CAAC"}

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

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { useRef, useState, useEffect, useLayoutEffect, useCallback } 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. */
@@ -11,7 +11,8 @@ const focusableSiblingBefore = (panel) => {
  * 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
+ * @returns a capture-phase focus handler to spread onto the panel element, and `setOpener`, which points the hand-back on
+ *   close at another control after a content swap
  */
 const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, contentKey }) => {
     const openerRef = useRef(null);
@@ -78,7 +79,11 @@ const usePanelFocus = ({ panelRef, isPresent, isDesktop, shouldFocusOnMount, con
         if (openerRef.current === null && from instanceof HTMLElement && !event.currentTarget.contains(from))
             openerRef.current = from;
     };
-    return { onFocusCapture };
+    // A panel whose content swaps while open follows the user's latest gesture, so closing lands on the row they are on, not the first one.
+    const setOpener = useCallback((element) => {
+        openerRef.current = element;
+    }, []);
+    return { onFocusCapture, setOpener };
 };
 
 export { usePanelFocus };

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

@@ -1 +1 @@
-{"version":3,"file":"usePanelFocus.js","sources":["../../../../../src/components/organisms/SidePanel/hooks/usePanelFocus.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"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;AAcD;;;;;;;AAOG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAwB,KAAI;AACxH,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;;;AAIzB,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC;IAC7C,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,kBAAkB,CAAC,OAAO,KAAK,UAAU;YAAE;AAC/C,QAAA,kBAAkB,CAAC,OAAO,GAAG,UAAU;AACvC,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,KAAK,IAAI,SAAS,IAAI,iBAAiB,EAAE,KAAK,IAAI;YAAE,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;IAC9F,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;;AAGrC,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;;AAGD,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAAoB,KAAI;AACrD,QAAA,SAAS,CAAC,OAAO,GAAG,OAAO;IAC7B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE;AACtC;;"}

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

@@ -0,0 +1,121 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var react = require('motion/react');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var focus_utils = require('../../../../utilities/__internal__/focusUtils/focus.utils.cjs');
+var hotkeys_utils = require('../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.cjs');
+var usePanelFocus = require('../../SidePanel/hooks/usePanelFocus.cjs');
+var useSlideoutState = require('../hooks/useSlideoutState.cjs');
+var OverlayBounds_context = require('../providers/OverlayBounds.context.cjs');
+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' };
+/** The panel itself. A component of its own so it can tell, while animating out, that it is leaving. */
+const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId, isKeyboardDismissDisabled, children, className, dialogClassName, }) => {
+    const panelRef = React.useRef(null);
+    const dialogRef = React.useRef(null);
+    const isPresent = react.useIsPresent();
+    const shouldReduceMotion = react.useReducedMotion();
+    // 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]);
+    // react-aria's `useDialog` already focuses the dialog on mount; this hook is here for the hand-back on close and the inert exit,
+    // and `shouldFocusOnMount` is what makes it record the opener. The panel never covers the page, so `isDesktop` stays true.
+    const { onFocusCapture, setOpener } = usePanelFocus.usePanelFocus({ panelRef: dialogRef, isPresent, isDesktop: true, 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 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.
+    const [announcement, setAnnouncement] = React.useState('');
+    const lastTitle = React.useRef(null);
+    const announceTitle = React.useCallback((title) => {
+        const previous = lastTitle.current;
+        lastTitle.current = title;
+        if (previous === null || title === previous)
+            return;
+        const focused = focus_utils.getFocusedElement();
+        if (focused && panelRef.current?.contains(focused))
+            return;
+        // The control that swapped the content is what closing hands focus back to, not the one that first opened the panel.
+        if (focused)
+            setOpener(focused);
+        setAnnouncement(title);
+    }, [setOpener]);
+    return (
+    // The clip box covers exactly the page area and takes no clicks, so the slide-in is cut at the area's edge instead of
+    // crossing the header or a docked panel, and the panel's width is a share of the area, not of the viewport.
+    jsxRuntime.jsx("div", { style: boundsStyle, className: "pointer-events-none fixed z-50 overflow-clip", children: jsxRuntime.jsxs(react.motion.div, { ref: panelRef, onKeyDown: overlayProps.onKeyDown, onFocusCapture: onFocusCapture, initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%', transition: shouldReduceMotion ? { duration: 0 } : SLIDE_OUT }, transition: shouldReduceMotion ? { duration: 0 } : SLIDE, 
+            // Below `lg` the panel fills the page area, as a side panel does; from `lg` it is 400px, or the area when that is narrower.
+            className: cx.cx('pointer-events-auto absolute inset-y-0 right-0 flex w-full shadow-xl lg:max-w-[min(25rem,100%)]', className), children: [jsxRuntime.jsx(SlideoutMenu_context.SlideoutMenuContext.Provider, { value: { close: openState.close, label, announceTitle }, children: jsxRuntime.jsx(reactAria.FocusScope, { restoreFocus: true, children: jsxRuntime.jsx(reactAriaComponents.Dialog, { ref: dialogRef, role: "dialog", "aria-label": label, "aria-labelledby": labelledBy, "data-testid": rootTestId, className: cx.cx('relative flex size-full flex-col items-start gap-6 overflow-y-auto bg-primary ring-1 ring-secondary_alt outline-hidden', dialogClassName), children: ({ close }) => (typeof children === 'function' ? children({ close }) : children) }) }) }), jsxRuntime.jsx("output", { className: "sr-only", children: announcement })] }) }));
+};
+/**
+ * Non-modal shell: portals the panel to the app's overlay root, keeps it mounted through its exit slide,
+ * and shares the open state with a surrounding `SlideoutMenu.Trigger`. Nothing is dimmed, locked or
+ * made inert; the page behind stays usable.
+ */
+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 });
+    // As react-aria's Modal does: explicit open props win over a surrounding Trigger's state.
+    const openState = isOpen !== undefined || defaultOpen !== undefined || !triggerState ? local : triggerState;
+    const measured = React.useContext(OverlayBounds_context.OverlayBoundsContext);
+    const boundsStyle = slideoutMenu_utils.resolveSlideoutBounds(bounds, measured);
+    // 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, isKeyboardDismissDisabled: isKeyboardDismissDisabled, className: className, dialogClassName: dialogClassName, children: children }) }) }, "slideout-menu")) }) }));
+};
+SlideoutShell.displayName = 'SlideoutShell';
+
+exports.SlideoutShell = SlideoutShell;
+//# sourceMappingURL=SlideoutShell.cjs.map

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

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

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { SlideoutBounds } from '../utilities/slideoutMenu.utils';
+/** What the render-prop form of `children` receives. */
+export interface SlideoutRenderProps {
+    /** Closes the panel. */
+    close: () => void;
+}
+export interface SlideoutShellProps {
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    isKeyboardDismissDisabled?: boolean;
+    bounds?: SlideoutBounds;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    children: ReactNode | ((state: SlideoutRenderProps) => ReactNode);
+    className?: string;
+    dialogClassName?: string;
+    'data-testid'?: string;
+}
+/**
+ * Non-modal shell: portals the panel to the app's overlay root, keeps it mounted through its exit slide,
+ * and shares the open state with a surrounding `SlideoutMenu.Trigger`. Nothing is dimmed, locked or
+ * made inert; the page behind stays usable.
+ */
+export declare const SlideoutShell: {
+    ({ 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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideoutShell.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SlideoutMenu/components/SlideoutShell.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAWtD,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;AA0ID;;;;GAIG;AACH,eAAO,MAAM,aAAa;yMAYvB,kBAAkB;;CAmCpB,CAAC"}

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

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
+import { AnimatePresence, useIsPresent, useReducedMotion, motion } from 'motion/react';
+import { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import { Overlay, useOverlay, FocusScope } from 'react-aria';
+import { OverlayTriggerStateContext, Dialog } from 'react-aria-components';
+import { getFocusedElement } from '../../../../utilities/__internal__/focusUtils/focus.utils.js';
+import { isTypingInField } from '../../../../utilities/__internal__/hotkeysUtils/hotkeys.utils.js';
+import { usePanelFocus } from '../../SidePanel/hooks/usePanelFocus.js';
+import { useSlideoutState } from '../hooks/useSlideoutState.js';
+import { OverlayBoundsContext } from '../providers/OverlayBounds.context.js';
+import { SlideoutMenuContext } from '../providers/SlideoutMenu.context.js';
+import { resolveSlideoutBounds } from '../utilities/slideoutMenu.utils.js';
+
+const SLIDE = { type: 'tween', duration: 0.3, ease: 'easeOut' };
+const SLIDE_OUT = { type: 'tween', duration: 0.3, ease: 'easeIn' };
+/** The panel itself. A component of its own so it can tell, while animating out, that it is leaving. */
+const SlideoutPanel = ({ openState, label, labelledBy, boundsStyle, rootTestId, isKeyboardDismissDisabled, children, className, dialogClassName, }) => {
+    const panelRef = useRef(null);
+    const dialogRef = useRef(null);
+    const isPresent = useIsPresent();
+    const shouldReduceMotion = useReducedMotion();
+    // 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]);
+    // react-aria's `useDialog` already focuses the dialog on mount; this hook is here for the hand-back on close and the inert exit,
+    // and `shouldFocusOnMount` is what makes it record the opener. The panel never covers the page, so `isDesktop` stays true.
+    const { onFocusCapture, setOpener } = usePanelFocus({ panelRef: dialogRef, isPresent, isDesktop: true, shouldFocusOnMount: true });
+    // 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 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.
+    const [announcement, setAnnouncement] = useState('');
+    const lastTitle = useRef(null);
+    const announceTitle = useCallback((title) => {
+        const previous = lastTitle.current;
+        lastTitle.current = title;
+        if (previous === null || title === previous)
+            return;
+        const focused = getFocusedElement();
+        if (focused && panelRef.current?.contains(focused))
+            return;
+        // The control that swapped the content is what closing hands focus back to, not the one that first opened the panel.
+        if (focused)
+            setOpener(focused);
+        setAnnouncement(title);
+    }, [setOpener]);
+    return (
+    // The clip box covers exactly the page area and takes no clicks, so the slide-in is cut at the area's edge instead of
+    // crossing the header or a docked panel, and the panel's width is a share of the area, not of the viewport.
+    jsx("div", { style: boundsStyle, className: "pointer-events-none fixed z-50 overflow-clip", children: jsxs(motion.div, { ref: panelRef, onKeyDown: overlayProps.onKeyDown, onFocusCapture: onFocusCapture, initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%', transition: shouldReduceMotion ? { duration: 0 } : SLIDE_OUT }, transition: shouldReduceMotion ? { duration: 0 } : SLIDE, 
+            // Below `lg` the panel fills the page area, as a side panel does; from `lg` it is 400px, or the area when that is narrower.
+            className: cx('pointer-events-auto absolute inset-y-0 right-0 flex w-full shadow-xl lg:max-w-[min(25rem,100%)]', className), children: [jsx(SlideoutMenuContext.Provider, { value: { close: openState.close, label, announceTitle }, children: jsx(FocusScope, { restoreFocus: true, children: jsx(Dialog, { ref: dialogRef, role: "dialog", "aria-label": label, "aria-labelledby": labelledBy, "data-testid": rootTestId, className: cx('relative flex size-full flex-col items-start gap-6 overflow-y-auto bg-primary ring-1 ring-secondary_alt outline-hidden', dialogClassName), children: ({ close }) => (typeof children === 'function' ? children({ close }) : children) }) }) }), jsx("output", { className: "sr-only", children: announcement })] }) }));
+};
+/**
+ * Non-modal shell: portals the panel to the app's overlay root, keeps it mounted through its exit slide,
+ * and shares the open state with a surrounding `SlideoutMenu.Trigger`. Nothing is dimmed, locked or
+ * made inert; the page behind stays usable.
+ */
+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 });
+    // As react-aria's Modal does: explicit open props win over a surrounding Trigger's state.
+    const openState = isOpen !== undefined || defaultOpen !== undefined || !triggerState ? local : triggerState;
+    const measured = useContext(OverlayBoundsContext);
+    const boundsStyle = resolveSlideoutBounds(bounds, measured);
+    // A heading named through `aria-labelledby` replaces the default name; an explicit `aria-label` still wins.
+    const label = ariaLabel ?? (labelledBy ? undefined : 'Slideout menu');
+    return (jsx(TestIdProvider, { value: rootTestId, children: jsx(AnimatePresence, { children: openState.isOpen && (jsx(Overlay, { disableFocusManagement: true, children: jsx(OverlayTriggerStateContext.Provider, { value: openState, children: jsx(SlideoutPanel, { openState: openState, label: label, labelledBy: labelledBy, boundsStyle: boundsStyle, rootTestId: rootTestId, isKeyboardDismissDisabled: isKeyboardDismissDisabled, className: className, dialogClassName: dialogClassName, children: children }) }) }, "slideout-menu")) }) }));
+};
+SlideoutShell.displayName = 'SlideoutShell';
+
+export { SlideoutShell };
+//# sourceMappingURL=SlideoutShell.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Owns the panel's open state, controlled or uncontrolled by the usual pair of props, in the shape
+ * react-aria's trigger state has so a surrounding `DialogTrigger` and the `Dialog` inside can share it.
+ *
+ * @param options The open props as the consumer passed them.
+ * @returns The open state, with a stable identity across renders.
+ */
+const useSlideoutState = ({ isOpen, defaultOpen, onOpenChange }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const isOpenControlled = isOpen !== undefined;
+    const resolvedOpen = isOpenControlled ? isOpen : uncontrolledOpen;
+    // The latest callback and value live in refs so the returned API keeps its identity across renders.
+    const onOpenChangeRef = React.useRef(onOpenChange);
+    const isOpenRef = React.useRef(resolvedOpen);
+    React.useEffect(() => {
+        onOpenChangeRef.current = onOpenChange;
+        isOpenRef.current = resolvedOpen;
+    });
+    const setOpen = React.useCallback((next) => {
+        if (!isOpenControlled)
+            setUncontrolledOpen(next);
+        if (next !== isOpenRef.current)
+            onOpenChangeRef.current?.(next);
+    }, [isOpenControlled]);
+    return React.useMemo(() => ({
+        isOpen: resolvedOpen,
+        setOpen,
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+        toggle: () => setOpen(!isOpenRef.current),
+    }), [resolvedOpen, setOpen]);
+};
+
+exports.useSlideoutState = useSlideoutState;
+//# sourceMappingURL=useSlideoutState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSlideoutState.cjs","sources":["../../../../../src/components/organisms/SlideoutMenu/hooks/useSlideoutState.ts"],"sourcesContent":[null],"names":["useState","useRef","useEffect","useCallback","useMemo"],"mappings":";;;;AAmBA;;;;;;AAMG;AACI,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAA2B,KAAuB;AACpH,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAC,WAAW,IAAI,KAAK,CAAC;AAC9E,IAAA,MAAM,gBAAgB,GAAG,MAAM,KAAK,SAAS;IAC7C,MAAM,YAAY,GAAG,gBAAgB,GAAG,MAAM,GAAG,gBAAgB;;AAGjE,IAAA,MAAM,eAAe,GAAGC,YAAM,CAAC,YAAY,CAAC;AAC5C,IAAA,MAAM,SAAS,GAAGA,YAAM,CAAC,YAAY,CAAC;IACtCC,eAAS,CAAC,MAAK;AACb,QAAA,eAAe,CAAC,OAAO,GAAG,YAAY;AACtC,QAAA,SAAS,CAAC,OAAO,GAAG,YAAY;AAClC,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,OAAO,GAAGC,iBAAW,CACzB,CAAC,IAAa,KAAI;AAChB,QAAA,IAAI,CAAC,gBAAgB;YAAE,mBAAmB,CAAC,IAAI,CAAC;AAChD,QAAA,IAAI,IAAI,KAAK,SAAS,CAAC,OAAO;AAAE,YAAA,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;AACjE,IAAA,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB;AAED,IAAA,OAAOC,aAAO,CACZ,OAAO;AACL,QAAA,MAAM,EAAE,YAAY;QACpB,OAAO;AACP,QAAA,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC;AACzB,QAAA,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC;QAC3B,MAAM,EAAE,MAAM,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;AAC1C,KAAA,CAAC,EACF,CAAC,YAAY,EAAE,OAAO,CAAC,CACxB;AACH;;"}