@stenajs-webui/elements 23.21.6 → 23.21.7

package/README.md

@@ -8,6 +8,10 @@ These are primarly "dumb" components, with no (or very little) logic.
 
 - [ActionMenu](src/components/ui/action-menu/ActionMenu.md)
 - Badge
+- Banners
+  - Banner
+  - ResultListBanner
+  - ValidationBanner (Banner in an ARIA live region)
 - Buttons
   - FlatButton
   - PrimaryButton

package/dist/components/ui/banners/validation-banner/ValidationBanner.d.ts

@@ -0,0 +1,51 @@
+import { LivelyPoliteness } from "@stenajs-webui/core";
+import * as React from "react";
+import { BannerProps } from "../banner/Banner";
+export interface ValidationBannerProps extends Omit<BannerProps, "aria-live"> {
+    /**
+     * Whether the validation result is shown.
+     *
+     * The live region is rendered either way, so the props of the banner can be
+     * static, such as translated texts, while this prop follows the validation
+     * result.
+     */
+    visible: boolean;
+    /**
+     * 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 Banner inside an ARIA live region, for validation results that come and go.
+ *
+ * The live region is rendered at all times, also while the validation passes,
+ * 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 field does not affect the
+ * layout.
+ *
+ * All Banner props are forwarded, so the banner is styled and structured
+ * exactly like a Banner.
+ *
+ * @example
+ * <Column gap={2}>
+ *   <LabelledTextInput
+ *     label={"Email"}
+ *     value={email}
+ *     onValueChange={setEmail}
+ *   />
+ *   <ValidationBanner
+ *     visible={isInvalid}
+ *     variant={"error"}
+ *     headerText={t("validation.email.header")}
+ *     text={t("validation.email.text")}
+ *   />
+ * </Column>
+ */
+export declare const ValidationBanner: React.FC<ValidationBannerProps>;

package/dist/components/ui/banners/validation-banner/__tests__/ValidationBanner.test.d.ts

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

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./icons/IconSizes";
 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/result-list/ResultList";
 export * from "./components/ui/result-list/ResultListRow";
 export * from "./components/ui/spinner/Spinner";