@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 ErrorRegionRootBaseProps extends Omit<BaseProps, "children"> {
    /**
     * Label for the error header, usually indicating the number of errors displayed.
     *
     * Changes to the `label` prop will be communicated
     * using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions).
     */
    label?: React.ReactNode;
    /**
     * A list of error items where each item describes an individual error. Must be a list of `ErrorRegion.Item` components.
     *
     * Set to `undefined` or empty array if you don't want to display errors rather than conditionally rendering the component.
     */
    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;
}
type ErrorRegionRootExtraProps = {
    /**
     * Name of the region navigational landmark.
     *
     * This label should remain stable throughout the lifetime of the region.
     */
    "aria-label": string | undefined;
} | {
    /**
     * Identifies the element that labels the region navigational landmark.
     *
     * This label should remain stable throughout the lifetime of the region.
     */
    "aria-labelledby": string | undefined;
};
type ErrorRegionRootProps = ErrorRegionRootBaseProps & ErrorRegionRootExtraProps;
/**
 * 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 using `aria-label` or `aria-labelledby`.
 *
 * This component should not be rendered conditionally, instead use the `items` prop to control the visibility.
 *
 * Example:
 * ```tsx
 * <ErrorRegion.Root
 *   aria-label="Issues"
 *   label="3 issues found"
 *   items={[
 *     <ErrorRegion.Item key={…} message="…" />
 *     <ErrorRegion.Item key={…} message="…" />
 *     <ErrorRegion.Item key={…} message="…" />
 *   ]}
 * />
 */
declare const ErrorRegionRoot: React.ForwardRefExoticComponent<ErrorRegionRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface ErrorRegionItemProps extends Omit<BaseProps, "children"> {
    /**
     * The error message. Consumers might consider using [`Link`](https://stratakit.bentley.com/docs/components/link/) 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 links, each rendered as a button using `<Link 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 <Link href="item-10001">Item 10001</Link>.</>}
 *   messageId="item-10001-error"
 *   actions={<Link render={<button />}>Retry</Link>}
 * />
 *
 * <Tree.Item
 *   id="item-10001"
 *   label="Item 10001"
 *   error="item-10001-error"
 * />
 * ```
 */
declare const ErrorRegionItem: React.ForwardRefExoticComponent<ErrorRegionItemProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export { ErrorRegionItem as Item, ErrorRegionRoot as Root };