@flipdish/ui-library 0.46.1 → 0.47.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/Messaging/components/MessageItemActions.cjs +13 -0
- package/dist/components/organisms/Messaging/components/MessageItemActions.cjs.map +1 -0
- package/dist/components/organisms/Messaging/components/MessageItemActions.d.ts +5 -0
- package/dist/components/organisms/Messaging/components/MessageItemActions.d.ts.map +1 -0
- package/dist/components/organisms/Messaging/components/MessageItemActions.js +11 -0
- package/dist/components/organisms/Messaging/components/MessageItemActions.js.map +1 -0
- package/dist/components/organisms/Messaging/index.cjs +12 -10
- package/dist/components/organisms/Messaging/index.cjs.map +1 -1
- package/dist/components/organisms/Messaging/index.d.ts.map +1 -1
- package/dist/components/organisms/Messaging/index.js +13 -11
- package/dist/components/organisms/Messaging/index.js.map +1 -1
- package/dist/components/organisms/Messaging/messageItem.utils.cjs +60 -0
- package/dist/components/organisms/Messaging/messageItem.utils.cjs.map +1 -0
- package/dist/components/organisms/Messaging/messageItem.utils.d.ts +65 -0
- package/dist/components/organisms/Messaging/messageItem.utils.d.ts.map +1 -0
- package/dist/components/organisms/Messaging/messageItem.utils.js +54 -0
- package/dist/components/organisms/Messaging/messageItem.utils.js.map +1 -0
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs +2 -2
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts +7 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js +2 -2
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs +26 -4
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts +23 -4
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js +27 -5
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs +9 -2
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts +6 -0
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js +9 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map +1 -1
- package/dist/components/organisms/SidePanel/index.cjs +1 -0
- package/dist/components/organisms/SidePanel/index.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var uiIcons = require('@flipdish/ui-icons');
|
|
5
|
+
|
|
6
|
+
const ACTION_LABEL = { edit: 'Edit message', download: 'Download' };
|
|
7
|
+
const actionButtonClassName = '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';
|
|
8
|
+
const MessageItemActions = ({ action }) => (jsxRuntime.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: [jsxRuntime.jsx("button", { title: "Generate with AI", "aria-label": "Generate with AI", className: actionButtonClassName, children: jsxRuntime.jsx(uiIcons.Stars02, { className: "size-4" }) }), action && (
|
|
9
|
+
// biome-ignore lint/a11y/useButtonType: we don't need a type for this button
|
|
10
|
+
jsxRuntime.jsx("button", { title: ACTION_LABEL[action], "aria-label": ACTION_LABEL[action], className: actionButtonClassName, children: action === 'edit' ? jsxRuntime.jsx(uiIcons.Edit04, { className: "size-4" }) : jsxRuntime.jsx(uiIcons.DownloadCloud02, { className: "size-4" }) })), jsxRuntime.jsx("button", { title: "Reply", "aria-label": "Reply", className: actionButtonClassName, children: jsxRuntime.jsx(uiIcons.RefreshCcw02, { className: "size-4" }) }), jsxRuntime.jsx("button", { title: "Copy", "aria-label": "Copy", className: actionButtonClassName, children: jsxRuntime.jsx(uiIcons.Copy01, { className: "size-4" }) })] }));
|
|
11
|
+
|
|
12
|
+
exports.MessageItemActions = MessageItemActions;
|
|
13
|
+
//# sourceMappingURL=MessageItemActions.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageItemActions.cjs","sources":["../../../../../src/components/organisms/Messaging/components/MessageItemActions.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","Stars02","Edit04","DownloadCloud02","RefreshCcw02","Copy01"],"mappings":";;;;;AAKA,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAW;AAE5E,MAAM,qBAAqB,GACzB,8LAA8L;AAEzL,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAA6C,MACtFA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iLAAiL,aAE9LC,cAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,kBAAkB,gBAAY,kBAAkB,EAAC,SAAS,EAAE,qBAAqB,EAAA,QAAA,EAC7FA,cAAA,CAACC,eAAO,EAAA,EAAC,SAAS,EAAC,QAAQ,GAAG,EAAA,CACvB,EAER,MAAM;;AAEL,QAAAD,cAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,EAAA,YAAA,EAAc,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAA,QAAA,EACpG,MAAM,KAAK,MAAM,GAAGA,cAAA,CAACE,cAAM,IAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,GAAGF,eAACG,uBAAe,EAAA,EAAC,SAAS,EAAC,QAAQ,GAAG,EAAA,CACpF,CACV,EAGDH,cAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,OAAO,gBAAY,OAAO,EAAC,SAAS,EAAE,qBAAqB,EAAA,QAAA,EACvEA,cAAA,CAACI,oBAAY,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,GAC5B,EAETJ,cAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,MAAM,EAAA,YAAA,EAAY,MAAM,EAAC,SAAS,EAAE,qBAAqB,EAAA,QAAA,EACrEA,cAAA,CAACK,cAAM,EAAA,EAAC,SAAS,EAAC,QAAQ,GAAG,EAAA,CACtB,CAAA,EAAA,CACL;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageItemActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/Messaging/components/MessageItemActions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAOnE,eAAO,MAAM,kBAAkB,GAAI,YAAY;IAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAA;CAAE,gCAuBvF,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Stars02, Edit04, DownloadCloud02, RefreshCcw02, Copy01 } from '@flipdish/ui-icons';
|
|
3
|
+
|
|
4
|
+
const ACTION_LABEL = { edit: 'Edit message', download: 'Download' };
|
|
5
|
+
const actionButtonClassName = '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';
|
|
6
|
+
const MessageItemActions = ({ action }) => (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: actionButtonClassName, children: jsx(Stars02, { className: "size-4" }) }), action && (
|
|
7
|
+
// biome-ignore lint/a11y/useButtonType: we don't need a type for this button
|
|
8
|
+
jsx("button", { title: ACTION_LABEL[action], "aria-label": ACTION_LABEL[action], className: actionButtonClassName, children: action === 'edit' ? jsx(Edit04, { className: "size-4" }) : jsx(DownloadCloud02, { className: "size-4" }) })), jsx("button", { title: "Reply", "aria-label": "Reply", className: actionButtonClassName, children: jsx(RefreshCcw02, { className: "size-4" }) }), jsx("button", { title: "Copy", "aria-label": "Copy", className: actionButtonClassName, children: jsx(Copy01, { className: "size-4" }) })] }));
|
|
9
|
+
|
|
10
|
+
export { MessageItemActions };
|
|
11
|
+
//# sourceMappingURL=MessageItemActions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MessageItemActions.js","sources":["../../../../../src/components/organisms/Messaging/components/MessageItemActions.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAKA,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAW;AAE5E,MAAM,qBAAqB,GACzB,8LAA8L;AAEzL,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAA6C,MACtFA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iLAAiL,aAE9LC,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,kBAAkB,gBAAY,kBAAkB,EAAC,SAAS,EAAE,qBAAqB,EAAA,QAAA,EAC7FA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,QAAQ,GAAG,EAAA,CACvB,EAER,MAAM;;AAEL,QAAAA,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,EAAA,YAAA,EAAc,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAA,QAAA,EACpG,MAAM,KAAK,MAAM,GAAGA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,GAAGA,IAAC,eAAe,EAAA,EAAC,SAAS,EAAC,QAAQ,GAAG,EAAA,CACpF,CACV,EAGDA,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,OAAO,gBAAY,OAAO,EAAC,SAAS,EAAE,qBAAqB,EAAA,QAAA,EACvEA,GAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAC,QAAQ,EAAA,CAAG,GAC5B,EAETA,GAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,MAAM,EAAA,YAAA,EAAY,MAAM,EAAC,SAAS,EAAE,qBAAqB,EAAA,QAAA,EACrEA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,QAAQ,GAAG,EAAA,CACtB,CAAA,EAAA,CACL;;"}
|
|
@@ -7,6 +7,8 @@ var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
|
|
|
7
7
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
8
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
9
|
var reactAriaComponents = require('react-aria-components');
|
|
10
|
+
var MessageItemActions = require('./components/MessageItemActions.cjs');
|
|
11
|
+
var messageItem_utils = require('./messageItem.utils.cjs');
|
|
10
12
|
|
|
11
13
|
/** Delivery tick for a message, showing sent, read or failed with a tooltip that names the state. */
|
|
12
14
|
const MessageStatus = ({ status, readAt, 'data-testid': dataTestId }) => {
|
|
@@ -29,24 +31,24 @@ const MessageStatus = ({ status, readAt, 'data-testid': dataTestId }) => {
|
|
|
29
31
|
*/
|
|
30
32
|
const MessageItem = ({ msg, showUserLabel = true, 'data-testid': dataTestId, ...props }) => {
|
|
31
33
|
const messageItemTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'message-item', rootName: 'message-item' });
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
const bodyKind = messageItem_utils.messageBodyKind(msg);
|
|
35
|
+
const secondaryAction = messageItem_utils.messageSecondaryAction(msg);
|
|
36
|
+
const senderLabel = msg.user ? messageItem_utils.messageSenderLabel(msg.user) : undefined;
|
|
35
37
|
const renderBody = () => {
|
|
36
|
-
if (
|
|
38
|
+
if (bodyKind === 'text') {
|
|
37
39
|
return (jsxRuntime.jsxs("div", { className: cx.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',
|
|
38
40
|
// Link styles
|
|
39
|
-
'[&_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 && (jsxRuntime.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 && (jsxRuntime.jsx("figure", { className: "mt-1 mb-1.5", children: jsxRuntime.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 && (jsxRuntime.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: [jsxRuntime.jsx(uiIcons.Link03, { className: "mt-0.5 size-4 shrink-0 text-fg-quaternary" }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("p", { className: "w-full truncate text-sm font-medium text-secondary", children: msg.urlPreview.title }), jsxRuntime.jsx("p", { className: "w-full truncate text-sm text-tertiary", children: msg.urlPreview.description })] })] })), msg.text,
|
|
41
|
+
'[&_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 && (jsxRuntime.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 && (jsxRuntime.jsx("figure", { className: "mt-1 mb-1.5", children: jsxRuntime.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 && (jsxRuntime.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: [jsxRuntime.jsx(uiIcons.Link03, { className: "mt-0.5 size-4 shrink-0 text-fg-quaternary" }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("p", { className: "w-full truncate text-sm font-medium text-secondary", children: msg.urlPreview.title }), jsxRuntime.jsx("p", { className: "w-full truncate text-sm text-tertiary", children: msg.urlPreview.description })] })] })), msg.text, jsxRuntime.jsx(MessageItemActions.MessageItemActions, { action: secondaryAction })] }));
|
|
40
42
|
}
|
|
41
|
-
if (msg.image) {
|
|
42
|
-
return (jsxRuntime.jsxs("figure", { className: "flex flex-col gap-1.5", children: [jsxRuntime.jsxs("div", { className: "group/msg relative", children: [jsxRuntime.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" }),
|
|
43
|
+
if (bodyKind === 'image' && msg.image) {
|
|
44
|
+
return (jsxRuntime.jsxs("figure", { className: "flex flex-col gap-1.5", children: [jsxRuntime.jsxs("div", { className: "group/msg relative", children: [jsxRuntime.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" }), jsxRuntime.jsx(MessageItemActions.MessageItemActions, { action: secondaryAction })] }), jsxRuntime.jsxs("figcaption", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-secondary", children: msg.image.name }), jsxRuntime.jsx("span", { className: "text-sm text-tertiary", children: msg.image.size })] })] }));
|
|
43
45
|
}
|
|
44
|
-
if (msg.audio) {
|
|
45
|
-
return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.jsx("svg", { width: "12.8", height: "14", viewBox: "0 0 16 16", fill: "none", className: "translate-x-[1px] text-fg-white", children: jsxRuntime.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" }) }) }), jsxRuntime.jsx("svg", { width: "206", height: "34", viewBox: "0 0 206 34", fill: "none", className: "flex-1 text-fg-brand-primary_alt", children: jsxRuntime.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" }) }), jsxRuntime.jsx("p", { className: "text-xs text-tertiary", children: msg.audio.duration }),
|
|
46
|
+
if (bodyKind === 'audio' && msg.audio) {
|
|
47
|
+
return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.jsx("svg", { width: "12.8", height: "14", viewBox: "0 0 16 16", fill: "none", className: "translate-x-[1px] text-fg-white", children: jsxRuntime.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" }) }) }), jsxRuntime.jsx("svg", { width: "206", height: "34", viewBox: "0 0 206 34", fill: "none", className: "flex-1 text-fg-brand-primary_alt", children: jsxRuntime.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" }) }), jsxRuntime.jsx("p", { className: "text-xs text-tertiary", children: msg.audio.duration }), jsxRuntime.jsx(MessageItemActions.MessageItemActions, { action: secondaryAction })] }));
|
|
46
48
|
}
|
|
47
49
|
return null;
|
|
48
50
|
};
|
|
49
|
-
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: messageItemTestId, children: jsxRuntime.jsxs("li", { ...props, "data-testid": messageItemTestId, className: cx.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 && jsxRuntime.jsx(Avatar.Avatar, { src: msg.user.avatarUrl, alt: msg.user.name ?? '', size: "sm", status: msg.user.status }), jsxRuntime.jsxs("article", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [(
|
|
51
|
+
return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: messageItemTestId, children: jsxRuntime.jsxs("li", { ...props, "data-testid": messageItemTestId, className: cx.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 && jsxRuntime.jsx(Avatar.Avatar, { src: msg.user.avatarUrl, alt: msg.user.name ?? '', size: "sm", status: msg.user.status }), jsxRuntime.jsxs("article", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [messageItem_utils.showsMessageHeader(msg, showUserLabel) && (jsxRuntime.jsxs("header", { className: "flex items-center gap-2", children: [msg.user && showUserLabel && jsxRuntime.jsx("cite", { className: "flex-1 truncate text-sm font-medium text-secondary not-italic", children: senderLabel }), messageItem_utils.showsMessageMeta(msg) && (jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [msg.sentAt && (jsxRuntime.jsx("time", { className: "text-xs text-tertiary", dateTime: msg.sentAt, children: msg.sentAt })), msg.status && jsxRuntime.jsx(MessageStatus, { status: msg.status, readAt: msg.readAt })] }))] })), renderBody(), msg.attachment && (jsxRuntime.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: [jsxRuntime.jsx(uiIcons.FileIcon, { type: msg.attachment.type, theme: "light", className: "size-10 dark:hidden" }), jsxRuntime.jsx(uiIcons.FileIcon, { type: msg.attachment.type, theme: "dark", className: "size-10 not-dark:hidden" }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("p", { className: "truncate text-sm font-medium text-secondary", children: msg.attachment.name }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: msg.attachment.size })] }), jsxRuntime.jsx(MessageItemActions.MessageItemActions, { action: secondaryAction })] })), msg.reactions && msg.reactions.length > 0 && (jsxRuntime.jsx("ul", { className: "flex justify-end gap-1", children: msg.reactions?.map((reaction) => (jsxRuntime.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 && jsxRuntime.jsx("span", { className: "text-sm font-medium text-secondary", children: reaction.count })] }, reaction.content))) })), msg.typing && (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary [animation-delay:-0.3s]" }), jsxRuntime.jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-quaternary [animation-delay:-0.15s]" }), jsxRuntime.jsx("div", { className: "size-1 animate-bounce rounded-full bg-fg-tertiary" })] }))] })] }, msg.id) }));
|
|
50
52
|
};
|
|
51
53
|
|
|
52
54
|
exports.MessageItem = MessageItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","Tooltip","AriaButton","_jsxs","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","Tooltip","AriaButton","_jsxs","messageBodyKind","messageSecondaryAction","messageSenderLabel","cx","Link03","MessageItemActions","TestIdProvider","Avatar","showsMessageHeader","showsMessageMeta","FileIcon"],"mappings":";;;;;;;;;;;;AA+DA;AACO,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAsB,KAAI;AACjG,IAAA,MAAM,mBAAmB,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC;AAE5H,IAAA,MAAM,UAAU,GAAG,MAAM,GAAG,CAAA,CAAA,EAAI,MAAM,CAAA,CAAE,GAAG,EAAE;AAC7C,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,CAAA,YAAA,EAAe,UAAU,CAAA,CAAE;AACjC,QAAA,MAAM,EAAE,+BAA+B;KACxC,CAAC,MAAM,CAAC;IACT,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA,IAAA,EAAO,UAAU,CAAA,CAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC;IAE5F,QACEC,cAAA,CAACC,eAAO,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EAC1BD,cAAA,CAACE,0BAAU,EAAA,EAAA,YAAA,EAAa,WAAW,EAAA,aAAA,EAAe,mBAAmB,EAAE,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAErGC,eAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAAA,CACxD,MAAM,KAAK,MAAM,KAChBH,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,gBAAgB,EAAC,SAAS,EAAC,sBAAsB,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,CAC5H,EACA,MAAM,KAAK,MAAM,KAChBA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,0CAA0C,EAC5C,SAAS,EAAC,2BAA2B,EACrC,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EAAA,CACtB,CACH,EACA,MAAM,KAAK,QAAQ,KAClBA,cAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uZAAuZ,EACzZ,SAAS,EAAC,uBAAuB,EAAA,CACjC,CACH,CAAA,EAAA,CACG,EAAA,CACK,EAAA,CACL;AAEd;AAWA;;;;;;AAMG;MACU,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,aAAa,GAAG,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAoB,KAAI;AAClH,IAAA,MAAM,iBAAiB,GAAGD,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;AACtH,IAAA,MAAM,QAAQ,GAAGK,iCAAe,CAAC,GAAG,CAAC;AACrC,IAAA,MAAM,eAAe,GAAGC,wCAAsB,CAAC,GAAG,CAAC;AACnD,IAAA,MAAM,WAAW,GAAG,GAAG,CAAC,IAAI,GAAGC,oCAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,SAAS;IAEvE,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,QACEH,yBACE,SAAS,EAAEI,KAAE,CACX,+GAA+G,EAC/G,GAAG,CAAC,IAAI,EAAE,EAAE,GAAG,iCAAiC,GAAG,8BAA8B;;gBAEjF,+QAA+Q,CAChR,EAAA,QAAA,EAAA,CAEA,GAAG,CAAC,KAAK,KACRP,cAAA,CAAA,YAAA,EAAA,EAAY,SAAS,EAAC,qOAAqO,EAAA,QAAA,EACxP,GAAG,CAAC,KAAK,CAAC,IAAI,EAAA,CACJ,CACd,EAEA,GAAG,CAAC,KAAK,KACRA,cAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,aAAa,EAAA,QAAA,EAC7BA,cAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,EAClB,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,EAClB,SAAS,EAAC,mFAAmF,EAAA,CAC7F,EAAA,CACK,CACV,EAEA,GAAG,CAAC,UAAU,KACbG,eAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,sGAAsG,EAAA,QAAA,EAAA,CACrHH,cAAA,CAACQ,cAAM,EAAA,EAAC,SAAS,EAAC,2CAA2C,EAAA,CAAG,EAChEL,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAC7BH,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oDAAoD,EAAA,QAAA,EAAE,GAAG,CAAC,UAAU,CAAC,KAAK,EAAA,CAAK,EAC5FA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAE,GAAG,CAAC,UAAU,CAAC,WAAW,EAAA,CAAK,CAAA,EAAA,CACjF,CAAA,EAAA,CACA,CACT,EAEA,GAAG,CAAC,IAAI,EAETA,cAAA,CAACS,qCAAkB,EAAA,EAAC,MAAM,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CAC3C;QAEV;QAEA,IAAI,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,KAAK,EAAE;AACrC,YAAA,QACEN,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACvCA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CACjCH,cAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,EAClB,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,GAAG,EAClB,SAAS,EAAC,mFAAmF,EAAA,CAC7F,EACFA,eAACS,qCAAkB,EAAA,EAAC,MAAM,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CAC3C,EACNN,gCAAY,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CAC7CH,yBAAM,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,GAAQ,EACpGA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,EAAA,CAAQ,CAAA,EAAA,CACpD,CAAA,EAAA,CACN;QAEb;QAEA,IAAI,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,KAAK,EAAE;YACrC,QACEG,yBAAK,SAAS,EAAC,4GAA4G,EAAA,QAAA,EAAA,CAEzHH,cAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACa,oBAAoB,EAC/B,SAAS,EAAC,uKAAuK,EAAA,QAAA,EAGjLA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iCAAiC,EAAA,QAAA,EACvGA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,4MAA4M,EAC9M,IAAI,EAAC,cAAc,EAAA,CACnB,EAAA,CACE,GACC,EAGTA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,kCAAkC,EAAA,QAAA,EACxGA,cAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,4rBAA4rB,EAC9rB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EAAA,CACrB,EAAA,CACE,EAENA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAE,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAA,CAAK,EAE7DA,cAAA,CAACS,qCAAkB,EAAA,EAAC,MAAM,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CAC3C;QAEV;AAEA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;AAED,IAAA,QACET,cAAA,CAACU,0BAAc,IAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EACtCP,eAAA,CAAA,IAAA,EAAA,EAAA,GAEM,KAAK,EAAA,aAAA,EACI,iBAAiB,EAC9B,SAAS,EAAEI,KAAE,CAAC,iCAAiC,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,GAAG,gBAAgB,GAAG,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,QAAA,EAAA,CAEnH,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAIP,eAACW,aAAM,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,GAAI,EAE7HR,eAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAC,sCAAsC,aACtDS,oCAAkB,CAAC,GAAG,EAAE,aAAa,CAAC,KACrCT,eAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CAExC,GAAG,CAAC,IAAI,IAAI,aAAa,IAAIH,yBAAM,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAAE,WAAW,EAAA,CAAQ,EAGjIa,kCAAgB,CAAC,GAAG,CAAC,KACpBV,yBAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAA,CACvC,GAAG,CAAC,MAAM,KACTH,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,YACzD,GAAG,CAAC,MAAM,EAAA,CACN,CACR,EACA,GAAG,CAAC,MAAM,IAAIA,cAAA,CAAC,aAAa,EAAA,EAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAA,CAAI,CAAA,EAAA,CACpE,CACP,CAAA,EAAA,CACM,CACV,EAEA,UAAU,EAAE,EAEZ,GAAG,CAAC,UAAU,KACbG,yBAAK,SAAS,EAAC,yGAAyG,EAAA,QAAA,EAAA,CACtHH,eAACc,gBAAQ,EAAA,EAAC,IAAI,EAAE,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG,EACrFd,cAAA,CAACc,gBAAQ,EAAA,EAAC,IAAI,EAAE,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,yBAAyB,GAAG,EAExFX,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAC7BH,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,6CAA6C,YAAE,GAAG,CAAC,UAAU,CAAC,IAAI,GAAK,EACpFA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,YAAE,GAAG,CAAC,UAAU,CAAC,IAAI,EAAA,CAAK,CAAA,EAAA,CAC1D,EAENA,cAAA,CAACS,qCAAkB,IAAC,MAAM,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CAC3C,CACP,EAEA,GAAG,CAAC,SAAS,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KACxCT,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACnC,GAAG,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,MAC3BG,wBAEE,SAAS,EAAC,mGAAmG,EAAA,QAAA,EAAA,CAE5G,QAAQ,CAAC,OAAO,EAEhB,QAAQ,CAAC,KAAK,GAAG,CAAC,IAAIH,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,QAAQ,CAAC,KAAK,GAAQ,CAAA,EAAA,EAL9F,QAAQ,CAAC,OAAO,CAMlB,CACN,CAAC,GACC,CACN,EAGA,GAAG,CAAC,MAAM,KACTG,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0JAA0J,aACvKH,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,CAAG,EAC7FA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8EAA8E,EAAA,CAAG,EAChGA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,EAAA,CAAG,IACjE,CACP,CAAA,EAAA,CACO,KAlEL,GAAG,CAAC,EAAE,CAmER,EAAA,CACU;AAErB;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;QAC9B,EAAE,CAAC,EAAE,OAAO,CAAC;KACd,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,SAAS,CAAC,EAAE;QACV,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;KACrC,CAAC;CACH,CAAC;AAEF,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gHAAgH;IAChH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qGAAqG;AACrG,eAAO,MAAM,aAAa,GAAI,+CAA+C,kBAAkB,gCAwC9F,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IACnE,iFAAiF;IACjF,GAAG,EAAE,OAAO,CAAC;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,6DAAoE,gBAAgB,gCAkL/G,CAAC"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { FileIcon, Link03
|
|
2
|
+
import { FileIcon, Link03 } from '@flipdish/ui-icons';
|
|
3
3
|
import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
|
|
4
4
|
import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
|
|
5
5
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
6
|
import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
7
|
import { Button } from 'react-aria-components';
|
|
8
|
+
import { MessageItemActions } from './components/MessageItemActions.js';
|
|
9
|
+
import { messageBodyKind, messageSecondaryAction, messageSenderLabel, showsMessageHeader, showsMessageMeta } from './messageItem.utils.js';
|
|
8
10
|
|
|
9
11
|
/** Delivery tick for a message, showing sent, read or failed with a tooltip that names the state. */
|
|
10
12
|
const MessageStatus = ({ status, readAt, 'data-testid': dataTestId }) => {
|
|
@@ -27,24 +29,24 @@ const MessageStatus = ({ status, readAt, 'data-testid': dataTestId }) => {
|
|
|
27
29
|
*/
|
|
28
30
|
const MessageItem = ({ msg, showUserLabel = true, 'data-testid': dataTestId, ...props }) => {
|
|
29
31
|
const messageItemTestId = useResolvedTestId({ testId: dataTestId, segment: 'message-item', rootName: 'message-item' });
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
const bodyKind = messageBodyKind(msg);
|
|
33
|
+
const secondaryAction = messageSecondaryAction(msg);
|
|
34
|
+
const senderLabel = msg.user ? messageSenderLabel(msg.user) : undefined;
|
|
33
35
|
const renderBody = () => {
|
|
34
|
-
if (
|
|
36
|
+
if (bodyKind === 'text') {
|
|
35
37
|
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',
|
|
36
38
|
// Link styles
|
|
37
|
-
'[&_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,
|
|
39
|
+
'[&_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, jsx(MessageItemActions, { action: secondaryAction })] }));
|
|
38
40
|
}
|
|
39
|
-
if (msg.image) {
|
|
40
|
-
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" }),
|
|
41
|
+
if (bodyKind === 'image' && msg.image) {
|
|
42
|
+
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" }), jsx(MessageItemActions, { action: secondaryAction })] }), 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 })] })] }));
|
|
41
43
|
}
|
|
42
|
-
if (msg.audio) {
|
|
43
|
-
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 }),
|
|
44
|
+
if (bodyKind === 'audio' && msg.audio) {
|
|
45
|
+
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 }), jsx(MessageItemActions, { action: secondaryAction })] }));
|
|
44
46
|
}
|
|
45
47
|
return null;
|
|
46
48
|
};
|
|
47
|
-
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: [(
|
|
49
|
+
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: [showsMessageHeader(msg, showUserLabel) && (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: senderLabel }), showsMessageMeta(msg) && (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 })] }), jsx(MessageItemActions, { action: secondaryAction })] })), 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) }));
|
|
48
50
|
};
|
|
49
51
|
|
|
50
52
|
export { MessageItem, MessageStatus };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/Messaging/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","_jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Picks the body a message renders. A text bubble also keeps any image or link preview inside it,
|
|
5
|
+
* so an image or audio clip only gets its own layout when there is no text.
|
|
6
|
+
*
|
|
7
|
+
* @param message The content fields that compete for the body.
|
|
8
|
+
* @returns `text` when text is set, otherwise `image`, otherwise `audio`, otherwise `none`.
|
|
9
|
+
*/
|
|
10
|
+
const messageBodyKind = (message) => {
|
|
11
|
+
if (message.text)
|
|
12
|
+
return 'text';
|
|
13
|
+
if (message.image)
|
|
14
|
+
return 'image';
|
|
15
|
+
if (message.audio)
|
|
16
|
+
return 'audio';
|
|
17
|
+
return 'none';
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Chooses the middle hover action. Text is edited; an image, audio clip or attachment with no text is downloaded.
|
|
21
|
+
*
|
|
22
|
+
* @param message The content fields that can be edited or downloaded.
|
|
23
|
+
* @returns `edit` when text is set, `download` for media or an attachment without text, or `null` when neither applies.
|
|
24
|
+
*/
|
|
25
|
+
const messageSecondaryAction = (message) => {
|
|
26
|
+
if (message.text)
|
|
27
|
+
return 'edit';
|
|
28
|
+
if (message.image || message.audio || message.attachment)
|
|
29
|
+
return 'download';
|
|
30
|
+
return null;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Names the sender in the header. The current user's messages read "You".
|
|
34
|
+
*
|
|
35
|
+
* @param user The sender, including whether the message is the current user's.
|
|
36
|
+
* @returns `You` for the current user, otherwise the sender's name.
|
|
37
|
+
*/
|
|
38
|
+
const messageSenderLabel = (user) => (user.me ? 'You' : user.name);
|
|
39
|
+
/**
|
|
40
|
+
* Whether the header row renders. It shows a sender label, a timestamp, a delivery state, or any combination of them.
|
|
41
|
+
*
|
|
42
|
+
* @param message The sender, timestamp and delivery state.
|
|
43
|
+
* @param showUserLabel Whether the caller asked for the sender's name.
|
|
44
|
+
* @returns `true` when at least one header part has something to show.
|
|
45
|
+
*/
|
|
46
|
+
const showsMessageHeader = (message, showUserLabel) => Boolean((message.user && showUserLabel) || message.sentAt || message.status);
|
|
47
|
+
/**
|
|
48
|
+
* Whether the timestamp and delivery tick render. A typing placeholder replaces them.
|
|
49
|
+
*
|
|
50
|
+
* @param message The timestamp, delivery state and typing flag.
|
|
51
|
+
* @returns `true` when the message is not typing and has a timestamp or a delivery state.
|
|
52
|
+
*/
|
|
53
|
+
const showsMessageMeta = (message) => Boolean(!message.typing && (message.sentAt || message.status));
|
|
54
|
+
|
|
55
|
+
exports.messageBodyKind = messageBodyKind;
|
|
56
|
+
exports.messageSecondaryAction = messageSecondaryAction;
|
|
57
|
+
exports.messageSenderLabel = messageSenderLabel;
|
|
58
|
+
exports.showsMessageHeader = showsMessageHeader;
|
|
59
|
+
exports.showsMessageMeta = showsMessageMeta;
|
|
60
|
+
//# sourceMappingURL=messageItem.utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"messageItem.utils.cjs","sources":["../../../../src/components/organisms/Messaging/messageItem.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAyBA;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,CAAC,OAA+D,KAAqB;IAClH,IAAI,OAAO,CAAC,IAAI;AAAE,QAAA,OAAO,MAAM;IAC/B,IAAI,OAAO,CAAC,KAAK;AAAE,QAAA,OAAO,OAAO;IACjC,IAAI,OAAO,CAAC,KAAK;AAAE,QAAA,OAAO,OAAO;AACjC,IAAA,OAAO,MAAM;AACf;AAKA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CACpC,OAA8E,KAC7C;IACjC,IAAI,OAAO,CAAC,IAAI;AAAE,QAAA,OAAO,MAAM;IAC/B,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,UAAU;AAAE,QAAA,OAAO,UAAU;AAC3E,IAAA,OAAO,IAAI;AACb;AAEA;;;;;AAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,IAA+C,MAA0B,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI;AAEvI;;;;;;AAMG;AACI,MAAM,kBAAkB,GAAG,CAAC,OAAiE,EAAE,aAAsB,KAC1H,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,KAAK,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM;AAE7E;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,CAAC,OAAmE,KAClG,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;;;;;;"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/** Fields of a message that decide what `MessageItem` renders. Other fields are display-only. */
|
|
3
|
+
export interface MessageContentFields {
|
|
4
|
+
/** Bubble text. When present it wins over a standalone image or audio clip. */
|
|
5
|
+
text?: ReactNode;
|
|
6
|
+
/** Standalone image, or the image embedded in a text bubble. */
|
|
7
|
+
image?: unknown;
|
|
8
|
+
/** Voice clip, rendered only when there is no text and no image. */
|
|
9
|
+
audio?: unknown;
|
|
10
|
+
/** File chip rendered beside the body, not instead of it. */
|
|
11
|
+
attachment?: unknown;
|
|
12
|
+
/** Sender, when the message names one. */
|
|
13
|
+
user?: {
|
|
14
|
+
me?: boolean;
|
|
15
|
+
name?: string;
|
|
16
|
+
};
|
|
17
|
+
/** Timestamp shown in the header. */
|
|
18
|
+
sentAt?: string;
|
|
19
|
+
/** Delivery state shown in the header. */
|
|
20
|
+
status?: string;
|
|
21
|
+
/** Typing placeholder. Hides the timestamp row while it is showing. */
|
|
22
|
+
typing?: boolean;
|
|
23
|
+
}
|
|
24
|
+
/** Which body a message renders. Text wins, then a standalone image, then audio. */
|
|
25
|
+
export type MessageBodyKind = 'text' | 'image' | 'audio' | 'none';
|
|
26
|
+
/**
|
|
27
|
+
* Picks the body a message renders. A text bubble also keeps any image or link preview inside it,
|
|
28
|
+
* so an image or audio clip only gets its own layout when there is no text.
|
|
29
|
+
*
|
|
30
|
+
* @param message The content fields that compete for the body.
|
|
31
|
+
* @returns `text` when text is set, otherwise `image`, otherwise `audio`, otherwise `none`.
|
|
32
|
+
*/
|
|
33
|
+
export declare const messageBodyKind: (message: Pick<MessageContentFields, "text" | "image" | "audio">) => MessageBodyKind;
|
|
34
|
+
/** The hover action beside Generate, when the message has something to edit or download. */
|
|
35
|
+
export type MessageSecondaryAction = 'edit' | 'download';
|
|
36
|
+
/**
|
|
37
|
+
* Chooses the middle hover action. Text is edited; an image, audio clip or attachment with no text is downloaded.
|
|
38
|
+
*
|
|
39
|
+
* @param message The content fields that can be edited or downloaded.
|
|
40
|
+
* @returns `edit` when text is set, `download` for media or an attachment without text, or `null` when neither applies.
|
|
41
|
+
*/
|
|
42
|
+
export declare const messageSecondaryAction: (message: Pick<MessageContentFields, "text" | "image" | "audio" | "attachment">) => MessageSecondaryAction | null;
|
|
43
|
+
/**
|
|
44
|
+
* Names the sender in the header. The current user's messages read "You".
|
|
45
|
+
*
|
|
46
|
+
* @param user The sender, including whether the message is the current user's.
|
|
47
|
+
* @returns `You` for the current user, otherwise the sender's name.
|
|
48
|
+
*/
|
|
49
|
+
export declare const messageSenderLabel: (user: NonNullable<MessageContentFields["user"]>) => string | undefined;
|
|
50
|
+
/**
|
|
51
|
+
* Whether the header row renders. It shows a sender label, a timestamp, a delivery state, or any combination of them.
|
|
52
|
+
*
|
|
53
|
+
* @param message The sender, timestamp and delivery state.
|
|
54
|
+
* @param showUserLabel Whether the caller asked for the sender's name.
|
|
55
|
+
* @returns `true` when at least one header part has something to show.
|
|
56
|
+
*/
|
|
57
|
+
export declare const showsMessageHeader: (message: Pick<MessageContentFields, "user" | "sentAt" | "status">, showUserLabel: boolean) => boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Whether the timestamp and delivery tick render. A typing placeholder replaces them.
|
|
60
|
+
*
|
|
61
|
+
* @param message The timestamp, delivery state and typing flag.
|
|
62
|
+
* @returns `true` when the message is not typing and has a timestamp or a delivery state.
|
|
63
|
+
*/
|
|
64
|
+
export declare const showsMessageMeta: (message: Pick<MessageContentFields, "typing" | "sentAt" | "status">) => boolean;
|
|
65
|
+
//# sourceMappingURL=messageItem.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"messageItem.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Messaging/messageItem.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iGAAiG;AACjG,MAAM,WAAW,oBAAoB;IACnC,+EAA+E;IAC/E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,oFAAoF;AACpF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC,KAAG,eAKjG,CAAC;AAEF,4FAA4F;AAC5F,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,UAAU,CAAC;AAEzD;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,YAAY,CAAC,KAC7E,sBAAsB,GAAG,IAI3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,WAAW,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,KAAG,MAAM,GAAG,SAA0C,CAAC;AAEzI;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC,EAAE,eAAe,OAAO,KAAG,OACjD,CAAC;AAE/E;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,SAAS,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC,KAAG,OACvC,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Picks the body a message renders. A text bubble also keeps any image or link preview inside it,
|
|
3
|
+
* so an image or audio clip only gets its own layout when there is no text.
|
|
4
|
+
*
|
|
5
|
+
* @param message The content fields that compete for the body.
|
|
6
|
+
* @returns `text` when text is set, otherwise `image`, otherwise `audio`, otherwise `none`.
|
|
7
|
+
*/
|
|
8
|
+
const messageBodyKind = (message) => {
|
|
9
|
+
if (message.text)
|
|
10
|
+
return 'text';
|
|
11
|
+
if (message.image)
|
|
12
|
+
return 'image';
|
|
13
|
+
if (message.audio)
|
|
14
|
+
return 'audio';
|
|
15
|
+
return 'none';
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Chooses the middle hover action. Text is edited; an image, audio clip or attachment with no text is downloaded.
|
|
19
|
+
*
|
|
20
|
+
* @param message The content fields that can be edited or downloaded.
|
|
21
|
+
* @returns `edit` when text is set, `download` for media or an attachment without text, or `null` when neither applies.
|
|
22
|
+
*/
|
|
23
|
+
const messageSecondaryAction = (message) => {
|
|
24
|
+
if (message.text)
|
|
25
|
+
return 'edit';
|
|
26
|
+
if (message.image || message.audio || message.attachment)
|
|
27
|
+
return 'download';
|
|
28
|
+
return null;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* Names the sender in the header. The current user's messages read "You".
|
|
32
|
+
*
|
|
33
|
+
* @param user The sender, including whether the message is the current user's.
|
|
34
|
+
* @returns `You` for the current user, otherwise the sender's name.
|
|
35
|
+
*/
|
|
36
|
+
const messageSenderLabel = (user) => (user.me ? 'You' : user.name);
|
|
37
|
+
/**
|
|
38
|
+
* Whether the header row renders. It shows a sender label, a timestamp, a delivery state, or any combination of them.
|
|
39
|
+
*
|
|
40
|
+
* @param message The sender, timestamp and delivery state.
|
|
41
|
+
* @param showUserLabel Whether the caller asked for the sender's name.
|
|
42
|
+
* @returns `true` when at least one header part has something to show.
|
|
43
|
+
*/
|
|
44
|
+
const showsMessageHeader = (message, showUserLabel) => Boolean((message.user && showUserLabel) || message.sentAt || message.status);
|
|
45
|
+
/**
|
|
46
|
+
* Whether the timestamp and delivery tick render. A typing placeholder replaces them.
|
|
47
|
+
*
|
|
48
|
+
* @param message The timestamp, delivery state and typing flag.
|
|
49
|
+
* @returns `true` when the message is not typing and has a timestamp or a delivery state.
|
|
50
|
+
*/
|
|
51
|
+
const showsMessageMeta = (message) => Boolean(!message.typing && (message.sentAt || message.status));
|
|
52
|
+
|
|
53
|
+
export { messageBodyKind, messageSecondaryAction, messageSenderLabel, showsMessageHeader, showsMessageMeta };
|
|
54
|
+
//# sourceMappingURL=messageItem.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"messageItem.utils.js","sources":["../../../../src/components/organisms/Messaging/messageItem.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAyBA;;;;;;AAMG;AACI,MAAM,eAAe,GAAG,CAAC,OAA+D,KAAqB;IAClH,IAAI,OAAO,CAAC,IAAI;AAAE,QAAA,OAAO,MAAM;IAC/B,IAAI,OAAO,CAAC,KAAK;AAAE,QAAA,OAAO,OAAO;IACjC,IAAI,OAAO,CAAC,KAAK;AAAE,QAAA,OAAO,OAAO;AACjC,IAAA,OAAO,MAAM;AACf;AAKA;;;;;AAKG;AACI,MAAM,sBAAsB,GAAG,CACpC,OAA8E,KAC7C;IACjC,IAAI,OAAO,CAAC,IAAI;AAAE,QAAA,OAAO,MAAM;IAC/B,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,UAAU;AAAE,QAAA,OAAO,UAAU;AAC3E,IAAA,OAAO,IAAI;AACb;AAEA;;;;;AAKG;AACI,MAAM,kBAAkB,GAAG,CAAC,IAA+C,MAA0B,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI;AAEvI;;;;;;AAMG;AACI,MAAM,kBAAkB,GAAG,CAAC,OAAiE,EAAE,aAAsB,KAC1H,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,KAAK,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM;AAE7E;;;;;AAKG;AACI,MAAM,gBAAgB,GAAG,CAAC,OAAmE,KAClG,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;;"}
|
|
@@ -5,11 +5,11 @@ var cx = require('@flipdish/ui-library/utilities/cx');
|
|
|
5
5
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
6
6
|
|
|
7
7
|
/** The scrolling body. It takes the height the header and footer leave. */
|
|
8
|
-
const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
|
|
8
|
+
const SidePanelContent = ({ className, padding = 'default', 'data-testid': dataTestId, ...props }) => {
|
|
9
9
|
const prefix = testIdUtils.useTestIdPrefix();
|
|
10
10
|
return (jsxRuntime.jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'content') : undefined),
|
|
11
11
|
// The header carries the space above; this carries the space below, so the last item never sits on the footer.
|
|
12
|
-
className: cx.cx('flex min-h-0 w-full flex-1 flex-col
|
|
12
|
+
className: cx.cx('flex min-h-0 w-full flex-1 flex-col overflow-y-auto', padding === 'default' && 'gap-6 px-4 pb-6 lg:px-6', className) }));
|
|
13
13
|
};
|
|
14
14
|
SidePanelContent.displayName = 'SidePanelContent';
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SidePanelContent.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","_jsx","joinTestId","cx"],"mappings":";;;;;;AAiBA;MACa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjI,IAAA,MAAM,MAAM,GAAGA,2BAAe,EAAE;IAEhC,QACEC,2BACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAGC,sBAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;AAE/E,QAAA,SAAS,EAAEC,KAAE,CAAC,qDAAqD,EAAE,OAAO,KAAK,SAAS,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,CACnI;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import type { ComponentPropsWithRef } from 'react';
|
|
2
2
|
export type SidePanelContentProps = ComponentPropsWithRef<'div'> & {
|
|
3
|
+
/**
|
|
4
|
+
* `default` pads the sides and the end and spaces the children, for content composed of the library's
|
|
5
|
+
* own parts. `none` gives the children the whole box, edge to edge, for content that lays itself out,
|
|
6
|
+
* such as an embedded micro-frontend under a `floating` header.
|
|
7
|
+
*/
|
|
8
|
+
padding?: 'default' | 'none';
|
|
3
9
|
/** Overrides the content's `data-testid` (defaults to `<root>--content`). */
|
|
4
10
|
'data-testid'?: string;
|
|
5
11
|
};
|
|
6
12
|
/** The scrolling body. It takes the height the header and footer leave. */
|
|
7
13
|
export declare const SidePanelContent: {
|
|
8
|
-
({ className, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
|
|
14
|
+
({ className, padding, "data-testid": dataTestId, ...props }: SidePanelContentProps): import("react").JSX.Element;
|
|
9
15
|
displayName: string;
|
|
10
16
|
};
|
|
11
17
|
//# sourceMappingURL=SidePanelContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;
|
|
1
|
+
{"version":3,"file":"SidePanelContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACjE;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB;kEAA6E,qBAAqB;;CAW9H,CAAC"}
|
|
@@ -3,11 +3,11 @@ import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
|
3
3
|
import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
4
|
|
|
5
5
|
/** The scrolling body. It takes the height the header and footer leave. */
|
|
6
|
-
const SidePanelContent = ({ className, 'data-testid': dataTestId, ...props }) => {
|
|
6
|
+
const SidePanelContent = ({ className, padding = 'default', 'data-testid': dataTestId, ...props }) => {
|
|
7
7
|
const prefix = useTestIdPrefix();
|
|
8
8
|
return (jsx("div", { ...props, "data-testid": dataTestId ?? (prefix ? joinTestId(prefix, 'content') : undefined),
|
|
9
9
|
// The header carries the space above; this carries the space below, so the last item never sits on the footer.
|
|
10
|
-
className: cx('flex min-h-0 w-full flex-1 flex-col
|
|
10
|
+
className: cx('flex min-h-0 w-full flex-1 flex-col overflow-y-auto', padding === 'default' && 'gap-6 px-4 pb-6 lg:px-6', className) }));
|
|
11
11
|
};
|
|
12
12
|
SidePanelContent.displayName = 'SidePanelContent';
|
|
13
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelContent.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"SidePanelContent.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAiBA;MACa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAyB,KAAI;AACjI,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAEhC,QACEA,gBACM,KAAK,EAAA,aAAA,EACI,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC;;AAE/E,QAAA,SAAS,EAAE,EAAE,CAAC,qDAAqD,EAAE,OAAO,KAAK,SAAS,IAAI,yBAAyB,EAAE,SAAS,CAAC,EAAA,CACnI;AAEN;AACA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;"}
|
|
@@ -9,13 +9,35 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
|
9
9
|
var React = require('react');
|
|
10
10
|
var SidePanel_context = require('../providers/SidePanel.context.cjs');
|
|
11
11
|
|
|
12
|
-
/**
|
|
13
|
-
const
|
|
12
|
+
/** The close button's action, name and test ids, shared by both variants. */
|
|
13
|
+
const useCloseButton = ({ onClose, closeLabel, 'data-testid': dataTestId }) => {
|
|
14
14
|
const panel = React.useContext(SidePanel_context.SidePanelContext);
|
|
15
15
|
const prefix = testIdUtils.useTestIdPrefix();
|
|
16
|
-
return
|
|
16
|
+
return {
|
|
17
|
+
headerTestId: dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, 'header') : undefined),
|
|
18
|
+
closeTestId: prefix ? testIdUtils.joinTestId(prefix, 'close') : undefined,
|
|
19
|
+
backTestId: prefix ? testIdUtils.joinTestId(prefix, 'back') : undefined,
|
|
20
|
+
label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined),
|
|
21
|
+
close: onClose ?? panel?.close,
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
const SidePanelTitleHeader = ({ className, children, variant: _variant, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
|
|
25
|
+
const { headerTestId, closeTestId, backTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
26
|
+
return (jsxRuntime.jsxs("header", { ...props, "data-testid": headerTestId, className: cx.cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { icon: uiIcons.ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm",
|
|
17
27
|
// 32px tall in a 28px title line: pulled in so the header is as tall as one without a back button.
|
|
18
|
-
className: "-my-0.5", onClick: onBack, "data-testid":
|
|
28
|
+
className: "-my-0.5", onClick: onBack, "data-testid": backTestId })), onBack ? jsxRuntime.jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: label, className: "absolute top-3 right-3 shrink-0", onClick: close, "data-testid": closeTestId })] }));
|
|
29
|
+
};
|
|
30
|
+
const SidePanelFloatingHeader = ({ className, children: _children, variant: _variant, onClose, closeLabel, onBack: _onBack, backLabel: _backLabel, 'data-testid': dataTestId, ...props }) => {
|
|
31
|
+
const { headerTestId, closeTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
32
|
+
return (
|
|
33
|
+
// A div, not header: it holds one button and no introductory content, which the embedded content's own header carries.
|
|
34
|
+
jsxRuntime.jsx("div", { ...props, "data-testid": headerTestId, className: cx.cx('absolute top-3 right-3 z-10', className), children: jsxRuntime.jsx(CloseButton.CloseButton, { size: "md", label: label, onClick: close, "data-testid": closeTestId }) }));
|
|
35
|
+
};
|
|
36
|
+
/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
|
|
37
|
+
const SidePanelHeader = (props) => {
|
|
38
|
+
if (props.variant === 'floating')
|
|
39
|
+
return jsxRuntime.jsx(SidePanelFloatingHeader, { ...props });
|
|
40
|
+
return jsxRuntime.jsx(SidePanelTitleHeader, { ...props });
|
|
19
41
|
};
|
|
20
42
|
SidePanelHeader.displayName = 'SidePanelHeader';
|
|
21
43
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","
|
|
1
|
+
{"version":3,"file":"SidePanelHeader.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["useContext","SidePanelContext","useTestIdPrefix","joinTestId","_jsxs","cx","_jsx","ButtonUtility","ArrowLeft","CloseButton"],"mappings":"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"}
|
|
@@ -1,19 +1,38 @@
|
|
|
1
1
|
import type { ComponentPropsWithRef } from 'react';
|
|
2
|
-
|
|
2
|
+
interface SidePanelHeaderBaseProps {
|
|
3
3
|
/** Runs instead of closing the panel when the close button is pressed. */
|
|
4
4
|
onClose?: () => void;
|
|
5
5
|
/** Accessible name of the close button. Defaults to "Close" followed by the panel's `aria-label`. */
|
|
6
6
|
closeLabel?: string;
|
|
7
|
+
/** Overrides the header's `data-testid` (defaults to `<root>--header`). */
|
|
8
|
+
'data-testid'?: string;
|
|
9
|
+
}
|
|
10
|
+
interface SidePanelHeaderDefaultProps extends SidePanelHeaderBaseProps, ComponentPropsWithRef<'header'> {
|
|
11
|
+
/** `default` is the title band above the content. */
|
|
12
|
+
variant?: 'default';
|
|
7
13
|
/** Shows a back button before the title, for a panel that is the second step of a flow; called when it is pressed. */
|
|
8
14
|
onBack?: () => void;
|
|
9
15
|
/** Accessible name of the back button. Defaults to "Back". */
|
|
10
16
|
backLabel?: string;
|
|
11
|
-
/** Overrides the header's `data-testid` (defaults to `<root>--header`). */
|
|
12
|
-
'data-testid'?: string;
|
|
13
17
|
}
|
|
18
|
+
interface SidePanelHeaderFloatingProps extends SidePanelHeaderBaseProps, ComponentPropsWithRef<'div'> {
|
|
19
|
+
/**
|
|
20
|
+
* `floating` takes no height: only the close button renders, over the top-right corner of the content, so
|
|
21
|
+
* content such as an embedded micro-frontend gets the panel's full height. The content must keep that corner,
|
|
22
|
+
* `--fd-side-panel-close-reserve` square, free of its own controls.
|
|
23
|
+
*/
|
|
24
|
+
variant: 'floating';
|
|
25
|
+
/** A floating header has no title: the panel is named by `aria-label`, and the content carries its own heading. */
|
|
26
|
+
children?: never;
|
|
27
|
+
/** A floating header has no back button; it is for a single full-height view. A footer still composes below the content. */
|
|
28
|
+
onBack?: never;
|
|
29
|
+
backLabel?: never;
|
|
30
|
+
}
|
|
31
|
+
export type SidePanelHeaderProps = SidePanelHeaderDefaultProps | SidePanelHeaderFloatingProps;
|
|
14
32
|
/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
|
|
15
33
|
export declare const SidePanelHeader: {
|
|
16
|
-
(
|
|
34
|
+
(props: SidePanelHeaderProps): import("react").JSX.Element;
|
|
17
35
|
displayName: string;
|
|
18
36
|
};
|
|
37
|
+
export {};
|
|
19
38
|
//# sourceMappingURL=SidePanelHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,
|
|
1
|
+
{"version":3,"file":"SidePanelHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,UAAU,wBAAwB;IAChC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qGAAqG;IACrG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,2BAA4B,SAAQ,wBAAwB,EAAE,qBAAqB,CAAC,QAAQ,CAAC;IACrG,qDAAqD;IACrD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sHAAsH;IACtH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,4BAA6B,SAAQ,wBAAwB,EAAE,qBAAqB,CAAC,KAAK,CAAC;IACnG;;;;OAIG;IACH,OAAO,EAAE,UAAU,CAAC;IACpB,mHAAmH;IACnH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,4HAA4H;IAC5H,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB;AAED,MAAM,MAAM,oBAAoB,GAAG,2BAA2B,GAAG,4BAA4B,CAAC;AA0E9F,sHAAsH;AACtH,eAAO,MAAM,eAAe;YAAW,oBAAoB;;CAG1D,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { ArrowLeft } from '@flipdish/ui-icons';
|
|
3
3
|
import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
|
|
4
4
|
import { ButtonUtility } from '@flipdish/ui-library/components/atoms/UtilityButton';
|
|
@@ -7,13 +7,35 @@ import { useTestIdPrefix, joinTestId } from '@flipdish/ui-library/utilities/test
|
|
|
7
7
|
import { useContext } from 'react';
|
|
8
8
|
import { SidePanelContext } from '../providers/SidePanel.context.js';
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
const
|
|
10
|
+
/** The close button's action, name and test ids, shared by both variants. */
|
|
11
|
+
const useCloseButton = ({ onClose, closeLabel, 'data-testid': dataTestId }) => {
|
|
12
12
|
const panel = useContext(SidePanelContext);
|
|
13
13
|
const prefix = useTestIdPrefix();
|
|
14
|
-
return
|
|
14
|
+
return {
|
|
15
|
+
headerTestId: dataTestId ?? (prefix ? joinTestId(prefix, 'header') : undefined),
|
|
16
|
+
closeTestId: prefix ? joinTestId(prefix, 'close') : undefined,
|
|
17
|
+
backTestId: prefix ? joinTestId(prefix, 'back') : undefined,
|
|
18
|
+
label: closeLabel ?? (panel ? `Close ${panel.label}` : undefined),
|
|
19
|
+
close: onClose ?? panel?.close,
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
const SidePanelTitleHeader = ({ className, children, variant: _variant, onClose, closeLabel, onBack, backLabel = 'Back', 'data-testid': dataTestId, ...props }) => {
|
|
23
|
+
const { headerTestId, closeTestId, backTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
24
|
+
return (jsxs("header", { ...props, "data-testid": headerTestId, className: cx('relative w-full px-4 pt-6 pb-8 lg:px-6', onBack && 'flex items-center gap-3', className), children: [onBack && (jsx(ButtonUtility, { icon: ArrowLeft, tooltip: backLabel, color: "tertiary", size: "sm",
|
|
15
25
|
// 32px tall in a 28px title line: pulled in so the header is as tall as one without a back button.
|
|
16
|
-
className: "-my-0.5", onClick: onBack, "data-testid":
|
|
26
|
+
className: "-my-0.5", onClick: onBack, "data-testid": backTestId })), onBack ? jsx("div", { className: "min-w-0 flex-1 pr-12", children: children }) : children, jsx(CloseButton, { size: "md", label: label, className: "absolute top-3 right-3 shrink-0", onClick: close, "data-testid": closeTestId })] }));
|
|
27
|
+
};
|
|
28
|
+
const SidePanelFloatingHeader = ({ className, children: _children, variant: _variant, onClose, closeLabel, onBack: _onBack, backLabel: _backLabel, 'data-testid': dataTestId, ...props }) => {
|
|
29
|
+
const { headerTestId, closeTestId, label, close } = useCloseButton({ onClose, closeLabel, 'data-testid': dataTestId });
|
|
30
|
+
return (
|
|
31
|
+
// A div, not header: it holds one button and no introductory content, which the embedded content's own header carries.
|
|
32
|
+
jsx("div", { ...props, "data-testid": headerTestId, className: cx('absolute top-3 right-3 z-10', className), children: jsx(CloseButton, { size: "md", label: label, onClick: close, "data-testid": closeTestId }) }));
|
|
33
|
+
};
|
|
34
|
+
/** Title area with a close button, which closes the panel unless `onClose` is passed, and an optional back button. */
|
|
35
|
+
const SidePanelHeader = (props) => {
|
|
36
|
+
if (props.variant === 'floating')
|
|
37
|
+
return jsx(SidePanelFloatingHeader, { ...props });
|
|
38
|
+
return jsx(SidePanelTitleHeader, { ...props });
|
|
17
39
|
};
|
|
18
40
|
SidePanelHeader.displayName = 'SidePanelHeader';
|
|
19
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelHeader.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SidePanelHeader.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -9,6 +9,12 @@ var pageCover_utils = require('../../../../utilities/__internal__/pageCoverUtils
|
|
|
9
9
|
|
|
10
10
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
11
11
|
const SIDE_PANEL_WIDTH = 400;
|
|
12
|
+
/**
|
|
13
|
+
* Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
|
|
14
|
+
* button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
|
|
15
|
+
* another React root can read it from CSS.
|
|
16
|
+
*/
|
|
17
|
+
const SIDE_PANEL_CLOSE_RESERVE = 56;
|
|
12
18
|
// Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
|
|
13
19
|
const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
|
|
14
20
|
const DOCKED = {
|
|
@@ -46,12 +52,13 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
|
|
|
46
52
|
const motionStates = isDesktop ? DOCKED : FULL_PAGE;
|
|
47
53
|
return (jsxRuntime.jsx(react.motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId,
|
|
48
54
|
// Focusable by script only, so opening can land on the region without adding a tab stop.
|
|
49
|
-
tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
55
|
+
tabIndex: -1, onFocusCapture: onFocusCapture, style: { '--fd-side-panel-close-reserve': `${SIDE_PANEL_CLOSE_RESERVE}px` }, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
50
56
|
// overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
|
|
51
57
|
// right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
|
|
52
|
-
className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
58
|
+
className: cx.cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsxRuntime.jsx("div", { className: cx.cx('relative flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsxRuntime.jsx("div", { className: cx.cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
53
59
|
};
|
|
54
60
|
|
|
61
|
+
exports.SIDE_PANEL_CLOSE_RESERVE = SIDE_PANEL_CLOSE_RESERVE;
|
|
55
62
|
exports.SIDE_PANEL_WIDTH = SIDE_PANEL_WIDTH;
|
|
56
63
|
exports.SidePanelRegion = SidePanelRegion;
|
|
57
64
|
//# sourceMappingURL=SidePanelRegion.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":";;;;;;;;;AASA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAGC,kBAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAGC,sBAAgB,EAAE;;;AAI7C,IAAA,MAAM,UAAU,GAAG,SAAS,IAAI,CAAC,SAAS;IAC1CC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO;AAAE,YAAAC,iCAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACzE,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,2BAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAGL,YAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAGA,YAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpEG,eAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEG,cAAA,CAACC,YAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.cjs","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["useRef","useIsPresent","useReducedMotion","useEffect","dispatchPageCover","usePanelFocus","_jsx","motion","cx"],"mappings":"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"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
3
3
|
export declare const SIDE_PANEL_WIDTH = 400;
|
|
4
|
+
/**
|
|
5
|
+
* Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
|
|
6
|
+
* button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
|
|
7
|
+
* another React root can read it from CSS.
|
|
8
|
+
*/
|
|
9
|
+
export declare const SIDE_PANEL_CLOSE_RESERVE = 56;
|
|
4
10
|
interface SidePanelRegionProps {
|
|
5
11
|
'aria-label': string;
|
|
6
12
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.d.ts","sourceRoot":"","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,4GAA4G;AAC5G,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAe3C,UAAU,oBAAoB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,GAAI,sGAQ7B,oBAAoB,gCA6DtB,CAAC"}
|
|
@@ -7,6 +7,12 @@ import { dispatchPageCover } from '../../../../utilities/__internal__/pageCoverU
|
|
|
7
7
|
|
|
8
8
|
/** Width of the panel from `lg` in pixels. Matches `w-100`. Below `lg` the panel is as wide as the page. */
|
|
9
9
|
const SIDE_PANEL_WIDTH = 400;
|
|
10
|
+
/**
|
|
11
|
+
* Side of the square, in pixels, that a `floating` header's close button occupies in the panel's top-right corner: the 40px
|
|
12
|
+
* button, its 12px inset and a 4px margin. Exposed to the content as `--fd-side-panel-close-reserve`, so a micro-frontend in
|
|
13
|
+
* another React root can read it from CSS.
|
|
14
|
+
*/
|
|
15
|
+
const SIDE_PANEL_CLOSE_RESERVE = 56;
|
|
10
16
|
// Critically damped (damping = 2 * sqrt(stiffness)): a lower damping overshoots the width by a pixel and settles back, which reads as a wobble.
|
|
11
17
|
const SPRING = { type: 'spring', damping: 30, stiffness: 220 };
|
|
12
18
|
const DOCKED = {
|
|
@@ -44,11 +50,11 @@ const SidePanelRegion = ({ 'aria-label': ariaLabel, children, className, content
|
|
|
44
50
|
const motionStates = isDesktop ? DOCKED : FULL_PAGE;
|
|
45
51
|
return (jsx(motion.aside, { ref: panelRef, "aria-label": ariaLabel, "data-testid": testId,
|
|
46
52
|
// Focusable by script only, so opening can land on the region without adding a tab stop.
|
|
47
|
-
tabIndex: -1, onFocusCapture: onFocusCapture, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
53
|
+
tabIndex: -1, onFocusCapture: onFocusCapture, style: { '--fd-side-panel-close-reserve': `${SIDE_PANEL_CLOSE_RESERVE}px` }, initial: motionStates.closed, animate: motionStates.open, exit: motionStates.closed, transition: shouldReduceMotion || hasCrossedBreakpoint ? { duration: 0 } : SPRING,
|
|
48
54
|
// overflow-hidden clips the fixed-width content while the panel's own width animates. justify-end pins the content to the
|
|
49
55
|
// right edge, which stays put, so it never sits on the animated fractional left edge where images snap to pixels and shake.
|
|
50
|
-
className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
56
|
+
className: cx('flex h-full min-h-0 shrink-0 justify-end overflow-hidden bg-secondary outline-focus-ring focus-visible:outline-2 focus-visible:-outline-offset-2', !isDesktop && 'absolute inset-y-0 right-0 z-10', className), children: jsx("div", { className: cx('relative flex h-full shrink-0 flex-col', isDesktop ? 'w-100 border-l border-secondary' : 'w-full'), children: jsx("div", { className: cx('flex min-h-0 flex-1 flex-col', hasSwappedContent.current && 'animate-in fade-in duration-200 motion-reduce:animate-none'), children: children }, contentKey) }) }));
|
|
51
57
|
};
|
|
52
58
|
|
|
53
|
-
export { SIDE_PANEL_WIDTH, SidePanelRegion };
|
|
59
|
+
export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH, SidePanelRegion };
|
|
54
60
|
//# sourceMappingURL=SidePanelRegion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AASA;AACO,MAAM,gBAAgB,GAAG;AAEhC;AACA,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAW;AAEvE,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,EAAE;CAC/B;AAEV,MAAM,SAAS,GAAG;IAChB,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE;IACpC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;CACrB;AAYV;MACa,eAAe,GAAG,CAAC,EAC9B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,SAAS,EACT,kBAAkB,GACG,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;AAC1C,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,EAAE;;;AAI7C,IAAA,MAAM,UAAU,GAAG,SAAS,IAAI,CAAC,SAAS;IAC1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,UAAU,IAAI,QAAQ,CAAC,OAAO;AAAE,YAAA,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC;AACzE,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC;;AAG5G,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;AAC1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AACvC,IAAA,IAAI,eAAe,CAAC,OAAO,KAAK,UAAU;AAAE,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;;AAG5E,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC;AAC3C,IAAA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,OAAO,KAAK,SAAS;IACpE,SAAS,CAAC,MAAK;AACb,QAAA,iBAAiB,CAAC,OAAO,GAAG,SAAS;AACvC,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAEf,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS;AAEnD,IAAA,QACEA,GAAA,CAAC,MAAM,CAAC,KAAK,EAAA,EACX,GAAG,EAAE,QAAQ,EAAA,YAAA,EACD,SAAS,EAAA,aAAA,EACR,MAAM;;
|
|
1
|
+
{"version":3,"file":"SidePanelRegion.js","sources":["../../../../../src/components/organisms/SidePanel/components/SidePanelRegion.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
|
|
@@ -44,6 +44,7 @@ SidePanel.Header = SidePanelHeader.SidePanelHeader;
|
|
|
44
44
|
SidePanel.Content = SidePanelContent.SidePanelContent;
|
|
45
45
|
SidePanel.Footer = SidePanelFooter.SidePanelFooter;
|
|
46
46
|
|
|
47
|
+
exports.SIDE_PANEL_CLOSE_RESERVE = SidePanelRegion.SIDE_PANEL_CLOSE_RESERVE;
|
|
47
48
|
exports.SIDE_PANEL_WIDTH = SidePanelRegion.SIDE_PANEL_WIDTH;
|
|
48
49
|
exports.SidePanel = SidePanel;
|
|
49
50
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,eAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,cAAA,CAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EARL,YAAY,CASA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;AAOG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","useBreakpoints","useContext","PageCoverContext","useOpenOnMount","useEffect","_jsx","SidePanelContext","TestIdProvider","AnimatePresence","SidePanelRegion","SidePanelHeader","SidePanelContent","SidePanelFooter"],"mappings":";;;;;;;;;;;;;;;AA0CA,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,GACV,KAAe;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAC3G,IAAA,MAAM,SAAS,GAAGC,6BAAc,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,cAAc,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;;IAEnD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,GAAGC,6BAAc,CAAC,MAAM,CAAC;IAEzE,MAAM,UAAU,GAAG,kBAAkB,IAAI,MAAM,IAAI,CAAC,SAAS;IAC7DC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU;YAAE;QACpC,cAAc,CAAC,IAAI,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,KAAK,CAAC;AACpC,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEhC,IAAA,IAAI,CAAC,kBAAkB;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,QACEC,cAAA,CAACC,kCAAgB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAA,QAAA,EACtFD,eAACE,0BAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BF,cAAA,CAACG,qBAAe,EAAA,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5B,MAAM,KACLH,cAAA,CAACI,+BAAe,EAAA,EAAA,YAAA,EAEF,SAAS,EACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EAAA,QAAA,EAErC,QAAQ,EAAA,EARL,YAAY,CASA,CACnB,EAAA,CACe,EAAA,CACH,EAAA,CACS;AAEhC,CAAC;AACD,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;;;;;;;AAOG;AACH,MAAM,SAAS,GAAG;AAMlB,SAAS,CAAC,MAAM,GAAGC,+BAAe;AAClC,SAAS,CAAC,OAAO,GAAGC,iCAAgB;AACpC,SAAS,CAAC,MAAM,GAAGC,+BAAe;;;;"}
|
|
@@ -5,7 +5,7 @@ import { SidePanelHeader } from './components/SidePanelHeader';
|
|
|
5
5
|
export type { SidePanelContentProps } from './components/SidePanelContent';
|
|
6
6
|
export type { SidePanelFooterProps } from './components/SidePanelFooter';
|
|
7
7
|
export type { SidePanelHeaderProps } from './components/SidePanelHeader';
|
|
8
|
-
export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
|
|
8
|
+
export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH } from './components/SidePanelRegion';
|
|
9
9
|
export interface SidePanelProps {
|
|
10
10
|
/**
|
|
11
11
|
* Whether the panel is open. Share it with the control that opens the panel, e.g. `assistant.isOpen`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/SidePanel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAM/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE1F,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,qIAAqI;IACrI,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qHAAqH;IACrH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,aAAa;qHAQhB,cAAc,GAAG,SAAS;;CAqC5B,CAAC;AAGF;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,EAAoB,OAAO,aAAa,GAAG;IACxD,MAAM,EAAE,OAAO,eAAe,CAAC;IAC/B,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,MAAM,EAAE,OAAO,eAAe,CAAC;CAChC,CAAC;AAMF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { SidePanelContent } from './components/SidePanelContent.js';
|
|
|
7
7
|
import { SidePanelFooter } from './components/SidePanelFooter.js';
|
|
8
8
|
import { SidePanelHeader } from './components/SidePanelHeader.js';
|
|
9
9
|
import { SidePanelRegion } from './components/SidePanelRegion.js';
|
|
10
|
-
export { SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
|
|
10
|
+
export { SIDE_PANEL_CLOSE_RESERVE, SIDE_PANEL_WIDTH } from './components/SidePanelRegion.js';
|
|
11
11
|
import { useOpenOnMount } from './hooks/useOpenOnMount.js';
|
|
12
12
|
import { PageCoverContext } from './providers/PageCover.context.js';
|
|
13
13
|
import { SidePanelContext } from './providers/SidePanel.context.js';
|