@stratakit/structures/dist/ErrorRegion.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface ErrorRegionRootProps extends Omit<BaseProps, "children"> {
    /**
     * Label for the error header, usually indicating the number of errors displayed.
     * By default this is used as a name of the region navigational landmark, however an explicit `aria-label` or `aria-labelledby` is strongly suggested.
     *
     * Use `undefined` if you don't want to display errors rather than conditionally rendering the component.
     */
    label?: React.ReactNode;
    /**
     * A list of error items where each item describes an individual error. Must be a list of `ErrorRegion.Item` components.
     */
    items?: React.ReactNode;
    /**
     * The controlled open state of the region.
     */
    open?: boolean;
    /**
     * Callback fired when the region is open.
     *
     * Should be used with the `open` prop.
     */
    setOpen?: (open: boolean) => void;
}
/**
 * A collapsible region that displays a list of error messages, which might originate from another
 * component, such as `Tree`.
 *
 * This component is rendered as a [region landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/region.html)
 * and should be labelled either using `label` or `aria-label`/`aria-labelledby`. Changes to the `label` prop will be
 * announced communicated using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions).
 *
 * Example:
 * ```tsx
 * <ErrorRegion.Root
 *   label="3 issues found"
 *   items={
 *     <>
 *       <ErrorRegion.Item message="…" />
 *       <ErrorRegion.Item message="…" />
 *       <ErrorRegion.Item message="…" />
 *     </>
 *   }
 * />
 */
declare const ErrorRegionRoot: React.ForwardRefExoticComponent<ErrorRegionRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface ErrorRegionItemProps extends Omit<BaseProps, "children"> {
    /**
     * The error message. Consumers might consider using `Anchor` component to link to the associated element in the UI.
     */
    message?: React.ReactNode;
    /**
     * The `id` of the message node which can be used to semantically associate the error item with the related UI item i.e. `Tree.Item`.
     */
    messageId?: string;
    /**
     * The actions available for this item. Must be a list of anchors, each rendered as a button using `<Anchor render={<button />} />`.
     */
    actions?: React.ReactNode;
}
/**
 * An individual error item within the `ErrorRegion` component. It displays an error message and optional actions.
 *
 * The `messageId` prop can be used to semantically associate the error item with the related UI item, such as a `Tree.Item`.
 *
 * Example:
 * ```tsx
 * <ErrorRegion.Item
 *   message={<>Something went wrong with <Anchor href="item-10001">Item 10001</Anchor>.</>}
 *   messageId="item-10001-error"
 *   actions={<Button>Retry</Button>}
 * />
 *
 * <Tree.Item
 *   id="item-10001"
 *   label="Item 10001"
 *   error="item-10001-error"
 * />
 * ```
 */
declare const ErrorRegionItem: React.ForwardRefExoticComponent<ErrorRegionItemProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export { ErrorRegionRoot as Root, ErrorRegionItem as Item };