@xsolla/xui-input-edit 0.176.0

package/README.md

@@ -0,0 +1,164 @@
+# Input Edit
+
+A multi-line text field for editing freeform text — comments, messages, notes — with inline (click-to-edit) and form (always-editable) modes; the field grows with its content. Works on web and React Native via `XUIProvider` themed contexts.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-input-edit
+```
+
+## Imports
+
+```tsx
+import { InputEdit } from '@xsolla/xui-input-edit';
+import type { InputEditProps } from '@xsolla/xui-input-edit';
+```
+
+## Quick start
+
+```tsx
+const [value, setValue] = useState('Input text');
+
+<InputEdit
+  value={value}
+  onChangeText={setValue}
+  onConfirm={(v) => save(v)}
+/>;
+```
+
+## API Reference
+
+### `<InputEdit>`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Controlled value. |
+| `defaultValue` | `string` | `''` | Initial value for uncontrolled usage. |
+| `placeholder` | `string` | `'Placeholder'` | Placeholder shown when empty. |
+| `onChangeText` | `(text: string) => void` | — | Change handler receiving the current text (HTML when `richText` is set). |
+| `onConfirm` | `(value: string) => void` | — | Called on confirm — check button, `Cmd`/`Ctrl` + `Enter`, or commit-on-blur (only when the value changed). |
+| `onCancel` | `() => void` | — | Called on cancel (cross button or `Escape`); reverts to the last committed value. |
+| `mode` | `'inline' \| 'form'` | `'inline'` | `inline` rests as plain text and reveals the editor on click; `form` is always an open, editable field. |
+| `editControl` | `boolean` | `true` | Show the floating confirm / cancel control while active. |
+| `icon` | `boolean` | `true` | Show the edit affordance icon in the inline display state. |
+| `editIcon` | `ReactNode` | `<Edit />` | Override the default edit (pencil) icon. |
+| `tools` | `ReactNode` | — | Formatting toolbar (e.g. `IconButton`s) shown in a floating bar below the field while active. |
+| `rows` | `number` | `1` | Minimum number of visible text rows while editing. |
+| `textStyle` | `'h1'…'h5' \| 'display' \| 'body-lg'…'body-xxs'` | — | Named typography style; overrides the default font. |
+| `richText` | `boolean` | `false` | Enable rich-text editing (web only); the value becomes HTML. Wire a toolbar via `tools` + `document.execCommand`. Falls back to a plain field on native. |
+| `disabled` | `boolean` | `false` | Disable the control. |
+| `error` | `boolean` | `false` | Apply error styling. |
+| `errorMessage` | `string` | — | Error message; also marks the field invalid. |
+| `id` | `string` | `auto` | HTML id for the field. |
+| `aria-label` | `string` | — | Accessible label when no visible label is present. |
+| `aria-labelledby` | `string` | — | ID of an external element that labels the field. |
+| `testID` | `string` | — | Test identifier. |
+
+`InputEdit` also accepts the standard `TextareaHTMLAttributes`, except `size`, `value`, and `defaultValue` (redefined above) and `onChange` (use `onChangeText`).
+
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
+
+## Examples
+
+### Inline editing
+
+```tsx
+const [value, setValue] = useState('Input text');
+
+<InputEdit value={value} onChangeText={setValue} onConfirm={(v) => save(v)} />;
+```
+
+### Form mode
+
+```tsx
+<InputEdit
+  mode="form"
+  placeholder="Add a description…"
+  onConfirm={(v) => save(v)}
+/>
+```
+
+### Text styles
+
+```tsx
+<InputEdit textStyle="h1" defaultValue="Editable heading" />
+<InputEdit textStyle="body-lg" defaultValue="Body text" />
+```
+
+### Formatting tools
+
+```tsx
+import { IconButton } from '@xsolla/xui-button';
+import { BoldText, ItalicText, Link } from '@xsolla/xui-icons-base';
+
+<InputEdit
+  defaultValue="Input text"
+  tools={
+    <>
+      <IconButton variant="tertiary" tone="mono" size="xs" icon={<BoldText />} aria-label="Bold" />
+      <IconButton variant="tertiary" tone="mono" size="xs" icon={<ItalicText />} aria-label="Italic" />
+      <IconButton variant="tertiary" tone="mono" size="xs" icon={<Link />} aria-label="Add link" />
+    </>
+  }
+/>;
+```
+
+### Rich text
+
+Set `richText` to make the field a `contenteditable` surface whose value is HTML. The toolbar runs `document.execCommand` on the focused selection — vary it per product (alignment, bold/italic/underline, link, …). Web only; falls back to a plain field on native. The HTML is not sanitized — sanitize before rendering untrusted content.
+
+```tsx
+import { IconButton } from '@xsolla/xui-button';
+import {
+  TextAlignLeft, TextAlignCenter, TextAlignRight,
+  BoldText, ItalicText, UnderlineText, Link,
+} from '@xsolla/xui-icons-base';
+
+const [value, setValue] = useState('<b>Bold</b> text');
+const exec = (command, arg) => () => document.execCommand(command, false, arg);
+
+const formats = [
+  { icon: <TextAlignLeft />, label: 'Align left', run: exec('justifyLeft') },
+  { icon: <TextAlignCenter />, label: 'Align center', run: exec('justifyCenter') },
+  { icon: <TextAlignRight />, label: 'Align right', run: exec('justifyRight') },
+  { icon: <BoldText />, label: 'Bold', run: exec('bold') },
+  { icon: <ItalicText />, label: 'Italic', run: exec('italic') },
+  { icon: <UnderlineText />, label: 'Underline', run: exec('underline') },
+  { icon: <Link />, label: 'Add link', run: () => {
+      const url = window.prompt('Link URL');
+      if (url) document.execCommand('createLink', false, url);
+    } },
+];
+
+<InputEdit
+  richText
+  value={value}
+  onChangeText={setValue}
+  tools={formats.map((f) => (
+    <IconButton key={f.label} variant="tertiary" tone="mono" size="xs"
+      icon={f.icon} aria-label={f.label} onPress={f.run} />
+  ))}
+/>;
+```
+
+### Error state
+
+```tsx
+const [value, setValue] = useState('Input text');
+
+<InputEdit
+  value={value}
+  onChangeText={setValue}
+  errorMessage="This field is required"
+/>;
+```
+
+## Accessibility
+
+- Renders a `<textarea>` (or a `contenteditable` `role="textbox"` when `richText` is set); provide a label via `aria-label` or `aria-labelledby` (there is no visible label slot).
+- Error messages are linked through `aria-describedby` and sit in a polite live region (`aria-live="polite"`).
+- `aria-invalid` and `aria-disabled` reflect error and disabled state.
+- The decorative edit icon is `aria-hidden`; the confirm / cancel buttons expose `aria-label`s.
+- Keyboard: `Tab` to focus, `Escape` cancels, `Cmd`/`Ctrl` + `Enter` commits, `Enter` inserts a new line.
+- Rich-text mode is web only and the stored HTML is not sanitized — sanitize before rendering untrusted values.

package/native/index.d.mts

@@ -0,0 +1,117 @@
+import React, { TextareaHTMLAttributes, ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type InputEditMode = "inline" | "form";
+/**
+ * Named typography styles, resolved from the theme's typography tokens. Drives the
+ * field's font family / size / weight / line-height so the text can match surrounding
+ * content (e.g. a heading) rather than only the fixed body sizes.
+ */
+type InputEditTextStyle = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "body-xxs";
+interface InputEditProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "onChange" | "value" | "defaultValue">, ThemeOverrideProps {
+    /**
+     * Controlled value of the field.
+     */
+    value?: string;
+    /**
+     * Initial value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Placeholder shown when the field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Change handler receiving the current text (HTML when `richText` is set).
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * Called when the edit is confirmed (check button or `Cmd`/`Ctrl` + `Enter`).
+     */
+    onConfirm?: (value: string) => void;
+    /**
+     * Called when the edit is cancelled (cross button or `Escape`). The value is reverted.
+     */
+    onCancel?: () => void;
+    /**
+     * Minimum number of visible text rows while editing.
+     */
+    rows?: number;
+    /**
+     * Show the floating confirm / cancel control while editing.
+     */
+    editControl?: boolean;
+    /**
+     * Show the edit affordance icon in display mode.
+     */
+    icon?: boolean;
+    /**
+     * Override the default edit (pencil) icon.
+     */
+    editIcon?: ReactNode;
+    /**
+     * Optional formatting toolbar shown in a floating bar below the field while editing
+     * (e.g. text-align / bold / link `IconButton`s). Rendered to the left, mirroring the
+     * confirm / cancel control on the right.
+     */
+    tools?: ReactNode;
+    /**
+     * Activation mode. `"inline"` (default) rests as plain text and reveals the editor on
+     * click; `"form"` is always an open, editable field (like a standard form text area).
+     */
+    mode?: InputEditMode;
+    /**
+     * Named typography style applied to the text and editor (e.g. `"h1"`, `"body-lg"`).
+     * Overrides the default font.
+     */
+    textStyle?: InputEditTextStyle;
+    /**
+     * Enable rich-text editing (web only). The field becomes a `contenteditable` surface
+     * and `value` / `onChangeText` / `onConfirm` carry HTML. Wire a toolbar via `tools`
+     * using `document.execCommand`. Falls back to a plain text field on React Native.
+     * The HTML is not sanitized — sanitize before rendering untrusted values.
+     */
+    richText?: boolean;
+    /**
+     * Disable the control.
+     */
+    disabled?: boolean;
+    /**
+     * Highlight the control as invalid.
+     */
+    error?: boolean;
+    /**
+     * Error message displayed below the field (implies `error`).
+     */
+    errorMessage?: string;
+    /**
+     * Unique identifier for the input element. Used for accessibility linking.
+     */
+    id?: string;
+    /**
+     * Accessible label for screen readers (use when no visible label is present).
+     */
+    "aria-label"?: string;
+    /**
+     * ID of an external element that labels the field (e.g. a heading placed above it).
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Test identifier.
+     */
+    testID?: string;
+    /**
+     * Optional class name applied to the root element (web).
+     */
+    className?: string;
+}
+/**
+ * A multi-line text field for editing freeform text. In `"inline"` mode it rests as
+ * plain text and reveals a highlighted editor on click; in `"form"` mode it is always
+ * an open, editable field. `Enter` inserts a new line; confirm via the floating control
+ * or `Cmd`/`Ctrl` + `Enter`; clicking outside also commits. `Escape` cancels and
+ * reverts.
+ */
+declare const InputEdit: React.ForwardRefExoticComponent<InputEditProps & React.RefAttributes<HTMLTextAreaElement | HTMLDivElement>>;
+
+export { InputEdit, type InputEditProps };

package/native/index.d.ts

@@ -0,0 +1,117 @@
+import React, { TextareaHTMLAttributes, ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type InputEditMode = "inline" | "form";
+/**
+ * Named typography styles, resolved from the theme's typography tokens. Drives the
+ * field's font family / size / weight / line-height so the text can match surrounding
+ * content (e.g. a heading) rather than only the fixed body sizes.
+ */
+type InputEditTextStyle = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "body-xxs";
+interface InputEditProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "onChange" | "value" | "defaultValue">, ThemeOverrideProps {
+    /**
+     * Controlled value of the field.
+     */
+    value?: string;
+    /**
+     * Initial value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Placeholder shown when the field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Change handler receiving the current text (HTML when `richText` is set).
+     */
+    onChangeText?: (text: string) => void;
+    /**
+     * Called when the edit is confirmed (check button or `Cmd`/`Ctrl` + `Enter`).
+     */
+    onConfirm?: (value: string) => void;
+    /**
+     * Called when the edit is cancelled (cross button or `Escape`). The value is reverted.
+     */
+    onCancel?: () => void;
+    /**
+     * Minimum number of visible text rows while editing.
+     */
+    rows?: number;
+    /**
+     * Show the floating confirm / cancel control while editing.
+     */
+    editControl?: boolean;
+    /**
+     * Show the edit affordance icon in display mode.
+     */
+    icon?: boolean;
+    /**
+     * Override the default edit (pencil) icon.
+     */
+    editIcon?: ReactNode;
+    /**
+     * Optional formatting toolbar shown in a floating bar below the field while editing
+     * (e.g. text-align / bold / link `IconButton`s). Rendered to the left, mirroring the
+     * confirm / cancel control on the right.
+     */
+    tools?: ReactNode;
+    /**
+     * Activation mode. `"inline"` (default) rests as plain text and reveals the editor on
+     * click; `"form"` is always an open, editable field (like a standard form text area).
+     */
+    mode?: InputEditMode;
+    /**
+     * Named typography style applied to the text and editor (e.g. `"h1"`, `"body-lg"`).
+     * Overrides the default font.
+     */
+    textStyle?: InputEditTextStyle;
+    /**
+     * Enable rich-text editing (web only). The field becomes a `contenteditable` surface
+     * and `value` / `onChangeText` / `onConfirm` carry HTML. Wire a toolbar via `tools`
+     * using `document.execCommand`. Falls back to a plain text field on React Native.
+     * The HTML is not sanitized — sanitize before rendering untrusted values.
+     */
+    richText?: boolean;
+    /**
+     * Disable the control.
+     */
+    disabled?: boolean;
+    /**
+     * Highlight the control as invalid.
+     */
+    error?: boolean;
+    /**
+     * Error message displayed below the field (implies `error`).
+     */
+    errorMessage?: string;
+    /**
+     * Unique identifier for the input element. Used for accessibility linking.
+     */
+    id?: string;
+    /**
+     * Accessible label for screen readers (use when no visible label is present).
+     */
+    "aria-label"?: string;
+    /**
+     * ID of an external element that labels the field (e.g. a heading placed above it).
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Test identifier.
+     */
+    testID?: string;
+    /**
+     * Optional class name applied to the root element (web).
+     */
+    className?: string;
+}
+/**
+ * A multi-line text field for editing freeform text. In `"inline"` mode it rests as
+ * plain text and reveals a highlighted editor on click; in `"form"` mode it is always
+ * an open, editable field. `Enter` inserts a new line; confirm via the floating control
+ * or `Cmd`/`Ctrl` + `Enter`; clicking outside also commits. `Escape` cancels and
+ * reverts.
+ */
+declare const InputEdit: React.ForwardRefExoticComponent<InputEditProps & React.RefAttributes<HTMLTextAreaElement | HTMLDivElement>>;
+
+export { InputEdit, type InputEditProps };