@nxgt/material 3.56.0 → 3.58.0

package/dist/lib/components/ui/media/image-editor/types.d.ts

@@ -1,165 +1,7 @@
-/** The editor's panels, in the order the tool rail shows them. */
-export type ImageEditorTool = 'adjust' | 'filters' | 'crop' | 'markup';
-/** What a pointer does on the stage while the Markup panel is open. */
-export type ImageEditorMarkupTool = 'select' | 'pen' | 'highlighter' | 'eraser' | 'line' | 'arrow' | 'rect' | 'ellipse' | 'text' | 'redact';
-/** Light and colour, each centred on 0 (no change) unless noted. */
-export type ImageEditorAdjustments = {
-    /** −100…100 */
-    exposure: number;
-    /** −100…100 */
-    brightness: number;
-    /** −100…100 */
-    contrast: number;
-    /** −100…100: brightens (or darkens) the light tones only. */
-    highlights: number;
-    /** −100…100: brightens (or darkens) the dark tones only. */
-    shadows: number;
-    /** −100…100 */
-    saturation: number;
-    /** −100…100: saturation that spares the colours already saturated. */
-    vibrance: number;
-    /** −100…100: cool (blue) to warm (amber). */
-    warmth: number;
-    /** −100…100: green to magenta. */
-    tint: number;
-    /** −180…180 degrees around the colour wheel. */
-    hue: number;
-    /** 0…100: lifts the blacks and dims the whites (a matte look). */
-    fade: number;
-    /** 0…100: the brown tone of old prints. */
-    sepia: number;
-    /** 0…100: darkens the corners. */
-    vignette: number;
-    /** 0…100: film grain. */
-    grain: number;
-    /** 0…100: a Gaussian blur, scaled with the image. */
-    blur: number;
-};
-export type ImageEditorAdjustmentKey = keyof ImageEditorAdjustments;
-/** A rectangle in the oriented image, every value a fraction (0…1). */
-export type ImageEditorRect = {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-};
-/** Turns of 90° clockwise, then the mirror, then a small straightening tilt. */
-export type ImageEditorTransform = {
-    /** 0, 1, 2 or 3 quarter turns clockwise. */
-    quarterTurns: number;
-    flipX: boolean;
-    flipY: boolean;
-    /** −45…45 degrees; the image is scaled up so no corner shows empty. */
-    straighten: number;
-};
-type AnnotationBase = {
-    id: string;
-    color: string;
-    size: number;
-};
-/**
- * A mark drawn over the image. Coordinates are fractions of the oriented
- * image (before the crop), so a mark stays on what it points at whatever
- * the crop; `size` is a fraction of the image's shorter side.
- */
-export type ImageEditorAnnotation = (AnnotationBase & {
-    kind: 'pen' | 'highlighter';
-    /** Flat list of x, y pairs. */
-    points: number[];
-}) | (AnnotationBase & {
-    kind: 'line' | 'arrow';
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-}) | (AnnotationBase & ImageEditorRect & {
-    kind: 'rect' | 'ellipse';
-    fill: boolean;
-}) | (AnnotationBase & ImageEditorRect & {
-    kind: 'redact';
-}) | (AnnotationBase & {
-    kind: 'text';
-    x: number;
-    y: number;
-    text: string;
-    /** Draws the text on a rounded plate of the contrasting colour. */
-    background: boolean;
-});
-export type ImageEditorAnnotationKind = ImageEditorAnnotation['kind'];
-/**
- * Everything the user changed, non-destructively: the original image is
- * never touched, and these edits can be stored and applied again
- * (`defaultEdits`).
- */
-export type ImageEditorEdits = {
-    adjustments: ImageEditorAdjustments;
-    /** A preset from `IMAGE_EDITOR_FILTERS`; `'none'` for the original look. */
-    filter: string;
-    /** 0…100: how much of the filter is applied. */
-    filterIntensity: number;
-    transform: ImageEditorTransform;
-    /** The kept part of the oriented image. */
-    crop: ImageEditorRect;
-    annotations: ImageEditorAnnotation[];
-};
-/** Edits to start from: any part may be left out, and is then neutral. */
-export type ImageEditorEditsInput = Partial<Omit<ImageEditorEdits, 'adjustments' | 'transform'>> & {
-    adjustments?: Partial<ImageEditorAdjustments>;
-    transform?: Partial<ImageEditorTransform>;
-};
-export type ImageEditorExportFormat = 'image/png' | 'image/jpeg' | 'image/webp';
-export type ImageEditorExportOptions = {
-    format: ImageEditorExportFormat;
-    /** 0…1, for JPEG and WebP. */
-    quality: number;
-    /** Fraction of the cropped size, 0.1…1. */
-    scale: number;
-};
-export type ImageEditorResult = {
-    blob: Blob;
-    file: File;
-    width: number;
-    height: number;
-    edits: ImageEditorEdits;
-};
-/** The pen, shape and text settings the next mark is drawn with. */
-export type ImageEditorBrush = {
-    color: string;
-    /** Fraction of the image's shorter side. */
-    size: number;
-    fill: boolean;
-    background: boolean;
-};
-/** A crop ratio: `null` is free, `'original'` keeps the image's own. */
-export type ImageEditorAspect = number | 'original' | null;
-export type ImageEditorAspectPreset = {
-    id: string;
-    label: string;
-    value: ImageEditorAspect;
-};
-export type ImageEditorChromeState = {
-    edits: ImageEditorEdits;
-    past: ImageEditorEdits[];
-    future: ImageEditorEdits[];
-    /** The gesture the last history entry belongs to; a slider drag is one. */
-    historyGroup: string | null;
-    tool: ImageEditorTool;
-    markupTool: ImageEditorMarkupTool;
-    brush: ImageEditorBrush;
-    selectedId: string | null;
-    /** `null` fits the image to the stage. */
-    zoom: number | null;
-    /** Shows the original while held. */
-    comparing: boolean;
-    /** Shows the original and the result side by side, split by a handle. */
-    split: boolean;
-    aspect: ImageEditorAspect;
-    exportOptions: ImageEditorExportOptions;
-    /** The text mark being retyped: its drawn copy is hidden under the text box. */
-    editingId: string | null;
-    /** The keyboard shortcuts dialog. */
-    shortcutsOpen: boolean;
-};
+import { ImageEditorEdits, ImageEditorEditsInput } from './types-edits.js';
+import { ImageEditorAspectPreset, ImageEditorExportOptions, ImageEditorResult, ImageEditorTool } from './types-session.js';
+export type * from './types-edits.js';
+export type * from './types-session.js';
 export type ImageEditorProps = {
     /** The image: a URL (same origin, or served with CORS), a `Blob` or a `File`. */
     src: string | Blob;
@@ -190,4 +32,3 @@ export type ImageEditorProps = {
     hideDownload?: boolean;
     className?: string;
 };
-export {};

package/dist/lib/components/ui/media/image-editor/use-crop-frame.d.ts

@@ -0,0 +1,26 @@
+import { KeyboardEvent, PointerEvent } from 'react';
+import { CropHandle, Size } from './image-editor.geometry.js';
+import { useImageEditorContext } from './image-editor-provider.js';
+import { ImageEditorRect } from './types.js';
+type Options = {
+    crop: ImageEditorRect;
+    base: Size;
+    /** The fixed width / height ratio, or `null` for a free frame. */
+    ratio: number | null;
+    actions: ReturnType<typeof useImageEditorContext>['actions'];
+};
+/**
+ * The crop frame's pointer drag (move or resize from a handle) and its arrow
+ * keys, each gesture one history step.
+ */
+export declare function useCropFrame({ crop, base, ratio, actions }: Options): {
+    layerRef: import('react').RefObject<HTMLDivElement | null>;
+    dragging: boolean;
+    keying: boolean;
+    setKeying: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    begin: (handle: CropHandle) => (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    end: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+};
+export {};

package/dist/lib/components/ui/media/image-editor/use-image-editor-keys.d.ts

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+import { ImageEditorModel } from './use-image-editor.js';
+/** The editor's `onKeyDown`: the pure key table bound to the slice's actions. */
+export declare function useImageEditorKeys(actions: ImageEditorModel['actions'], selected: ImageEditorModel['selected'], zoom: ImageEditorModel['zoom']): (event: KeyboardEvent) => void;

package/dist/lib/components/ui/media/image-editor/use-image-editor.d.ts

@@ -6,7 +6,7 @@ import { ImageEditorExport } from './use-image-editor-export.js';
 import { ImageEditorZoom } from './use-image-editor-zoom.js';
 import { ImageSourceState } from './use-image-source.js';
 type Chrome = ReturnType<typeof imageEditorSlice.getInitialState>;
-declare const useEditorSlice: (initial: Partial<Chrome>) => readonly [import('./types.js').ImageEditorChromeState, {
+declare const useEditorSlice: (initial: Partial<Chrome>) => readonly [import('./types-session.js').ImageEditorChromeState, {
     resetAll: (noArgument?: void | undefined) => void;
     endGesture: (noArgument?: void | undefined) => void;
     undo: (noArgument?: void | undefined) => void;
@@ -17,10 +17,10 @@ declare const useEditorSlice: (initial: Partial<Chrome>) => readonly [import('./
     setSplit: (payload: boolean) => void;
     setEditingId: (payload: string | null) => void;
     setShortcutsOpen: (payload: boolean) => void;
-    setExportOptions: (payload: Partial<import('./types.js').ImageEditorExportOptions>) => void;
-    addAnnotation: (payload: import('./types.js').ImageEditorAnnotation) => void;
+    setExportOptions: (payload: Partial<import('./types-session.js').ImageEditorExportOptions>) => void;
+    addAnnotation: (payload: import('./types-edits.js').ImageEditorAnnotation) => void;
     updateAnnotation: (payload: {
-        annotation: import('./types.js').ImageEditorAnnotation;
+        annotation: import('./types-edits.js').ImageEditorAnnotation;
         gesture?: string;
     }) => void;
     moveAnnotation: (payload: {
@@ -34,7 +34,7 @@ declare const useEditorSlice: (initial: Partial<Chrome>) => readonly [import('./
     bringToFront: (payload: string) => void;
     clearAnnotations: (noArgument?: void | undefined) => void;
     selectAnnotation: (payload: string | null) => void;
-    setBrush: (payload: Partial<import('./types.js').ImageEditorBrush>) => void;
+    setBrush: (payload: Partial<import('./types-session.js').ImageEditorBrush>) => void;
     turn: (payload: 1 | -1) => void;
     flip: (payload: "x" | "y") => void;
     setStraighten: (payload: number) => void;
@@ -43,17 +43,17 @@ declare const useEditorSlice: (initial: Partial<Chrome>) => readonly [import('./
         gesture?: string;
     }) => void;
     resetTransform: (noArgument?: void | undefined) => void;
-    setTool: (payload: import('./types.js').ImageEditorTool) => void;
-    setMarkupTool: (payload: import('./types.js').ImageEditorMarkupTool) => void;
+    setTool: (payload: import('./types-session.js').ImageEditorTool) => void;
+    setMarkupTool: (payload: import('./types-session.js').ImageEditorMarkupTool) => void;
     setAdjustment: (payload: {
-        key: import('./types.js').ImageEditorAdjustmentKey;
+        key: import('./types-edits.js').ImageEditorAdjustmentKey;
         value: number;
     }) => void;
-    applyAdjustments: (payload: Partial<import('./types.js').ImageEditorAdjustments>) => void;
+    applyAdjustments: (payload: Partial<import('./types-edits.js').ImageEditorAdjustments>) => void;
     resetAdjustments: (noArgument?: void | undefined) => void;
     setFilter: (payload: string) => void;
     setFilterIntensity: (payload: number) => void;
-    setAspect: (payload: import('./types.js').ImageEditorAspect) => void;
+    setAspect: (payload: import('./types-session.js').ImageEditorAspect) => void;
 }];
 type SliceTuple = ReturnType<typeof useEditorSlice>;
 export type ImageEditorModel = {

package/dist/lib/components/ui/media/image-editor/use-markup-text.d.ts

@@ -0,0 +1,10 @@
+import { TextDraft } from './partials/editor-text-box.js';
+/**
+ * The text box being edited on the markup layer: the draft, the hiding of the
+ * drawn copy while it is retyped, and the commit (add, update or remove).
+ */
+export declare function useMarkupText(): {
+    draft: TextDraft | null;
+    setDraft: import('react').Dispatch<import('react').SetStateAction<TextDraft | null>>;
+    commitText: (text: string) => void;
+};

package/dist/lib/components/ui/media/image-editor/use-stage-layer-key.d.ts

@@ -0,0 +1,6 @@
+import { ImageEditorEdits } from './types.js';
+/**
+ * What the stage's cached image layer depends on, as a string; the marks are
+ * not part of it, so drawing one does not repaint the slow layer.
+ */
+export declare function useStageLayerKey(edits: ImageEditorEdits, region: 'crop' | 'full', scale: number, comparing: boolean): string;

package/dist/lib/components/ui/media/image-editor/use-stage-pointer.d.ts

@@ -5,7 +5,7 @@ export type StagePoint = {
     x: number;
     y: number;
 };
-type Options = {
+export type StagePointerOptions = {
     tool: ImageEditorMarkupTool;
     brush: ImageEditorBrush;
     base: Size;
@@ -22,11 +22,10 @@ type Options = {
     editText: (at: StagePoint, mark?: ImageEditorAnnotation) => void;
 };
 /** The Markup tools on the stage: draw, select and move, erase, place text. */
-export declare function useStagePointer(options: Options): {
+export declare function useStagePointer(options: StagePointerOptions): {
     onPointerDown: (event: PointerEvent<HTMLElement>) => void;
     onPointerMove: (event: PointerEvent<HTMLElement>) => void;
     onPointerUp: (event: PointerEvent<HTMLElement>) => void;
     onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
     onDoubleClick: (event: MouseEvent<HTMLElement>) => void;
 };
-export {};

package/dist/lib/components/ui/media/media-player/partials/panels/transcript-follow.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    following: boolean;
+    onChange: (follow: boolean) => void;
+};
+/** The "Follow playback" label and switch. */
+export declare function TranscriptFollow({ following, onChange }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/media-player/partials/panels/transcript-notice.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    /** The transcript's load status, `'ready'` with no lines counting as `'none'`. */
+    status: 'none' | 'loading' | 'ready' | 'error';
+};
+/** The one-line status shown while the transcript loads, fails or is missing. */
+export declare function TranscriptNotice({ status }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/media-player/partials/panels/use-search-announcement.d.ts

@@ -0,0 +1,6 @@
+import { TranscriptSearch } from './use-transcript-search.js';
+/**
+ * What a screen reader hears of the search: "5 matches", then "Match 2 of 5".
+ * Typing waits for a pause; stepping between matches is said at once.
+ */
+export declare function useSearchAnnouncement({ query, matches, active, }: TranscriptSearch): string;

package/dist/lib/components/ui/media/media-player/partials/playlist-item.d.ts

@@ -0,0 +1,13 @@
+import { MediaPlayerTone, MediaTrack } from '../types.js';
+type Props = {
+    track: MediaTrack;
+    tone: MediaPlayerTone;
+    /** The playing item. */
+    current: boolean;
+    /** The playing item's measured duration, which wins over the track's own. */
+    duration: number;
+    onPlay: () => void;
+};
+/** One row of the playlist: thumbnail, title, artist and duration. */
+export declare function PlaylistItem({ track, tone, current, duration, onPlay, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/media/pdf-reader/partials/search-nav-buttons.d.ts

@@ -0,0 +1,4 @@
+/** The previous and next match buttons of the search field. */
+export declare function SearchNavButtons({ stacked }: {
+    stacked: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/media/pdf-reader/use-reader-chrome-state.d.ts

@@ -0,0 +1,35 @@
+import { PdfReaderShellProps, ReaderLayout } from './types.js';
+/**
+ * The reader's chrome slice, with the layout the prop controls when it is
+ * given: `asked` is the layout asked for, and `setLayout` calls
+ * `onLayoutChange` before it moves the slice (when uncontrolled).
+ */
+export declare function useReaderChromeState(props: PdfReaderShellProps): {
+    chrome: {
+        layout: import('@nxgt/material-core/pdf-reader').SpreadMode;
+        size: import('./types.js').ReaderSize;
+        panelOpen: boolean;
+        panelTab: import('./types.js').PanelTab;
+        searchOpen: boolean;
+        searchFocusTick: number;
+        annotating: boolean;
+        tool: import('./types.js').AnnotateTool;
+        color: import('./types.js').AnnotateColor;
+    };
+    chromeActions: {
+        setLayout: (next: ReaderLayout) => void;
+        setSize: (payload: import('./types.js').ReaderSize) => void;
+        selectPanelTab: (payload: import('./types.js').PanelTab) => void;
+        openPanelTab: (payload: import('./types.js').PanelTab) => void;
+        togglePanel: (noArgument?: void | undefined) => void;
+        closePanel: (noArgument?: void | undefined) => void;
+        openSearchField: (noArgument?: void | undefined) => void;
+        focusSearch: (noArgument?: void | undefined) => void;
+        closeSearchField: (noArgument?: void | undefined) => void;
+        startAnnotating: (noArgument?: void | undefined) => void;
+        stopAnnotating: (noArgument?: void | undefined) => void;
+        setTool: (payload: import('./types.js').AnnotateTool) => void;
+        setColor: (payload: "pink" | "blue" | "green" | "red" | "yellow") => void;
+    };
+    asked: import('@nxgt/material-core/pdf-reader').SpreadMode;
+};

package/dist/lib/components/ui/media/pdf-reader/use-reader-chrome-value.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { ReaderChromeValue } from './pdf-reader-context.js';
+import { PdfReaderShellProps } from './types.js';
+type Options = Pick<ReaderChromeValue, 'chrome' | 'chromeActions' | 'layout' | 'mode' | 'frameRef' | 'props'> & {
+    props: PdfReaderShellProps;
+    frameRef: RefObject<HTMLDivElement | null>;
+};
+/**
+ * The chrome context's value, with the fullscreen, search and leave commands.
+ * Stable while nothing the chrome shows changed: a scroll that turns the page
+ * re-renders the provider, not every consumer of the chrome.
+ */
+export declare function useReaderChromeValue({ chrome, chromeActions, layout, mode, frameRef, props, }: Options): ReaderChromeValue;
+export {};

package/dist/lib/components/ui/media/upload/network-upload-field/network-upload-dropzone-body.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    active: boolean;
+    atCapacity: boolean;
+    constraints?: string;
+};
+/** The drop zone's icon, its idle or at-capacity line, and the constraints. */
+export declare function NetworkUploadDropzoneBody({ active, atCapacity, constraints, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/primitives/segmented-input/segmented-input-cells.d.ts

@@ -0,0 +1,20 @@
+import { Ref, RefObject } from 'react';
+import { SegmentDef, SegmentKey, SegmentValues } from './segment-defs.js';
+import { useSegments } from './use-segments.js';
+/** The segments of a field, in their parts (the date, the time), each a real input. */
+export declare function SegmentedInputCells({ segments, values, inputs, labels, placeholders, periodNames, emptyText, firstId, firstRef, disabled, readOnly, required, invalid, keys, }: {
+    segments: SegmentDef[];
+    values: SegmentValues;
+    inputs: RefObject<(HTMLInputElement | null)[]>;
+    labels: Record<SegmentKey, string>;
+    placeholders: Record<SegmentKey, string>;
+    periodNames: [string, string];
+    emptyText: string;
+    firstId?: string;
+    firstRef?: Ref<HTMLInputElement>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    keys: ReturnType<typeof useSegments>;
+}): import("react").JSX.Element[];

package/dist/lib/components/ui/primitives/segmented-input/use-segment-paste.d.ts

@@ -0,0 +1,17 @@
+import { ClipboardEvent, RefObject } from 'react';
+import { SegmentDef, SegmentValues } from './segment-defs.js';
+import { useSegments } from './use-segments.js';
+/**
+ * A paste is the field's, never the input's own (which keeps only its last
+ * character): `pastedValues`, or nothing.
+ */
+export declare function useSegmentPaste({ inputs, segments, values, periodInitials, keys, onValuesChange, locked, }: {
+    inputs: RefObject<(HTMLInputElement | null)[]>;
+    segments: SegmentDef[];
+    values: SegmentValues;
+    periodInitials: [string, string];
+    keys: ReturnType<typeof useSegments>;
+    onValuesChange: (values: SegmentValues) => void;
+    /** Disabled or read-only: the paste is ignored. */
+    locked?: boolean;
+}): (event: ClipboardEvent<HTMLDivElement>) => void;

package/dist/lib/components/ui/primitives/segmented-input/use-segmented-keys.d.ts

@@ -0,0 +1,17 @@
+import { SegmentDef, SegmentValues } from './segment-defs.js';
+/** The segments' inputs and keyboard: focus moves between them, and past an end it asks `onEdge`. */
+export declare function useSegmentedKeys({ segments, values, onValuesChange, periodNames, onEdge, }: {
+    segments: SegmentDef[];
+    values: SegmentValues;
+    onValuesChange: (values: SegmentValues) => void;
+    periodNames: [string, string];
+    onEdge?: (direction: -1 | 1) => void;
+}): {
+    inputs: import('react').RefObject<(HTMLInputElement | null)[]>;
+    keys: {
+        onKeyDown: (index: number) => (event: import('react').KeyboardEvent<HTMLInputElement>) => void;
+        onInput: (index: number, text: string, inputType?: string) => void;
+        reset: () => void;
+    };
+    periodInitials: [string, string];
+};

package/dist/lib/components/ui/selection/autocomplete/autocomplete-equality.d.ts

@@ -0,0 +1,7 @@
+/** Search results are new objects: an option is its value. */
+export declare function sameOption<T>(getOptionValue: (option: T) => string): (item: T, value: T) => boolean;
+/** The "add" button: picks the typed text, then returns the focus to the input. */
+export declare function addFreeSolo(ac: {
+    handleValueChange: (value: string | string[]) => void;
+    values: string[];
+}, mode: string | undefined, query: string, id: string): void;

package/dist/lib/components/ui/selection/autocomplete/partials/autocomplete-chips.d.ts

@@ -1,23 +1,6 @@
-import { FocusEvent, ReactNode, RefObject } from 'react';
-import { AutocompleteOption, AutocompleteProps } from '../types.js';
+import { AutocompleteChipsProps, AutocompleteOption } from '../types.js';
 /**
  * The label, the chips of the selected options, the input, the helper text
  * and the field's live region.
  */
-export declare function AutocompleteChips<T extends AutocompleteOption>({ slot, values, getOptionValue, getOptionLabel, ...props }: AutocompleteProps<T> & {
-    onRemove: (value: string) => void;
-    anchor: RefObject<HTMLDivElement | null>;
-    /** @deprecated The list hangs under the chips box (`anchor`); this only refs the wrapper. */
-    listAnchor?: RefObject<HTMLDivElement | null>;
-    values: string[];
-    /** `display="text"`: the value is the input's text, not a chip. */
-    text?: boolean;
-    /** The option picked, in `text` display. */
-    selected?: T | null;
-    /** Focus left an element of the field (`text` display restores the label). */
-    onFieldBlur?: (event: FocusEvent<HTMLElement>) => void;
-    /** What the field's polite live region says about the list. */
-    announcement?: ReactNode;
-    /** The list, when it sits in the field's flow (in a dialog). */
-    children?: ReactNode;
-}): import("react").JSX.Element;
+export declare function AutocompleteChips<T extends AutocompleteOption>({ slot, values, getOptionValue, getOptionLabel, ...props }: AutocompleteChipsProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/selection/autocomplete/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { FocusEvent, ReactNode, RefObject } from 'react';
 import { InputGroupFieldProps } from '../../fields/input-group-field/input-group-field.js';
 export type AutocompleteOption = {
     value: string;
@@ -98,3 +98,21 @@ export type AutocompleteProps<T extends AutocompleteOption = AutocompleteOption>
     value: string[];
     onValueChange?: (value?: string[] | null) => void;
 });
+/** What `AutocompleteChips` takes: the field's props and its live state. */
+export type AutocompleteChipsProps<T extends AutocompleteOption> = AutocompleteProps<T> & {
+    onRemove: (value: string) => void;
+    anchor: RefObject<HTMLDivElement | null>;
+    /** @deprecated The list hangs under the chips box (`anchor`); this only refs the wrapper. */
+    listAnchor?: RefObject<HTMLDivElement | null>;
+    values: string[];
+    /** `display="text"`: the value is the input's text, not a chip. */
+    text?: boolean;
+    /** The option picked, in `text` display. */
+    selected?: T | null;
+    /** Focus left an element of the field (`text` display restores the label). */
+    onFieldBlur?: (event: FocusEvent<HTMLElement>) => void;
+    /** What the field's polite live region says about the list. */
+    announcement?: ReactNode;
+    /** The list, when it sits in the field's flow (in a dialog). */
+    children?: ReactNode;
+};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete-handlers.d.ts

@@ -1,5 +1,4 @@
-import { Dispatch, FocusEvent, SetStateAction } from 'react';
-import { ChangeEventDetails } from '../combobox/combobox.js';
+import { Dispatch, SetStateAction } from 'react';
 import { AutocompleteOption, AutocompleteProps } from './types.js';
 type State<T> = {
     setQuery: Dispatch<SetStateAction<string>>;
@@ -15,10 +14,10 @@ type State<T> = {
 };
 /** What the Combobox and the chips call back: a pick, a removal, typing. */
 export declare function useAutocompleteHandlers<T extends AutocompleteOption>(props: AutocompleteProps<T>, { setQuery, setOpen, text, editing, setEditing, query, getOptionValue: readValue, remember, }: State<T>): {
+    handleFieldBlur: (event: import('react').FocusEvent<HTMLElement>) => void;
+    handleInputValueChange: (value: string, eventDetails: import('../index.js').ChangeEventDetails) => void;
+    handleOpenChange: (open: boolean, details: import('../index.js').ChangeEventDetails) => void;
     handleRemove: (value: string) => void;
-    handleValueChange: (value: any, details?: ChangeEventDetails) => void;
-    handleInputValueChange: (value: string, eventDetails: ChangeEventDetails) => void;
-    handleOpenChange: (open: boolean, details: ChangeEventDetails) => void;
-    handleFieldBlur: (event: FocusEvent<HTMLElement>) => void;
+    handleValueChange: (value: any, details?: import('../index.js').ChangeEventDetails) => void;
 };
 export {};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete-leave.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, FocusEvent, SetStateAction } from 'react';
+import { AutocompleteOption, AutocompleteProps } from './types.js';
+type Leave = {
+    setQuery: Dispatch<SetStateAction<string>>;
+    text: boolean;
+    editing: boolean;
+    setEditing: Dispatch<SetStateAction<boolean>>;
+    query: string;
+};
+/** Focus leaving the field: the typed text is dropped or the value cleared. */
+export declare function useAutocompleteLeave<T extends AutocompleteOption>(props: AutocompleteProps<T>, { setQuery, text, editing, setEditing, query }: Leave): {
+    handleFieldBlur: (event: FocusEvent<HTMLElement>) => void;
+};
+export {};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete-picks.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ChangeEventDetails } from '../combobox/combobox.js';
+import { AutocompleteOption, AutocompleteProps } from './types.js';
+type Picks<T> = {
+    setQuery: Dispatch<SetStateAction<string>>;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    text: boolean;
+    setEditing: Dispatch<SetStateAction<boolean>>;
+    getOptionValue: (option: T) => string;
+    remember: (options: T[]) => void;
+};
+/** A pick or a removal: what the field's `onValueChange` is told. */
+export declare function useAutocompletePicks<T extends AutocompleteOption>(props: AutocompleteProps<T>, { setQuery, setOpen, text, setEditing, getOptionValue: readValue, remember, }: Picks<T>): {
+    handleRemove: (value: string) => void;
+    handleValueChange: (value: any, details?: ChangeEventDetails) => void;
+};
+export {};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete-typing.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ChangeEventDetails } from '../combobox/combobox.js';
+type Typing = {
+    setQuery: Dispatch<SetStateAction<string>>;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    text: boolean;
+    setEditing: Dispatch<SetStateAction<boolean>>;
+};
+/** Typing in the input and opening or closing the list. */
+export declare function useAutocompleteTyping({ setQuery, setOpen, text, setEditing, }: Typing): {
+    handleInputValueChange: (value: string, eventDetails: ChangeEventDetails) => void;
+    handleOpenChange: (open: boolean, details: ChangeEventDetails) => void;
+};
+export {};

package/dist/lib/components/ui/selection/autocomplete/use-autocomplete.d.ts

@@ -5,11 +5,11 @@ type Readers<T> = {
 };
 /** Autocomplete's state and callbacks; the component only lays them out. */
 export declare function useAutocomplete<T extends AutocompleteOption>(props: AutocompleteProps<T>, readers: Readers<T>): {
-    handleRemove: (value: string) => void;
-    handleValueChange: (value: any, details?: import('../index.js').ChangeEventDetails) => void;
+    handleFieldBlur: (event: import('react').FocusEvent<HTMLElement>) => void;
     handleInputValueChange: (value: string, eventDetails: import('../index.js').ChangeEventDetails) => void;
     handleOpenChange: (open: boolean, details: import('../index.js').ChangeEventDetails) => void;
-    handleFieldBlur: (event: import('react').FocusEvent<HTMLElement>) => void;
+    handleRemove: (value: string) => void;
+    handleValueChange: (value: any, details?: import('../index.js').ChangeEventDetails) => void;
     fullOptions: T[];
     selectable: T[];
     showAddButton: boolean;