npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.4 → 1.5.0-next.41 - Mend

@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.41

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.

Files changed (560) hide show

package/dist/js/packages/components/src/components/MarkdownEditor/lib/useFileUpload.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFileUpload.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/lib/useFileUpload.ts"],"sourcesContent":["import {\n type DragEvent as ReactDragEvent,\n type DragEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { matchesAccept } from \"@/lib/files/acceptedFiles\";\nimport {\n insertAtCaret,\n type MarkdownEditorUpload,\n removePlaceholder,\n replacePlaceholder,\n uploadedFileMarkdown,\n uploadPlaceholder,\n type ValueEdit,\n} from \"@/components/MarkdownEditor/lib/fileUpload\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/.locale.json\";\n\n/* The files of a paste or a drop that `accept` covers. /\nconst acceptedFrom = (files: FileList \| null \| undefined, accept?: string) =>\n Array.from(files ?? []).filter((file) => matchesAccept(file, accept));\n\n/* @internal /\nexport type MarkdownEditorFileUploadHandler = (\n file: File,\n) => Promise<MarkdownEditorUpload>;\n\ninterface Options {\n /* Which file types to take, as an `accept` attribute value. /\n accept?: string;\n /* Uploads one file. Uploading is off entirely while this is undefined. /\n uploadFile?: MarkdownEditorFileUploadHandler;\n /* Turns dropping, pasting and the toolbar button off. /\n isDisabled?: boolean;\n value: string;\n onChange: (value: string) => void;\n textAreaRef: RefObject<HTMLTextAreaElement \| null>;\n}\n\ninterface DropProps {\n onDragEnter?: DragEventHandler;\n onDragOver?: DragEventHandler;\n onDragLeave?: DragEventHandler;\n onDrop?: DragEventHandler;\n}\n\ninterface FileUpload {\n /* Drop handling for the editor's root element. /\n dropProps: DropProps;\n /* Whether a drag is currently over the editor. /\n isDropTarget: boolean;\n /\n Uploads the files the toolbar button picked. `undefined` while uploading is\n * off.\n /\n uploadFiles?: (files: File[]) => void;\n}\n\n/\n Drop, paste and toolbar uploads for the `MarkdownEditor`: a placeholder\n * comment goes to the cursor right away and is replaced by a markdown link once\n * the consumer's upload resolves.\n \n @internal\n /\nexport const useFileUpload = (options: Options): FileUpload => {\n const { accept, uploadFile, isDisabled, value, onChange, textAreaRef } =\n options;\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"MarkdownEditor\",\n );\n\n const isEnabled = !!uploadFile && !isDisabled;\n\n /\n * An upload resolves long after the drop, and the editor has kept taking\n * input in the meantime. The textarea's own value is the only one that is\n * current by then — the `value` prop is a render old whenever two uploads\n * resolve in the same tick.\n /\n const valueRef = useRef(value);\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n\n const readValue = () => textAreaRef.current?.value ?? valueRef.current;\n\n /\n * A textarea keeps its `selectionStart` after losing focus, so the caret is\n * still readable once the attachment button has taken the focus away. What it\n * cannot tell apart is a caret at position 0 from one that was never placed —\n * both read 0, and appending is the better answer for the second.\n /\n const wasFocusedRef = useRef(false);\n useEffect(() => {\n const textArea = textAreaRef.current;\n\n if (!textArea) {\n return;\n }\n\n const rememberFocus = () => {\n wasFocusedRef.current = true;\n };\n\n textArea.addEventListener(\"focus\", rememberFocus);\n return () => textArea.removeEventListener(\"focus\", rememberFocus);\n }, [textAreaRef]);\n\n const readSelection = () => {\n const textArea = textAreaRef.current;\n const fallback = readValue().length;\n return {\n start: textArea?.selectionStart ?? fallback,\n end: textArea?.selectionEnd ?? fallback,\n };\n };\n\n const applyEdit = (edit: ValueEdit) => {\n valueRef.current = edit.value;\n\n const textArea = textAreaRef.current;\n if (textArea) {\n /\n * Written before the re-render so an upload resolving in the same tick\n * reads this one's result, and the selection restored after it, once\n * React has rendered the controlled value.\n /\n textArea.value = edit.value;\n requestAnimationFrame(() => {\n textArea.setSelectionRange(edit.selectionStart, edit.selectionEnd);\n });\n }\n\n onChange(edit.value);\n };\n\n const runUpload = async (\n upload: MarkdownEditorFileUploadHandler,\n file: File,\n placeholder: string,\n ) => {\n announce(\n stringFormatter.format(\"upload.pending\", { name: file.name }),\n \"polite\",\n );\n\n try {\n const result = await upload(file);\n const selection = readSelection();\n const edit = replacePlaceholder(\n readValue(),\n placeholder,\n uploadedFileMarkdown(file, result),\n selection.start,\n selection.end,\n );\n\n if (edit) {\n applyEdit(edit);\n }\n\n announce(\n stringFormatter.format(\"upload.succeeded\", { name: file.name }),\n \"polite\",\n );\n } catch {\n const selection = readSelection();\n const edit = removePlaceholder(\n readValue(),\n placeholder,\n selection.start,\n selection.end,\n );\n\n if (edit) {\n applyEdit(edit);\n }\n\n announce(\n stringFormatter.format(\"upload.failed\", { name: file.name }),\n \"assertive\",\n );\n }\n };\n\n const uploadFiles = (files: File[]) => {\n if (!uploadFile \|\| files.length === 0) {\n return;\n }\n\n const textArea = textAreaRef.current;\n const caret =\n textArea && wasFocusedRef.current\n ? textArea.selectionStart\n : readValue().length;\n\n const uploads = files.map((file) => ({\n file,\n placeholder: uploadPlaceholder(file.name),\n }));\n\n applyEdit(\n insertAtCaret(\n readValue(),\n uploads.map((upload) => upload.placeholder).join(\"\\n\"),\n caret,\n ),\n );\n textArea?.focus();\n\n for (const upload of uploads) {\n void runUpload(uploadFile, upload.file, upload.placeholder);\n }\n };\n\n const uploadFilesRef = useRef(uploadFiles);\n uploadFilesRef.current = uploadFiles;\n\n /\n * The paste listener is attached imperatively rather than through react-aria's\n * `useClipboard`, which calls `preventDefault` on every paste it sees and\n * would take plain text pasting with it.\n /\n useEffect(() => {\n const textArea = textAreaRef.current;\n\n if (!textArea \|\| !isEnabled) {\n return;\n }\n\n const handlePaste = (event: ClipboardEvent) => {\n const files = acceptedFrom(event.clipboardData?.files, accept);\n\n if (files.length === 0) {\n return;\n }\n\n event.preventDefault();\n uploadFilesRef.current(files);\n };\n\n textArea.addEventListener(\"paste\", handlePaste);\n return () => textArea.removeEventListener(\"paste\", handlePaste);\n }, [isEnabled, accept, textAreaRef]);\n\n /\n * Native handlers rather than react-aria's `useDrop`: that one claims every\n * drag it sees — its `onDrop` calls `preventDefault` and `stopPropagation`\n * unconditionally — which is right for a dedicated drop surface like\n * `FileDropZone`, but here it would swallow a plain text drag into the\n * textarea. A drag is claimed only when it carries files, and\n * `dataTransfer.types` is the only place that says so: the public\n * `DragTypes` of `getDropOperation` offers just `has(type)`, which cannot\n * express it — the wildcard type is always true, and WebKit reports every\n * file drag as an unknown type that answers true to anything.\n /\n const dragHasFiles = (event: ReactDragEvent) =>\n event.dataTransfer.types.includes(\"Files\");\n\n /\n * `dragenter` and `dragleave` fire again for every child the pointer\n * crosses, so the highlight follows their balance rather than the last one.\n */\n const dragDepth = useRef(0);\n const [isDropTarget, setIsDropTarget] = useState(false);\n\n const endDrag = () => {\n dragDepth.current = 0;\n setIsDropTarget(false);\n };\n\n const dropProps: DropProps = isEnabled\n ? {\n onDragEnter: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n event.preventDefault();\n dragDepth.current += 1;\n setIsDropTarget(true);\n },\n onDragOver: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n // Without this the browser refuses the drop and opens the file instead.\n event.preventDefault();\n event.dataTransfer.dropEffect = \"copy\";\n },\n onDragLeave: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n dragDepth.current = Math.max(0, dragDepth.current - 1);\n if (dragDepth.current === 0) {\n setIsDropTarget(false);\n }\n },\n onDrop: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n event.preventDefault();\n endDrag();\n uploadFilesRef.current(\n acceptedFrom(event.dataTransfer.files, accept),\n );\n },\n }\n : {};\n\n return {\n dropProps,\n isDropTarget,\n uploadFiles: uploadFile ? uploadFiles : undefined,\n };\n};\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,gBAAgB,OAAoC,WACxD,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,SAAS,cAAc,MAAM,MAAM,CAAC;;;;;;;;AA6CtE,IAAa,iBAAiB,YAAiC;CAC7D,MAAM,EAAE,QAAQ,YAAY,YAAY,OAAO,UAAU,gBACvD;CAEF,MAAM,kBAAkB,4BACtB,kBACA,gBACF;CAEA,MAAM,YAAY,CAAC,CAAC,cAAc,CAAC;CAQnC,MAAM,WAAW,OAAO,KAAK;CAC7B,gBAAgB;EACd,SAAS,UAAU;CACrB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,kBAAkB,YAAY,SAAS,SAAS,SAAS;CAQ/D,MAAM,gBAAgB,OAAO,KAAK;CAClC,gBAAgB;EACd,MAAM,WAAW,YAAY;EAE7B,IAAI,CAAC,UACH;EAGF,MAAM,sBAAsB;GAC1B,cAAc,UAAU;EAC1B;EAEA,SAAS,iBAAiB,SAAS,aAAa;EAChD,aAAa,SAAS,oBAAoB,SAAS,aAAa;CAClE,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,sBAAsB;EAC1B,MAAM,WAAW,YAAY;EAC7B,MAAM,WAAW,UAAU,CAAC,CAAC;EAC7B,OAAO;GACL,OAAO,UAAU,kBAAkB;GACnC,KAAK,UAAU,gBAAgB;EACjC;CACF;CAEA,MAAM,aAAa,SAAoB;EACrC,SAAS,UAAU,KAAK;EAExB,MAAM,WAAW,YAAY;EAC7B,IAAI,UAAU;GAMZ,SAAS,QAAQ,KAAK;GACtB,4BAA4B;IAC1B,SAAS,kBAAkB,KAAK,gBAAgB,KAAK,YAAY;GACnE,CAAC;EACH;EAEA,SAAS,KAAK,KAAK;CACrB;CAEA,MAAM,YAAY,OAChB,QACA,MACA,gBACG;EACH,SACE,gBAAgB,OAAO,kBAAkB,EAAE,MAAM,KAAK,KAAK,CAAC,GAC5D,QACF;EAEA,IAAI;GACF,MAAM,SAAS,MAAM,OAAO,IAAI;GAChC,MAAM,YAAY,cAAc;GAChC,MAAM,OAAO,mBACX,UAAU,GACV,aACA,qBAAqB,MAAM,MAAM,GACjC,UAAU,OACV,UAAU,GACZ;GAEA,IAAI,MACF,UAAU,IAAI;GAGhB,SACE,gBAAgB,OAAO,oBAAoB,EAAE,MAAM,KAAK,KAAK,CAAC,GAC9D,QACF;EACF,QAAQ;GACN,MAAM,YAAY,cAAc;GAChC,MAAM,OAAO,kBACX,UAAU,GACV,aACA,UAAU,OACV,UAAU,GACZ;GAEA,IAAI,MACF,UAAU,IAAI;GAGhB,SACE,gBAAgB,OAAO,iBAAiB,EAAE,MAAM,KAAK,KAAK,CAAC,GAC3D,WACF;EACF;CACF;CAEA,MAAM,eAAe,UAAkB;EACrC,IAAI,CAAC,cAAc,MAAM,WAAW,GAClC;EAGF,MAAM,WAAW,YAAY;EAC7B,MAAM,QACJ,YAAY,cAAc,UACtB,SAAS,iBACT,UAAU,CAAC,CAAC;EAElB,MAAM,UAAU,MAAM,KAAK,UAAU;GACnC;GACA,aAAa,kBAAkB,KAAK,IAAI;EAC1C,EAAE;EAEF,UACE,cACE,UAAU,GACV,QAAQ,KAAK,WAAW,OAAO,WAAW,CAAC,CAAC,KAAK,IAAI,GACrD,KACF,CACF;EACA,UAAU,MAAM;EAEhB,KAAK,MAAM,UAAU,SACnB,UAAe,YAAY,OAAO,MAAM,OAAO,WAAW;CAE9D;CAEA,MAAM,iBAAiB,OAAO,WAAW;CACzC,eAAe,UAAU;CAOzB,gBAAgB;EACd,MAAM,WAAW,YAAY;EAE7B,IAAI,CAAC,YAAY,CAAC,WAChB;EAGF,MAAM,eAAe,UAA0B;GAC7C,MAAM,QAAQ,aAAa,MAAM,eAAe,OAAO,MAAM;GAE7D,IAAI,MAAM,WAAW,GACnB;GAGF,MAAM,eAAe;GACrB,eAAe,QAAQ,KAAK;EAC9B;EAEA,SAAS,iBAAiB,SAAS,WAAW;EAC9C,aAAa,SAAS,oBAAoB,SAAS,WAAW;CAChE,GAAG;EAAC;EAAW;EAAQ;CAAW,CAAC;CAanC,MAAM,gBAAgB,UACpB,MAAM,aAAa,MAAM,SAAS,OAAO;CAM3C,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,MAAM,gBAAgB;EACpB,UAAU,UAAU;EACpB,gBAAgB,KAAK;CACvB;CA0CA,OAAO;EACL,WAzC2B,YACzB;GACE,cAAc,UAAU;IACtB,IAAI,CAAC,aAAa,KAAK,GACrB;IAEF,MAAM,eAAe;IACrB,UAAU,WAAW;IACrB,gBAAgB,IAAI;GACtB;GACA,aAAa,UAAU;IACrB,IAAI,CAAC,aAAa,KAAK,GACrB;IAGF,MAAM,eAAe;IACrB,MAAM,aAAa,aAAa;GAClC;GACA,cAAc,UAAU;IACtB,IAAI,CAAC,aAAa,KAAK,GACrB;IAEF,UAAU,UAAU,KAAK,IAAI,GAAG,UAAU,UAAU,CAAC;IACrD,IAAI,UAAU,YAAY,GACxB,gBAAgB,KAAK;GAEzB;GACA,SAAS,UAAU;IACjB,IAAI,CAAC,aAAa,KAAK,GACrB;IAEF,MAAM,eAAe;IACrB,QAAQ;IACR,eAAe,QACb,aAAa,MAAM,aAAa,OAAO,MAAM,CAC/C;GACF;EACF,IACA,CAAC;EAIH;EACA,aAAa,aAAa,cAAc,KAAA;CAC1C;AACF"}
1	+ {"version":3,"file":"useFileUpload.mjs","names":["locales"],"sources":["../../../../../../../../src/components/MarkdownEditor/lib/useFileUpload.ts"],"sourcesContent":["import {\n type DragEvent as ReactDragEvent,\n type DragEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { matchesAccept } from \"@/lib/files/acceptedFiles\";\nimport {\n insertAtCaret,\n type MarkdownEditorUpload,\n removePlaceholder,\n replacePlaceholder,\n uploadedFileMarkdown,\n uploadPlaceholder,\n type ValueEdit,\n} from \"@/components/MarkdownEditor/lib/fileUpload\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/.locale.json\";\n\n/* The files of a paste or a drop that `accept` covers. /\nconst acceptedFrom = (files: FileList \| null \| undefined, accept?: string) =>\n Array.from(files ?? []).filter((file) => matchesAccept(file, accept));\n\n/* @internal /\nexport type MarkdownEditorFileUploadHandler = (\n file: File,\n) => Promise<MarkdownEditorUpload>;\n\ninterface Options {\n /* Which file types to take, as an `accept` attribute value. /\n accept?: string;\n /* Uploads one file. Uploading is off entirely while this is undefined. /\n uploadFile?: MarkdownEditorFileUploadHandler;\n /* Turns dropping, pasting and the toolbar button off. /\n isDisabled?: boolean;\n value: string;\n onChange: (value: string) => void;\n textAreaRef: RefObject<HTMLTextAreaElement \| null>;\n}\n\ninterface DropProps {\n onDragEnter?: DragEventHandler;\n onDragOver?: DragEventHandler;\n onDragLeave?: DragEventHandler;\n onDrop?: DragEventHandler;\n}\n\ninterface FileUpload {\n /* Drop handling for the editor's root element. /\n dropProps: DropProps;\n /* Whether a drag is currently over the editor. /\n isDropTarget: boolean;\n /\n Uploads the files the toolbar button picked. `undefined` while uploading is\n * off.\n /\n uploadFiles?: (files: File[]) => void;\n}\n\n/\n Drop, paste and toolbar uploads for the `MarkdownEditor`: a placeholder\n * comment goes to the cursor right away and is replaced by a markdown link once\n * the consumer's upload resolves.\n \n @internal\n /\nexport const useFileUpload = (options: Options): FileUpload => {\n const { accept, uploadFile, isDisabled, value, onChange, textAreaRef } =\n options;\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"MarkdownEditor\",\n );\n\n const isEnabled = !!uploadFile && !isDisabled;\n\n /\n * An upload resolves long after the drop, and the editor has kept taking\n * input in the meantime. The textarea's own value is the only one that is\n * current by then — the `value` prop is a render old whenever two uploads\n * resolve in the same tick.\n /\n const valueRef = useRef(value);\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n\n const readValue = () => textAreaRef.current?.value ?? valueRef.current;\n\n /\n * A textarea keeps its `selectionStart` after losing focus, so the caret is\n * still readable once the attachment button has taken the focus away. What it\n * cannot tell apart is a caret at position 0 from one that was never placed —\n * both read 0, and appending is the better answer for the second.\n /\n const wasFocusedRef = useRef(false);\n useEffect(() => {\n const textArea = textAreaRef.current;\n\n if (!textArea) {\n return;\n }\n\n const rememberFocus = () => {\n wasFocusedRef.current = true;\n };\n\n textArea.addEventListener(\"focus\", rememberFocus);\n return () => textArea.removeEventListener(\"focus\", rememberFocus);\n }, [textAreaRef]);\n\n const readSelection = () => {\n const textArea = textAreaRef.current;\n const fallback = readValue().length;\n return {\n start: textArea?.selectionStart ?? fallback,\n end: textArea?.selectionEnd ?? fallback,\n };\n };\n\n const applyEdit = (edit: ValueEdit) => {\n valueRef.current = edit.value;\n\n const textArea = textAreaRef.current;\n if (textArea) {\n /\n * Written before the re-render so an upload resolving in the same tick\n * reads this one's result, and the selection restored after it, once\n * React has rendered the controlled value.\n /\n textArea.value = edit.value;\n requestAnimationFrame(() => {\n textArea.setSelectionRange(edit.selectionStart, edit.selectionEnd);\n });\n }\n\n onChange(edit.value);\n };\n\n const runUpload = async (\n upload: MarkdownEditorFileUploadHandler,\n file: File,\n placeholder: string,\n ) => {\n announce(\n stringFormatter.format(\"upload.pending\", { name: file.name }),\n \"polite\",\n );\n\n try {\n const result = await upload(file);\n const selection = readSelection();\n const edit = replacePlaceholder(\n readValue(),\n placeholder,\n uploadedFileMarkdown(file, result),\n selection.start,\n selection.end,\n );\n\n if (edit) {\n applyEdit(edit);\n }\n\n announce(\n stringFormatter.format(\"upload.succeeded\", { name: file.name }),\n \"polite\",\n );\n } catch {\n const selection = readSelection();\n const edit = removePlaceholder(\n readValue(),\n placeholder,\n selection.start,\n selection.end,\n );\n\n if (edit) {\n applyEdit(edit);\n }\n\n announce(\n stringFormatter.format(\"upload.failed\", { name: file.name }),\n \"assertive\",\n );\n }\n };\n\n const uploadFiles = (files: File[]) => {\n if (!uploadFile \|\| files.length === 0) {\n return;\n }\n\n const textArea = textAreaRef.current;\n const caret =\n textArea && wasFocusedRef.current\n ? textArea.selectionStart\n : readValue().length;\n\n const uploads = files.map((file) => ({\n file,\n placeholder: uploadPlaceholder(file.name),\n }));\n\n applyEdit(\n insertAtCaret(\n readValue(),\n uploads.map((upload) => upload.placeholder).join(\"\\n\"),\n caret,\n ),\n );\n textArea?.focus();\n\n for (const upload of uploads) {\n void runUpload(uploadFile, upload.file, upload.placeholder);\n }\n };\n\n const uploadFilesRef = useRef(uploadFiles);\n uploadFilesRef.current = uploadFiles;\n\n /\n * The paste listener is attached imperatively rather than through react-aria's\n * `useClipboard`, which calls `preventDefault` on every paste it sees and\n * would take plain text pasting with it.\n /\n useEffect(() => {\n const textArea = textAreaRef.current;\n\n if (!textArea \|\| !isEnabled) {\n return;\n }\n\n const handlePaste = (event: ClipboardEvent) => {\n const files = acceptedFrom(event.clipboardData?.files, accept);\n\n if (files.length === 0) {\n return;\n }\n\n event.preventDefault();\n uploadFilesRef.current(files);\n };\n\n textArea.addEventListener(\"paste\", handlePaste);\n return () => textArea.removeEventListener(\"paste\", handlePaste);\n }, [isEnabled, accept, textAreaRef]);\n\n /\n * Native handlers rather than react-aria's `useDrop`: that one claims every\n * drag it sees — its `onDrop` calls `preventDefault` and `stopPropagation`\n * unconditionally — which is right for a dedicated drop surface like\n * `FileDropZone`, but here it would swallow a plain text drag into the\n * textarea. A drag is claimed only when it carries files, and\n * `dataTransfer.types` is the only place that says so: the public\n * `DragTypes` of `getDropOperation` offers just `has(type)`, which cannot\n * express it — the wildcard type is always true, and WebKit reports every\n * file drag as an unknown type that answers true to anything.\n /\n const dragHasFiles = (event: ReactDragEvent) =>\n event.dataTransfer.types.includes(\"Files\");\n\n /\n * `dragenter` and `dragleave` fire again for every child the pointer\n * crosses, so the highlight follows their balance rather than the last one.\n */\n const dragDepth = useRef(0);\n const [isDropTarget, setIsDropTarget] = useState(false);\n\n const endDrag = () => {\n dragDepth.current = 0;\n setIsDropTarget(false);\n };\n\n const dropProps: DropProps = isEnabled\n ? {\n onDragEnter: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n event.preventDefault();\n dragDepth.current += 1;\n setIsDropTarget(true);\n },\n onDragOver: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n // Without this the browser refuses the drop and opens the file instead.\n event.preventDefault();\n event.dataTransfer.dropEffect = \"copy\";\n },\n onDragLeave: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n dragDepth.current = Math.max(0, dragDepth.current - 1);\n if (dragDepth.current === 0) {\n setIsDropTarget(false);\n }\n },\n onDrop: (event) => {\n if (!dragHasFiles(event)) {\n return;\n }\n event.preventDefault();\n endDrag();\n uploadFilesRef.current(\n acceptedFrom(event.dataTransfer.files, accept),\n );\n },\n }\n : {};\n\n return {\n dropProps,\n isDropTarget,\n uploadFiles: uploadFile ? uploadFiles : undefined,\n };\n};\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/MenuItem/MenuItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.mjs","names":[],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n extends\n Omit<Aria.MenuItemProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n selectionVariant?: \"control\" \| \"navigation\" \| \"switch\";\n /*\n Shows the checkbox of a multiple-selection item as partially checked,\n * unless the item is selected.\n /\n isIndeterminate?: boolean;\n /* Whether the button is in a pending state. /\n isPending?: boolean;\n /* Whether the button is in a succeeded state. /\n isSucceeded?: boolean;\n /* Whether the button is in a failed state. /\n isFailed?: boolean;\n /* Disables button but keeps it focusable. /\n \"aria-disabled\"?: boolean;\n /* Marks the menu item as referring to the currently active page. /\n \"aria-current\"?: string;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n if (\n props.isPending \|\|\n props.isSucceeded \|\|\n props.isFailed \|\|\n props[\"aria-disabled\"]\n ) {\n props = { ...props };\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n }\n\n return props;\n};\n\n/* @flr-generate all /\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n props = disablePendingProps(props);\n\n const {\n children,\n className,\n selectionVariant,\n isIndeterminate,\n id,\n ref,\n \"aria-disabled\": ariaDisabled,\n \"aria-current\": ariaCurrent,\n isPending,\n isSucceeded,\n isFailed,\n ...rest\n } = props;\n\n /\n React Aria drops `aria-current` from the props it forwards to the DOM, so\n * the current state is exposed as a data attribute (`data-` passes the\n filter) — that is what the `menuItem` styling matches on. Every\n * `aria-current` value marks the item as current, except an explicit\n * \"false\".\n /\n const currentProps =\n ariaCurrent && ariaCurrent !== \"false\" ? { \"data-current\": true } : {};\n\n const rootClassName = clsx(\n styles.menuItem /\n Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n * now, so this MenuItem will be visually disabled via CSS.\n */,\n (ariaDisabled \|\| isFailed \|\| isSucceeded \|\| isPending) &&\n styles.ariaDisabled,\n className,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const stateIconElement = isSucceeded ? (\n <IconSucceeded color=\"success\" />\n ) : isFailed ? (\n <IconFailed color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner />\n ) : undefined;\n\n const stateIcon = stateIconElement && (\n <div className={styles.stateIcon}>{stateIconElement}</div>\n );\n\n return (\n <Aria.MenuItem\n {...rest}\n {...currentProps}\n key={id}\n id={id}\n className={rootClassName}\n ref={ref}\n >\n {(props) => (\n <>\n <MenuItemContent\n {...props}\n selectionVariant={selectionVariant}\n isIndeterminate={isIndeterminate}\n >\n {children}\n </MenuItemContent>\n {stateIcon}\n </>\n )}\n </Aria.MenuItem>\n );\n});\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AAkCA,IAAM,uBAAuB,UAAyB;CACpD,IACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,kBACN;EACA,QAAQ,EAAE,GAAG,MAAM;EACnB,MAAM,UAAU,KAAA;EAChB,MAAM,eAAe,KAAA;EACrB,MAAM,aAAa,KAAA;EACnB,MAAM,gBAAgB,KAAA;EACtB,MAAM,YAAY,KAAA;CACpB;CAEA,OAAO;AACT;;AAGA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,EACJ,UACA,WACA,kBACA,iBACA,IACA,KACA,iBAAiB,cACjB,gBAAgB,aAChB,WACA,aACA,UACA,GAAG,SACD;;;;;;;;CASJ,MAAM,eACJ,eAAe,gBAAgB,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAEvE,MAAM,gBAAgB,~~KACpB~~,wBAAO,WAIN,gBAAgB,YAAY,eAAe,~~cAC1C~~,wBAAO,cACT,SACF;CAEA,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,mBAAmB,cACvB,oBAAC,eAAD,EAAe,OAAM,UAAW,CAAA,IAC9B,WACF,oBAAC,YAAD,EAAY,OAAM,SAAU,CAAA,IAC1B,YACF,oBAAC,gBAAD,CAAiB,CAAA,IACf,KAAA;CAEJ,MAAM,YAAY,oBAChB,oBAAC,OAAD;EAAK,~~WAAW~~,wBAAO;EAAY,UAAA;CAAsB,CAAA;CAG3D,OACE,8BAAC,KAAK,UAAN;EACE,GAAI;EACJ,GAAI;EACJ,KAAK;EACD;EACJ,WAAW;EACN;CAcQ,IAZX,UACA,~~qBAAA~~,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;EACE,GAAI;EACc;EACD;EAEhB;CACc,CAAA,GAChB,SACD,EAAA,CAAA,CAES;AAEnB,CAAC"}
1	+ {"version":3,"file":"MenuItem.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport LoadingSpinner from \"@/components/LoadingSpinner\";\n\nexport interface MenuItemProps\n extends\n Omit<Aria.MenuItemProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n selectionVariant?: \"control\" \| \"navigation\" \| \"switch\";\n /*\n Shows the checkbox of a multiple-selection item as partially checked,\n * unless the item is selected.\n /\n isIndeterminate?: boolean;\n /* Whether the button is in a pending state. /\n isPending?: boolean;\n /* Whether the button is in a succeeded state. /\n isSucceeded?: boolean;\n /* Whether the button is in a failed state. /\n isFailed?: boolean;\n /* Disables button but keeps it focusable. /\n \"aria-disabled\"?: boolean;\n /* Marks the menu item as referring to the currently active page. /\n \"aria-current\"?: string;\n}\n\nconst disablePendingProps = (props: MenuItemProps) => {\n if (\n props.isPending \|\|\n props.isSucceeded \|\|\n props.isFailed \|\|\n props[\"aria-disabled\"]\n ) {\n props = { ...props };\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n }\n\n return props;\n};\n\n/* @flr-generate all /\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n props = disablePendingProps(props);\n\n const {\n children,\n className,\n selectionVariant,\n isIndeterminate,\n id,\n ref,\n \"aria-disabled\": ariaDisabled,\n \"aria-current\": ariaCurrent,\n isPending,\n isSucceeded,\n isFailed,\n ...rest\n } = props;\n\n /\n React Aria drops `aria-current` from the props it forwards to the DOM, so\n * the current state is exposed as a data attribute (`data-` passes the\n filter) — that is what the `menuItem` styling matches on. Every\n * `aria-current` value marks the item as current, except an explicit\n * \"false\".\n /\n const currentProps =\n ariaCurrent && ariaCurrent !== \"false\" ? { \"data-current\": true } : {};\n\n const rootClassName = clsx(\n styles.menuItem /\n Workaround warning: The Aria.MenuItem does not support \"aria-disabled\" by\n * now, so this MenuItem will be visually disabled via CSS.\n */,\n (ariaDisabled \|\| isFailed \|\| isSucceeded \|\| isPending) &&\n styles.ariaDisabled,\n className,\n );\n\n useAriaAnnounceActionState(\n isPending\n ? \"isPending\"\n : isSucceeded\n ? \"isSucceeded\"\n : isFailed\n ? \"isFailed\"\n : \"isIdle\",\n );\n\n const stateIconElement = isSucceeded ? (\n <IconSucceeded color=\"success\" />\n ) : isFailed ? (\n <IconFailed color=\"danger\" />\n ) : isPending ? (\n <LoadingSpinner />\n ) : undefined;\n\n const stateIcon = stateIconElement && (\n <div className={styles.stateIcon}>{stateIconElement}</div>\n );\n\n return (\n <Aria.MenuItem\n {...rest}\n {...currentProps}\n key={id}\n id={id}\n className={rootClassName}\n ref={ref}\n >\n {(props) => (\n <>\n <MenuItemContent\n {...props}\n selectionVariant={selectionVariant}\n isIndeterminate={isIndeterminate}\n >\n {children}\n </MenuItemContent>\n {stateIcon}\n </>\n )}\n </Aria.MenuItem>\n );\n});\n\nexport default MenuItem;\n"],"mappings":";;;;;;;;;;;;;;AAkCA,IAAM,uBAAuB,UAAyB;CACpD,IACE,MAAM,aACN,MAAM,eACN,MAAM,YACN,MAAM,kBACN;EACA,QAAQ,EAAE,GAAG,MAAM;EACnB,MAAM,UAAU,KAAA;EAChB,MAAM,eAAe,KAAA;EACrB,MAAM,aAAa,KAAA;EACnB,MAAM,gBAAgB,KAAA;EACtB,MAAM,YAAY,KAAA;CACpB;CAEA,OAAO;AACT;;AAGA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,QAAQ,oBAAoB,KAAK;CAEjC,MAAM,EACJ,UACA,WACA,kBACA,iBACA,IACA,KACA,iBAAiB,cACjB,gBAAgB,aAChB,WACA,aACA,UACA,GAAG,SACD;;;;;;;;CASJ,MAAM,eACJ,eAAe,gBAAgB,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAEvE,MAAM,gBAAgB,KACpBA,wBAAO,WAIN,gBAAgB,YAAY,eAAe,cAC1CA,wBAAO,cACT,SACF;CAEA,2BACE,YACI,cACA,cACE,gBACA,WACE,aACA,QACV;CAEA,MAAM,mBAAmB,cACvB,oBAAC,eAAD,EAAe,OAAM,UAAW,CAAA,IAC9B,WACF,oBAAC,YAAD,EAAY,OAAM,SAAU,CAAA,IAC1B,YACF,oBAAC,gBAAD,CAAiB,CAAA,IACf,KAAA;CAEJ,MAAM,YAAY,oBAChB,oBAAC,OAAD;EAAK,WAAWA,wBAAO;EAAY,UAAA;CAAsB,CAAA;CAG3D,OACE,8BAAC,KAAK,UAAN;EACE,GAAI;EACJ,GAAI;EACJ,KAAK;EACD;EACJ,WAAW;EACN;CAcQ,IAZX,UACA,qBAAAC,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;EACE,GAAI;EACc;EACD;EAEhB;CACc,CAAA,GAChB,SACD,EAAA,CAAA,CAES;AAEnB,CAAC"}

package/dist/js/packages/components/src/components/MenuItem/components/MenuItemContent/MenuItemContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItemContent.mjs","names":[],"sources":["../../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconCheckboxIndeterminate,\n IconRadioOff,\n IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n selectionVariant?: \"control\" \| \"navigation\" \| \"switch\";\n isIndeterminate?: boolean;\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n const {\n selectionMode,\n isSelected,\n selectionVariant = \"control\",\n isIndeterminate,\n children,\n } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n },\n Avatar: {\n className: styles.avatar,\n },\n Kbd: {\n className: styles.kbd,\n },\n Badge: {\n className: styles.badge,\n },\n };\n\n const controlIconPropsContext: PropsContext = {\n Icon: {\n className: clsx(\n styles.controlIcon,\n styles.icon,\n (isSelected \|\| isIndeterminate) && styles.controlIconActive,\n ),\n },\n Switch: {\n className: clsx(styles.controlIcon, styles.switch),\n labelPosition: \"leading\",\n },\n };\n\n const selectionIcon =\n selectionMode === \"none\" \|\|\n selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" ? (\n <Switch isReadOnly isSelected={isSelected} />\n ) : selectionMode === \"single\" && isSelected ? (\n <IconRadioOn />\n ) : selectionMode === \"single\" && !isSelected ? (\n <IconRadioOff />\n ) : selectionMode === \"multiple\" && isSelected ? (\n <IconCheckboxChecked />\n ) : selectionMode === \"multiple\" && isIndeterminate ? (\n <IconCheckboxIndeterminate />\n ) : (\n <IconCheckboxEmpty />\n );\n\n return (\n <>\n <PropsContextProvider props={controlIconPropsContext}>\n {selectionIcon}\n </PropsContextProvider>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EACJ,eACA,YACA,mBAAmB,WACnB,iBACA,aACE;CAEJ,MAAM,eAA6B;EACjC,MAAM,EACJ,~~WAAW~~,wBAAO,KACpB;EACA,QAAQ,EACN,~~WAAW~~,wBAAO,OACpB;EACA,KAAK,EACH,~~WAAW~~,wBAAO,IACpB;EACA,OAAO,EACL,~~WAAW~~,wBAAO,MACpB;CACF;CAEA,MAAM,0BAAwC;EAC5C,MAAM,EACJ,WAAW,~~KACT~~,wBAAO,~~aACP~~,wBAAO,OACN,cAAc,~~oBAAoB~~,wBAAO,iBAC5C,EACF;EACA,QAAQ;GACN,WAAW,~~KAAK~~,wBAAO,~~aAAa~~,wBAAO,MAAM;GACjD,eAAe;EACjB;CACF;CAkBA,OACE,~~qBAAA~~,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAlBL,kBAAkB,UAClB,qBAAqB,eAAe,OAAO,qBAAqB,WAC9D,oBAAC,QAAD;GAAQ,YAAA;GAAuB;EAAa,CAAA,IAC1C,kBAAkB,YAAY,aAChC,oBAAC,aAAD,CAAc,CAAA,IACZ,kBAAkB,YAAY,CAAC,aACjC,oBAAC,cAAD,CAAe,CAAA,IACb,kBAAkB,cAAc,aAClC,oBAAC,qBAAD,CAAsB,CAAA,IACpB,kBAAkB,cAAc,kBAClC,oBAAC,2BAAD,CAA4B,CAAA,IAE5B,oBAAC,mBAAD,CAAoB,CAAA;CAOE,CAAA,GACtB,oBAAC,sBAAD;EAAsB,OAAO;EAC1B;CACmB,CAAA,CACtB,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"MenuItemContent.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/MenuItem/components/MenuItemContent/MenuItemContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"../../MenuItem.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n IconCheckboxChecked,\n IconCheckboxEmpty,\n IconCheckboxIndeterminate,\n IconRadioOff,\n IconRadioOn,\n} from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { Switch } from \"@/components/Switch\";\n\ninterface Props extends Aria.MenuItemRenderProps, PropsWithChildren {\n selectionVariant?: \"control\" \| \"navigation\" \| \"switch\";\n isIndeterminate?: boolean;\n}\n\nexport const MenuItemContent: FC<Props> = (props) => {\n const {\n selectionMode,\n isSelected,\n selectionVariant = \"control\",\n isIndeterminate,\n children,\n } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n className: styles.icon,\n },\n Avatar: {\n className: styles.avatar,\n },\n Kbd: {\n className: styles.kbd,\n },\n Badge: {\n className: styles.badge,\n },\n };\n\n const controlIconPropsContext: PropsContext = {\n Icon: {\n className: clsx(\n styles.controlIcon,\n styles.icon,\n (isSelected \|\| isIndeterminate) && styles.controlIconActive,\n ),\n },\n Switch: {\n className: clsx(styles.controlIcon, styles.switch),\n labelPosition: \"leading\",\n },\n };\n\n const selectionIcon =\n selectionMode === \"none\" \|\|\n selectionVariant === \"navigation\" ? null : selectionVariant === \"switch\" ? (\n <Switch isReadOnly isSelected={isSelected} />\n ) : selectionMode === \"single\" && isSelected ? (\n <IconRadioOn />\n ) : selectionMode === \"single\" && !isSelected ? (\n <IconRadioOff />\n ) : selectionMode === \"multiple\" && isSelected ? (\n <IconCheckboxChecked />\n ) : selectionMode === \"multiple\" && isIndeterminate ? (\n <IconCheckboxIndeterminate />\n ) : (\n <IconCheckboxEmpty />\n );\n\n return (\n <>\n <PropsContextProvider props={controlIconPropsContext}>\n {selectionIcon}\n </PropsContextProvider>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EACJ,eACA,YACA,mBAAmB,WACnB,iBACA,aACE;CAEJ,MAAM,eAA6B;EACjC,MAAM,EACJ,WAAWA,wBAAO,KACpB;EACA,QAAQ,EACN,WAAWA,wBAAO,OACpB;EACA,KAAK,EACH,WAAWA,wBAAO,IACpB;EACA,OAAO,EACL,WAAWA,wBAAO,MACpB;CACF;CAEA,MAAM,0BAAwC;EAC5C,MAAM,EACJ,WAAW,KACTA,wBAAO,aACPA,wBAAO,OACN,cAAc,oBAAoBA,wBAAO,iBAC5C,EACF;EACA,QAAQ;GACN,WAAW,KAAKA,wBAAO,aAAaA,wBAAO,MAAM;GACjD,eAAe;EACjB;CACF;CAkBA,OACE,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAlBL,kBAAkB,UAClB,qBAAqB,eAAe,OAAO,qBAAqB,WAC9D,oBAAC,QAAD;GAAQ,YAAA;GAAuB;EAAa,CAAA,IAC1C,kBAAkB,YAAY,aAChC,oBAAC,aAAD,CAAc,CAAA,IACZ,kBAAkB,YAAY,CAAC,aACjC,oBAAC,cAAD,CAAe,CAAA,IACb,kBAAkB,cAAc,aAClC,oBAAC,qBAAD,CAAsB,CAAA,IACpB,kBAAkB,cAAc,kBAClC,oBAAC,2BAAD,CAA4B,CAAA,IAE5B,oBAAC,mBAAD,CAAoB,CAAA;CAOE,CAAA,GACtB,oBAAC,sBAAD;EAAsB,OAAO;EAC1B;CACmB,CAAA,CACtB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Message/Message.mjs CHANGED Viewed

@@ -6,6 +6,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { IconContextMenu } from "../Icon/components/icons/IconContextMenu.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { SkeletonRawText } from "../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Message_module_default from "./Message.module.mjs";
 import __locale_default from "../../../../../_virtual/_26.locale.mjs";
 import clsx from "clsx";
@@ -38,7 +39,7 @@ var Message = flowComponent("Message", (props) => {
 						className: Message_module_default.tip,
 						"aria-hidden": true
 					}),
-					props.children
+					/* @__PURE__ */ jsx(SkeletonRawText, { children: props.children })
 				] });
 			})
 		},

package/dist/js/packages/components/src/components/Message/Message.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Message.mjs","names":[],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport as Aria from \"react-aria-components\";\n\nexport interface MessageProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n PropsWithElementType<\"article\" \| \"li\"> {\n /** Determines the color and orientation of the message. @default \"responder\" /\n type?: \"responder\" \| \"sender\";\n /* A custom background color of the message as a CSS color value. /\n color?: string;\n}\n\n/* @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n const {\n type = \"responder\",\n children,\n className,\n color,\n elementType = \"article\",\n } = props;\n\n const Element = elementType;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style: CSSProperties \| undefined = color\n ? { \"--message-background\": color }\n : undefined;\n\n const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n const senderContext: PropsContext[\"Combine\"] = {\n wrapWith: <ClearPropsContext />,\n className: styles.user,\n Avatar: { Initials: { \"aria-hidden\": true } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.content,\n children: dynamic((props) => {\n return (\n <>\n <div className={styles.tipBorder} aria-hidden />\n <div className={styles.tip} aria-hidden />\n {props.children}\n </>\n );\n }),\n },\n Header: {\n className: styles.header,\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n },\n ContextMenuTrigger: {\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n children: <IconContextMenu />,\n \"aria-label\": formatter.format(\"options\"),\n },\n },\n Text: { className: styles.date },\n Combine: senderContext,\n // Deprecated alias of Combine — keep it arranged the same way.\n Align: senderContext,\n children: dynamic((props) => (\n <>\n <Aria.VisuallyHidden>\n {formatter.format(\"headerLabel\")}\n </Aria.VisuallyHidden>\n {props.children}\n </>\n )),\n },\n\n Button: {\n size: \"s\",\n className: styles.action,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n className: styles.actionGroup,\n Button: {\n className: styles.actionGroupAction,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} style={style}>\n {children}\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Message;\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAmCA~~,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,cACZ;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,~~KAAK~~,uBAAO,~~SAAS~~,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,~~4BAA4B~~,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,~~WAAW~~,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,~~WAAW~~,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,~~qBAAA~~,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,~~WAAW~~,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,~~WAAW~~,uBAAO;MAAK,eAAA;KAAa,CAAA;~~KACxC~~,MAAM;~~IACP~~,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,~~WAAW~~,uBAAO;GAClB,QAAQ;IACN,~~WAAW~~,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,~~WAAW~~,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,~~WAAW~~,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,~~qBAAA~~,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,~~WAAW~~,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,~~WAAW~~,uBAAO;GAClB,QAAQ,EACN,~~WAAW~~,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAS,WAAW;GAAsB;GACvC;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"Message.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n PropsWithClassName,\n PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport as Aria from \"react-aria-components\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface MessageProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n FlowComponentProps,\n PropsWithElementType<\"article\" \| \"li\"> {\n /** Determines the color and orientation of the message. @default \"responder\" /\n type?: \"responder\" \| \"sender\";\n /* A custom background color of the message as a CSS color value. /\n color?: string;\n}\n\n/* @flr-generate all /\nexport const Message = flowComponent(\"Message\", (props) => {\n const {\n type = \"responder\",\n children,\n className,\n color,\n elementType = \"article\",\n } = props;\n\n const Element = elementType;\n\n const rootClassName = clsx(styles.message, styles[type], className);\n\n const style: CSSProperties \| undefined = color\n ? { \"--message-background\": color }\n : undefined;\n\n const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n const senderContext: PropsContext[\"Combine\"] = {\n wrapWith: <ClearPropsContext />,\n className: styles.user,\n Avatar: { Initials: { \"aria-hidden\": true } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.content,\n children: dynamic((props) => {\n return (\n <>\n <div className={styles.tipBorder} aria-hidden />\n <div className={styles.tip} aria-hidden />\n {/ The fragment hides raw text from `Content`'s own text rule. */}\n <SkeletonRawText>{props.children}</SkeletonRawText>\n </>\n );\n }),\n },\n Header: {\n className: styles.header,\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n },\n ContextMenuTrigger: {\n Button: {\n className: styles.headerAction,\n size: \"s\",\n variant: \"plain\",\n color: \"secondary\",\n children: <IconContextMenu />,\n \"aria-label\": formatter.format(\"options\"),\n },\n },\n Text: { className: styles.date },\n Combine: senderContext,\n // Deprecated alias of Combine — keep it arranged the same way.\n Align: senderContext,\n children: dynamic((props) => (\n <>\n <Aria.VisuallyHidden>\n {formatter.format(\"headerLabel\")}\n </Aria.VisuallyHidden>\n {props.children}\n </>\n )),\n },\n\n Button: {\n size: \"s\",\n className: styles.action,\n },\n ActionGroup: {\n preserveOrder: true,\n size: \"s\",\n className: styles.actionGroup,\n Button: {\n className: styles.actionGroupAction,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <Element className={rootClassName} style={style}>\n {children}\n </Element>\n </PropsContextProvider>\n );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,cACZ;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,KAAKA,uBAAO,SAASA,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,4BAA4BC,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,WAAWD,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,qBAAAE,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWF,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAK,eAAA;KAAa,CAAA;KAEzC,oBAAC,iBAAD,EAAA,UAAkB,MAAM,SAA0B,CAAA;IAClD,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,WAAWA,uBAAO;GAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,WAAWA,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAE,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,WAAWF,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,WAAWA,uBAAO;GAClB,QAAQ,EACN,WAAWA,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAS,WAAW;GAAsB;GACvC;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/MessageThread/MessageThread.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageThread.mjs","names":[],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n PropsWithClassName &\n FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageThread, className);\n\n const propsContext: PropsContext = {\n Message: {\n className: dynamic((props) => {\n return clsx(\n props.className,\n styles.message,\n styles[props.type ?? \"responder\"],\n );\n }),\n elementType: \"li\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <ul className={rootClassName}>{children}</ul>\n </PropsContextProvider>\n );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,~~KAAK~~,6BAAO,eAAe,SAAS;CAE1D,MAAM,eAA6B,EACjC,SAAS;EACP,WAAW,SAAS,UAAU;GAC5B,OAAO,KACL,MAAM,~~WACN~~,6BAAO,~~SACP~~,6BAAO,MAAM,QAAQ,YACvB;EACF,CAAC;EACD,aAAa;CACf,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAI,WAAW;GAAgB;EAAa,CAAA;CACxB,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"MessageThread.mjs","names":["styles"],"sources":["../../../../../../../src/components/MessageThread/MessageThread.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./MessageThread.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type MessageThreadProps = PropsWithChildren &\n PropsWithClassName &\n FlowComponentProps;\n\n/** @flr-generate all */\nexport const MessageThread = flowComponent(\"MessageThread\", (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageThread, className);\n\n const propsContext: PropsContext = {\n Message: {\n className: dynamic((props) => {\n return clsx(\n props.className,\n styles.message,\n styles[props.type ?? \"responder\"],\n );\n }),\n elementType: \"li\",\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <ul className={rootClassName}>{children}</ul>\n </PropsContextProvider>\n );\n});\n\nexport default MessageThread;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,eAA6B,EACjC,SAAS;EACP,WAAW,SAAS,UAAU;GAC5B,OAAO,KACL,MAAM,WACNA,6BAAO,SACPA,6BAAO,MAAM,QAAQ,YACvB;EACF,CAAC;EACD,aAAa;CACf,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAI,WAAW;GAAgB;EAAa,CAAA;CACxB,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/MessageThread/components/MessageSeparator/MessageSeparator.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageSeparator.mjs","names":[],"sources":["../../../../../../../../../src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./MessageSeparator.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { Separator } from \"@/components/Separator\";\nimport { Content } from \"@/components/Content\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/.locale.json\";\nimport as Aria from \"react-aria-components\";\n\nexport interface MessageSeparatorProps\n extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const MessageSeparator: FC<MessageSeparatorProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageSeparator, className);\n\n const formatter = useLocalizedStringFormatter(locales, \"MessageThread\");\n\n return (\n <li className={rootClassName}>\n <Separator className={styles.separator} />\n <Aria.VisuallyHidden>\n {formatter.format(\"separator.label\")}\n </Aria.VisuallyHidden>\n <Content className={styles.content}>{children}</Content>\n </li>\n );\n};\nexport default MessageSeparator;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,~~KAAK~~,gCAAO,kBAAkB,SAAS;CAE7D,MAAM,YAAY,~~4BAA4B~~,kBAAS,eAAe;CAEtE,OACE,qBAAC,MAAD;EAAI,WAAW;EAAf,UAAA;GACE,oBAAC,WAAD,EAAW,~~WAAW~~,gCAAO,UAAY,CAAA;GACzC,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,iBAAiB,EAChB,CAAA;GACrB,oBAAC,SAAD;IAAS,~~WAAW~~,gCAAO;IAAU;GAAkB,CAAA;EACrD;;AAER"}
1	+ {"version":3,"file":"MessageSeparator.mjs","names":["styles","locales"],"sources":["../../../../../../../../../src/components/MessageThread/components/MessageSeparator/MessageSeparator.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./MessageSeparator.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { Separator } from \"@/components/Separator\";\nimport { Content } from \"@/components/Content\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"../../locales/.locale.json\";\nimport as Aria from \"react-aria-components\";\n\nexport interface MessageSeparatorProps\n extends PropsWithChildren, PropsWithClassName {}\n\n/** @flr-generate all */\nexport const MessageSeparator: FC<MessageSeparatorProps> = (props) => {\n const { children, className } = props;\n\n const rootClassName = clsx(styles.messageSeparator, className);\n\n const formatter = useLocalizedStringFormatter(locales, \"MessageThread\");\n\n return (\n <li className={rootClassName}>\n <Separator className={styles.separator} />\n <Aria.VisuallyHidden>\n {formatter.format(\"separator.label\")}\n </Aria.VisuallyHidden>\n <Content className={styles.content}>{children}</Content>\n </li>\n );\n};\nexport default MessageSeparator;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,gBAAgB,KAAKA,gCAAO,kBAAkB,SAAS;CAE7D,MAAM,YAAY,4BAA4BC,kBAAS,eAAe;CAEtE,OACE,qBAAC,MAAD;EAAI,WAAW;EAAf,UAAA;GACE,oBAAC,WAAD,EAAW,WAAWD,gCAAO,UAAY,CAAA;GACzC,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,iBAAiB,EAChB,CAAA;GACrB,oBAAC,SAAD;IAAS,WAAWA,gCAAO;IAAU;GAAkB,CAAA;EACrD;;AAER"}

package/dist/js/packages/components/src/components/Modal/Modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" \| \"isDefaultOpen\" \| \"onOpen\" \| \"onClose\" \| \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /* The size of the modal. @default \"s\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Whether the modal should be displayed as an off canvas. /\n offCanvas?: boolean;\n /\n Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n /\n offCanvasOrientation?: \"left\" \| \"right\";\n /* An overlay controller to control the modal state. /\n controller?: OverlayController;\n /\n Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n /\n slot?: string;\n /* Whether the modal can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the close button should be visible /\n showCloseButton?: boolean;\n /\n Whether closing the modal must be confirmed – use it to protect unsaved\n * changes. `false` does not switch off the confirmation of a dirty `Form`\n * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n * `Form` for that.\n */\n confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n // On mobile the header/footer are docked (sticky) while at rest, but flow\n // normally while the on-screen keyboard is open so the content gets the full\n // available space (see Modal.module.scss). #2423\n const keyboardVisible = useVirtualKeyboardVisible();\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n keyboardVisible && styles.keyboardVisible,\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n <DivView className={styles.headerTitle}>{children}</DivView>\n <ClearPropsContext>\n <ClearPropsContextView>\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </ClearPropsContextView>\n </ClearPropsContext>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n const { closeOverlay } = props;\n if (closeOverlay === undefined \|\| closeOverlay === false) {\n return closeOverlay;\n }\n // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n // unset – the options object means the same thing.\n if (closeOverlay === true) {\n return { bypassConfirmation: true };\n }\n if (\n closeOverlay instanceof OverlayController \|\|\n typeof closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n <ConfirmUnsavedChangesModal />\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,OAAO,KACP,WACA,YACA,UACA,KACA,WACA,uBAAuB,SACvB,iBACA,GAAG,iBACD;CAEJ,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,OAAO;CAKpE,MAAM,kBAAkB,0BAA0B;CAElD,MAAM,gBAAgB,KACpB,~~YAAY~~,qBAAO,~~YAAY~~,qBAAO,~~OACtC~~,qBAAO,QAAQ,SACf,yBAAyB,~~UAAU~~,qBAAO,SAC1C,~~mBAAmB~~,qBAAO,iBAC1B,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,UAAU,aACd,~~qBAAA~~,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAS,~~WAAW~~,qBAAO;EAAc;CAAkB,CAAA,GAC3D,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,QAAD;EAAQ,YAAY,EAAE,oBAAoB,KAAK;EAC7C,UAAA,oBAAC,YAAD;GACE,SAAQ;GACR,OAAM;GACN,cAAY,gBAAgB,OAAO,OAAO;GAC1C,WAAW,~~KACT~~,qBAAO,aACP,oBAAoB,~~OAChB~~,qBAAO,gBACP,oBAAoB,~~QAClB~~,qBAAO,eACP,KAAA,CACR;GAEA,UAAA,oBAAC,WAAD,CAAY,CAAA;EACF,CAAA;CACN,CAAA,EACa,CAAA,EACN,CAAA,CACnB,EAAA,CAAA;CAGJ,MAAM,qBAAqB;CAE3B,MAAM,qBAAmC;EACvC,SAAS,EAAE,OAAO,mBAAmB;EACrC,SAAS;GACP,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;GACjD,SAAS,EAAE,OAAO,mBAAmB;GACrC,eAAe;EACjB;EACA,QAAQ,EAAE,SAAS,EAAE,OAAO,mBAAmB,EAAE;CACnD;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,GAAG;GACH,~~WAAW~~,qBAAO;EACpB;EACA,cAAc;GACZ,GAAG;GACH,GAAG,CAAC,GAAG,CAAC;GACR,GAAG,CAAC,CAAC;GACL,~~WAAW~~,qBAAO;GAClB,WAAW;IAAE,~~WAAW~~,qBAAO;IAAW,iBAAiB;GAAU;GACrE,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAChC;EACA,SAAS;GACP,~~WAAW~~,qBAAO;GAClB,OAAO;GACP,UAAU,SAAS,UAAU,OAAO,MAAM,QAAQ,CAAC;GACnD,IAAI;EACN;EACA,aAAa;GACX,~~WAAW~~,qBAAO;GAClB,SAAS;GACT,QAAQ;IACN,YAAY,SAAS,UAAU;KAC7B,IAAI,MAAM,eAAe,KAAA,GACvB;KAEF,IAAI,MAAM,eAAe,MACvB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,OAAO;MACL,oBAAoB;MACpB,GAAG,MAAM;KACX;IACF,CAAC;IACD,cAAc,SAAS,UAAU;KAC/B,MAAM,EAAE,iBAAiB;KACzB,IAAI,iBAAiB,KAAA,KAAa,iBAAiB,OACjD,OAAO;KAIT,IAAI,iBAAiB,MACnB,OAAO,EAAE,oBAAoB,KAAK;KAEpC,IACE,wBAAwB,qBACxB,OAAO,iBAAiB,UAExB,OAAO;MACL,oBAAoB;MACpB,SAAS;KACX;KAEF,OAAO;MACL,oBAAoB;MACpB,GAAG;KACL;IACF,CAAC;GACH;EACF;CACF;CAEA,OACE,qBAAC,SAAD;EACE,WAAW;EACC;EACP;EACL,mBAAiB;EACjB,GAAI;EALN,UAAA,CAOE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,MAAD;IAAM,IAAI;IACR,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,2BAAD,CAA4B,CAAA;KAC7C;IACO,CAAA;GACN,CAAA;EACc,CAAA,GACtB,oBAAC,4BAAD,CAA6B,CAAA,CACtB;;AAEb,CAAC"}
1	+ {"version":3,"file":"Modal.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, Suspense, useId } from \"react\";\nimport styles from \"./Modal.module.scss\";\nimport clsx from \"clsx\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { OverlayController } from \"@/lib/controller/overlay\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Overlay, type OverlayProps } from \"@/components/Overlay/Overlay\";\nimport { Action } from \"@/components/Action\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ButtonView from \"@/views/ButtonView\";\nimport DivView from \"@/views/DivView\";\nimport { OffCanvasSuspenseFallback } from \"@/components/Modal/components/OffCanvasSuspenseFallback\";\nimport { ConfirmUnsavedChangesModal } from \"@/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal\";\nimport Wrap from \"@/components/Wrap\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport ClearPropsContextView from \"@/views/ClearPropsContextView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { useVirtualKeyboardVisible } from \"@/lib/hooks/dom/useVirtualKeyboardVisible\";\nimport locales from \"./locales/.locale.json\";\n\ntype SupportedOverlayProps = Pick<\n OverlayProps,\n \"isOpen\" \| \"isDefaultOpen\" \| \"onOpen\" \| \"onClose\" \| \"onOpenChange\"\n>;\n\nexport interface ModalProps\n extends\n PropsWithChildren,\n FlowComponentProps,\n PropsWithClassName,\n SupportedOverlayProps {\n /* The size of the modal. @default \"s\" /\n size?: \"s\" \| \"m\" \| \"l\";\n /* Whether the modal should be displayed as an off canvas. /\n offCanvas?: boolean;\n /\n Whether the off canvas should be displayed on the right or left side of the\n * screen. @default \"right\"\n /\n offCanvasOrientation?: \"left\" \| \"right\";\n /* An overlay controller to control the modal state. /\n controller?: OverlayController;\n /\n Accepts \"actionConfirm\" to use the modal as a confirmation modal for an\n * action.\n /\n slot?: string;\n /* Whether the modal can be closed by clicking outside of it. /\n isDismissable?: boolean;\n /* Whether the close button should be visible /\n showCloseButton?: boolean;\n /\n Whether closing the modal must be confirmed – use it to protect unsaved\n * changes. `false` does not switch off the confirmation of a dirty `Form`\n * inside the modal; set `confirmModalCloseOnUnsavedChanges={false}` on the\n * `Form` for that.\n */\n confirmOnClose?: boolean;\n}\n\nexport const Modal = flowComponent(\"Modal\", (props) => {\n const {\n size = \"s\",\n offCanvas,\n controller,\n children,\n ref,\n className,\n offCanvasOrientation = \"right\",\n showCloseButton,\n ...overlayProps\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n\n // On mobile the header/footer are docked (sticky) while at rest, but flow\n // normally while the on-screen keyboard is open so the content gets the full\n // available space (see Modal.module.scss). #2423\n const keyboardVisible = useVirtualKeyboardVisible();\n\n const rootClassName = clsx(\n offCanvas ? styles.offCanvas : styles.modal,\n styles[`size-${size}`],\n offCanvasOrientation === \"left\" && styles[\"left\"],\n keyboardVisible && styles.keyboardVisible,\n className,\n );\n\n const generatedId = useId();\n\n const header = (children: ReactNode) => (\n <>\n <DivView className={styles.headerTitle}>{children}</DivView>\n <ClearPropsContext>\n <ClearPropsContextView>\n <Action closeModal={{ bypassConfirmation: true }}>\n <ButtonView\n variant=\"plain\"\n color=\"secondary\"\n aria-label={stringFormatter.format(\"close\")}\n className={clsx(\n styles.closeButton,\n showCloseButton === true\n ? styles.alwaysVisible\n : showCloseButton === false\n ? styles.alwaysHidden\n : undefined,\n )}\n >\n <IconClose />\n </ButtonView>\n </Action>\n </ClearPropsContextView>\n </ClearPropsContext>\n </>\n );\n\n const nestedHeadingLevel = 3;\n\n const nestedHeadingProps: PropsContext = {\n Heading: { level: nestedHeadingLevel },\n Section: {\n Header: { Heading: { level: nestedHeadingLevel } },\n Heading: { level: nestedHeadingLevel },\n hideSeparator: true,\n },\n Header: { Heading: { level: nestedHeadingLevel } },\n };\n\n const propsContext: PropsContext = {\n Content: {\n ...nestedHeadingProps,\n className: styles.content,\n },\n ColumnLayout: {\n ...nestedHeadingProps,\n l: [2, 1],\n m: [1],\n className: styles.columnLayout,\n AccentBox: { className: styles.accentBox, backgroundColor: \"neutral\" },\n wrapWith: <ClearPropsContext />,\n },\n Heading: {\n className: styles.header,\n level: 2,\n children: dynamic((props) => header(props.children)),\n id: generatedId,\n },\n ActionGroup: {\n className: styles.actionGroup,\n spacing: \"m\",\n Action: {\n closeModal: dynamic((props) => {\n if (props.closeModal === undefined) {\n return;\n }\n if (props.closeModal === true) {\n return { bypassConfirmation: true };\n }\n return {\n bypassConfirmation: true,\n ...props.closeModal,\n };\n }),\n closeOverlay: dynamic((props) => {\n const { closeOverlay } = props;\n if (closeOverlay === undefined \|\| closeOverlay === false) {\n return closeOverlay;\n }\n // `true` keeps its \"the nearest overlay\" meaning by leaving `overlay`\n // unset – the options object means the same thing.\n if (closeOverlay === true) {\n return { bypassConfirmation: true };\n }\n if (\n closeOverlay instanceof OverlayController \|\|\n typeof closeOverlay === \"string\"\n ) {\n return {\n bypassConfirmation: true,\n overlay: closeOverlay,\n };\n }\n return {\n bypassConfirmation: true,\n ...closeOverlay,\n };\n }),\n },\n },\n };\n\n return (\n <Overlay\n className={rootClassName}\n controller={controller}\n ref={ref}\n aria-labelledby={generatedId}\n {...overlayProps}\n >\n <PropsContextProvider props={propsContext}>\n <Wrap if={offCanvas}>\n <Suspense fallback={<OffCanvasSuspenseFallback />}>\n {children}\n </Suspense>\n </Wrap>\n </PropsContextProvider>\n <ConfirmUnsavedChangesModal />\n </Overlay>\n );\n});\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/Modal/Modal.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). /\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/ ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== /\n.modal,\n.offCanvas {\n / Overlay.module.scss lays the viewport out; the dialog inside it is the only\n pointer target. /\n > :global(.flow--overlay--viewport) {\n pointer-events: none;\n\n / react-aria's own modal wrapper — it gets no className from Flow, so\n its default `react-aria-Modal` class is the handle. /\n > :global(.react-aria-Modal) {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n / Close button: hidden when an action group is present, unless forced. /\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n / The dialog card itself — a flex column. It is also the scroll container on\n mobile, and the sticky header/footer stack against its content only. /\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n // A consumer `Form` (or raw `<form>`) wrapping the modal content. `Form`\n // is a plain FC, so the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: contents;\n }\n }\n\n / Header /\n // A `Header`/`SectionHeader` — or a raw `<header>` — the consumer places in\n // the modal; both must match.\n // stylelint-disable-next-line selector-max-type -- consumer-placed header\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n / Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line.\n Heading's spans do carry classes, but `.flow--heading--heading-content`\n already sets `display: none` on `:empty` at the same specificity a class\n selector here would reach — source order would then decide. /\n // stylelint-disable-next-line selector-max-type -- see above\n > span {\n display: contents;\n }\n\n :global(.flow--heading--heading-text-spacer) {\n display: none;\n }\n\n :global(.flow--heading--heading-content)\n :global(.flow--heading--heading-content-item):not(:last-child) {\n margin-inline-end: 0;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n / Content — the scrollable body /\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n / Action group — the footer /\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n / ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. /\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/ ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== /\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/ ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== /\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > :global(.flow--overlay--viewport) {\n padding-inline-start: var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > :global(.flow--overlay--viewport) {\n padding-inline: 0 var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/ ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== /\n@media (max-width: 768px) {\n .modal {\n / Bottom-anchored sheet: rounded top corners + slide-up animation. /\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n / The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. /\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n // stylelint-disable-next-line selector-max-type -- consumer form, see above\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n / flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. /\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n / Docked header + footer (sticky within the single scroll container). /\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n / Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. /\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n / Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). /\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n // The footer's buttons are consumer `Button`/`Action` children; a raw\n // `<button>` matches today too.\n // stylelint-disable-next-line selector-max-type -- consumer children\n button {\n width: 100%;\n }\n }\n }\n}\n\n/ ===========================================================================\n Animations\n =========================================================================== /\n@keyframes modal-zoom {\n / Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). /\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/ ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== /\n.modal,\n.offCanvas {\n / Overlay.module.scss lays the viewport out; the dialog inside it is the only\n pointer target. /\n > :global(.flow--overlay--viewport) {\n pointer-events: none;\n\n / react-aria's own modal wrapper — it gets no className from Flow, so\n its default `react-aria-Modal` class is the handle. /\n > :global(.react-aria-Modal) {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n / Close button: hidden when an action group is present, unless forced. /\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n / The dialog card itself — a flex column. It is also the scroll container on\n mobile, and the sticky header/footer stack against its content only. /\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n // A consumer `Form` (or raw `<form>`) wrapping the modal content. `Form`\n // is a plain FC, so the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: contents;\n }\n }\n\n / Header /\n // A `Header`/`SectionHeader` — or a raw `<header>` — the consumer places in\n // the modal; both must match.\n // stylelint-disable-next-line selector-max-type -- consumer-placed header\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n / Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line.\n Heading's spans do carry classes, but `.flow--heading--heading-content`\n already sets `display: none` on `:empty` at the same specificity a class\n selector here would reach — source order would then decide. /\n // stylelint-disable-next-line selector-max-type -- see above\n > span {\n display: contents;\n }\n\n :global(.flow--heading--heading-text-spacer) {\n display: none;\n }\n\n :global(.flow--heading--heading-content)\n :global(.flow--heading--heading-content-item):not(:last-child) {\n margin-inline-end: 0;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n / Remote apps built against Flow < 1.2.0 send the close button without\n ClearPropsContext, so the Heading tunnels it into a content item — that\n item is the flex item then — and passes it its button size `s`. /\n .closeButton,\n :global(.flow--heading--heading-content-item):has(.closeButton) {\n order: 1;\n margin-inline-start: auto;\n }\n\n .closeButton:global(.flow--button--size-s) {\n padding: var(--button--padding-icon-only);\n border-radius: var(--button--corner-radius);\n\n :global(.flow--icon) {\n width: var(--icon--size--m);\n height: var(--icon--size--m);\n }\n }\n }\n\n / Content — the scrollable body /\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n / Action group — the footer /\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n / ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. /\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/ ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== /\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/ ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== /\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > :global(.flow--overlay--viewport) {\n padding-inline-start: var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > :global(.flow--overlay--viewport) {\n padding-inline: 0 var(--size-px--m);\n\n > :global(.react-aria-Modal) {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/ ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== /\n@media (max-width: 768px) {\n .modal {\n / Bottom-anchored sheet: rounded top corners + slide-up animation. /\n > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n / The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. /\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n // stylelint-disable-next-line selector-max-type -- consumer form, see above\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n / flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. /\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n / Docked header + footer (sticky within the single scroll container). /\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n / Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. /\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n / Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). /\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n // The footer's buttons are consumer `Button`/`Action` children; a raw\n // `<button>` matches today too.\n // stylelint-disable-next-line selector-max-type -- consumer children\n button {\n width: 100%;\n }\n }\n }\n}\n\n/ ===========================================================================\n Animations\n =========================================================================== /\n@keyframes modal-zoom {\n / Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfirmUnsavedChangesModal.mjs","names":[],"sources":["../../../../../../../../../src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.tsx"],"sourcesContent":["import ContentView from \"@/views/ContentView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/.locale.json\";\nimport Modal from \"@/components/Modal/Modal\";\nimport TextView from \"@/views/TextView\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport Action from \"@/components/Action\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useModalController } from \"@/lib/controller\";\n\n/\n Rendered by every `Modal` and only becomes active once something requires the\n * close to be confirmed – the `confirmOnClose` prop or a dirty `Form`.\n */\nexport const ConfirmUnsavedChangesModal: FC = () => {\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n const modalController = useModalController();\n const confirmOnCloseEnabled = modalController.useConfirmOnCloseEnabled();\n const closeConfirmationController =\n modalController.useConfirmationController();\n\n if (confirmOnCloseEnabled && closeConfirmationController) {\n const { controller, confirm, cancel } = closeConfirmationController;\n\n return (\n <Modal controller={controller}>\n <HeadingView>\n {stringFormatter.format(\"unsavedChangesConfirmationModal.heading\")}\n </HeadingView>\n <ContentView>\n <TextView>\n {stringFormatter.format(\"unsavedChangesConfirmationModal.text\")}\n </TextView>\n </ContentView>\n <ActionGroupView>\n <Action closeModal>\n <Action onAction={confirm}>\n <ButtonView color=\"danger\">\n {stringFormatter.format(\n \"unsavedChangesConfirmationModal.close\",\n )}\n </ButtonView>\n </Action>\n <Action onAction={cancel}>\n <ButtonView color=\"secondary\" variant=\"soft\">\n {stringFormatter.format(\n \"unsavedChangesConfirmationModal.keepOpen\",\n )}\n </ButtonView>\n </Action>\n </Action>\n </ActionGroupView>\n </Modal>\n );\n }\n};\n\nexport default ConfirmUnsavedChangesModal;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,IAAa,mCAAuC;CAClD,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,OAAO;CACpE,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,wBAAwB,gBAAgB,yBAAyB;CACvE,MAAM,8BACJ,gBAAgB,0BAA0B;CAE5C,IAAI,yBAAyB,6BAA6B;EACxD,MAAM,EAAE,YAAY,SAAS,WAAW;EAExC,OACE,qBAAC,OAAD;GAAmB;GAAnB,UAAA;IACE,oBAAC,aAAD,EAAA,UACG,gBAAgB,OAAO,yCAAyC,EACtD,CAAA;IACb,oBAAC,aAAD,EAAA,UACE,oBAAC,UAAD,EAAA,UACG,gBAAgB,OAAO,sCAAsC,EACtD,CAAA,EACC,CAAA;IACb,oBAAC,iBAAD,EAAA,UACE,qBAAC,QAAD;KAAQ,YAAA;KAAR,UAAA,CACE,oBAAC,QAAD;MAAQ,UAAU;MAChB,UAAA,oBAAC,YAAD;OAAY,OAAM;OACf,UAAA,gBAAgB,OACf,uCACF;MACU,CAAA;KACN,CAAA,GACR,oBAAC,QAAD;MAAQ,UAAU;MAChB,UAAA,oBAAC,YAAD;OAAY,OAAM;OAAY,SAAQ;OACnC,UAAA,gBAAgB,OACf,0CACF;MACU,CAAA;KACN,CAAA,CACF;IACO,CAAA,EAAA,CAAA;GACZ;;CAEX;AACF"}
1	+ {"version":3,"file":"ConfirmUnsavedChangesModal.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/Modal/components/ConfirmUnsavedChangesModal/ConfirmUnsavedChangesModal.tsx"],"sourcesContent":["import ContentView from \"@/views/ContentView\";\nimport HeadingView from \"@/views/HeadingView\";\nimport type { FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/.locale.json\";\nimport Modal from \"@/components/Modal/Modal\";\nimport TextView from \"@/views/TextView\";\nimport ActionGroupView from \"@/views/ActionGroupView\";\nimport Action from \"@/components/Action\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { useModalController } from \"@/lib/controller\";\n\n/\n Rendered by every `Modal` and only becomes active once something requires the\n * close to be confirmed – the `confirmOnClose` prop or a dirty `Form`.\n */\nexport const ConfirmUnsavedChangesModal: FC = () => {\n const stringFormatter = useLocalizedStringFormatter(locales, \"Modal\");\n const modalController = useModalController();\n const confirmOnCloseEnabled = modalController.useConfirmOnCloseEnabled();\n const closeConfirmationController =\n modalController.useConfirmationController();\n\n if (confirmOnCloseEnabled && closeConfirmationController) {\n const { controller, confirm, cancel } = closeConfirmationController;\n\n return (\n <Modal controller={controller}>\n <HeadingView>\n {stringFormatter.format(\"unsavedChangesConfirmationModal.heading\")}\n </HeadingView>\n <ContentView>\n <TextView>\n {stringFormatter.format(\"unsavedChangesConfirmationModal.text\")}\n </TextView>\n </ContentView>\n <ActionGroupView>\n <Action closeModal>\n <Action onAction={confirm}>\n <ButtonView color=\"danger\">\n {stringFormatter.format(\n \"unsavedChangesConfirmationModal.close\",\n )}\n </ButtonView>\n </Action>\n <Action onAction={cancel}>\n <ButtonView color=\"secondary\" variant=\"soft\">\n {stringFormatter.format(\n \"unsavedChangesConfirmationModal.keepOpen\",\n )}\n </ButtonView>\n </Action>\n </Action>\n </ActionGroupView>\n </Modal>\n );\n }\n};\n\nexport default ConfirmUnsavedChangesModal;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,IAAa,mCAAuC;CAClD,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,wBAAwB,gBAAgB,yBAAyB;CACvE,MAAM,8BACJ,gBAAgB,0BAA0B;CAE5C,IAAI,yBAAyB,6BAA6B;EACxD,MAAM,EAAE,YAAY,SAAS,WAAW;EAExC,OACE,qBAAC,OAAD;GAAmB;GAAnB,UAAA;IACE,oBAAC,aAAD,EAAA,UACG,gBAAgB,OAAO,yCAAyC,EACtD,CAAA;IACb,oBAAC,aAAD,EAAA,UACE,oBAAC,UAAD,EAAA,UACG,gBAAgB,OAAO,sCAAsC,EACtD,CAAA,EACC,CAAA;IACb,oBAAC,iBAAD,EAAA,UACE,qBAAC,QAAD;KAAQ,YAAA;KAAR,UAAA,CACE,oBAAC,QAAD;MAAQ,UAAU;MAChB,UAAA,oBAAC,YAAD;OAAY,OAAM;OACf,UAAA,gBAAgB,OACf,uCACF;MACU,CAAA;KACN,CAAA,GACR,oBAAC,QAAD;MAAQ,UAAU;MAChB,UAAA,oBAAC,YAAD;OAAY,OAAM;OAAY,SAAQ;OACnC,UAAA,gBAAgB,OACf,0CACF;MACU,CAAA;KACN,CAAA,CACF;IACO,CAAA,EAAA,CAAA;GACZ;;CAEX;AACF"}

package/dist/js/packages/components/src/components/Navigation/Navigation.mjs CHANGED Viewed

@@ -4,6 +4,7 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { containsTextChild } from "../../lib/react/remote.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Navigation_module_default from "./Navigation.module.mjs";
 import { LinkListTunnelExit } from "./components/LinkListTunnelExit/LinkListTunnelExit.mjs";
 import clsx from "clsx";
@@ -14,7 +15,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A bare text node is an anonymous flex item that no rule can reach, so give
 * the label an element the item can truncate.
 */
-var wrapTextInLabel = (children) => Children.map(children, (child) => containsTextChild(child) ? /* @__PURE__ */ jsx("span", { children: child }) : child);
+var wrapTextInLabel = (children) => Children.map(children, (child) => {
+	const label = /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+		defaultWidth: "6em",
+		children: child
+	}) });
+	return containsTextChild(child) ? label : child;
+});
 /** @flr-generate all */
 var Navigation = flowComponent("Navigation", (props) => {
 	const { className, children, ref, ...rest } = props;

package/dist/js/packages/components/src/components/Navigation/Navigation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface NavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/*\n A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n /\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n Children.map(children, (child) ~~=>\~~n ~~containsTextChild(child)~~ ? <span>{child}</span> : child,\n );\n\n/* @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n const { className, children, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.navigation, className);\n\n const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n wrapWith: <li />,\n className: styles.item,\n unstyled: true,\n children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n Icon: {\n className: styles.icon,\n size: \"m\",\n },\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n CounterBadge: { className: styles.badge },\n };\n\n return (\n <PropsContextProvider\n props={{\n Link: {\n ...linkPropsContext,\n tunnel: {\n id: \"links\",\n component: \"Navigation\",\n },\n },\n NavigationGroup: {\n Link: linkPropsContext,\n },\n }}\n >\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n {children}\n </nav>\n </PropsContextProvider>\n );\n});\n\nexport default Navigation;\n"],"mappings":"~~;;;;;;;;;;;;;;;;AAwBA~~,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,~~UACtB~~,~~kBAAkB~~,~~KAAK~~,~~IAAI,~~oBAAC,QAAD,EAAA,~~UAAO~~,~~MAAY~~,CAAA,IAAI,~~KACpD~~;;~~AAGF~~,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,~~KAAK~~,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,~~WAAW~~,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,~~WAAW~~,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,~~WAAW~~,0BAAO,MAAM;EACjC,YAAY,EAAE,~~WAAW~~,0BAAO,MAAM;EACtC,cAAc,EAAE,~~WAAW~~,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"Navigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\n\nexport interface NavigationProps\n extends\n PropsWithChildren<ComponentProps<\"nav\">>,\n PropsWithClassName,\n FlowComponentProps<HTMLElement> {}\n\n/*\n A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n /\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n Children.map(children, (child) => {\n const label = (\n <span>\n <SkeletonTextContent defaultWidth=\"6em\">{child}</SkeletonTextContent>\n </span>\n );\n\n return containsTextChild(child) ? label : child;\n });\n\n/* @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n const { className, children, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.navigation, className);\n\n const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n wrapWith: <li />,\n className: styles.item,\n unstyled: true,\n children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n Icon: {\n className: styles.icon,\n size: \"m\",\n },\n Badge: { className: styles.badge },\n AlertBadge: { className: styles.badge },\n CounterBadge: { className: styles.badge },\n };\n\n return (\n <PropsContextProvider\n props={{\n Link: {\n ...linkPropsContext,\n tunnel: {\n id: \"links\",\n component: \"Navigation\",\n },\n },\n NavigationGroup: {\n Link: linkPropsContext,\n },\n }}\n >\n <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n {children}\n </nav>\n </PropsContextProvider>\n );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UAAU;CAChC,MAAM,QACJ,oBAAC,QAAD,EAAA,UACE,oBAAC,qBAAD;EAAqB,cAAa;EAAO,UAAA;CAA2B,CAAA,EAChE,CAAA;CAGR,OAAO,kBAAkB,KAAK,IAAI,QAAQ;AAC5C,CAAC;;AAGH,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAWA,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAWA,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAWA,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAWA,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAWA,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkListTunnelExit.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport styles from \"../../Navigation.module.scss\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n return (\n <UiComponentTunnelExit\n {...props}\n children={(children) => {\n if (Children.count(children) >= 1) {\n return <ul className={styles.linkList}>{children}</ul>;\n }\n\n return null;\n }}\n />\n );\n};\n"],"mappings":";;;;;;;AAIA,IAAa,sBAAoD,UAAU;CACzE,OACE,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa;GACtB,IAAI,SAAS,MAAM,QAAQ,KAAK,GAC9B,OAAO,oBAAC,MAAD;IAAI,~~WAAW~~,0BAAO;IAAW;GAAa,CAAA;GAGvD,OAAO;EACT;CACD,CAAA;AAEL"}
1	+ {"version":3,"file":"LinkListTunnelExit.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport styles from \"../../Navigation.module.scss\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n return (\n <UiComponentTunnelExit\n {...props}\n children={(children) => {\n if (Children.count(children) >= 1) {\n return <ul className={styles.linkList}>{children}</ul>;\n }\n\n return null;\n }}\n />\n );\n};\n"],"mappings":";;;;;;;AAIA,IAAa,sBAAoD,UAAU;CACzE,OACE,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa;GACtB,IAAI,SAAS,MAAM,QAAQ,KAAK,GAC9B,OAAO,oBAAC,MAAD;IAAI,WAAWA,0BAAO;IAAW;GAAa,CAAA;GAGvD,OAAO;EACT;CACD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationGroup.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import { type ComponentProps, type PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationGroupProps\n extends\n PropsWithChildren<ComponentProps<\"section\">>,\n FlowComponentProps<HTMLElement> {\n collapsable?: boolean;\n /*\n Whether a `collapsable` group is initially expanded.\n \n @default true\n /\n defaultExpanded?: boolean;\n}\n\n/* @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n const {\n children,\n className,\n collapsable,\n defaultExpanded = true,\n \"aria-label\": ariaLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.navigationGroup,\n collapsable && styles.collapsable,\n className,\n );\n\n const generatedId = useId();\n\n const propsContext: PropsContext = {\n Label: {\n id: ariaLabel ? undefined : generatedId,\n className: styles.label,\n },\n Link: {\n tunnel: {\n id: \"groupLinks\",\n component: \"NavigationGroup\",\n },\n },\n };\n\n const collapsableUi = (\n <Accordion defaultExpanded={defaultExpanded} className={rootClassName}>\n {children}\n <Content>\n <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n </Content>\n </Accordion>\n );\n\n const defaultUi = (\n <section\n aria-labelledby={ariaLabel ? undefined : generatedId}\n aria-label={ariaLabel}\n className={rootClassName}\n {...rest}\n >\n {children}\n <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n </section>\n );\n\n return (\n <PropsContextProvider props={propsContext} dependencies={[generatedId]}>\n {collapsable ? collapsableUi : defaultUi}\n </PropsContextProvider>\n );\n});\n\nexport default NavigationGroup;\n"],"mappings":";;;;;;;;;;;;;AA2BA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EACJ,UACA,WACA,aACA,kBAAkB,MAClB,cAAc,WACd,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,+BAAO,iBACP,~~eAAe~~,+BAAO,aACtB,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,eAA6B;EACjC,OAAO;GACL,IAAI,YAAY,KAAA,IAAY;GAC5B,~~WAAW~~,+BAAO;EACpB;EACA,MAAM,EACJ,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,MAAM,gBACJ,qBAAC,WAAD;EAA4B;EAAiB,WAAW;EAAxD,UAAA,CACG,UACD,oBAAC,SAAD,EAAA,UACE,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,EAC1D,CAAA,CACA;;CAGb,MAAM,YACJ,qBAAC,WAAD;EACE,mBAAiB,YAAY,KAAA,IAAY;EACzC,cAAY;EACZ,WAAW;EACX,GAAI;EAJN,UAAA,CAMG,UACD,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,CAC1D;;CAGX,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAAc,cAAc,CAAC,WAAW;EAClE,UAAA,cAAc,gBAAgB;CACX,CAAA;AAE1B,CAAC"}
1	+ {"version":3,"file":"NavigationGroup.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.tsx"],"sourcesContent":["import { type ComponentProps, type PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./NavigationGroup.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Accordion } from \"@/components/Accordion\";\nimport { Content } from \"@/components/Content\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationGroupProps\n extends\n PropsWithChildren<ComponentProps<\"section\">>,\n FlowComponentProps<HTMLElement> {\n collapsable?: boolean;\n /*\n Whether a `collapsable` group is initially expanded.\n \n @default true\n /\n defaultExpanded?: boolean;\n}\n\n/* @flr-generate all */\nexport const NavigationGroup = flowComponent(\"NavigationGroup\", (props) => {\n const {\n children,\n className,\n collapsable,\n defaultExpanded = true,\n \"aria-label\": ariaLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.navigationGroup,\n collapsable && styles.collapsable,\n className,\n );\n\n const generatedId = useId();\n\n const propsContext: PropsContext = {\n Label: {\n id: ariaLabel ? undefined : generatedId,\n className: styles.label,\n },\n Link: {\n tunnel: {\n id: \"groupLinks\",\n component: \"NavigationGroup\",\n },\n },\n };\n\n const collapsableUi = (\n <Accordion defaultExpanded={defaultExpanded} className={rootClassName}>\n {children}\n <Content>\n <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n </Content>\n </Accordion>\n );\n\n const defaultUi = (\n <section\n aria-labelledby={ariaLabel ? undefined : generatedId}\n aria-label={ariaLabel}\n className={rootClassName}\n {...rest}\n >\n {children}\n <LinkListTunnelExit id=\"groupLinks\" component=\"NavigationGroup\" />\n </section>\n );\n\n return (\n <PropsContextProvider props={propsContext} dependencies={[generatedId]}>\n {collapsable ? collapsableUi : defaultUi}\n </PropsContextProvider>\n );\n});\n\nexport default NavigationGroup;\n"],"mappings":";;;;;;;;;;;;;AA2BA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CACzE,MAAM,EACJ,UACA,WACA,aACA,kBAAkB,MAClB,cAAc,WACd,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,+BAAO,iBACP,eAAeA,+BAAO,aACtB,SACF;CAEA,MAAM,cAAc,MAAM;CAE1B,MAAM,eAA6B;EACjC,OAAO;GACL,IAAI,YAAY,KAAA,IAAY;GAC5B,WAAWA,+BAAO;EACpB;EACA,MAAM,EACJ,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;CACF;CAEA,MAAM,gBACJ,qBAAC,WAAD;EAA4B;EAAiB,WAAW;EAAxD,UAAA,CACG,UACD,oBAAC,SAAD,EAAA,UACE,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,EAC1D,CAAA,CACA;;CAGb,MAAM,YACJ,qBAAC,WAAD;EACE,mBAAiB,YAAY,KAAA,IAAY;EACzC,cAAY;EACZ,WAAW;EACX,GAAI;EAJN,UAAA,CAMG,UACD,oBAAC,oBAAD;GAAoB,IAAG;GAAa,WAAU;EAAmB,CAAA,CAC1D;;CAGX,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAAc,cAAc,CAAC,WAAW;EAClE,UAAA,cAAc,gBAAgB;CACX,CAAA;AAE1B,CAAC"}

package/dist/js/packages/components/src/components/Notification/Notification.mjs CHANGED Viewed

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { Button } from "../Button/Button.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
@@ -15,8 +16,9 @@ import { useLocalizedStringFormatter } from "react-aria";
 /** @flr-generate all */
 var Notification = (props) => {
 	const { children, className, status = "info", role = "alert", href, onClick, onClose, autoClose: ignoredAutoClose, ...rest } = props;
-	const rootClassName = clsx(Notification_module_default.notification, Notification_module_default[status], (onClick || onClose || href) && Notification_module_default.hasLink, className);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Notification_module_default.notification, Notification_module_default[status], (onClick || onClose || href) && !isSkeleton && Notification_module_default.hasLink, isSkeleton && Notification_module_default.skeleton, className);
 	const propsContext = {
 		Heading: {
 			className: Notification_module_default.heading,
@@ -37,21 +39,27 @@ var Notification = (props) => {
 		"aria-label": stringFormatter.format("notification.close"),
 		children: /* @__PURE__ */ jsx(IconClose, {})
 	});
+	const content = /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children
+	});
+	const skeletonBody = /* @__PURE__ */ jsx("div", {
+		className: Notification_module_default.link,
+		children: content
+	});
+	const linkBody = /* @__PURE__ */ jsx(Link, {
+		unstyled: true,
+		href,
+		className: Notification_module_default.link,
+		onPress: onClick,
+		children: content
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: rootClassName,
 		role,
 		"data-react-aria-top-layer": true,
-		children: [/* @__PURE__ */ jsx(Link, {
-			unstyled: true,
-			href,
-			className: Notification_module_default.link,
-			onPress: onClick,
-			children: /* @__PURE__ */ jsx(PropsContextProvider, {
-				props: propsContext,
-				children
-			})
-		}), closeButton]
+		children: [isSkeleton ? skeletonBody : linkBody, closeButton]
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Notification/Notification.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Notification.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface NotificationProps\n extends PropsWithChildren<ComponentProps<\"div\">>, PropsWithStatus {\n /* A link that is triggered when clicking the notification. /\n href?: string;\n /* Whether the notification should disappear automatically after some time. /\n autoClose?: boolean;\n /* Handler that is called when the notification is clicked. /\n onClick?: () => void;\n /\n Handler that is called when the close button of the notification is\n * clicked.\n /\n onClose?: () => void;\n}\n\n/* @flr-generate all */\nexport const Notification: FC<NotificationProps> = (props) => {\n const {\n children,\n className,\n status = \"info\",\n role = \"alert\",\n href,\n onClick,\n onClose,\n autoClose: ignoredAutoClose,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.notification,\n styles[status],\n (onClick \|\| onClose \|\| href) && styles.hasLink,\n className,\n );\n\n const ~~stringFormatter = useLocalizedStringFormatter(locales);\n\n const~~ propsContext: PropsContext = {\n Heading: {\n className: styles.heading,\n level: 4,\n children: dynamic((props) => (\n <>\n <AlertIcon status={status} className={styles.icon} />\n {props.children}\n </>\n )),\n },\n Text: {\n className: styles.text,\n },\n };\n\n const closeButton = onClose && (\n <Button\n size=\"s\"\n className={styles.close}\n variant=\"plain\"\n color=\"secondary\"\n onPress={onClose}\n aria-label={stringFormatter.format(\"notification.close\")}\n >\n <IconClose />\n </Button>\n );\n\n return (\n <div\n {...rest}\n className={rootClassName}\n role={role}\n // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n data-react-aria-top-layer\n >\n ~~<Link~~ ~~unstyled~~ ~~href={href}~~ ~~className={styles.link}~~ ~~onPress={onClick~~}~~>\n <PropsContextProvider props={propsContext}>\n {children}~~\n ~~</PropsContextProvider>\n~~ ~~</Link>\n~~ {closeButton}\n </div>\n );\n};\n\nexport default Notification;\n"],"mappings":"~~;;;;;;;;;;;;;;;AA6BA~~,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,UACA,WACA,SAAS,QACT,OAAO,SACP,MACA,SACA,SACA,WAAW,kBACX,GAAG,SACD;CAEJ,MAAM,gBAAgB,~~KACpB~~,4BAAO,~~cACP~~,4BAAO,UACN,WAAW,WAAW,SAAS,4BAAO,~~SACvC~~,~~SACF;CAEA~~,~~MAAM~~,~~kBAAkB~~,~~4BAA4B,gBAAO~~;~~CAE3D~~,MAAM,eAA6B;EACjC,SAAS;GACP,~~WAAW~~,4BAAO;GAClB,OAAO;GACP,UAAU,SAAS,UACjB,~~qBAAA~~,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,~~WAAW~~,4BAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,MAAM,EACJ,~~WAAW~~,4BAAO,KACpB;CACF;CAEA,MAAM,cAAc,WAClB,oBAAC,QAAD;EACE,MAAK;EACL,~~WAAW~~,4BAAO;EAClB,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAAO,oBAAoB;EAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;CAGV,~~OACE~~,~~qBAAC~~,~~OAAD~~;~~EACE~~,~~GAAI~~;~~EACJ~~,~~WAAW~~;~~EACL~~;~~EAEN~~,~~6BAAA~~;~~EALF~~,UAAA,~~CAOE~~,oBAAC,MAAD;~~GAAM~~,UAAA;~~GAAe~~;~~GAAM~~,~~WAAW~~,4BAAO;~~GAAM~~,SAAS;~~GAC1D~~,UAAA,~~oBAAC~~,~~sBAAD~~;~~IAAsB~~,~~OAAO~~;~~IAC1B~~;~~GACmB~~,~~CAAA~~;~~EAClB~~,~~CAAA~~,~~GACL~~,WACE;;AAET"}
1	+ {"version":3,"file":"Notification.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\nimport locales from \"./locales/.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface NotificationProps\n extends PropsWithChildren<ComponentProps<\"div\">>, PropsWithStatus {\n /* A link that is triggered when clicking the notification. /\n href?: string;\n /* Whether the notification should disappear automatically after some time. /\n autoClose?: boolean;\n /* Handler that is called when the notification is clicked. /\n onClick?: () => void;\n /\n Handler that is called when the close button of the notification is\n * clicked.\n /\n onClose?: () => void;\n}\n\n/* @flr-generate all /\nexport const Notification: FC<NotificationProps> = (props) => {\n const {\n children,\n className,\n status = \"info\",\n role = \"alert\",\n href,\n onClick,\n onClose,\n autoClose: ignoredAutoClose,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.notification,\n styles[status],\n (onClick \|\| onClose \|\| href) && !isSkeleton && styles.hasLink,\n isSkeleton && styles.skeleton,\n className,\n );\n\n const propsContext: PropsContext = {\n Heading: {\n className: styles.heading,\n level: 4,\n children: dynamic((props) => (\n <>\n <AlertIcon status={status} className={styles.icon} />\n {props.children}\n </>\n )),\n },\n Text: {\n className: styles.text,\n },\n };\n\n const closeButton = onClose && (\n <Button\n size=\"s\"\n className={styles.close}\n variant=\"plain\"\n color=\"secondary\"\n onPress={onClose}\n aria-label={stringFormatter.format(\"notification.close\")}\n >\n <IconClose />\n </Button>\n );\n\n const content = (\n <PropsContextProvider props={propsContext}>{children}</PropsContextProvider>\n );\n\n /\n * In the mode, the content is not wrapped in a link: a link would draw its\n * whole content as one text bar, and there is nothing to click.\n */\n const skeletonBody = <div className={styles.link}>{content}</div>;\n\n const linkBody = (\n <Link unstyled href={href} className={styles.link} onPress={onClick}>\n {content}\n </Link>\n );\n\n return (\n <div\n {...rest}\n className={rootClassName}\n role={role}\n // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n data-react-aria-top-layer\n >\n {isSkeleton ? skeletonBody : linkBody}\n {closeButton}\n </div>\n );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,UACA,WACA,SAAS,QACT,OAAO,SACP,MACA,SACA,SACA,WAAW,kBACX,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,gBAAO;CAC3D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,4BAAO,cACPA,4BAAO,UACN,WAAW,WAAW,SAAS,CAAC,cAAcA,4BAAO,SACtD,cAAcA,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,4BAAO;GAClB,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,4BAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;CACF;CAEA,MAAM,cAAc,WAClB,oBAAC,QAAD;EACE,MAAK;EACL,WAAWA,4BAAO;EAClB,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAAO,oBAAoB;EAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;CAGV,MAAM,UACJ,oBAAC,sBAAD;EAAsB,OAAO;EAAe;CAA+B,CAAA;CAO7E,MAAM,eAAe,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAO,UAAA;CAAa,CAAA;CAEhE,MAAM,WACJ,oBAAC,MAAD;EAAM,UAAA;EAAe;EAAM,WAAWA,4BAAO;EAAM,SAAS;EACzD,UAAA;CACG,CAAA;CAGR,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACL;EAEN,6BAAA;EALF,UAAA,CAOG,aAAa,eAAe,UAC5B,WACE;;AAET"}

package/dist/js/packages/components/src/components/Notification/Notification.module.mjs CHANGED Viewed

@@ -13,6 +13,7 @@ var warning = "flow--notification--warning";
 var danger = "flow--notification--danger";
 var success = "flow--notification--success";
 var unavailable = "flow--notification--unavailable";
+var skeleton = "flow--notification--skeleton";
 var Notification_module_default = {
 	notification,
 	link,
@@ -25,9 +26,10 @@ var Notification_module_default = {
 	warning,
 	danger,
 	success,
-	unavailable
+	unavailable,
+	skeleton
 };
 //#endregion
-export { close, danger, Notification_module_default as default, hasLink, heading, icon, info, link, notification, success, text, unavailable, warning };
+export { close, danger, Notification_module_default as default, hasLink, heading, icon, info, link, notification, skeleton, success, text, unavailable, warning };
 //# sourceMappingURL=Notification.module.mjs.map

package/dist/js/packages/components/src/components/Notification/Notification.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n border-radius: var(--notification--corner-radius);\n width: var(--notification--width);\n max-width: var(--notification--max-width);\n box-shadow: var(--notification--box-shadow);\n position: relative;\n border: var(--notification--border-width) var(--notification--border-style)\n var(--notification--border-color);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--notification--border-x-start-width);\n inset-inline-start: calc(var(--size-px--xxxs) * -1);\n border-start-start-radius: var(--notification--corner-radius);\n border-end-start-radius: var(--notification--corner-radius);\n }\n\n @extend .info;\n\n /* Elements /\n\n .link {\n padding: var(--notification--padding);\n padding-inline-start: calc(\n var(--notification--padding) + var(--notification--border-x-start-width)\n );\n display: flex;\n flex-direction: column;\n row-gap: var(--notification--heading-to-text-spacing);\n cursor: default;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n position: relative;\n border-radius: calc(var(--notification--corner-radius) - 1px);\n\n @include focus.focus;\n }\n\n .heading {\n --button-size: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-x)\n );\n\n padding-inline-end: calc(\n var(--button-size) + var(--heading--icon-to-text-spacing)\n );\n\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .text {\n font-size: var(--notification--font-size);\n }\n\n .close {\n position: absolute;\n top: var(--notification--padding);\n inset-inline-end: var(--notification--padding);\n }\n\n /* Status */\n\n @mixin status($status) {\n &.#{$status} {\n .link {\n border-color: var(--notification--#{$status}-background-color--default);\n background-color: var(\n --notification--#{$status}-background-color--default\n );\n }\n\n &::after {\n background-color: var(--notification--#{$status}-border-color);\n }\n\n &.hasLink {\n .link {\n &:hover {\n background-color: var(\n --notification--#{$status}-background-color--hover\n );\n }\n\n &[data-pressed] {\n background-color: var(\n --notification--#{$status}-background-color--pressed\n );\n }\n }\n }\n\n .heading {\n color: var(--notification--#{$status}-heading-color);\n }\n }\n }\n\n @include status(info);\n @include status(warning);\n @include status(danger);\n @include status(success);\n @include status(unavailable);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.notification {\n border-radius: var(--notification--corner-radius);\n width: var(--notification--width);\n max-width: var(--notification--max-width);\n box-shadow: var(--notification--box-shadow);\n position: relative;\n border: var(--notification--border-width) var(--notification--border-style)\n var(--notification--border-color);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--notification--border-x-start-width);\n inset-inline-start: calc(var(--size-px--xxxs) * -1);\n border-start-start-radius: var(--notification--corner-radius);\n border-end-start-radius: var(--notification--corner-radius);\n }\n\n @extend .info;\n\n /* Elements /\n\n .link {\n padding: var(--notification--padding);\n padding-inline-start: calc(\n var(--notification--padding) + var(--notification--border-x-start-width)\n );\n display: flex;\n flex-direction: column;\n row-gap: var(--notification--heading-to-text-spacing);\n cursor: default;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n position: relative;\n border-radius: calc(var(--notification--corner-radius) - 1px);\n\n @include focus.focus;\n }\n\n .heading {\n --button-size: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-x)\n );\n\n padding-inline-end: calc(\n var(--button-size) + var(--heading--icon-to-text-spacing)\n );\n\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .text {\n font-size: var(--notification--font-size);\n }\n\n .close {\n position: absolute;\n top: var(--notification--padding);\n inset-inline-end: var(--notification--padding);\n }\n\n /* Status /\n\n @mixin status($status) {\n &.#{$status} {\n .link {\n border-color: var(--notification--#{$status}-background-color--default);\n background-color: var(\n --notification--#{$status}-background-color--default\n );\n }\n\n &::after {\n background-color: var(--notification--#{$status}-border-color);\n }\n\n &.hasLink {\n .link {\n &:hover {\n background-color: var(\n --notification--#{$status}-background-color--hover\n );\n }\n\n &[data-pressed] {\n background-color: var(\n --notification--#{$status}-background-color--pressed\n );\n }\n }\n }\n\n .heading {\n color: var(--notification--#{$status}-heading-color);\n }\n }\n }\n\n @include status(info);\n @include status(warning);\n @include status(danger);\n @include status(success);\n @include status(unavailable);\n\n / SkeletonMode: no status color while the content loads */\n &.skeleton::after {\n background-color: skeleton.$background-color;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NotificationContainer.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport {\n AnimatePresence,\n domAnimation,\n LazyMotion,\n m,\n MotionConfig,\n} from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n props,\n) => {\n const { className, ...rest } = props;\n\n const controller = useNotificationController();\n const notifications = controller.useNotifications();\n const isSsr = useIsSSR();\n\n const rootClassName = clsx(styles.notificationContainer, className);\n\n const content = (\n <MotionConfig reducedMotion=\"user\">\n <LazyMotion features={domAnimation}>\n <div className={rootClassName} {...rest} data-react-aria-top-layer>\n <AnimatePresence>\n {notifications.map((n) => (\n <m.div\n className={styles.notification}\n key={n.meta.id}\n initial={{ opacity: 0, x: 200 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n transition={{\n bounce: 0,\n }}\n >\n <Suspense>\n <ControlledNotification\n notification={n}\n controller={controller}\n />\n </Suspense>\n </m.div>\n ))}\n </AnimatePresence>\n </div>\n </LazyMotion>\n </MotionConfig>\n );\n\n return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,yBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,aAAa,0BAA0B;CAC7C,MAAM,gBAAgB,WAAW,iBAAiB;CAClD,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,~~KAAK~~,qCAAO,uBAAuB,SAAS;CAElE,MAAM,UACJ,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAAC,YAAD;GAAY,UAAU;GACpB,UAAA,oBAAC,OAAD;IAAK,WAAW;IAAe,GAAI;IAAM,6BAAA;IACvC,UAAA,oBAAC,iBAAD,EAAA,UACG,cAAc,KAAK,MAClB,oBAAC,EAAE,KAAH;KACE,~~WAAW~~,qCAAO;KAElB,SAAS;MAAE,SAAS;MAAG,GAAG;KAAI;KAC9B,SAAS;MAAE,SAAS;MAAG,GAAG;KAAE;KAC5B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAK,QAAQ;MAAG,eAAe;KAAE;KACxD,YAAY,EACV,QAAQ,EACV;KAEA,UAAA,oBAAC,UAAD,EAAA,UACE,oBAAC,wBAAD;MACE,cAAc;MACF;KACb,CAAA,EACO,CAAA;IACL,GAdA,EAAE,KAAK,EAcP,CACR,EACc,CAAA;GACd,CAAA;EACK,CAAA;CACA,CAAA;CAGhB,OAAO,QAAQ,OAAO,SAAS,aAAa,SAAS,SAAS,IAAI;AACpE"}
1	+ {"version":3,"file":"NotificationContainer.mjs","names":["styles"],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { Suspense } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport clsx from \"clsx\";\nimport styles from \"./NotificationContainer.module.scss\";\nimport ControlledNotification from \"@/components/NotificationProvider/ControlledNotification\";\nimport {\n AnimatePresence,\n domAnimation,\n LazyMotion,\n m,\n MotionConfig,\n} from \"framer-motion\";\nimport { useIsSSR } from \"react-aria\";\nimport { useNotificationController } from \"@/components/NotificationProvider/NotificationProvider\";\n\nexport type NotificationsContainerProps = ComponentProps<\"div\">;\n\nexport const NotificationContainer: FC<NotificationsContainerProps> = (\n props,\n) => {\n const { className, ...rest } = props;\n\n const controller = useNotificationController();\n const notifications = controller.useNotifications();\n const isSsr = useIsSSR();\n\n const rootClassName = clsx(styles.notificationContainer, className);\n\n const content = (\n <MotionConfig reducedMotion=\"user\">\n <LazyMotion features={domAnimation}>\n <div className={rootClassName} {...rest} data-react-aria-top-layer>\n <AnimatePresence>\n {notifications.map((n) => (\n <m.div\n className={styles.notification}\n key={n.meta.id}\n initial={{ opacity: 0, x: 200 }}\n animate={{ opacity: 1, x: 0 }}\n exit={{ opacity: 0, x: 200, height: 0, paddingBottom: 0 }}\n transition={{\n bounce: 0,\n }}\n >\n <Suspense>\n <ControlledNotification\n notification={n}\n controller={controller}\n />\n </Suspense>\n </m.div>\n ))}\n </AnimatePresence>\n </div>\n </LazyMotion>\n </MotionConfig>\n );\n\n return isSsr ? null : ReactDOM.createPortal(content, document.body);\n};\n\nexport default NotificationContainer;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,yBACX,UACG;CACH,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,aAAa,0BAA0B;CAC7C,MAAM,gBAAgB,WAAW,iBAAiB;CAClD,MAAM,QAAQ,SAAS;CAEvB,MAAM,gBAAgB,KAAKA,qCAAO,uBAAuB,SAAS;CAElE,MAAM,UACJ,oBAAC,cAAD;EAAc,eAAc;EAC1B,UAAA,oBAAC,YAAD;GAAY,UAAU;GACpB,UAAA,oBAAC,OAAD;IAAK,WAAW;IAAe,GAAI;IAAM,6BAAA;IACvC,UAAA,oBAAC,iBAAD,EAAA,UACG,cAAc,KAAK,MAClB,oBAAC,EAAE,KAAH;KACE,WAAWA,qCAAO;KAElB,SAAS;MAAE,SAAS;MAAG,GAAG;KAAI;KAC9B,SAAS;MAAE,SAAS;MAAG,GAAG;KAAE;KAC5B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAK,QAAQ;MAAG,eAAe;KAAE;KACxD,YAAY,EACV,QAAQ,EACV;KAEA,UAAA,oBAAC,UAAD,EAAA,UACE,oBAAC,wBAAD;MACE,cAAc;MACF;KACb,CAAA,EACO,CAAA;IACL,GAdA,EAAE,KAAK,EAcP,CACR,EACc,CAAA;GACd,CAAA;EACK,CAAA;CACA,CAAA;CAGhB,OAAO,QAAQ,OAAO,SAAS,aAAa,SAAS,SAAS,IAAI;AACpE"}