@astryxdesign/lab 0.3.0-canary.fbc60c5 → 0.3.0-canary.fcbc342

package/dist/ListInput/ListInput.d.ts

@@ -0,0 +1,138 @@
+/**
+ * @file ListInput.tsx
+ * @input React, StyleX, Astryx field/list/button/icon/layer/empty-state primitives, compact size context, browser scroll geometry, programmatic theme tokens, and shared Lab reorder styles
+ * @output Exports ListInput and its controlled data, column, renderer, and change types
+ * @position Lab experiment (RFC facebook/astryx#4531) for editing compact repeated records
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/ListInput/ListInput.doc.mjs
+ * - /packages/lab/src/ListInput/ListInput.test.tsx
+ * - /packages/lab/src/ListInput/index.ts
+ * - /apps/storybook/stories/ListInput.stories.tsx
+ */
+import { type Key, type ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+import { type InputStatus } from '@astryxdesign/core/Field';
+import type { ColumnWidth } from '@astryxdesign/core/Table';
+export type ListInputChange<T> = {
+    type: 'add';
+    item: T;
+    index: number;
+} | {
+    type: 'update';
+    item: T;
+    previousItem: T;
+    index: number;
+    columnKey?: string;
+} | {
+    type: 'remove';
+    item: T;
+    index: number;
+} | {
+    type: 'reorder';
+    item: T;
+    fromIndex: number;
+    toIndex: number;
+};
+export interface ListInputValueContext<T> {
+    /** Current record. */
+    item: T;
+    /** Current visual position. */
+    index: number;
+    /** Accessible cell label, including the record position. */
+    label: string;
+    /** True because ListInput owns the visible column label. */
+    isLabelHidden: boolean;
+}
+export interface ListInputRenderContext<T> extends ListInputValueContext<T> {
+    /** Complete validation status scoped to this field. */
+    status?: InputStatus;
+    /** Forward to the rendered Astryx control so status uses its native tooltip. */
+    statusVariant: 'tooltip';
+    /** Whether the rendered control should be disabled. */
+    isDisabled: boolean;
+    /** Whether an asynchronous list operation is in progress. */
+    isLoading: boolean;
+    /** Replace this record in the controlled list. */
+    updateItem: (nextItem: T, columnKey?: string) => void;
+}
+export interface ListInputColumn<T> {
+    /** Stable column identifier, also passed to getFieldStatus. */
+    key: string;
+    /** Field label shown on the first record and repeated when rows stack. */
+    header: string;
+    /**
+     * Column sizing. Use proportional() or pixel() from @astryxdesign/core/Table
+     * to tune the width ratio. Defaults to a proportional column with a 140px floor.
+     */
+    width?: ColumnWidth;
+    /** Renders the editable control for one cell. */
+    renderInput: (context: ListInputRenderContext<T>) => ReactNode;
+}
+export interface ListInputProps<T> extends Omit<BaseProps<HTMLDivElement>, 'onChange'> {
+    /** Ref forwarded to the outer field element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Visible and accessible label for the list. */
+    label: string;
+    /** Optional supporting text. */
+    description?: string;
+    /** Controlled records. */
+    value: T[];
+    /** Called for every record mutation with the next value and mutation detail. */
+    onChange: (nextValue: T[], change: ListInputChange<T>) => void;
+    /** Returns a stable key for focus preservation and reordering. */
+    getItemKey: (item: T) => Key;
+    /** Creates a new record when the Add action is used. */
+    createItem: () => T;
+    /** Column definitions and cell renderers. */
+    columns: ListInputColumn<T>[];
+    /** Singular name used in action labels and announcements. @default 'item' */
+    itemName?: string;
+    /** Validation status for the whole list. */
+    status?: InputStatus;
+    /** Returns a validation status displayed across one record. */
+    getItemStatus?: (item: T, index: number) => InputStatus | undefined;
+    /** Returns a validation status passed to one field renderer. */
+    getFieldStatus?: (item: T, columnKey: string, index: number) => InputStatus | undefined;
+    /** Enables handle-only pointer and keyboard reordering. @default false */
+    isReorderable?: boolean;
+    /** Disables fields and mutation controls. @default false */
+    isDisabled?: boolean;
+    /** Marks the list busy and prevents mutations. @default false */
+    isLoading?: boolean;
+    /** Maximum record count. Reaching it disables, but does not remove, Add. */
+    maxItems?: number;
+    /** Visually hides the list label while preserving its accessible name. */
+    isLabelHidden?: boolean;
+    /** Marks the list optional. */
+    isOptional?: boolean;
+    /** Marks the list required. */
+    isRequired?: boolean;
+}
+/**
+ * A compact editor for short collections of consistent, simple records.
+ *
+ * ListInput owns list semantics, add/remove controls, handle-only reordering,
+ * live collection motion, focus restoration, announcements, and list/item/
+ * field validation placement. Consumers keep ownership of the controlled data
+ * and render each field with standard Astryx inputs.
+ *
+ * @example
+ * ```
+ * <ListInput
+ *   label="Guests"
+ *   value={guests}
+ *   onChange={setGuests}
+ *   getItemKey={guest => guest.id}
+ *   createItem={() => ({id: crypto.randomUUID(), name: '', email: ''})}
+ *   columns={columns}
+ *   itemName="guest"
+ *   isReorderable
+ * />
+ * ```
+ */
+export declare function ListInput<T>({ label, description, value, onChange, getItemKey, createItem, columns, itemName, status, getItemStatus, getFieldStatus, isReorderable, isDisabled, isLoading, maxItems, isLabelHidden, isOptional, isRequired, ref, ...rest }: ListInputProps<T>): ReactNode;
+export declare namespace ListInput {
+    var displayName: string;
+}
+//# sourceMappingURL=ListInput.d.ts.map

package/dist/ListInput/ListInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListInput.d.ts","sourceRoot":"","sources":["../../src/ListInput/ListInput.tsx"],"names":[],"mappings":"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"}