@stenajs-webui/elements 23.21.9 → 23.21.11

package/dist/components/ui/banners/validation-result-list-banner/ValidationResultListBanner.d.ts

@@ -0,0 +1,51 @@
+import { LivelyPoliteness } from "@stenajs-webui/core";
+import * as React from "react";
+import { ResultListBannerProps, ResultListBannerState } from "../result-list-banner/ResultListBanner";
+export interface ValidationResultListBannerProps extends Omit<ResultListBannerProps, "bannerState" | "aria-live"> {
+    /**
+     * The result to show, or undefined when there is no result to show.
+     *
+     * Unlike ValidationBanner, there is no separate visible prop, since the
+     * whole content of the banner is this one prop. It is the same value that
+     * useResultListBannerState holds, and it is undefined exactly when the
+     * banner should be hidden.
+     */
+    bannerState: ResultListBannerState | undefined;
+    /**
+     * How eagerly assistive technology should announce the validation result.
+     *
+     * - `polite` waits until the user is idle.
+     * - `assertive` interrupts the user, and should be used sparingly.
+     * - `off` stops announcing results, without removing the region.
+     *
+     * @default "polite"
+     */
+    politeness?: LivelyPoliteness;
+}
+/**
+ * A ResultListBanner inside an ARIA live region, for validation results that
+ * come and go.
+ *
+ * The live region is rendered at all times, also while there is no result,
+ * since screen readers only announce updates to live regions that already
+ * exist. Only the banner is added and removed, and the region adds no gap of
+ * its own, so keeping it mounted next to a form does not affect the layout.
+ *
+ * All ResultListBanner props are forwarded, so the banner is styled and
+ * structured exactly like a ResultListBanner.
+ *
+ * @example
+ * const { bannerState, setBannerResultWithErrors, clearBannerResult } =
+ *   useResultListBannerState();
+ *
+ * return (
+ *   <Column gap={2}>
+ *     <ValidationResultListBanner
+ *       bannerState={bannerState}
+ *       variant={"error"}
+ *     />
+ *     <PrimaryButton label={t("save")} onClick={onSave} />
+ *   </Column>
+ * );
+ */
+export declare const ValidationResultListBanner: React.FC<ValidationResultListBannerProps>;

package/dist/components/ui/banners/validation-result-list-banner/__tests__/ValidationResultListBanner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from "./components/ui/banners/banner/Banner";
 export * from "./components/ui/banners/result-list-banner/ResultListBanner";
 export * from "./components/ui/banners/result-list-banner/hooks/UseResultListBannerState";
 export * from "./components/ui/banners/validation-banner/ValidationBanner";
+export * from "./components/ui/banners/validation-result-list-banner/ValidationResultListBanner";
 export * from "./components/ui/result-list/ResultList";
 export * from "./components/ui/result-list/ResultListRow";
 export * from "./components/ui/spinner/Spinner";