@nxgt/material 3.44.0 → 3.46.0

package/dist/lib/components/ui/display/recovery-codes-status/types.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, ReactNode } from 'react';
+import { VerificationCodeIcons, VerificationCodeLabels, VerificationCodeProps, VerificationKind } from '../../fields/verification-code/types.js';
+import { CardTitleElement } from '../../primitives/card/card.js';
+/** The words of {@link RecoveryCodesStatus} itself, each overridable. */
+export type RecoveryCodesStatusLabels = {
+    /** The title. "Recovery codes". */
+    title: string;
+    /** Under the title: what the codes are for. */
+    description: string;
+    /** How many are left; an ICU message of `{count}`. */
+    remaining: (count: number) => string;
+    /** Said instead of the count when none is left. */
+    noneLeft: string;
+    /** The warning that goes with it. */
+    noneLeftHint: string;
+    /** The button, and the form's submit button. "New codes". */
+    newCodes: string;
+    /** Under the count: what making a new set does. */
+    newCodesHint: string;
+};
+export type RecoveryCodesStatusProps = Omit<ComponentProps<'div'>, 'title' | 'children'> & Pick<VerificationCodeProps, 'attemptsLeft' | 'locked' | 'error' | 'pending' | 'allowRecovery' | 'length'> & {
+    /** How many codes are left; `null` or left out when the count is not known. */
+    remaining?: number | null;
+    /**
+     * Asks for a new set. With `requireCode` it gets the code typed and what
+     * it is (the app's, or a recovery code); without, no argument. Show the
+     * new codes with {@link RecoveryCodes} once it succeeds.
+     */
+    onRegenerate: (code?: string, options?: {
+        kind: VerificationKind;
+    }) => unknown;
+    /**
+     * Ask for a code before making a new set: a {@link VerificationCode}
+     * under the count. `false` draws a plain button. On by default.
+     */
+    requireCode?: boolean;
+    title?: ReactNode;
+    /** The heading level of the title. `'h2'` by default. */
+    titleAs?: CardTitleElement;
+    /** Under the title. Overrides `labels.description`; `false` leaves it out. */
+    description?: ReactNode;
+    labels?: Partial<RecoveryCodesStatusLabels & VerificationCodeLabels>;
+    icons?: VerificationCodeIcons;
+};

package/dist/lib/components/ui/display/recovery-codes-status/use-recovery-codes-status-labels.d.ts

@@ -0,0 +1,3 @@
+import { RecoveryCodesStatusLabels } from './types.js';
+/** The built-in words (English or the active language), with their overrides. */
+export declare function useRecoveryCodesStatusLabels(overrides?: Partial<RecoveryCodesStatusLabels>): RecoveryCodesStatusLabels;

package/dist/lib/components/ui/feedback/alert/alert.d.ts

@@ -8,5 +8,11 @@ export type AlertProps = {
     icon?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;
+    /**
+     * Buttons or links under the text (a "Continue" link, a "Retry" button),
+     * wrapping on a narrow screen. They are the host's; `Button` and
+     * `LinkButton` already keep a 44px target on a coarse pointer.
+     */
+    actions?: ReactNode;
 } & Omit<ComponentProps<'div'>, 'title' | 'description'> & AlertVariantProps;
-export declare function Alert({ description, icon, title, className, variant, ...props }: AlertProps): import("react").JSX.Element;
+export declare function Alert({ description, actions, icon, title, className, variant, ...props }: AlertProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/index.d.ts

@@ -18,5 +18,6 @@ export * from './scroll-progress/index.js';
 export * from './skeleton/index.js';
 export * from './spinner/index.js';
 export * from './step-dots/index.js';
+export * from './step-up-dialog/index.js';
 export * from './toast/index.js';
 export * from './typing-indicator/index.js';

package/dist/lib/components/ui/feedback/step-up-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './step-up-dialog.js';
+export type { StepUpDialogLabels, StepUpDialogProps } from './types.js';

package/dist/lib/components/ui/feedback/step-up-dialog/partials/step-up-body.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { StepUpDialogProps } from '../types.js';
+type Props = Pick<StepUpDialogProps, 'via' | 'requestError' | 'confirming' | 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'length' | 'allowRecovery' | 'icons'> & {
+    formId: string;
+    labels: NonNullable<StepUpDialogProps['labels']>;
+    /** What is said instead of the field (requesting, confirming). */
+    statusText: ReactNode;
+};
+/**
+ * What sits between the title and the footer: the code form, or, when it is
+ * not there (a code still being requested, a request that failed, an
+ * accepted code), the status line or the alert that replaces it.
+ */
+export declare function StepUpBody({ via, requestError, confirming, formId, labels, statusText, icons, ...code }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/feedback/step-up-dialog/partials/step-up-footer.d.ts

@@ -0,0 +1,22 @@
+import { ButtonVariant } from '../../../actions/button/button.js';
+type Props = {
+    /** The id of the code form the Confirm button submits. */
+    formId: string;
+    cancelVariant: ButtonVariant;
+    cancelLabel: string;
+    confirmLabel: string;
+    /** An accepted code is being finished: both buttons are off. */
+    confirming: boolean;
+    pending?: boolean;
+    /** No field to answer (still requesting) or the code is held by a lock. */
+    disabled: boolean;
+    /** The id of the lock note that explains a disabled Confirm. */
+    lockNoteId?: string;
+    onCancel: () => void;
+};
+/**
+ * Cancel and Confirm on one row, even on a phone. Confirm is the form's
+ * submit button (`form={formId}`); a locked code leaves Cancel usable.
+ */
+export declare function StepUpFooter({ formId, cancelVariant, cancelLabel, confirmLabel, confirming, pending, disabled, lockNoteId, onCancel, }: Props): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/feedback/step-up-dialog/partials/step-up-header.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, RefObject } from 'react';
+type Props = {
+    /** The title takes the focus on open and whenever the field goes. */
+    titleRef: RefObject<HTMLHeadingElement | null>;
+    title: ReactNode;
+    description: ReactNode;
+};
+/** The title (focusable by code, not by Tab) and the line under it. */
+export declare function StepUpHeader({ titleRef, title, description }: Props): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { StepUpDialogProps } from './types.js';
+/**
+ * "Confirm it's you": a dialog that asks for a one-time code before the app
+ * goes on with a sensitive action. It is presentational: it holds no state
+ * machine and fetches nothing, it shows the answer it is given through the
+ * props of {@link VerificationCode} (`via`, `attemptsLeft`, `locked`,
+ * `error`, `pending`, `resent`, `onSubmit`, `onResend`), which the app
+ * wires to its own model.
+ *
+ * The title takes the focus on open and whenever the field goes (a code
+ * being requested, a code accepted); the field takes it after a refusal; on
+ * close it goes back to what opened the dialog. Escape, a click outside and
+ * Cancel call `onCancel`, except while `confirming`. A locked code leaves
+ * Cancel usable.
+ */
+export declare function StepUpDialog({ open, onCancel, cancelVariant, via, destination, requestError, confirming, confirmedLabel, title, description, labels: labelOverrides, icons, ...code }: StepUpDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/step-up-dialog/types.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../../actions/button/button.js';
+import { VerificationCodeIcons, VerificationCodeLabels, VerificationCodeProps } from '../../fields/verification-code/types.js';
+/** The words of {@link StepUpDialog} itself, each overridable. */
+export type StepUpDialogLabels = {
+    /** The title. "Confirm it's you". */
+    title: string;
+    /** Under the title while the code is still being requested. */
+    description: string;
+    /** Under the title for a code from an authenticator app. */
+    descriptionApp: string;
+    /** Under the title for an e-mailed code, with no destination to name. */
+    descriptionEmail: string;
+    /** Under the title for an e-mailed code; `destination` is the address as text. */
+    descriptionEmailTo: (destination: string) => string;
+    /** Said while the code is being requested. "Sending you a code…". */
+    requesting: string;
+    /** The Cancel button. */
+    cancel: string;
+    /** Said once the code was accepted and the host finishes its action. */
+    confirmed: string;
+};
+export type StepUpDialogProps = Pick<VerificationCodeProps, 'attemptsLeft' | 'locked' | 'error' | 'retryAfter' | 'pending' | 'onSubmit' | 'onResend' | 'resent' | 'length' | 'allowRecovery'> & {
+    open: boolean;
+    /**
+     * Escape, a click outside and Cancel call it, except while `confirming`.
+     * The host closes the dialog (`open`); focus goes back to what opened it.
+     */
+    onCancel: () => void;
+    /** The Cancel button's variant. Default `'tonal'`; `'outlined'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
+    /**
+     * How the code was issued. Left out, the code is still being requested:
+     * the field is not drawn and a status line says so.
+     */
+    via?: VerificationCodeProps['via'];
+    /** Where an e-mailed code went: the address, or any node. */
+    destination?: ReactNode;
+    /** The request for a code failed; shown as an alert in place of the field. */
+    requestError?: ReactNode;
+    /**
+     * The code was accepted and the host re-runs its action: the field goes,
+     * a status line shows `labels.confirmed` and Cancel is disabled until the
+     * host closes the dialog.
+     */
+    confirming?: boolean;
+    /** The status line while `confirming`. Overrides `labels.confirmed`. */
+    confirmedLabel?: ReactNode;
+    /** The title. Overrides `labels.title`. */
+    title?: ReactNode;
+    /** Under the title. Overrides the text that follows `via`. */
+    description?: ReactNode;
+    labels?: Partial<StepUpDialogLabels & VerificationCodeLabels>;
+    icons?: VerificationCodeIcons;
+};

package/dist/lib/components/ui/feedback/step-up-dialog/use-step-up-labels.d.ts

@@ -0,0 +1,3 @@
+import { StepUpDialogLabels } from './types.js';
+/** The built-in words (English or the active language), with their overrides. */
+export declare function useStepUpLabels(overrides?: Partial<StepUpDialogLabels>): StepUpDialogLabels;

package/dist/lib/components/ui/feedback/step-up-dialog/use-step-up-state.d.ts

@@ -0,0 +1,12 @@
+import { StepUpDialogProps } from './types.js';
+type Input = Pick<StepUpDialogProps, 'via' | 'requestError' | 'confirming' | 'locked' | 'attemptsLeft'>;
+/**
+ * Whether the code field is there (a code requested, no failed request,
+ * nothing accepted yet), and whether the code is held by a lock, which turns
+ * Confirm off: the one rule of {@link isHeld}, with the page-wide lock.
+ */
+export declare function useStepUpState({ via, requestError, confirming, locked, attemptsLeft, }: Input): {
+    fieldShown: boolean;
+    held: boolean;
+};
+export {};

package/dist/lib/components/ui/feedback/step-up-dialog/use-title-focus.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The ref of the dialog's title, which takes the focus when the dialog is
+ * open and the field is not (a code being requested, a code accepted).
+ */
+export declare function useTitleFocus(open: boolean, fieldShown: boolean): import('react').RefObject<HTMLHeadingElement | null>;