@huin-core/react-announce 0.2.1 → 1.0.3

package/dist/index.d.mts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Primitive } from '@huin-core/react-primitive';
+
+type RegionType = 'polite' | 'assertive' | 'off';
+type RegionRole = 'status' | 'alert' | 'log' | 'none';
+type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
+interface AnnounceProps extends PrimitiveDivProps {
+    /**
+     * Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that
+     * indicates whether assistive technologies will present all, or only parts of, the changed region
+     * based on the change notifications defined by the `aria-relevant` attribute.
+     *
+     * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-atomic
+     * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html
+     */
+    'aria-atomic'?: boolean;
+    /**
+     * Mirrors the `aria-relevant` DOM attribute for live regions. It is an optional attribute used to
+     * describe what types of changes have occurred to the region, and which changes are relevant and
+     * should be announced. Any change that is not relevant acts in the same manner it would if the
+     * `aria-live` attribute were set to off.
+     *
+     * Unfortunately, `aria-relevant` doesn't behave as expected across all device/screen reader
+     * combinations. It's important to test its implementation before relying on it to work for your
+     * users. The attribute is omitted by default.
+     *
+     * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-relevant
+     * @see MDN      https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute
+     * @see Opinion  https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3
+     * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html
+     */
+    'aria-relevant'?: PrimitiveDivProps['aria-relevant'];
+    /**
+     * React children of your component. Children can be mirrored directly or modified to optimize for
+     * screen reader user experience.
+     */
+    children: React.ReactNode;
+    /**
+     * An optional unique identifier for the live region.
+     *
+     * By default, `Announce` components create, at most, two unique `aria-live` regions in the
+     * document (one for all `polite` notifications, one for all `assertive` notifications). In some
+     * cases you may wish to append additional `aria-live` regions for distinct purposes (for example,
+     * simple status updates may need to be separated from a stack of toast-style notifications). By
+     * passing an id, you indicate that any content rendered by components with the same identifier
+     * should be mirrored in a separate `aria-live` region.
+     */
+    regionIdentifier?: string;
+    /**
+     * Mirrors the `role` DOM attribute. This is optional and may be useful as an override in some
+     * cases. By default, the role is determined by the `type` prop.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
+     */
+    role?: RegionRole;
+    /**
+     * Mirrors the `aria-live` DOM attribute. The `aria-live=POLITENESS_SETTING` is used to set the
+     * priority with which screen reader should treat updates to live regions. Its possible settings
+     * are: off, polite or assertive. Defaults to `polite`.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+     */
+    type?: RegionType;
+}
+declare const Announce: React.ForwardRefExoticComponent<AnnounceProps & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<AnnounceProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Announce, type AnnounceProps, Root };

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Primitive } from '@huin-core/react-primitive';
+
+type RegionType = 'polite' | 'assertive' | 'off';
+type RegionRole = 'status' | 'alert' | 'log' | 'none';
+type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
+interface AnnounceProps extends PrimitiveDivProps {
+    /**
+     * Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that
+     * indicates whether assistive technologies will present all, or only parts of, the changed region
+     * based on the change notifications defined by the `aria-relevant` attribute.
+     *
+     * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-atomic
+     * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html
+     */
+    'aria-atomic'?: boolean;
+    /**
+     * Mirrors the `aria-relevant` DOM attribute for live regions. It is an optional attribute used to
+     * describe what types of changes have occurred to the region, and which changes are relevant and
+     * should be announced. Any change that is not relevant acts in the same manner it would if the
+     * `aria-live` attribute were set to off.
+     *
+     * Unfortunately, `aria-relevant` doesn't behave as expected across all device/screen reader
+     * combinations. It's important to test its implementation before relying on it to work for your
+     * users. The attribute is omitted by default.
+     *
+     * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-relevant
+     * @see MDN      https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute
+     * @see Opinion  https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3
+     * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html
+     */
+    'aria-relevant'?: PrimitiveDivProps['aria-relevant'];
+    /**
+     * React children of your component. Children can be mirrored directly or modified to optimize for
+     * screen reader user experience.
+     */
+    children: React.ReactNode;
+    /**
+     * An optional unique identifier for the live region.
+     *
+     * By default, `Announce` components create, at most, two unique `aria-live` regions in the
+     * document (one for all `polite` notifications, one for all `assertive` notifications). In some
+     * cases you may wish to append additional `aria-live` regions for distinct purposes (for example,
+     * simple status updates may need to be separated from a stack of toast-style notifications). By
+     * passing an id, you indicate that any content rendered by components with the same identifier
+     * should be mirrored in a separate `aria-live` region.
+     */
+    regionIdentifier?: string;
+    /**
+     * Mirrors the `role` DOM attribute. This is optional and may be useful as an override in some
+     * cases. By default, the role is determined by the `type` prop.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
+     */
+    role?: RegionRole;
+    /**
+     * Mirrors the `aria-live` DOM attribute. The `aria-live=POLITENESS_SETTING` is used to set the
+     * priority with which screen reader should treat updates to live regions. Its possible settings
+     * are: off, polite or assertive. Defaults to `polite`.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+     */
+    type?: RegionType;
+}
+declare const Announce: React.ForwardRefExoticComponent<AnnounceProps & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<AnnounceProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Announce, type AnnounceProps, Root };

package/dist/index.js

@@ -0,0 +1,139 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/react/announce/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Announce: () => Announce,
+  Root: () => Root
+});
+module.exports = __toCommonJS(src_exports);
+
+// packages/react/announce/src/Announce.tsx
+var React = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_react_compose_refs = require("@huin-core/react-compose-refs");
+var import_react_primitive = require("@huin-core/react-primitive");
+var import_react_use_layout_effect = require("@huin-core/react-use-layout-effect");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ROLES = {
+  polite: "status",
+  assertive: "alert",
+  off: "none"
+};
+var listenerMap = /* @__PURE__ */ new Map();
+var NAME = "Announce";
+var Announce = React.forwardRef((props, forwardedRef) => {
+  const {
+    "aria-relevant": ariaRelevant,
+    children,
+    type = "polite",
+    role = ROLES[type],
+    regionIdentifier,
+    ...regionProps
+  } = props;
+  const ariaAtomic = ["true", true].includes(regionProps["aria-atomic"]);
+  const ownerDocumentRef = React.useRef(document);
+  const setOwnerDocumentFromRef = React.useCallback((node) => {
+    if (node) {
+      ownerDocumentRef.current = node.ownerDocument;
+    }
+  }, []);
+  const ownRef = React.useRef(null);
+  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ownRef, setOwnerDocumentFromRef);
+  const [region, setRegion] = React.useState();
+  const relevant = ariaRelevant ? Array.isArray(ariaRelevant) ? ariaRelevant.join(" ") : ariaRelevant : void 0;
+  const getLiveRegionElement = React.useCallback(() => {
+    const ownerDocument = ownerDocumentRef.current;
+    const regionConfig = { type, role, relevant, id: regionIdentifier, atomic: ariaAtomic };
+    const regionSelector = buildSelector(regionConfig);
+    const element = ownerDocument.querySelector(regionSelector);
+    return element || buildLiveRegionElement(ownerDocument, regionConfig);
+  }, [ariaAtomic, relevant, role, type, regionIdentifier]);
+  (0, import_react_use_layout_effect.useLayoutEffect)(() => {
+    setRegion(getLiveRegionElement());
+  }, [getLiveRegionElement]);
+  React.useEffect(() => {
+    const ownerDocument = ownerDocumentRef.current;
+    function updateAttributesOnVisibilityChange() {
+      regionElement.setAttribute("role", ownerDocument.hidden ? "none" : role);
+      regionElement.setAttribute("aria-live", ownerDocument.hidden ? "off" : type);
+    }
+    const regionElement = getLiveRegionElement();
+    if (!listenerMap.get(regionElement)) {
+      ownerDocument.addEventListener("visibilitychange", updateAttributesOnVisibilityChange);
+      listenerMap.set(regionElement, 1);
+    } else {
+      const announceCount = listenerMap.get(regionElement);
+      listenerMap.set(regionElement, announceCount + 1);
+    }
+    return function() {
+      const announceCount = listenerMap.get(regionElement);
+      listenerMap.set(regionElement, announceCount - 1);
+      if (announceCount === 1) {
+        ownerDocument.removeEventListener("visibilitychange", updateAttributesOnVisibilityChange);
+      }
+    };
+  }, [getLiveRegionElement, role, type]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...regionProps, ref, children }),
+    region && import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children }), region)
+  ] });
+});
+Announce.displayName = NAME;
+function buildLiveRegionElement(ownerDocument, { type, relevant, role, atomic, id }) {
+  const element = ownerDocument.createElement("div");
+  element.setAttribute(getLiveRegionPartDataAttr(id), "");
+  element.setAttribute(
+    "style",
+    "position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;"
+  );
+  ownerDocument.body.appendChild(element);
+  element.setAttribute("aria-live", type);
+  element.setAttribute("aria-atomic", String(atomic || false));
+  element.setAttribute("role", role);
+  if (relevant) {
+    element.setAttribute("aria-relevant", relevant);
+  }
+  return element;
+}
+function buildSelector({ type, relevant, role, atomic, id }) {
+  return `[${getLiveRegionPartDataAttr(id)}]${[
+    ["aria-live", type],
+    ["aria-atomic", atomic],
+    ["aria-relevant", relevant],
+    ["role", role]
+  ].filter(([, val]) => !!val).map(([attr, val]) => `[${attr}=${val}]`).join("")}`;
+}
+function getLiveRegionPartDataAttr(id) {
+  return "data-huin-core-announce-region" + (id ? `-${id}` : "");
+}
+var Root = Announce;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/Announce.tsx"],
+  "sourcesContent": ["'use client';\nexport {\n  Announce,\n  //\n  Root,\n} from './Announce';\nexport type { AnnounceProps } from './Announce';\n", "import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useComposedRefs } from '@huin-core/react-compose-refs';\nimport { Primitive } from '@huin-core/react-primitive';\nimport { useLayoutEffect } from '@huin-core/react-use-layout-effect';\n\ntype RegionType = 'polite' | 'assertive' | 'off';\ntype RegionRole = 'status' | 'alert' | 'log' | 'none';\n\nconst ROLES: { [key in RegionType]: RegionRole } = {\n  polite: 'status',\n  assertive: 'alert',\n  off: 'none',\n};\n\nconst listenerMap = new Map<Element, number>();\n\n/* -------------------------------------------------------------------------------------------------\n * Announce\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Announce';\n\ntype AnnounceElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface AnnounceProps extends PrimitiveDivProps {\n  /**\n   * Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that\n   * indicates whether assistive technologies will present all, or only parts of, the changed region\n   * based on the change notifications defined by the `aria-relevant` attribute.\n   *\n   * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-atomic\n   * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html\n   */\n  'aria-atomic'?: boolean;\n  /**\n   * Mirrors the `aria-relevant` DOM attribute for live regions. It is an optional attribute used to\n   * describe what types of changes have occurred to the region, and which changes are relevant and\n   * should be announced. Any change that is not relevant acts in the same manner it would if the\n   * `aria-live` attribute were set to off.\n   *\n   * Unfortunately, `aria-relevant` doesn't behave as expected across all device/screen reader\n   * combinations. It's important to test its implementation before relying on it to work for your\n   * users. The attribute is omitted by default.\n   *\n   * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-relevant\n   * @see MDN      https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute\n   * @see Opinion  https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3\n   * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html\n   */\n  'aria-relevant'?: PrimitiveDivProps['aria-relevant'];\n  /**\n   * React children of your component. Children can be mirrored directly or modified to optimize for\n   * screen reader user experience.\n   */\n  children: React.ReactNode;\n  /**\n   * An optional unique identifier for the live region.\n   *\n   * By default, `Announce` components create, at most, two unique `aria-live` regions in the\n   * document (one for all `polite` notifications, one for all `assertive` notifications). In some\n   * cases you may wish to append additional `aria-live` regions for distinct purposes (for example,\n   * simple status updates may need to be separated from a stack of toast-style notifications). By\n   * passing an id, you indicate that any content rendered by components with the same identifier\n   * should be mirrored in a separate `aria-live` region.\n   */\n  regionIdentifier?: string;\n  /**\n   * Mirrors the `role` DOM attribute. This is optional and may be useful as an override in some\n   * cases. By default, the role is determined by the `type` prop.\n   *\n   * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n   */\n  role?: RegionRole;\n  /**\n   * Mirrors the `aria-live` DOM attribute. The `aria-live=POLITENESS_SETTING` is used to set the\n   * priority with which screen reader should treat updates to live regions. Its possible settings\n   * are: off, polite or assertive. Defaults to `polite`.\n   *\n   * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n   */\n  type?: RegionType;\n}\n\nconst Announce = React.forwardRef<AnnounceElement, AnnounceProps>((props, forwardedRef) => {\n  const {\n    'aria-relevant': ariaRelevant,\n    children,\n    type = 'polite',\n    role = ROLES[type],\n    regionIdentifier,\n    ...regionProps\n  } = props;\n\n  const ariaAtomic = ['true', true].includes(regionProps['aria-atomic'] as any);\n\n  // The region is appended to the root document node, which is usually the global `document` but in\n  // some contexts may be another node. After the Announce element ref is attached, we set the\n  // ownerDocumentRef to make sure we have the right root node. We should only need to do this once.\n  const ownerDocumentRef = React.useRef(document);\n  const setOwnerDocumentFromRef = React.useCallback((node: HTMLDivElement) => {\n    if (node) {\n      ownerDocumentRef.current = node.ownerDocument;\n    }\n  }, []);\n  const ownRef = React.useRef<HTMLDivElement | null>(null);\n  const ref = useComposedRefs(forwardedRef, ownRef, setOwnerDocumentFromRef);\n\n  const [region, setRegion] = React.useState<HTMLElement>();\n  const relevant = ariaRelevant\n    ? Array.isArray(ariaRelevant)\n      ? ariaRelevant.join(' ')\n      : ariaRelevant\n    : undefined;\n\n  const getLiveRegionElement = React.useCallback(() => {\n    const ownerDocument = ownerDocumentRef.current;\n    const regionConfig = { type, role, relevant, id: regionIdentifier, atomic: ariaAtomic };\n    const regionSelector = buildSelector(regionConfig);\n    const element = ownerDocument.querySelector(regionSelector);\n\n    return element || buildLiveRegionElement(ownerDocument, regionConfig);\n  }, [ariaAtomic, relevant, role, type, regionIdentifier]);\n\n  useLayoutEffect(() => {\n    setRegion(getLiveRegionElement() as HTMLElement);\n  }, [getLiveRegionElement]);\n\n  // In some screen reader/browser combinations, alerts coming from an inactive browser tab may be\n  // announced, which is a confusing experience for a user interacting with a completely different\n  // page. When the page visibility changes we'll update the `role` and `aria-live` attributes of\n  // our region element to prevent that.\n  // https://inclusive-components.design/notifications/#restrictingmessagestocontexts\n  React.useEffect(() => {\n    const ownerDocument = ownerDocumentRef.current;\n    function updateAttributesOnVisibilityChange() {\n      regionElement.setAttribute('role', ownerDocument.hidden ? 'none' : role);\n      regionElement.setAttribute('aria-live', ownerDocument.hidden ? 'off' : type);\n    }\n\n    // Ok, so this might look a little weird and confusing, but here's what's going on:\n    //   - We need to hide `aria-live` regions via a global event listener, as noted in the comment\n    //     above.\n    //   - We only need one listener per region. Keep in mind that each `Announce` does not\n    //     necessarily generate a unique live region element.\n    //   - We track whether or not a listener has already been attached for a given region in a map\n    //     so we can skip these effects after `Announce` is used again with a shared live region.\n    const regionElement = getLiveRegionElement();\n\n    if (!listenerMap.get(regionElement)) {\n      ownerDocument.addEventListener('visibilitychange', updateAttributesOnVisibilityChange);\n      listenerMap.set(regionElement, 1);\n    } else {\n      const announceCount = listenerMap.get(regionElement)!;\n      listenerMap.set(regionElement, announceCount + 1);\n    }\n\n    return function () {\n      const announceCount = listenerMap.get(regionElement)!;\n      listenerMap.set(regionElement, announceCount - 1);\n      if (announceCount === 1) {\n        ownerDocument.removeEventListener('visibilitychange', updateAttributesOnVisibilityChange);\n      }\n    };\n  }, [getLiveRegionElement, role, type]);\n\n  return (\n    <React.Fragment>\n      <Primitive.div {...regionProps} ref={ref}>\n        {children}\n      </Primitive.div>\n\n      {/* portal into live region for screen reader announcements */}\n      {region && ReactDOM.createPortal(<div>{children}</div>, region)}\n    </React.Fragment>\n  );\n});\n\nAnnounce.displayName = NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype LiveRegionOptions = {\n  type: string;\n  relevant?: string;\n  role: string;\n  atomic?: boolean;\n  id?: string;\n};\n\nfunction buildLiveRegionElement(\n  ownerDocument: Document,\n  { type, relevant, role, atomic, id }: LiveRegionOptions\n) {\n  const element = ownerDocument.createElement('div');\n  element.setAttribute(getLiveRegionPartDataAttr(id), '');\n  element.setAttribute(\n    'style',\n    'position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;'\n  );\n  ownerDocument.body.appendChild(element);\n\n  element.setAttribute('aria-live', type);\n  element.setAttribute('aria-atomic', String(atomic || false));\n  element.setAttribute('role', role);\n  if (relevant) {\n    element.setAttribute('aria-relevant', relevant);\n  }\n\n  return element;\n}\n\nfunction buildSelector({ type, relevant, role, atomic, id }: LiveRegionOptions) {\n  return `[${getLiveRegionPartDataAttr(id)}]${[\n    ['aria-live', type],\n    ['aria-atomic', atomic],\n    ['aria-relevant', relevant],\n    ['role', role],\n  ]\n    .filter(([, val]) => !!val)\n    .map(([attr, val]) => `[${attr}=${val}]`)\n    .join('')}`;\n}\n\nfunction getLiveRegionPartDataAttr(id?: string) {\n  return 'data-huin-core-announce-region' + (id ? `-${id}` : '');\n}\n\nconst Root = Announce;\n\nexport {\n  Announce,\n  //\n  Root,\n};\nexport type { AnnounceProps };\n"],
+  "mappings": "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",
+  "names": ["ReactDOM"]
+}

package/dist/index.mjs

@@ -0,0 +1,107 @@
+"use client";
+
+// packages/react/announce/src/Announce.tsx
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { useComposedRefs } from "@huin-core/react-compose-refs";
+import { Primitive } from "@huin-core/react-primitive";
+import { useLayoutEffect } from "@huin-core/react-use-layout-effect";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ROLES = {
+  polite: "status",
+  assertive: "alert",
+  off: "none"
+};
+var listenerMap = /* @__PURE__ */ new Map();
+var NAME = "Announce";
+var Announce = React.forwardRef((props, forwardedRef) => {
+  const {
+    "aria-relevant": ariaRelevant,
+    children,
+    type = "polite",
+    role = ROLES[type],
+    regionIdentifier,
+    ...regionProps
+  } = props;
+  const ariaAtomic = ["true", true].includes(regionProps["aria-atomic"]);
+  const ownerDocumentRef = React.useRef(document);
+  const setOwnerDocumentFromRef = React.useCallback((node) => {
+    if (node) {
+      ownerDocumentRef.current = node.ownerDocument;
+    }
+  }, []);
+  const ownRef = React.useRef(null);
+  const ref = useComposedRefs(forwardedRef, ownRef, setOwnerDocumentFromRef);
+  const [region, setRegion] = React.useState();
+  const relevant = ariaRelevant ? Array.isArray(ariaRelevant) ? ariaRelevant.join(" ") : ariaRelevant : void 0;
+  const getLiveRegionElement = React.useCallback(() => {
+    const ownerDocument = ownerDocumentRef.current;
+    const regionConfig = { type, role, relevant, id: regionIdentifier, atomic: ariaAtomic };
+    const regionSelector = buildSelector(regionConfig);
+    const element = ownerDocument.querySelector(regionSelector);
+    return element || buildLiveRegionElement(ownerDocument, regionConfig);
+  }, [ariaAtomic, relevant, role, type, regionIdentifier]);
+  useLayoutEffect(() => {
+    setRegion(getLiveRegionElement());
+  }, [getLiveRegionElement]);
+  React.useEffect(() => {
+    const ownerDocument = ownerDocumentRef.current;
+    function updateAttributesOnVisibilityChange() {
+      regionElement.setAttribute("role", ownerDocument.hidden ? "none" : role);
+      regionElement.setAttribute("aria-live", ownerDocument.hidden ? "off" : type);
+    }
+    const regionElement = getLiveRegionElement();
+    if (!listenerMap.get(regionElement)) {
+      ownerDocument.addEventListener("visibilitychange", updateAttributesOnVisibilityChange);
+      listenerMap.set(regionElement, 1);
+    } else {
+      const announceCount = listenerMap.get(regionElement);
+      listenerMap.set(regionElement, announceCount + 1);
+    }
+    return function() {
+      const announceCount = listenerMap.get(regionElement);
+      listenerMap.set(regionElement, announceCount - 1);
+      if (announceCount === 1) {
+        ownerDocument.removeEventListener("visibilitychange", updateAttributesOnVisibilityChange);
+      }
+    };
+  }, [getLiveRegionElement, role, type]);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Primitive.div, { ...regionProps, ref, children }),
+    region && ReactDOM.createPortal(/* @__PURE__ */ jsx("div", { children }), region)
+  ] });
+});
+Announce.displayName = NAME;
+function buildLiveRegionElement(ownerDocument, { type, relevant, role, atomic, id }) {
+  const element = ownerDocument.createElement("div");
+  element.setAttribute(getLiveRegionPartDataAttr(id), "");
+  element.setAttribute(
+    "style",
+    "position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;"
+  );
+  ownerDocument.body.appendChild(element);
+  element.setAttribute("aria-live", type);
+  element.setAttribute("aria-atomic", String(atomic || false));
+  element.setAttribute("role", role);
+  if (relevant) {
+    element.setAttribute("aria-relevant", relevant);
+  }
+  return element;
+}
+function buildSelector({ type, relevant, role, atomic, id }) {
+  return `[${getLiveRegionPartDataAttr(id)}]${[
+    ["aria-live", type],
+    ["aria-atomic", atomic],
+    ["aria-relevant", relevant],
+    ["role", role]
+  ].filter(([, val]) => !!val).map(([attr, val]) => `[${attr}=${val}]`).join("")}`;
+}
+function getLiveRegionPartDataAttr(id) {
+  return "data-huin-core-announce-region" + (id ? `-${id}` : "");
+}
+var Root = Announce;
+export {
+  Announce,
+  Root
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Announce.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useComposedRefs } from '@huin-core/react-compose-refs';\nimport { Primitive } from '@huin-core/react-primitive';\nimport { useLayoutEffect } from '@huin-core/react-use-layout-effect';\n\ntype RegionType = 'polite' | 'assertive' | 'off';\ntype RegionRole = 'status' | 'alert' | 'log' | 'none';\n\nconst ROLES: { [key in RegionType]: RegionRole } = {\n  polite: 'status',\n  assertive: 'alert',\n  off: 'none',\n};\n\nconst listenerMap = new Map<Element, number>();\n\n/* -------------------------------------------------------------------------------------------------\n * Announce\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Announce';\n\ntype AnnounceElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface AnnounceProps extends PrimitiveDivProps {\n  /**\n   * Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that\n   * indicates whether assistive technologies will present all, or only parts of, the changed region\n   * based on the change notifications defined by the `aria-relevant` attribute.\n   *\n   * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-atomic\n   * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html\n   */\n  'aria-atomic'?: boolean;\n  /**\n   * Mirrors the `aria-relevant` DOM attribute for live regions. It is an optional attribute used to\n   * describe what types of changes have occurred to the region, and which changes are relevant and\n   * should be announced. Any change that is not relevant acts in the same manner it would if the\n   * `aria-live` attribute were set to off.\n   *\n   * Unfortunately, `aria-relevant` doesn't behave as expected across all device/screen reader\n   * combinations. It's important to test its implementation before relying on it to work for your\n   * users. The attribute is omitted by default.\n   *\n   * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-relevant\n   * @see MDN      https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute\n   * @see Opinion  https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3\n   * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html\n   */\n  'aria-relevant'?: PrimitiveDivProps['aria-relevant'];\n  /**\n   * React children of your component. Children can be mirrored directly or modified to optimize for\n   * screen reader user experience.\n   */\n  children: React.ReactNode;\n  /**\n   * An optional unique identifier for the live region.\n   *\n   * By default, `Announce` components create, at most, two unique `aria-live` regions in the\n   * document (one for all `polite` notifications, one for all `assertive` notifications). In some\n   * cases you may wish to append additional `aria-live` regions for distinct purposes (for example,\n   * simple status updates may need to be separated from a stack of toast-style notifications). By\n   * passing an id, you indicate that any content rendered by components with the same identifier\n   * should be mirrored in a separate `aria-live` region.\n   */\n  regionIdentifier?: string;\n  /**\n   * Mirrors the `role` DOM attribute. This is optional and may be useful as an override in some\n   * cases. By default, the role is determined by the `type` prop.\n   *\n   * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n   */\n  role?: RegionRole;\n  /**\n   * Mirrors the `aria-live` DOM attribute. The `aria-live=POLITENESS_SETTING` is used to set the\n   * priority with which screen reader should treat updates to live regions. Its possible settings\n   * are: off, polite or assertive. Defaults to `polite`.\n   *\n   * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n   */\n  type?: RegionType;\n}\n\nconst Announce = React.forwardRef<AnnounceElement, AnnounceProps>((props, forwardedRef) => {\n  const {\n    'aria-relevant': ariaRelevant,\n    children,\n    type = 'polite',\n    role = ROLES[type],\n    regionIdentifier,\n    ...regionProps\n  } = props;\n\n  const ariaAtomic = ['true', true].includes(regionProps['aria-atomic'] as any);\n\n  // The region is appended to the root document node, which is usually the global `document` but in\n  // some contexts may be another node. After the Announce element ref is attached, we set the\n  // ownerDocumentRef to make sure we have the right root node. We should only need to do this once.\n  const ownerDocumentRef = React.useRef(document);\n  const setOwnerDocumentFromRef = React.useCallback((node: HTMLDivElement) => {\n    if (node) {\n      ownerDocumentRef.current = node.ownerDocument;\n    }\n  }, []);\n  const ownRef = React.useRef<HTMLDivElement | null>(null);\n  const ref = useComposedRefs(forwardedRef, ownRef, setOwnerDocumentFromRef);\n\n  const [region, setRegion] = React.useState<HTMLElement>();\n  const relevant = ariaRelevant\n    ? Array.isArray(ariaRelevant)\n      ? ariaRelevant.join(' ')\n      : ariaRelevant\n    : undefined;\n\n  const getLiveRegionElement = React.useCallback(() => {\n    const ownerDocument = ownerDocumentRef.current;\n    const regionConfig = { type, role, relevant, id: regionIdentifier, atomic: ariaAtomic };\n    const regionSelector = buildSelector(regionConfig);\n    const element = ownerDocument.querySelector(regionSelector);\n\n    return element || buildLiveRegionElement(ownerDocument, regionConfig);\n  }, [ariaAtomic, relevant, role, type, regionIdentifier]);\n\n  useLayoutEffect(() => {\n    setRegion(getLiveRegionElement() as HTMLElement);\n  }, [getLiveRegionElement]);\n\n  // In some screen reader/browser combinations, alerts coming from an inactive browser tab may be\n  // announced, which is a confusing experience for a user interacting with a completely different\n  // page. When the page visibility changes we'll update the `role` and `aria-live` attributes of\n  // our region element to prevent that.\n  // https://inclusive-components.design/notifications/#restrictingmessagestocontexts\n  React.useEffect(() => {\n    const ownerDocument = ownerDocumentRef.current;\n    function updateAttributesOnVisibilityChange() {\n      regionElement.setAttribute('role', ownerDocument.hidden ? 'none' : role);\n      regionElement.setAttribute('aria-live', ownerDocument.hidden ? 'off' : type);\n    }\n\n    // Ok, so this might look a little weird and confusing, but here's what's going on:\n    //   - We need to hide `aria-live` regions via a global event listener, as noted in the comment\n    //     above.\n    //   - We only need one listener per region. Keep in mind that each `Announce` does not\n    //     necessarily generate a unique live region element.\n    //   - We track whether or not a listener has already been attached for a given region in a map\n    //     so we can skip these effects after `Announce` is used again with a shared live region.\n    const regionElement = getLiveRegionElement();\n\n    if (!listenerMap.get(regionElement)) {\n      ownerDocument.addEventListener('visibilitychange', updateAttributesOnVisibilityChange);\n      listenerMap.set(regionElement, 1);\n    } else {\n      const announceCount = listenerMap.get(regionElement)!;\n      listenerMap.set(regionElement, announceCount + 1);\n    }\n\n    return function () {\n      const announceCount = listenerMap.get(regionElement)!;\n      listenerMap.set(regionElement, announceCount - 1);\n      if (announceCount === 1) {\n        ownerDocument.removeEventListener('visibilitychange', updateAttributesOnVisibilityChange);\n      }\n    };\n  }, [getLiveRegionElement, role, type]);\n\n  return (\n    <React.Fragment>\n      <Primitive.div {...regionProps} ref={ref}>\n        {children}\n      </Primitive.div>\n\n      {/* portal into live region for screen reader announcements */}\n      {region && ReactDOM.createPortal(<div>{children}</div>, region)}\n    </React.Fragment>\n  );\n});\n\nAnnounce.displayName = NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype LiveRegionOptions = {\n  type: string;\n  relevant?: string;\n  role: string;\n  atomic?: boolean;\n  id?: string;\n};\n\nfunction buildLiveRegionElement(\n  ownerDocument: Document,\n  { type, relevant, role, atomic, id }: LiveRegionOptions\n) {\n  const element = ownerDocument.createElement('div');\n  element.setAttribute(getLiveRegionPartDataAttr(id), '');\n  element.setAttribute(\n    'style',\n    'position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;'\n  );\n  ownerDocument.body.appendChild(element);\n\n  element.setAttribute('aria-live', type);\n  element.setAttribute('aria-atomic', String(atomic || false));\n  element.setAttribute('role', role);\n  if (relevant) {\n    element.setAttribute('aria-relevant', relevant);\n  }\n\n  return element;\n}\n\nfunction buildSelector({ type, relevant, role, atomic, id }: LiveRegionOptions) {\n  return `[${getLiveRegionPartDataAttr(id)}]${[\n    ['aria-live', type],\n    ['aria-atomic', atomic],\n    ['aria-relevant', relevant],\n    ['role', role],\n  ]\n    .filter(([, val]) => !!val)\n    .map(([attr, val]) => `[${attr}=${val}]`)\n    .join('')}`;\n}\n\nfunction getLiveRegionPartDataAttr(id?: string) {\n  return 'data-huin-core-announce-region' + (id ? `-${id}` : '');\n}\n\nconst Root = Announce;\n\nexport {\n  Announce,\n  //\n  Root,\n};\nexport type { AnnounceProps };\n"],
+  "mappings": ";;;AAAA,YAAY,WAAW;AACvB,OAAO,cAAc;AACrB,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAmK5B,SACE,KADF;AA9JJ,IAAM,QAA6C;AAAA,EACjD,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,KAAK;AACP;AAEA,IAAM,cAAc,oBAAI,IAAqB;AAM7C,IAAM,OAAO;AA+Db,IAAM,WAAiB,iBAA2C,CAAC,OAAO,iBAAiB;AACzF,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,IACP,OAAO,MAAM,IAAI;AAAA,IACjB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,aAAa,CAAC,QAAQ,IAAI,EAAE,SAAS,YAAY,aAAa,CAAQ;AAK5E,QAAM,mBAAyB,aAAO,QAAQ;AAC9C,QAAM,0BAAgC,kBAAY,CAAC,SAAyB;AAC1E,QAAI,MAAM;AACR,uBAAiB,UAAU,KAAK;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,SAAe,aAA8B,IAAI;AACvD,QAAM,MAAM,gBAAgB,cAAc,QAAQ,uBAAuB;AAEzE,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAsB;AACxD,QAAM,WAAW,eACb,MAAM,QAAQ,YAAY,IACxB,aAAa,KAAK,GAAG,IACrB,eACF;AAEJ,QAAM,uBAA6B,kBAAY,MAAM;AACnD,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,eAAe,EAAE,MAAM,MAAM,UAAU,IAAI,kBAAkB,QAAQ,WAAW;AACtF,UAAM,iBAAiB,cAAc,YAAY;AACjD,UAAM,UAAU,cAAc,cAAc,cAAc;AAE1D,WAAO,WAAW,uBAAuB,eAAe,YAAY;AAAA,EACtE,GAAG,CAAC,YAAY,UAAU,MAAM,MAAM,gBAAgB,CAAC;AAEvD,kBAAgB,MAAM;AACpB,cAAU,qBAAqB,CAAgB;AAAA,EACjD,GAAG,CAAC,oBAAoB,CAAC;AAOzB,EAAM,gBAAU,MAAM;AACpB,UAAM,gBAAgB,iBAAiB;AACvC,aAAS,qCAAqC;AAC5C,oBAAc,aAAa,QAAQ,cAAc,SAAS,SAAS,IAAI;AACvE,oBAAc,aAAa,aAAa,cAAc,SAAS,QAAQ,IAAI;AAAA,IAC7E;AASA,UAAM,gBAAgB,qBAAqB;AAE3C,QAAI,CAAC,YAAY,IAAI,aAAa,GAAG;AACnC,oBAAc,iBAAiB,oBAAoB,kCAAkC;AACrF,kBAAY,IAAI,eAAe,CAAC;AAAA,IAClC,OAAO;AACL,YAAM,gBAAgB,YAAY,IAAI,aAAa;AACnD,kBAAY,IAAI,eAAe,gBAAgB,CAAC;AAAA,IAClD;AAEA,WAAO,WAAY;AACjB,YAAM,gBAAgB,YAAY,IAAI,aAAa;AACnD,kBAAY,IAAI,eAAe,gBAAgB,CAAC;AAChD,UAAI,kBAAkB,GAAG;AACvB,sBAAc,oBAAoB,oBAAoB,kCAAkC;AAAA,MAC1F;AAAA,IACF;AAAA,EACF,GAAG,CAAC,sBAAsB,MAAM,IAAI,CAAC;AAErC,SACE,qBAAO,gBAAN,EACC;AAAA,wBAAC,UAAU,KAAV,EAAe,GAAG,aAAa,KAC7B,UACH;AAAA,IAGC,UAAU,SAAS,aAAa,oBAAC,SAAK,UAAS,GAAQ,MAAM;AAAA,KAChE;AAEJ,CAAC;AAED,SAAS,cAAc;AAYvB,SAAS,uBACP,eACA,EAAE,MAAM,UAAU,MAAM,QAAQ,GAAG,GACnC;AACA,QAAM,UAAU,cAAc,cAAc,KAAK;AACjD,UAAQ,aAAa,0BAA0B,EAAE,GAAG,EAAE;AACtD,UAAQ;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACA,gBAAc,KAAK,YAAY,OAAO;AAEtC,UAAQ,aAAa,aAAa,IAAI;AACtC,UAAQ,aAAa,eAAe,OAAO,UAAU,KAAK,CAAC;AAC3D,UAAQ,aAAa,QAAQ,IAAI;AACjC,MAAI,UAAU;AACZ,YAAQ,aAAa,iBAAiB,QAAQ;AAAA,EAChD;AAEA,SAAO;AACT;AAEA,SAAS,cAAc,EAAE,MAAM,UAAU,MAAM,QAAQ,GAAG,GAAsB;AAC9E,SAAO,IAAI,0BAA0B,EAAE,CAAC,IAAI;AAAA,IAC1C,CAAC,aAAa,IAAI;AAAA,IAClB,CAAC,eAAe,MAAM;AAAA,IACtB,CAAC,iBAAiB,QAAQ;AAAA,IAC1B,CAAC,QAAQ,IAAI;AAAA,EACf,EACG,OAAO,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,EACzB,IAAI,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,IAAI,GAAG,GAAG,EACvC,KAAK,EAAE,CAAC;AACb;AAEA,SAAS,0BAA0B,IAAa;AAC9C,SAAO,oCAAoC,KAAK,IAAI,EAAE,KAAK;AAC7D;AAEA,IAAM,OAAO;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huin-core/react-announce",
-  "version": "0.2.1",
+  "version": "1.0.3",
   "license": "MIT",
   "exports": {
     ".": {
@@ -28,9 +28,9 @@
     "version": "yarn version"
   },
   "dependencies": {
-    "@huin-core/react-compose-refs": "workspace:*",
-    "@huin-core/react-primitive": "workspace:*",
-    "@huin-core/react-use-layout-effect": "workspace:*"
+    "@huin-core/react-compose-refs": "latest",
+    "@huin-core/react-primitive": "latest",
+    "@huin-core/react-use-layout-effect": "latest"
   },
   "peerDependencies": {
     "@types/react": "*",