twico-ui 1.28.0 → 1.30.0

package/dist/index.d.cts

@@ -1536,6 +1536,10 @@ interface Option {
   label: string;
   /** Optional second line shown under the label. */
   description?: string;
+  /** #326: leading icon/swatch node, rendered before the label (mirrors a Command item's icon). */
+  icon?: React.ReactNode;
+  /** #326: trailing hint node, right-aligned after the label (e.g. a code, shortcut, or badge). */
+  hint?: React.ReactNode;
   /** Disable this option — not selectable, skipped by keyboard navigation. */
   disabled?: boolean;
 }
@@ -1601,6 +1605,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
    *  ellipsis — useful when options share a long prefix and differ only in a truncated tail. Takes precedence
    *  over `virtualized` (wrapped rows aren't a fixed height). @default false */
   wrapOptions?: boolean;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: ComboboxOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -1949,6 +1957,13 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   selectionMode?: "none" | "row" | "cell";
   /** Fired when a row is clicked in "row" selection mode: (row, key). */
   onRowClick?: (row: T, key: string | number) => void;
+  /** #324: controlled highlighted row key for `selectionMode="row"`. When provided, the grid highlights THIS
+   *  row (not its internal state) and reports clicks via `onRowClick` so you update the prop — the same
+   *  controlled/uncontrolled split as `page`. Pass `null` to clear. Lets an external selection (a graph, a
+   *  master/detail pane) drive the row highlight, with scroll-into-view. */
+  activeRowId?: string | number | null;
+  /** #324: scroll the controlled active row into view when `activeRowId` changes. @default true */
+  scrollActiveRowIntoView?: boolean;
   /** Fired when a cell is clicked in "cell" selection mode: (value, row, field). */
   onCellClick?: (value: any, row: T, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
@@ -2697,6 +2712,10 @@ interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkbox, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: MultiSelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape/Backspace) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -3004,6 +3023,10 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
   rightAddon?: React.ReactNode;
   /** With `maxLength`, render a live `current / max` character counter on the hint/error line; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button when the field is non-empty; clicking it empties the field and
+   *  fires `onChange` with the empty value (controlled callers update). Composes with `rightIcon` and, for
+   *  `type="password"`, sits alongside the reveal-eye toggle. @default false */
+  clearable?: boolean;
 }
 
 declare function Input(props: InputProps): React.JSX.Element;
@@ -3376,6 +3399,10 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onC
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: SelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
 }
 
 /** Alias of the shared {@link Option} type (kept for backward-compatible imports). */
@@ -3754,6 +3781,9 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   maxRows?: number;
   /** With `maxLength`, render a live `current / max` character counter; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button (top-inline-end, clear of the resize handle) when non-empty;
+   *  clicking it empties the field and fires `onChange` with the empty value. @default false */
+  clearable?: boolean;
 }
 
 /** Forwards `ref` to the inner `<textarea>`. */

package/dist/index.d.ts

@@ -1536,6 +1536,10 @@ interface Option {
   label: string;
   /** Optional second line shown under the label. */
   description?: string;
+  /** #326: leading icon/swatch node, rendered before the label (mirrors a Command item's icon). */
+  icon?: React.ReactNode;
+  /** #326: trailing hint node, right-aligned after the label (e.g. a code, shortcut, or badge). */
+  hint?: React.ReactNode;
   /** Disable this option — not selectable, skipped by keyboard navigation. */
   disabled?: boolean;
 }
@@ -1601,6 +1605,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
    *  ellipsis — useful when options share a long prefix and differ only in a truncated tail. Takes precedence
    *  over `virtualized` (wrapped rows aren't a fixed height). @default false */
   wrapOptions?: boolean;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: ComboboxOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -1949,6 +1957,13 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   selectionMode?: "none" | "row" | "cell";
   /** Fired when a row is clicked in "row" selection mode: (row, key). */
   onRowClick?: (row: T, key: string | number) => void;
+  /** #324: controlled highlighted row key for `selectionMode="row"`. When provided, the grid highlights THIS
+   *  row (not its internal state) and reports clicks via `onRowClick` so you update the prop — the same
+   *  controlled/uncontrolled split as `page`. Pass `null` to clear. Lets an external selection (a graph, a
+   *  master/detail pane) drive the row highlight, with scroll-into-view. */
+  activeRowId?: string | number | null;
+  /** #324: scroll the controlled active row into view when `activeRowId` changes. @default true */
+  scrollActiveRowIntoView?: boolean;
   /** Fired when a cell is clicked in "cell" selection mode: (value, row, field). */
   onCellClick?: (value: any, row: T, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
@@ -2697,6 +2712,10 @@ interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkbox, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: MultiSelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape/Backspace) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -3004,6 +3023,10 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
   rightAddon?: React.ReactNode;
   /** With `maxLength`, render a live `current / max` character counter on the hint/error line; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button when the field is non-empty; clicking it empties the field and
+   *  fires `onChange` with the empty value (controlled callers update). Composes with `rightIcon` and, for
+   *  `type="password"`, sits alongside the reveal-eye toggle. @default false */
+  clearable?: boolean;
 }
 
 declare function Input(props: InputProps): React.JSX.Element;
@@ -3376,6 +3399,10 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onC
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: SelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
 }
 
 /** Alias of the shared {@link Option} type (kept for backward-compatible imports). */
@@ -3754,6 +3781,9 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   maxRows?: number;
   /** With `maxLength`, render a live `current / max` character counter; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button (top-inline-end, clear of the resize handle) when non-empty;
+   *  clicking it empties the field and fires `onChange` with the empty value. @default false */
+  clearable?: boolean;
 }
 
 /** Forwards `ref` to the inner `<textarea>`. */