@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/composer/composer-attachments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer-attachments.d.ts","sourceRoot":"","sources":["../../../src/components/composer/composer-attachments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,MAAM,MAAM,yBAAyB,GAAG,QAAQ,CAAC;IAChD,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,uBAG9B,yBAAyB,KAAG,SAuB9B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC/C,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACjD,CAAC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sCAI7B,wBAAwB,KAAG,SAkD7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,QAAQ,CAAC;IACpD,6GAA6G;IAC7G,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC3C,CAAC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,uBAElC,6BAA6B,KAAG,SAkBlC,CAAC"}

package/dist/components/composer/composer-attachments.js

@@ -0,0 +1,158 @@
+import SvgAttachFile from "../../vendor/@material-design-icons/svg/outlined/attach_file.js";
+import { formatBytes } from "../../lib/format-bytes.js";
+import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
+import { Button as Button$1 } from "../button/button.js";
+import { useLocale } from "../locale-provider/locale-provider.js";
+import { useComposerContext } from "./composer.context.js";
+import composer_module_default from "./composer.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Button, FileTrigger, TagGroup, TagList } from "react-aria-components";
+// src/components/composer/composer-attachments.tsx
+var isOversized = (file, maxFileSize) => maxFileSize !== void 0 && file.size > maxFileSize;
+/** An icon button that opens the file picker and stages what is picked. */
+var ComposerAttachButton = (t0) => {
+	const $ = c(12);
+	const { label, accept } = t0;
+	const { addFiles, disabled } = useComposerContext();
+	let t1;
+	if ($[0] !== addFiles) {
+		t1 = (files) => {
+			if (files !== null) addFiles(Array.from(files));
+		};
+		$[0] = addFiles;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== disabled) {
+		t2 = /* @__PURE__ */ jsx(Button, { isDisabled: disabled });
+		$[2] = disabled;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== disabled || $[5] !== label || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button$1, {
+			variant: "tertiary",
+			size: "md",
+			iconOnly: true,
+			icon: SvgAttachFile,
+			disabled,
+			label,
+			render: t2
+		});
+		$[4] = disabled;
+		$[5] = label;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== accept || $[9] !== t1 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(FileTrigger, {
+			allowsMultiple: true,
+			acceptedFileTypes: accept,
+			onSelect: t1,
+			children: t3
+		});
+		$[8] = accept;
+		$[9] = t1;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+/**
+* The staged files as removable tiles. Removing the last one returns focus to
+* the editor. Renders nothing while no file is staged.
+*/
+var ComposerAttachments = (t0) => {
+	const $ = c(17);
+	const { label, removeLabel, fileHint } = t0;
+	const locale = useLocale();
+	const { attachments, removeAttachment, focusEditor, disabled, maxFileSize } = useComposerContext();
+	if (attachments.length === 0) return null;
+	let t1;
+	if ($[0] !== attachments || $[1] !== focusEditor || $[2] !== removeAttachment) {
+		t1 = (keys) => {
+			const removed = attachments.filter((attachment) => keys.has(attachment.id));
+			if (removed.length === attachments.length) focusEditor();
+			for (const attachment_0 of removed) removeAttachment(attachment_0.id);
+		};
+		$[0] = attachments;
+		$[1] = focusEditor;
+		$[2] = removeAttachment;
+		$[3] = t1;
+	} else t1 = $[3];
+	const remove = t1;
+	let t2;
+	if ($[4] !== disabled || $[5] !== fileHint || $[6] !== locale || $[7] !== maxFileSize || $[8] !== removeLabel) {
+		t2 = (attachment_1) => /* @__PURE__ */ jsx(AttachmentTile, {
+			id: attachment_1.id,
+			file: attachment_1.file,
+			hint: fileHint(attachment_1.file.name, formatBytes(attachment_1.file.size, locale)),
+			removeLabel,
+			invalid: isOversized(attachment_1.file, maxFileSize),
+			disabled
+		});
+		$[4] = disabled;
+		$[5] = fileHint;
+		$[6] = locale;
+		$[7] = maxFileSize;
+		$[8] = removeLabel;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== attachments || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TagList, {
+			items: attachments,
+			className: composer_module_default.attachments,
+			children: t2
+		});
+		$[10] = attachments;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== label || $[14] !== remove || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TagGroup, {
+			"aria-label": label,
+			onRemove: remove,
+			children: t3
+		});
+		$[13] = label;
+		$[14] = remove;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+};
+/**
+* An alert while any staged file is over `maxFileSize`. Renders nothing while
+* every file fits.
+*/
+var ComposerAttachmentsError = (t0) => {
+	const $ = c(6);
+	const { tooLargeError } = t0;
+	const locale = useLocale();
+	const { attachments, maxFileSize } = useComposerContext();
+	if (maxFileSize === void 0 || !attachments.some((attachment) => isOversized(attachment.file, maxFileSize))) return null;
+	let t1;
+	if ($[0] !== locale || $[1] !== maxFileSize || $[2] !== tooLargeError) {
+		t1 = tooLargeError(formatBytes(maxFileSize, locale));
+		$[0] = locale;
+		$[1] = maxFileSize;
+		$[2] = tooLargeError;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: composer_module_default.attachmentsError,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { ComposerAttachButton, ComposerAttachments, ComposerAttachmentsError };

package/dist/components/composer/composer-editor.css

@@ -0,0 +1,105 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._editor_osksg_3 {
+    position: relative;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden auto;
+  }
+  ._content_osksg_9 {
+    outline: none;
+    padding: var(--composer-editor-pad, var(--sys-unit-6));
+    min-block-size: calc(var(--composer-min-lines) * 1lh + var(--composer-editor-pad, var(--sys-unit-6)));
+    max-block-size: calc(var(--composer-max-lines) * 1lh + var(--composer-editor-pad, var(--sys-unit-6)));
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  ._placeholder_osksg_17 {
+    position: absolute;
+    inset-block-start: var(--composer-editor-pad, var(--sys-unit-6));
+    inset-inline-start: var(--composer-editor-pad, var(--sys-unit-6));
+    color: var(--composer-placeholder-fg, var(--sys-color-text-muted));
+    pointer-events: none;
+    user-select: none;
+  }
+  ._menu_osksg_25 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._menu_osksg_25 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._menu_osksg_25[data-starting-style], ._menu_osksg_25[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._menu_osksg_25 {
+    inline-size: max-content;
+    min-inline-size: 16rem;
+    max-inline-size: 24rem;
+    max-block-size: 20rem;
+    margin: 0;
+    overflow: hidden auto;
+  }
+  ._menuItem_osksg_54 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-20);
+    border-radius: var(--sys-radius-sm);
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+    user-select: none;
+  }
+  ._menuItem_osksg_54 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._menuItem_osksg_54::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._menuItem_osksg_54::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._menuItem_osksg_54:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._menuItem_osksg_54:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._menuItem_osksg_54 {
+    outline: none;
+  }
+  ._menuItem_osksg_54[data-highlighted] {
+    background: var(--sys-color-primary-container);
+    color: var(--sys-color-on-primary-container);
+  }
+  ._menuItem_osksg_54[data-disabled] {
+    opacity: 0.38;
+    color: var(--sys-color-text-muted);
+  }
+  ._menuItem_osksg_54 {
+    list-style: none;
+  }
+}

package/dist/components/composer/composer-editor.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type ComposerEditorProps = Readonly<{
+    /** The editor's accessible name, such as "Comment". */
+    label: string;
+    /** Shown while the draft is empty, and describes the editor. */
+    placeholder?: string;
+    /** Lines of height while short. @default 3 */
+    minLines?: number;
+    /** Lines of height before it scrolls. */
+    maxLines?: number;
+    /** Editor plugins, such as `Composer.Mentions`. */
+    children?: ReactNode;
+}>;
+/** The composer's plain-text editor, with mentions and Enter to send. */
+export declare const ComposerEditor: ({ label, placeholder, minLines, maxLines, children, }: ComposerEditorProps) => ReactNode;
+//# sourceMappingURL=composer-editor.d.ts.map

package/dist/components/composer/composer-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer-editor.d.ts","sourceRoot":"","sources":["../../../src/components/composer/composer-editor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAmCxD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IAC1C,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAEH,yEAAyE;AACzE,eAAO,MAAM,cAAc,0DAMxB,mBAAmB,KAAG,SAmFxB,CAAC"}

package/dist/components/composer/composer-editor.js

@@ -0,0 +1,165 @@
+import { useComposerContext } from "./composer.context.js";
+import composer_editor_module_default from "./composer-editor.module.js";
+import { EditorBehaviorPlugin } from "./editor-behavior.js";
+import { $createMentionNode, MentionExtension } from "./mention-node.js";
+import { parseMentionString } from "./mention-text.js";
+import { c } from "react/compiler-runtime";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HistoryExtension } from "@lexical/history";
+import { PlainTextExtension } from "@lexical/plain-text";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { $createLineBreakNode, $createParagraphNode, $createTextNode, $getRoot, defineExtension } from "lexical";
+// src/components/composer/composer-editor.tsx
+var seedEditorState = (value) => () => {
+	const root = $getRoot();
+	if (root.getFirstChild() !== null) return;
+	const paragraph = $createParagraphNode();
+	for (const token of parseMentionString(value)) {
+		if (token.type === "mention") {
+			paragraph.append($createMentionNode(token.label, token.id));
+			continue;
+		}
+		token.text.split("\n").forEach((line, index) => {
+			if (index > 0) paragraph.append($createLineBreakNode());
+			if (line !== "") paragraph.append($createTextNode(line));
+		});
+	}
+	root.append(paragraph);
+};
+/** The composer's plain-text editor, with mentions and Enter to send. */
+var ComposerEditor = (t0) => {
+	const $ = c(31);
+	const { label, placeholder, minLines: t1, maxLines, children } = t0;
+	const minLines = t1 === void 0 ? 3 : t1;
+	const { value, initialValue, disabled, setValue, mentionsListboxId, mentionsOpen, mentionsActiveOptionId } = useComposerContext();
+	const placeholderId = useId();
+	let t2;
+	if ($[0] !== disabled || $[1] !== initialValue) {
+		t2 = () => defineExtension({
+			name: "@maanlamp/react-web-ui/Composer",
+			namespace: "composer",
+			dependencies: [
+				PlainTextExtension,
+				HistoryExtension,
+				MentionExtension
+			],
+			editable: !disabled,
+			onError: _temp,
+			$initialEditorState: seedEditorState(initialValue)
+		});
+		$[0] = disabled;
+		$[1] = initialValue;
+		$[2] = t2;
+	} else t2 = $[2];
+	const [extension] = useState(t2);
+	let t3;
+	if ($[3] !== maxLines || $[4] !== minLines) {
+		t3 = {
+			"--composer-min-lines": minLines,
+			"--composer-max-lines": maxLines
+		};
+		$[3] = maxLines;
+		$[4] = minLines;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = placeholder === void 0 ? void 0 : placeholderId;
+	const t5 = disabled || void 0;
+	let t6;
+	if ($[6] !== mentionsActiveOptionId || $[7] !== mentionsListboxId || $[8] !== mentionsOpen) {
+		t6 = mentionsListboxId === null ? {
+			role: "textbox",
+			"aria-autocomplete": "none"
+		} : {
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": mentionsOpen,
+			"aria-activedescendant": mentionsActiveOptionId ?? void 0
+		};
+		$[6] = mentionsActiveOptionId;
+		$[7] = mentionsListboxId;
+		$[8] = mentionsOpen;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== label || $[11] !== t4 || $[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ContentEditable, {
+			className: composer_editor_module_default.content,
+			"aria-label": label,
+			"aria-describedby": t4,
+			"aria-disabled": t5,
+			...t6
+		});
+		$[10] = label;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== placeholder || $[16] !== placeholderId || $[17] !== value) {
+		t8 = placeholder === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			id: placeholderId,
+			className: composer_editor_module_default.placeholder,
+			hidden: value !== "",
+			"aria-hidden": "true",
+			children: placeholder
+		});
+		$[15] = placeholder;
+		$[16] = placeholderId;
+		$[17] = value;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== setValue) {
+		t9 = /* @__PURE__ */ jsx(OnChangePlugin, {
+			ignoreSelectionChange: true,
+			onChange: (editorState) => editorState.read(() => setValue($getRoot().getTextContent()))
+		});
+		$[19] = setValue;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(EditorBehaviorPlugin, {});
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== children || $[23] !== t3 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: composer_editor_module_default.editor,
+			style: t3,
+			children: [
+				t7,
+				t8,
+				t9,
+				t10,
+				children
+			]
+		});
+		$[22] = children;
+		$[23] = t3;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== extension || $[29] !== t11) {
+		t12 = /* @__PURE__ */ jsx(LexicalExtensionComposer, {
+			extension,
+			contentEditable: null,
+			children: t11
+		});
+		$[28] = extension;
+		$[29] = t11;
+		$[30] = t12;
+	} else t12 = $[30];
+	return t12;
+};
+function _temp(error) {
+	throw error;
+}
+export { ComposerEditor };

package/dist/components/composer/composer-editor.module.js

@@ -0,0 +1,14 @@
+import './composer-editor.css';// src/components/composer/composer-editor.module.scss
+var editor = "_editor_osksg_3";
+var content = "_content_osksg_9";
+var placeholder = "_placeholder_osksg_17";
+var menu = "_menu_osksg_25";
+var menuItem = "_menuItem_osksg_54";
+var composer_editor_module_default = {
+	editor,
+	content,
+	placeholder,
+	menu,
+	menuItem
+};
+export { content, composer_editor_module_default as default, editor, menu, menuItem, placeholder };

package/dist/components/composer/composer-mentions.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { MentionSource } from "./mention-sources.ts";
+export type ComposerMentionsProps = Readonly<{
+    /** The typeahead list's accessible name, such as "People to mention". */
+    label: string;
+    /** Where the candidates for a query come from. */
+    sources: readonly MentionSource[];
+}>;
+/** An `@` typeahead inside `Composer.Editor` that inserts mentions from `sources`. */
+export declare const ComposerMentions: ({ label, sources, }: ComposerMentionsProps) => ReactNode;
+//# sourceMappingURL=composer-mentions.d.ts.map

package/dist/components/composer/composer-mentions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composer-mentions.d.ts","sourceRoot":"","sources":["../../../src/components/composer/composer-mentions.tsx"],"names":[],"mappings":"AAYA,OAAO,EACN,KAAK,SAAS,EAKd,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAEX,aAAa,EACb,MAAM,sBAAsB,CAAC;AAwF9B,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC5C,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;CAClC,CAAC,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,wBAG1B,qBAAqB,KAAG,SAyH1B,CAAC"}