@formatjs/editor 1.1.48 → 1.4.0

package/ui.d.ts

@@ -0,0 +1,177 @@
+import { ComponentType, ReactNode } from "react";
+import "@formatjs/icu-messageformat-parser";
+//#region packages/editor/validation.d.ts
+type TranslationValidationError = "empty" | "invalid-source" | "invalid-translation" | "structure";
+//#endregion
+//#region packages/editor/workflow.d.ts
+interface SourceLocation {
+  file: string;
+  start?: number;
+  end?: number;
+}
+interface EditorMessage {
+  id: string;
+  defaultMessage: string;
+  description?: string;
+  catalogs?: readonly string[];
+  locations?: readonly SourceLocation[];
+  translations: Readonly<Record<string, string | undefined>>;
+}
+type TranslationSaveResult<TResult = void> = {
+  status: "saved";
+  value: TResult;
+} | {
+  status: "failed";
+  error: Error;
+} | {
+  status: "invalid";
+  validationError: TranslationValidationError;
+} | {
+  status: "skipped";
+  reason: "unavailable" | "unchanged" | "pending";
+};
+/** A render snapshot and actions for one message/locale pair. */
+interface TranslationDraftState<TContext = void, TResult = void> {
+  readonly value: string;
+  readonly baseline: string;
+  readonly validationError: TranslationValidationError | null;
+  readonly changed: boolean;
+  readonly isSaving: boolean;
+  readonly saveError: Error | null;
+  readonly saved: boolean;
+  setTranslation: (value: string) => void;
+  reset: () => void;
+  save: (context?: TContext) => Promise<TranslationSaveResult<TResult>>;
+}
+//#endregion
+//#region packages/editor/ui.d.ts
+export interface EditorButtonProps {
+  children: ReactNode;
+  /** Called once per activation, without a DOM event; disabled controls must not call it. */
+  onPress: () => void;
+  disabled?: boolean;
+  variant: "primary" | "secondary";
+}
+export interface EditorInputProps {
+  id: string;
+  value: string;
+  /** Reports the complete next string value; never a DOM event. */
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  "aria-invalid"?: boolean;
+  "aria-describedby"?: string;
+}
+export interface EditorTextInputProps extends EditorInputProps {
+  type: "text" | "search";
+}
+export interface EditorTextAreaProps extends EditorInputProps {
+  /** Visible rows when supported by the control; defaults to six. */
+  rows?: number;
+}
+export interface EditorMessageRowProps {
+  children: ReactNode;
+  selected: boolean;
+  /** Activates this row without changing controlled selection itself. */
+  onSelect: () => void;
+}
+export interface EditorPanelProps {
+  children: ReactNode;
+  label: string;
+  kind: "source" | "translation";
+}
+export interface EditorLayoutProps {
+  toolbar: ReactNode;
+  navigation: ReactNode;
+  content: ReactNode;
+}
+/** Define adapters outside render so controls retain focus across edits. */
+export interface EditorComponents {
+  Button: ComponentType<EditorButtonProps>;
+  TextInput: ComponentType<EditorTextInputProps>;
+  TextArea: ComponentType<EditorTextAreaProps>;
+  MessageRow: ComponentType<EditorMessageRowProps>;
+  Panel: ComponentType<EditorPanelProps>;
+  Layout: ComponentType<EditorLayoutProps>;
+}
+export interface EditorLabels {
+  search: string;
+  messages: string;
+  source: string;
+  noMessages: string;
+  noSelection: string;
+  loading: string;
+  copySource: string;
+  reset: string;
+  save: string;
+  saving: string;
+  saved: string;
+  unsaved: string;
+  unchanged: string;
+  validation: Record<TranslationValidationError, string>;
+}
+export type EditorLabelOverrides = Partial<Omit<EditorLabels, "validation">> & {
+  validation?: Partial<EditorLabels["validation"]>;
+};
+/** Unstyled native controls; no CSS, icons, or localization provider is required. */
+export declare const nativeEditorComponents: EditorComponents;
+export interface EditorDesignSystemProviderProps {
+  /** Overrides inherit unspecified components from the nearest provider. */
+  components: Partial<EditorComponents>;
+  children: ReactNode;
+}
+/** Configure a tree once; sibling providers remain independent. */
+export declare function EditorDesignSystemProvider({ components, children }: EditorDesignSystemProviderProps): ReactNode;
+/** Read the resolved controls, including native defaults outside a provider. */
+export declare function useEditorDesignSystem(): Readonly<EditorComponents>;
+interface ViewOptions {
+  labels?: EditorLabelOverrides;
+}
+export type EditorViewMessage = Pick<EditorMessage, "id" | "defaultMessage" | "description">;
+export interface EditorSearch {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+export interface MessageListProps extends ViewOptions {
+  messages: readonly EditorViewMessage[];
+  selectedId?: string;
+  onSelect: (id: string) => void;
+  search?: EditorSearch;
+  loading?: boolean;
+  pagination?: ReactNode;
+}
+/** Controlled list: it never filters, paginates, fetches, or changes selection itself. */
+export declare function MessageList({ messages, selectedId, onSelect, search, loading, pagination, labels }: MessageListProps): ReactNode;
+export interface SourceMessageProps extends ViewOptions {
+  message: EditorViewMessage;
+  preview?: ReactNode;
+  context?: ReactNode;
+}
+export declare function SourceMessage({ message, preview, context, labels }: SourceMessageProps): ReactNode;
+export type TranslationFieldDraft = Pick<TranslationDraftState, "value" | "validationError" | "changed" | "isSaving" | "saveError" | "saved" | "setTranslation" | "reset">;
+export interface TranslationFieldProps extends ViewOptions {
+  locale: string;
+  /** Human-readable label; defaults to the locale identifier. */
+  label?: string;
+  source: string;
+  draft: TranslationFieldDraft;
+  /** The caller owns confirmation, context, persistence, and receipt presentation. */
+  onSave?: () => void;
+  /** Overrides the default copy/reset/save actions, including with null. */
+  actions?: ReactNode;
+  preview?: ReactNode;
+}
+export declare function TranslationField({ locale, label, source, draft, onSave, actions, preview, labels }: TranslationFieldProps): ReactNode;
+export type EditorTranslation = Omit<TranslationFieldProps, "source" | "labels">;
+export interface TranslationEditorViewProps extends Omit<MessageListProps, "selectedId"> {
+  /** May be outside the loaded list, e.g. during a server-side page change. */
+  selectedMessage?: EditorViewMessage;
+  translations: readonly EditorTranslation[];
+  filters?: ReactNode;
+  context?: ReactNode;
+  sourcePreview?: ReactNode;
+  notice?: ReactNode;
+}
+/** A stateless composition over caller-owned navigation and locale drafts. */
+export declare function TranslationEditorView({ selectedMessage, translations, filters, context, sourcePreview, notice, labels, ...list }: TranslationEditorViewProps): ReactNode;
+//#endregion
+//# sourceMappingURL=ui.d.ts.map

package/ui.js

@@ -0,0 +1,212 @@
+import { createContext, createElement, useContext, useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/editor/ui.tsx
+const defaultLabels = {
+	search: "Search messages",
+	messages: "Messages",
+	source: "Source message",
+	noMessages: "No matching messages",
+	noSelection: "Select a message",
+	loading: "Loading messages…",
+	copySource: "Copy source",
+	reset: "Reset",
+	save: "Save translation",
+	saving: "Saving…",
+	saved: "Translation saved.",
+	unsaved: "Unsaved changes",
+	unchanged: "No unsaved changes",
+	validation: {
+		empty: "Enter a translation before saving.",
+		"invalid-source": "The source contains invalid ICU syntax.",
+		"invalid-translation": "The translation contains invalid ICU syntax.",
+		structure: "Preserve ICU arguments, tags, formatting styles, and selector branches."
+	}
+};
+function resolveLabels(labels) {
+	return {
+		...defaultLabels,
+		...labels,
+		validation: {
+			...defaultLabels.validation,
+			...labels?.validation
+		}
+	};
+}
+/** Unstyled native controls; no CSS, icons, or localization provider is required. */
+const nativeEditorComponents = {
+	Button: ({ children, onPress, disabled }) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		onClick: () => onPress(),
+		children
+	}),
+	TextInput: ({ onValueChange, ...props }) => /* @__PURE__ */ jsx("input", {
+		...props,
+		onChange: (event) => onValueChange(event.target.value)
+	}),
+	TextArea: ({ onValueChange, rows = 6, ...props }) => /* @__PURE__ */ jsx("textarea", {
+		...props,
+		rows,
+		onChange: (event) => onValueChange(event.target.value)
+	}),
+	MessageRow: ({ children, selected, onSelect }) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-current": selected ? "true" : void 0,
+		onClick: () => onSelect(),
+		children
+	}),
+	Panel: ({ children, label }) => /* @__PURE__ */ jsx("section", {
+		"aria-label": label,
+		children
+	}),
+	Layout: ({ toolbar, navigation, content }) => /* @__PURE__ */ jsxs("div", { children: [toolbar, /* @__PURE__ */ jsxs("div", { children: [navigation, content] })] })
+};
+const EditorDesignSystemContext = createContext(nativeEditorComponents);
+/** Configure a tree once; sibling providers remain independent. */
+function EditorDesignSystemProvider({ components, children }) {
+	const parent = useEditorDesignSystem();
+	const value = useMemo(() => ({
+		...parent,
+		...components
+	}), [parent, components]);
+	return /* @__PURE__ */ jsx(EditorDesignSystemContext, {
+		value,
+		children
+	});
+}
+/** Read the resolved controls, including native defaults outside a provider. */
+function useEditorDesignSystem() {
+	return useContext(EditorDesignSystemContext);
+}
+/** Controlled list: it never filters, paginates, fetches, or changes selection itself. */
+function MessageList({ messages, selectedId, onSelect, search, loading = false, pagination, labels }) {
+	const { TextInput, MessageRow } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	const searchId = useId();
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": text.messages,
+		"aria-busy": loading,
+		children: [
+			search && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: searchId,
+				children: text.search
+			}), /* @__PURE__ */ jsx(TextInput, {
+				id: searchId,
+				type: "search",
+				value: search.value,
+				onValueChange: search.onValueChange
+			})] }),
+			loading && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", { children: text.loading }) }),
+			/* @__PURE__ */ jsx("ul", { children: messages.map((message) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(MessageRow, {
+				selected: message.id === selectedId,
+				onSelect: () => onSelect(message.id),
+				children: [
+					/* @__PURE__ */ jsx("span", { children: message.defaultMessage }),
+					" ",
+					/* @__PURE__ */ jsx("code", { children: message.id })
+				]
+			}) }, message.id)) }),
+			!loading && messages.length === 0 && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", { children: text.noMessages }) }),
+			pagination
+		]
+	});
+}
+function SourceMessage({ message, preview, context, labels }) {
+	const { Panel } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	return /* @__PURE__ */ jsxs(Panel, {
+		kind: "source",
+		label: text.source,
+		children: [
+			/* @__PURE__ */ jsx("h2", { children: text.source }),
+			/* @__PURE__ */ jsx("code", { children: message.id }),
+			preview ?? /* @__PURE__ */ jsx("pre", { children: message.defaultMessage }),
+			message.description && /* @__PURE__ */ jsx("p", { children: message.description }),
+			context
+		]
+	});
+}
+function TranslationField({ locale, label = locale, source, draft, onSave, actions, preview, labels }) {
+	const { Panel, TextArea, Button } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	const id = useId();
+	const errorId = `${id}-error`;
+	const statusId = `${id}-status`;
+	const validation = draft.validationError ? text.validation[draft.validationError] : null;
+	const error = validation ?? draft.saveError?.message;
+	return /* @__PURE__ */ jsxs(Panel, {
+		kind: "translation",
+		label,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				id,
+				value: draft.value,
+				onValueChange: draft.setTranslation,
+				"aria-invalid": !!validation,
+				"aria-describedby": error ? `${errorId} ${statusId}` : statusId
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				children: error
+			}),
+			/* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", {
+				id: statusId,
+				children: draft.isSaving ? text.saving : draft.saved ? text.saved : draft.changed ? text.unsaved : text.unchanged
+			}) }),
+			preview,
+			actions !== void 0 ? actions : /* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					disabled: draft.isSaving,
+					onPress: () => draft.setTranslation(source),
+					children: text.copySource
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					disabled: !draft.changed || draft.isSaving,
+					onPress: draft.reset,
+					children: text.reset
+				}),
+				onSave && /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					disabled: !draft.changed || !!draft.validationError || draft.isSaving,
+					onPress: onSave,
+					children: draft.isSaving ? text.saving : text.save
+				})
+			] })
+		]
+	});
+}
+/** A stateless composition over caller-owned navigation and locale drafts. */
+function TranslationEditorView({ selectedMessage, translations, filters, context, sourcePreview, notice, labels, ...list }) {
+	const { Layout } = useEditorDesignSystem();
+	const text = resolveLabels(labels);
+	return /* @__PURE__ */ jsx(Layout, {
+		toolbar: filters,
+		navigation: /* @__PURE__ */ jsx(MessageList, {
+			...list,
+			selectedId: selectedMessage?.id,
+			labels
+		}),
+		content: /* @__PURE__ */ jsxs(Fragment, { children: [notice, selectedMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SourceMessage, {
+			message: selectedMessage,
+			preview: sourcePreview,
+			context,
+			labels
+		}), translations.map((translation) => /* @__PURE__ */ createElement(TranslationField, {
+			...translation,
+			key: `${selectedMessage.id}:${translation.locale}`,
+			source: selectedMessage.defaultMessage,
+			labels
+		}))] }) : /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("output", { children: text.noSelection }) })] })
+	});
+}
+//#endregion
+export { EditorDesignSystemProvider, MessageList, SourceMessage, TranslationEditorView, TranslationField, nativeEditorComponents, useEditorDesignSystem };
+
+//# sourceMappingURL=ui.js.map

package/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","names":[],"sources":["../ui.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentType,\n  type ReactNode,\n} from 'react'\nimport type {\n  EditorMessage,\n  TranslationDraftState,\n} from '#packages/editor/workflow.js'\nimport type {TranslationValidationError} from '#packages/editor/validation.js'\n\nexport interface EditorButtonProps {\n  children: ReactNode\n  /** Called once per activation, without a DOM event; disabled controls must not call it. */\n  onPress: () => void\n  disabled?: boolean\n  variant: 'primary' | 'secondary'\n}\nexport interface EditorInputProps {\n  id: string\n  value: string\n  /** Reports the complete next string value; never a DOM event. */\n  onValueChange: (value: string) => void\n  disabled?: boolean\n  'aria-invalid'?: boolean\n  'aria-describedby'?: string\n}\nexport interface EditorTextInputProps extends EditorInputProps {\n  type: 'text' | 'search'\n}\nexport interface EditorTextAreaProps extends EditorInputProps {\n  /** Visible rows when supported by the control; defaults to six. */\n  rows?: number\n}\nexport interface EditorMessageRowProps {\n  children: ReactNode\n  selected: boolean\n  /** Activates this row without changing controlled selection itself. */\n  onSelect: () => void\n}\nexport interface EditorPanelProps {\n  children: ReactNode\n  label: string\n  kind: 'source' | 'translation'\n}\nexport interface EditorLayoutProps {\n  toolbar: ReactNode\n  navigation: ReactNode\n  content: ReactNode\n}\n/** Define adapters outside render so controls retain focus across edits. */\nexport interface EditorComponents {\n  Button: ComponentType<EditorButtonProps>\n  TextInput: ComponentType<EditorTextInputProps>\n  TextArea: ComponentType<EditorTextAreaProps>\n  MessageRow: ComponentType<EditorMessageRowProps>\n  Panel: ComponentType<EditorPanelProps>\n  Layout: ComponentType<EditorLayoutProps>\n}\nexport interface EditorLabels {\n  search: string\n  messages: string\n  source: string\n  noMessages: string\n  noSelection: string\n  loading: string\n  copySource: string\n  reset: string\n  save: string\n  saving: string\n  saved: string\n  unsaved: string\n  unchanged: string\n  validation: Record<TranslationValidationError, string>\n}\nconst defaultLabels: EditorLabels = {\n  search: 'Search messages',\n  messages: 'Messages',\n  source: 'Source message',\n  noMessages: 'No matching messages',\n  noSelection: 'Select a message',\n  loading: 'Loading messages…',\n  copySource: 'Copy source',\n  reset: 'Reset',\n  save: 'Save translation',\n  saving: 'Saving…',\n  saved: 'Translation saved.',\n  unsaved: 'Unsaved changes',\n  unchanged: 'No unsaved changes',\n  validation: {\n    empty: 'Enter a translation before saving.',\n    'invalid-source': 'The source contains invalid ICU syntax.',\n    'invalid-translation': 'The translation contains invalid ICU syntax.',\n    structure:\n      'Preserve ICU arguments, tags, formatting styles, and selector branches.',\n  },\n}\nexport type EditorLabelOverrides = Partial<Omit<EditorLabels, 'validation'>> & {\n  validation?: Partial<EditorLabels['validation']>\n}\nfunction resolveLabels(labels?: EditorLabelOverrides): EditorLabels {\n  return {\n    ...defaultLabels,\n    ...labels,\n    validation: {...defaultLabels.validation, ...labels?.validation},\n  }\n}\n/** Unstyled native controls; no CSS, icons, or localization provider is required. */\nexport const nativeEditorComponents: EditorComponents = {\n  Button: ({children, onPress, disabled}) => (\n    <button type=\"button\" disabled={disabled} onClick={() => onPress()}>\n      {children}\n    </button>\n  ),\n  TextInput: ({onValueChange, ...props}) => (\n    <input {...props} onChange={event => onValueChange(event.target.value)} />\n  ),\n  TextArea: ({onValueChange, rows = 6, ...props}) => (\n    <textarea\n      {...props}\n      rows={rows}\n      onChange={event => onValueChange(event.target.value)}\n    />\n  ),\n  MessageRow: ({children, selected, onSelect}) => (\n    <button\n      type=\"button\"\n      aria-current={selected ? 'true' : undefined}\n      onClick={() => onSelect()}\n    >\n      {children}\n    </button>\n  ),\n  Panel: ({children, label}) => (\n    <section aria-label={label}>{children}</section>\n  ),\n  Layout: ({toolbar, navigation, content}) => (\n    <div>\n      {toolbar}\n      <div>\n        {navigation}\n        {content}\n      </div>\n    </div>\n  ),\n}\nconst EditorDesignSystemContext = createContext<Readonly<EditorComponents>>(\n  nativeEditorComponents\n)\n\nexport interface EditorDesignSystemProviderProps {\n  /** Overrides inherit unspecified components from the nearest provider. */\n  components: Partial<EditorComponents>\n  children: ReactNode\n}\n/** Configure a tree once; sibling providers remain independent. */\nexport function EditorDesignSystemProvider({\n  components,\n  children,\n}: EditorDesignSystemProviderProps): ReactNode {\n  const parent = useEditorDesignSystem()\n  const value = useMemo(\n    () => ({...parent, ...components}),\n    [parent, components]\n  )\n  return (\n    <EditorDesignSystemContext value={value}>\n      {children}\n    </EditorDesignSystemContext>\n  )\n}\n/** Read the resolved controls, including native defaults outside a provider. */\nexport function useEditorDesignSystem(): Readonly<EditorComponents> {\n  return useContext(EditorDesignSystemContext)\n}\ninterface ViewOptions {\n  labels?: EditorLabelOverrides\n}\nexport type EditorViewMessage = Pick<\n  EditorMessage,\n  'id' | 'defaultMessage' | 'description'\n>\nexport interface EditorSearch {\n  value: string\n  onValueChange: (value: string) => void\n}\nexport interface MessageListProps extends ViewOptions {\n  messages: readonly EditorViewMessage[]\n  selectedId?: string\n  onSelect: (id: string) => void\n  search?: EditorSearch\n  loading?: boolean\n  pagination?: ReactNode\n}\n/** Controlled list: it never filters, paginates, fetches, or changes selection itself. */\nexport function MessageList({\n  messages,\n  selectedId,\n  onSelect,\n  search,\n  loading = false,\n  pagination,\n  labels,\n}: MessageListProps): ReactNode {\n  const {TextInput, MessageRow} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  const searchId = useId()\n  return (\n    <nav aria-label={text.messages} aria-busy={loading}>\n      {search && (\n        <div>\n          <label htmlFor={searchId}>{text.search}</label>\n          <TextInput\n            id={searchId}\n            type=\"search\"\n            value={search.value}\n            onValueChange={search.onValueChange}\n          />\n        </div>\n      )}\n      {loading && (\n        <p>\n          <output>{text.loading}</output>\n        </p>\n      )}\n      <ul>\n        {messages.map(message => (\n          <li key={message.id}>\n            <MessageRow\n              selected={message.id === selectedId}\n              onSelect={() => onSelect(message.id)}\n            >\n              <span>{message.defaultMessage}</span> <code>{message.id}</code>\n            </MessageRow>\n          </li>\n        ))}\n      </ul>\n      {!loading && messages.length === 0 && (\n        <p>\n          <output>{text.noMessages}</output>\n        </p>\n      )}\n      {pagination}\n    </nav>\n  )\n}\nexport interface SourceMessageProps extends ViewOptions {\n  message: EditorViewMessage\n  preview?: ReactNode\n  context?: ReactNode\n}\nexport function SourceMessage({\n  message,\n  preview,\n  context,\n  labels,\n}: SourceMessageProps): ReactNode {\n  const {Panel} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  return (\n    <Panel kind=\"source\" label={text.source}>\n      <h2>{text.source}</h2>\n      <code>{message.id}</code>\n      {preview ?? <pre>{message.defaultMessage}</pre>}\n      {message.description && <p>{message.description}</p>}\n      {context}\n    </Panel>\n  )\n}\nexport type TranslationFieldDraft = Pick<\n  TranslationDraftState,\n  | 'value'\n  | 'validationError'\n  | 'changed'\n  | 'isSaving'\n  | 'saveError'\n  | 'saved'\n  | 'setTranslation'\n  | 'reset'\n>\nexport interface TranslationFieldProps extends ViewOptions {\n  locale: string\n  /** Human-readable label; defaults to the locale identifier. */\n  label?: string\n  source: string\n  draft: TranslationFieldDraft\n  /** The caller owns confirmation, context, persistence, and receipt presentation. */\n  onSave?: () => void\n  /** Overrides the default copy/reset/save actions, including with null. */\n  actions?: ReactNode\n  preview?: ReactNode\n}\nexport function TranslationField({\n  locale,\n  label = locale,\n  source,\n  draft,\n  onSave,\n  actions,\n  preview,\n  labels,\n}: TranslationFieldProps): ReactNode {\n  const {Panel, TextArea, Button} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  const id = useId()\n  const errorId = `${id}-error`\n  const statusId = `${id}-status`\n  const validation = draft.validationError\n    ? text.validation[draft.validationError]\n    : null\n  const error = validation ?? draft.saveError?.message\n  return (\n    <Panel kind=\"translation\" label={label}>\n      <label htmlFor={id}>{label}</label>\n      <TextArea\n        id={id}\n        value={draft.value}\n        onValueChange={draft.setTranslation}\n        aria-invalid={!!validation}\n        aria-describedby={error ? `${errorId} ${statusId}` : statusId}\n      />\n      {error && (\n        <p id={errorId} role=\"alert\">\n          {error}\n        </p>\n      )}\n      <p>\n        <output id={statusId}>\n          {draft.isSaving\n            ? text.saving\n            : draft.saved\n              ? text.saved\n              : draft.changed\n                ? text.unsaved\n                : text.unchanged}\n        </output>\n      </p>\n      {preview}\n      {actions !== undefined ? (\n        actions\n      ) : (\n        <div>\n          <Button\n            variant=\"secondary\"\n            disabled={draft.isSaving}\n            onPress={() => draft.setTranslation(source)}\n          >\n            {text.copySource}\n          </Button>\n          <Button\n            variant=\"secondary\"\n            disabled={!draft.changed || draft.isSaving}\n            onPress={draft.reset}\n          >\n            {text.reset}\n          </Button>\n          {onSave && (\n            <Button\n              variant=\"primary\"\n              disabled={\n                !draft.changed || !!draft.validationError || draft.isSaving\n              }\n              onPress={onSave}\n            >\n              {draft.isSaving ? text.saving : text.save}\n            </Button>\n          )}\n        </div>\n      )}\n    </Panel>\n  )\n}\nexport type EditorTranslation = Omit<TranslationFieldProps, 'source' | 'labels'>\nexport interface TranslationEditorViewProps extends Omit<\n  MessageListProps,\n  'selectedId'\n> {\n  /** May be outside the loaded list, e.g. during a server-side page change. */\n  selectedMessage?: EditorViewMessage\n  translations: readonly EditorTranslation[]\n  filters?: ReactNode\n  context?: ReactNode\n  sourcePreview?: ReactNode\n  notice?: ReactNode\n}\n/** A stateless composition over caller-owned navigation and locale drafts. */\nexport function TranslationEditorView({\n  selectedMessage,\n  translations,\n  filters,\n  context,\n  sourcePreview,\n  notice,\n  labels,\n  ...list\n}: TranslationEditorViewProps): ReactNode {\n  const {Layout} = useEditorDesignSystem()\n  const text = resolveLabels(labels)\n  return (\n    <Layout\n      toolbar={filters}\n      navigation={\n        <MessageList\n          {...list}\n          selectedId={selectedMessage?.id}\n          labels={labels}\n        />\n      }\n      content={\n        <>\n          {notice}\n          {selectedMessage ? (\n            <>\n              <SourceMessage\n                message={selectedMessage}\n                preview={sourcePreview}\n                context={context}\n                labels={labels}\n              />\n              {translations.map(translation => (\n                <TranslationField\n                  {...translation}\n                  key={`${selectedMessage.id}:${translation.locale}`}\n                  source={selectedMessage.defaultMessage}\n                  labels={labels}\n                />\n              ))}\n            </>\n          ) : (\n            <p>\n              <output>{text.noSelection}</output>\n            </p>\n          )}\n        </>\n      }\n    />\n  )\n}\n"],"mappings":"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"}

package/header.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface Props {
-}
-declare const Header: React.FC<Props>;
-export default Header;
-//# sourceMappingURL=header.d.ts.map

package/header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,KAAK;CAAG;AAEzB,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/header.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var core_1 = require("@material-ui/core");
-function handleClick(event) {
-    event.preventDefault();
-    console.info('You clicked a breadcrumb.');
-}
-var Header = function (_) {
-    return (react_1.default.createElement(core_1.Breadcrumbs, { "aria-label": "breadcrumb" },
-        react_1.default.createElement(core_1.Link, { color: "inherit", href: "/", onClick: handleClick }, "Material-UI"),
-        react_1.default.createElement(core_1.Link, { color: "inherit", href: "/getting-started/installation/", onClick: handleClick }, "Core"),
-        react_1.default.createElement(core_1.Typography, { color: "textPrimary" }, "Breadcrumb")));
-};
-exports.default = Header;

package/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/index.tsx"],"names":[],"mappings":";AAyCA,wBAAgB,OAAO,gBAoItB;AAED,MAAM,CAAC,OAAO,UAAU,GAAG,gBAmB1B"}

package/lib/header.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface Props {
-}
-declare const Header: React.FC<Props>;
-export default Header;
-//# sourceMappingURL=header.d.ts.map

package/lib/header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,KAAK;CAAG;AAEzB,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgB3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/lib/header.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Typography, Breadcrumbs, Link } from '@material-ui/core';
-function handleClick(event) {
-    event.preventDefault();
-    console.info('You clicked a breadcrumb.');
-}
-var Header = function (_) {
-    return (React.createElement(Breadcrumbs, { "aria-label": "breadcrumb" },
-        React.createElement(Link, { color: "inherit", href: "/", onClick: handleClick }, "Material-UI"),
-        React.createElement(Link, { color: "inherit", href: "/getting-started/installation/", onClick: handleClick }, "Core"),
-        React.createElement(Typography, { color: "textPrimary" }, "Breadcrumb")));
-};
-export default Header;

package/lib/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare function CoreApp(): JSX.Element;
-export default function App(): JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/index.tsx"],"names":[],"mappings":";AAyCA,wBAAgB,OAAO,gBAoItB;AAED,MAAM,CAAC,OAAO,UAAU,GAAG,gBAmB1B"}

package/lib/index.js

@@ -1,116 +0,0 @@
-import { __awaiter, __generator } from "tslib";
-import React, { useEffect, useState } from 'react';
-import { useMediaQuery, createMuiTheme, ThemeProvider, CssBaseline, Grid, TextField, AppBar, Toolbar, Box, Typography, ButtonGroup, Button, Tabs, Tab, IconButton, Drawer, List, ListItem, ListItemText, } from '@material-ui/core';
-import { Menu, AddAlert, NotificationsOff } from '@material-ui/icons';
-import Header from './header';
-import { IntlProvider, useIntl } from 'react-intl';
-import Messages from './messages';
-var MESSAGES_COUNT = 50;
-function fetchData() {
-    return __awaiter(this, void 0, void 0, function () {
-        var en, ru;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, fetch('/fixtures/en.json')];
-                case 1: return [4 /*yield*/, (_a.sent()).json()];
-                case 2:
-                    en = _a.sent();
-                    return [4 /*yield*/, fetch('/fixtures/ru.json')];
-                case 3: return [4 /*yield*/, (_a.sent()).json()];
-                case 4:
-                    ru = _a.sent();
-                    return [2 /*return*/, Object.keys(en)
-                            .slice(MESSAGES_COUNT)
-                            .map(function (id) { return ({
-                            id: id,
-                            defaultMessage: en[id],
-                            translatedMessage: ru[id],
-                        }); })];
-            }
-        });
-    });
-}
-export function CoreApp() {
-    var intl = useIntl();
-    var _a = useState([]), messages = _a[0], setMessages = _a[1];
-    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    useEffect(function () {
-        ;
-        (function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = setMessages;
-                            return [4 /*yield*/, fetchData()];
-                        case 1:
-                            _a.apply(void 0, [_b.sent()]);
-                            setIsLoading(false);
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        })();
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(CssBaseline, null),
-        React.createElement(Box, { height: "100vh" },
-            React.createElement(AppBar, { position: "static" },
-                React.createElement(Toolbar, { variant: "dense" },
-                    React.createElement(IconButton, { edge: "start", color: "inherit", "aria-label": "menu" },
-                        React.createElement(Menu, null)),
-                    React.createElement(Drawer, { anchor: "left" },
-                        React.createElement(List, null, ['Inbox', 'Starred', 'Send email', 'Drafts'].map(function (text) { return (React.createElement(ListItem, { button: true, key: text },
-                            React.createElement(ListItemText, { primary: text }))); }))),
-                    React.createElement(Header, null),
-                    React.createElement(AddAlert, null),
-                    React.createElement(NotificationsOff, null))),
-            React.createElement(Grid, { container: true, spacing: 0 },
-                React.createElement(Grid, { xs: 3 },
-                    React.createElement("form", { noValidate: true, autoComplete: "off" },
-                        React.createElement(TextField, { type: "search", fullWidth: true, margin: "none", size: "small", variant: "filled", label: intl.formatMessage({
-                                id: 'search-bar-label',
-                                defaultMessage: 'Search message',
-                                description: 'label in search bar',
-                            }) })),
-                    React.createElement(Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 108px)" },
-                        React.createElement(Messages, { messages: messages, isLoading: isLoading, count: MESSAGES_COUNT }))),
-                React.createElement(Grid, { xs: 6 },
-                    React.createElement(Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 48px)" },
-                        React.createElement(Box, { p: 2 },
-                            React.createElement(Typography, { variant: "h6", component: "h6" }, "English message"),
-                            React.createElement(Typography, { variant: "body2", component: "span" },
-                                "Description",
-                                ' ',
-                                React.createElement(Typography, { variant: "body2", color: "textSecondary", component: "span" }, "This is a description"))),
-                        React.createElement(TextField, { multiline: true, fullWidth: true, margin: "dense", size: "small", variant: "filled", rows: 4, label: intl.formatMessage({
-                                id: 'translated-box-label',
-                                defaultMessage: 'Translate',
-                                description: 'translated box label',
-                            }) }),
-                        React.createElement(Box, { px: 2, py: 1, display: "flex", justifyContent: "space-between", alignItems: "center" },
-                            React.createElement(Typography, { variant: "body2", component: "span" }, "71 / 101"),
-                            React.createElement(Box, null,
-                                React.createElement(ButtonGroup, { variant: "text", color: "primary", "aria-label": "text primary button group" },
-                                    React.createElement(Button, null, "Copy"),
-                                    React.createElement(Button, null, "Clear")),
-                                React.createElement(Button, { variant: "contained", color: "primary" }, "Translate"))))),
-                React.createElement(Grid, { xs: 3 },
-                    React.createElement(Tabs, { indicatorColor: "primary", textColor: "primary", centered: true, "aria-label": "disabled tabs example", value: 0, variant: "fullWidth" },
-                        React.createElement(Tab, { label: "Active" }),
-                        React.createElement(Tab, { label: "Active" })))))));
-}
-export default function App() {
-    var prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-    var theme = React.useMemo(function () {
-        return createMuiTheme({
-            palette: {
-                type: prefersDarkMode ? 'dark' : 'light',
-            },
-        });
-    }, [prefersDarkMode]);
-    return (React.createElement(IntlProvider, { locale: "en", messages: {} },
-        React.createElement(ThemeProvider, { theme: theme },
-            React.createElement(CoreApp, null))));
-}

package/lib/main.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=main.d.ts.map

package/lib/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/main.tsx"],"names":[],"mappings":""}

package/lib/main.js

@@ -1,4 +0,0 @@
-import Main from '.';
-import ReactDOM from 'react-dom';
-import React from 'react';
-ReactDOM.render(React.createElement(Main, null), document.getElementById('main'));

package/lib/message.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface Props {
-    message: string;
-}
-declare const Message: React.FC<Props>;
-export default Message;
-//# sourceMappingURL=message.d.ts.map

package/lib/message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAuFD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAG5B,CAAA;AAED,eAAe,OAAO,CAAA"}