@nxgt/material 3.100.1 → 3.103.0

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog-props.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../../actions/button/button.js';
+import { ConfirmRefusalContext } from './confirm-alert.js';
+import { ConfirmPhraseMatch } from './confirm-dialog-rules.js';
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    /**
+     * The text under the title. A string renders in a paragraph; any other node
+     * (several paragraphs, a list, a link) renders in a `div`, so block children
+     * are valid HTML. Either way it names the dialog (`aria-describedby`).
+     */
+    description: ReactNode;
+    /**
+     * A note under the description, for what the user should know before
+     * confirming (what else is affected, what cannot be undone). It is part of
+     * what describes the dialog.
+     */
+    details?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /**
+     * The variant of the Cancel button. Default `'tonal'`; `'outlined'` or
+     * `'ghost'` restores the earlier look.
+     */
+    cancelVariant?: ButtonVariant;
+    /**
+     * Runs when the user confirms. The dialog stays open, with its buttons
+     * disabled, until the returned promise settles. It closes on success; on
+     * a throw or a rejection it stays open and shows the error's message, so
+     * the user can retry or cancel (or only cancel, with `lockOnRefusal`).
+     */
+    onConfirm: () => void | Promise<void>;
+    variant?: 'default' | 'destructive';
+    loading?: boolean;
+    /** Disables the confirm button, for example while an error of yours stands. */
+    confirmDisabled?: boolean;
+    /**
+     * Disables the confirm button once `onConfirm` has refused (thrown), so a
+     * retry that cannot succeed is not invited. Cancel stays. It clears when the
+     * dialog reopens. Off by default: the refused action may be retried.
+     */
+    lockOnRefusal?: boolean;
+    /**
+     * Renders the refusal inside the dialog's error alert instead of the plain
+     * message, so it can carry a link (to the records that block a delete, for
+     * example). Receives the message, what `onConfirm` threw and `close()`. The alert keeps `role="alert"`.
+     * By default an `ActionRefusal` thrown by `onConfirm` shows its details and
+     * its action under the message; any other error shows its message.
+     */
+    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
+    /**
+     * Asks the user to type this text before Confirm enables, for a deletion
+     * worth a second thought. A field labelled "Type {phrase} to confirm"
+     * (translated, the phrase in code style) takes the focus on open and starts
+     * empty each time the dialog opens; paste is allowed. Enter in it confirms
+     * only once it matches. Unset or empty: no field.
+     */
+    confirmPhrase?: string;
+    /**
+     * How the typed text is compared with `confirmPhrase`: `'exact'` (default),
+     * `'trim'` (spaces around the text ignored) or `'trim-case-insensitive'`.
+     */
+    confirmPhraseMatch?: ConfirmPhraseMatch;
+    /**
+     * Called as the dialog closes, before the focus goes back to what opened
+     * it. `event.preventDefault()` places the focus yourself, for example
+     * `ctx.focusTrigger()` of a ServerTable bulk action, whose button a redraw
+     * may have replaced.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
+}

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog-rules.d.ts

@@ -15,3 +15,15 @@ export declare function confirmIsDisabled({ busy, confirmDisabled, lockOnRefusal
     lockOnRefusal?: boolean;
     error: string | null;
 }): boolean;
+/**
+ * How the typed text is compared with `confirmPhrase`: `'exact'` (the
+ * default) character for character, `'trim'` ignoring spaces around the text,
+ * `'trim-case-insensitive'` ignoring those and the letter case.
+ */
+export type ConfirmPhraseMatch = 'exact' | 'trim' | 'trim-case-insensitive';
+/**
+ * Whether the typed text satisfies the phrase. An empty phrase never asks for
+ * anything (always true); the phrase itself is trimmed the same way as the
+ * input in the `trim` modes.
+ */
+export declare function confirmPhraseMatches(typed: string, phrase: string, mode?: ConfirmPhraseMatch): boolean;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog.d.ts

@@ -1,61 +1,5 @@
-import { ReactNode } from 'react';
-import { ButtonVariant } from '../../actions/button/button.js';
-import { ConfirmRefusalContext } from './confirm-alert.js';
-export type { ConfirmRefusalContext };
-export interface ConfirmDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title: string;
-    /**
-     * The text under the title. A string renders in a paragraph; any other node
-     * (several paragraphs, a list, a link) renders in a `div`, so block children
-     * are valid HTML. Either way it names the dialog (`aria-describedby`).
-     */
-    description: ReactNode;
-    /**
-     * A note under the description, for what the user should know before
-     * confirming (what else is affected, what cannot be undone). It is part of
-     * what describes the dialog.
-     */
-    details?: ReactNode;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    /**
-     * The variant of the Cancel button. Default `'tonal'`; `'outlined'` or
-     * `'ghost'` restores the earlier look.
-     */
-    cancelVariant?: ButtonVariant;
-    /**
-     * Runs when the user confirms. The dialog stays open, with its buttons
-     * disabled, until the returned promise settles. It closes on success; on
-     * a throw or a rejection it stays open and shows the error's message, so
-     * the user can retry or cancel (or only cancel, with `lockOnRefusal`).
-     */
-    onConfirm: () => void | Promise<void>;
-    variant?: 'default' | 'destructive';
-    loading?: boolean;
-    /** Disables the confirm button, for example while an error of yours stands. */
-    confirmDisabled?: boolean;
-    /**
-     * Disables the confirm button once `onConfirm` has refused (thrown), so a
-     * retry that cannot succeed is not invited. Cancel stays. It clears when the
-     * dialog reopens. Off by default: the refused action may be retried.
-     */
-    lockOnRefusal?: boolean;
-    /**
-     * Renders the refusal inside the dialog's error alert instead of the plain
-     * message, so it can carry a link (to the records that block a delete, for
-     * example). Receives the message, what `onConfirm` threw and `close()`. The alert keeps `role="alert"`.
-     * By default an `ActionRefusal` thrown by `onConfirm` shows its details and
-     * its action under the message; any other error shows its message.
-     */
-    refusal?: (refusal: ConfirmRefusalContext) => ReactNode;
-    /**
-     * Called as the dialog closes, before the focus goes back to what opened
-     * it. `event.preventDefault()` places the focus yourself, for example
-     * `ctx.focusTrigger()` of a ServerTable bulk action, whose button a redraw
-     * may have replaced.
-     */
-    onCloseAutoFocus?: (event: Event) => void;
-}
-export declare function ConfirmDialog({ open, onOpenChange, title, description, details, confirmLabel, cancelLabel, cancelVariant, onConfirm, variant, loading, confirmDisabled, lockOnRefusal, refusal, onCloseAutoFocus, }: ConfirmDialogProps): import("react").JSX.Element;
+import { ConfirmDialogProps } from './confirm-dialog-props.js';
+export type { ConfirmRefusalContext } from './confirm-alert.js';
+export type { ConfirmPhraseMatch } from './confirm-dialog-rules.js';
+export type { ConfirmDialogProps };
+export declare function ConfirmDialog(props: ConfirmDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-footer.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+import { ButtonVariant } from '../../actions/button/button.js';
+/** A confirm dialog's Cancel and Confirm buttons. */
+export declare function ConfirmFooter({ variant, busy, disabled, cancelLabel, confirmLabel, cancelVariant, onConfirm, }: {
+    variant: 'default' | 'destructive';
+    busy: boolean;
+    disabled: boolean;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    cancelVariant?: ButtonVariant;
+    onConfirm: (event: MouseEvent<HTMLButtonElement>) => void;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-phrase.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from 'react';
+import { ConfirmPhraseMatch } from './confirm-dialog-rules.js';
+/**
+ * The "type the value to confirm" field of a `ConfirmDialog`: a label that
+ * shows the phrase in code style, and an input that takes any paste. The
+ * dialog owns the value; Enter is handed back only while it matches.
+ */
+export declare function ConfirmPhraseField({ phrase, value, onValueChange, onEnter, disabled, inputRef, }: {
+    phrase: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    onEnter: () => void;
+    disabled: boolean;
+    inputRef: Ref<HTMLInputElement>;
+}): import("react").JSX.Element;
+/**
+ * The typed text of a `ConfirmDialog`'s phrase field: it starts empty each
+ * time the dialog opens, `missing` says Confirm must wait, and `ref` is the
+ * input the dialog focuses on open.
+ */
+export declare function useConfirmPhrase(open: boolean, phrase: string | undefined, match: ConfirmPhraseMatch): {
+    ref: import('react').RefObject<HTMLInputElement | null>;
+    typed: string;
+    setTyped: import('react').Dispatch<import('react').SetStateAction<string>>;
+    missing: boolean;
+};

package/dist/lib/components/ui/feedback/confirm-dialog/use-confirm-action.d.ts

@@ -13,7 +13,7 @@ export declare function useConfirmAction({ open, onOpenChange, onConfirm, }: {
     error: string | null;
     cause: unknown;
     handleOpenChange: (value: boolean) => void;
-    handleConfirm: (event: MouseEvent<HTMLButtonElement>) => Promise<void>;
+    handleConfirm: (event: Pick<MouseEvent, "preventDefault">) => Promise<void>;
 };
 /**
  * A ref for a modal's content that takes the focus while `pending`: the