@cloudscape-design/components 3.0.799 → 3.0.801

package/internal/components/chart-plot/index.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useInternalI18n } from '../../../i18n/context';
 import { useUniqueId } from '../../hooks/use-unique-id';
 import { KeyCode } from '../../keycode';
-import LiveRegion from '../live-region/index';
+import InternalLiveRegion from '../live-region/internal';
 import ApplicationController from './application-controller';
 import FocusOutline from './focus-outline';
 import styles from './styles.css.js';
@@ -108,6 +108,6 @@ function ChartPlot({ width, height, transform, offsetTop, offsetBottom, offsetLe
                 ariaDescription && plotFocusable && (React.createElement("desc", { "aria-hidden": "true", id: internalDescriptionId }, ariaDescription)),
                 children,
                 React.createElement(FocusOutline, { elementRef: activeElementRef, elementKey: isApplicationFocused && activeElementKey, offset: activeElementFocusOffset }))),
-        React.createElement(LiveRegion, null, ariaLiveRegion)));
+        React.createElement(InternalLiveRegion, { hidden: true, tagName: "span" }, ariaLiveRegion)));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/chart-plot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { KeyCode } from '../../keycode';\nimport { Offset } from '../interfaces';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\n\nimport styles from './styles.css.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number | string;\n  height: number | string;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: string;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onApplicationFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onApplicationBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onClick,\n    onKeyDown,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    onMouseMove,\n    onMouseOut,\n    onApplicationBlur,\n    onApplicationFocus,\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = () => {\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    // If focused via click or an element was highlighted,\n    // focus the internal application, which will manage and show focus accordingly on its internal elements.\n    if (plotClickedRef.current || !!activeElementKey) {\n      applicationRef.current!.focus();\n    } else if (event.target === svgRef.current) {\n      // Otherwise, focus the entire plot if it was focused with the keyboard.\n      setPlotFocused(true);\n    }\n  };\n  const onPlotClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onClick && onClick(event);\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onPlotApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onApplicationFocus && onApplicationFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onPlotApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onApplicationBlur && onApplicationBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        onMouseMove={onMouseMove}\n        onMouseOut={onMouseOut}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        style={{\n          width,\n          height,\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onClick={onPlotClick}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={(isApplicationFocused && activeElementKey) || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onPlotApplicationFocus}\n            onBlur={onPlotApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { KeyCode } from '../../keycode';\nimport { Offset } from '../interfaces';\nimport InternalLiveRegion from '../live-region/internal';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\n\nimport styles from './styles.css.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number | string;\n  height: number | string;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: string;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onApplicationFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onApplicationBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onClick,\n    onKeyDown,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    onMouseMove,\n    onMouseOut,\n    onApplicationBlur,\n    onApplicationFocus,\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = () => {\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    // If focused via click or an element was highlighted,\n    // focus the internal application, which will manage and show focus accordingly on its internal elements.\n    if (plotClickedRef.current || !!activeElementKey) {\n      applicationRef.current!.focus();\n    } else if (event.target === svgRef.current) {\n      // Otherwise, focus the entire plot if it was focused with the keyboard.\n      setPlotFocused(true);\n    }\n  };\n  const onPlotClick = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onClick && onClick(event);\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onPlotApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onApplicationFocus && onApplicationFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onPlotApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onApplicationBlur && onApplicationBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        onMouseMove={onMouseMove}\n        onMouseOut={onMouseOut}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        style={{\n          width,\n          height,\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onClick={onPlotClick}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={(isApplicationFocused && activeElementKey) || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onPlotApplicationFocus}\n            onBlur={onPlotApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <InternalLiveRegion hidden={true} tagName=\"span\">\n        {ariaLiveRegion}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}

package/internal/components/chart-status-container/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAIjF,UAAU,yBAA0B,SAAQ,kBAAkB;IAC5D,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAG5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,EACnC,YAAY,EACZ,WAAW,EACX,UAAU,GACX,EAAE;IACD,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC9B,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;CAC9C;;;;EAKA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,eAwC3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAKjF,UAAU,yBAA0B,SAAQ,kBAAkB;IAC5D,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAG5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,EACnC,YAAY,EACZ,WAAW,EACX,UAAU,GACX,EAAE;IACD,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC9B,UAAU,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;CAC9C;;;;EAKA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,eAwC3B"}

package/internal/components/chart-status-container/index.js

@@ -5,6 +5,7 @@ import { useInternalI18n } from '../../../i18n/context';
 import InternalLink from '../../../link/internal';
 import InternalStatusIndicator from '../../../status-indicator/internal';
 import { fireNonCancelableEvent } from '../../events';
+import InternalLiveRegion from '../live-region/internal';
 import styles from './styles.css.js';
 export function getChartStatus({ externalData, visibleData, statusType, }) {
     const isEmpty = !visibleData || visibleData.length === 0;
@@ -36,6 +37,7 @@ export default function ChartStatusContainer({ statusType, errorText, loadingTex
             return React.createElement("div", { className: styles.empty }, empty);
         }
     }, [i18n, statusType, onRecoveryClick, isEmpty, isNoMatch, recoveryText, loadingText, errorText, empty, noMatch]);
-    return (React.createElement("div", { className: styles.root, "aria-live": "polite", "aria-atomic": "true" }, !showChart && statusContainer));
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(InternalLiveRegion, null, !showChart && statusContainer)));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/chart-status-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AAEjF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,MAAM,UAAU,cAAc,CAAO,EACnC,YAAY,EACZ,WAAW,EACX,UAAU,GAKX;IACC,MAAM,OAAO,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,CAAC;IACxE,MAAM,SAAS,GAAG,UAAU,KAAK,UAAU,IAAI,CAAC,OAAO,CAAC;IACxD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,GACiB;IAC1B,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,mBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,sBAAsB,CAAC,eAAe,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAChE,OAAO,CACL;gBACE,oBAAC,uBAAuB,IAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAA2B;gBAAC,GAAG;gBACjG,CAAC,CAAC,oBAAoB,IAAI,CAAC,CAAC,eAAe,IAAI,CAC9C,oBAAC,YAAY,IAAC,QAAQ,EAAE,mBAAmB,EAAE,OAAO,EAAC,UAAU,IAC5D,oBAAoB,CACR,CAChB,CACI,CACR,CAAC;SACH;QAED,IAAI,UAAU,KAAK,SAAS,EAAE;YAC5B,OAAO,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAA2B,CAAC;SAC7G;QAED,IAAI,SAAS,EAAE;YACb,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,OAAO,CAAO,CAAC;SACtD;QAED,IAAI,OAAO,EAAE;YACX,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAElH,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,eAAY,QAAQ,iBAAa,MAAM,IAC/D,CAAC,SAAS,IAAI,eAAe,CAC1B,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport InternalLink from '../../../link/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { BaseComponentProps } from '../../base-component';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\n\nimport styles from './styles.css.js';\n\ninterface ChartStatusContainerProps extends BaseComponentProps {\n  statusType: 'loading' | 'finished' | 'error';\n\n  empty?: React.ReactNode;\n  noMatch?: React.ReactNode;\n\n  loadingText?: string;\n  errorText?: string;\n  recoveryText?: string;\n\n  onRecoveryClick?: NonCancelableEventHandler;\n\n  // From `getChartStatus`\n  isEmpty?: boolean;\n  isNoMatch?: boolean;\n  showChart?: boolean;\n}\n\nexport function getChartStatus<T, U>({\n  externalData,\n  visibleData,\n  statusType,\n}: {\n  externalData: ReadonlyArray<T>;\n  visibleData: ReadonlyArray<U>;\n  statusType: 'loading' | 'finished' | 'error';\n}) {\n  const isEmpty = !visibleData || visibleData.length === 0;\n  const isNoMatch = isEmpty && visibleData.length !== externalData.length;\n  const showChart = statusType === 'finished' && !isEmpty;\n  return { isEmpty, isNoMatch, showChart };\n}\n\nexport default function ChartStatusContainer({\n  statusType,\n  errorText,\n  loadingText,\n  recoveryText,\n  noMatch,\n  empty,\n  onRecoveryClick,\n  isNoMatch,\n  isEmpty,\n  showChart,\n}: ChartStatusContainerProps) {\n  const i18n = useInternalI18n('[charts]');\n\n  const statusContainer = useMemo(() => {\n    const handleRecoveryClick = (event: CustomEvent) => {\n      event.preventDefault();\n      fireNonCancelableEvent(onRecoveryClick);\n    };\n    if (statusType === 'error') {\n      const renderedRecoveryText = i18n('recoveryText', recoveryText);\n      return (\n        <span>\n          <InternalStatusIndicator type=\"error\">{i18n('errorText', errorText)}</InternalStatusIndicator>{' '}\n          {!!renderedRecoveryText && !!onRecoveryClick && (\n            <InternalLink onFollow={handleRecoveryClick} variant=\"recovery\">\n              {renderedRecoveryText}\n            </InternalLink>\n          )}\n        </span>\n      );\n    }\n\n    if (statusType === 'loading') {\n      return <InternalStatusIndicator type=\"loading\">{i18n('loadingText', loadingText)}</InternalStatusIndicator>;\n    }\n\n    if (isNoMatch) {\n      return <div className={styles.empty}>{noMatch}</div>;\n    }\n\n    if (isEmpty) {\n      return <div className={styles.empty}>{empty}</div>;\n    }\n  }, [i18n, statusType, onRecoveryClick, isEmpty, isNoMatch, recoveryText, loadingText, errorText, empty, noMatch]);\n\n  return (\n    <div className={styles.root} aria-live=\"polite\" aria-atomic=\"true\">\n      {!showChart && statusContainer}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-status-container/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAA6B,MAAM,cAAc,CAAC;AACjF,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,MAAM,UAAU,cAAc,CAAO,EACnC,YAAY,EACZ,WAAW,EACX,UAAU,GAKX;IACC,MAAM,OAAO,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,OAAO,IAAI,WAAW,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,CAAC;IACxE,MAAM,SAAS,GAAG,UAAU,KAAK,UAAU,IAAI,CAAC,OAAO,CAAC;IACxD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAC3C,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,SAAS,GACiB;IAC1B,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,mBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,sBAAsB,CAAC,eAAe,CAAC,CAAC;QAC1C,CAAC,CAAC;QACF,IAAI,UAAU,KAAK,OAAO,EAAE;YAC1B,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAChE,OAAO,CACL;gBACE,oBAAC,uBAAuB,IAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAA2B;gBAAC,GAAG;gBACjG,CAAC,CAAC,oBAAoB,IAAI,CAAC,CAAC,eAAe,IAAI,CAC9C,oBAAC,YAAY,IAAC,QAAQ,EAAE,mBAAmB,EAAE,OAAO,EAAC,UAAU,IAC5D,oBAAoB,CACR,CAChB,CACI,CACR,CAAC;SACH;QAED,IAAI,UAAU,KAAK,SAAS,EAAE;YAC5B,OAAO,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAA2B,CAAC;SAC7G;QAED,IAAI,SAAS,EAAE;YACb,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,OAAO,CAAO,CAAC;SACtD;QAED,IAAI,OAAO,EAAE;YACX,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAO,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAElH,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,oBAAC,kBAAkB,QAAE,CAAC,SAAS,IAAI,eAAe,CAAsB,CACpE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\n\nimport { useInternalI18n } from '../../../i18n/context';\nimport InternalLink from '../../../link/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport { BaseComponentProps } from '../../base-component';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport InternalLiveRegion from '../live-region/internal';\n\nimport styles from './styles.css.js';\n\ninterface ChartStatusContainerProps extends BaseComponentProps {\n  statusType: 'loading' | 'finished' | 'error';\n\n  empty?: React.ReactNode;\n  noMatch?: React.ReactNode;\n\n  loadingText?: string;\n  errorText?: string;\n  recoveryText?: string;\n\n  onRecoveryClick?: NonCancelableEventHandler;\n\n  // From `getChartStatus`\n  isEmpty?: boolean;\n  isNoMatch?: boolean;\n  showChart?: boolean;\n}\n\nexport function getChartStatus<T, U>({\n  externalData,\n  visibleData,\n  statusType,\n}: {\n  externalData: ReadonlyArray<T>;\n  visibleData: ReadonlyArray<U>;\n  statusType: 'loading' | 'finished' | 'error';\n}) {\n  const isEmpty = !visibleData || visibleData.length === 0;\n  const isNoMatch = isEmpty && visibleData.length !== externalData.length;\n  const showChart = statusType === 'finished' && !isEmpty;\n  return { isEmpty, isNoMatch, showChart };\n}\n\nexport default function ChartStatusContainer({\n  statusType,\n  errorText,\n  loadingText,\n  recoveryText,\n  noMatch,\n  empty,\n  onRecoveryClick,\n  isNoMatch,\n  isEmpty,\n  showChart,\n}: ChartStatusContainerProps) {\n  const i18n = useInternalI18n('[charts]');\n\n  const statusContainer = useMemo(() => {\n    const handleRecoveryClick = (event: CustomEvent) => {\n      event.preventDefault();\n      fireNonCancelableEvent(onRecoveryClick);\n    };\n    if (statusType === 'error') {\n      const renderedRecoveryText = i18n('recoveryText', recoveryText);\n      return (\n        <span>\n          <InternalStatusIndicator type=\"error\">{i18n('errorText', errorText)}</InternalStatusIndicator>{' '}\n          {!!renderedRecoveryText && !!onRecoveryClick && (\n            <InternalLink onFollow={handleRecoveryClick} variant=\"recovery\">\n              {renderedRecoveryText}\n            </InternalLink>\n          )}\n        </span>\n      );\n    }\n\n    if (statusType === 'loading') {\n      return <InternalStatusIndicator type=\"loading\">{i18n('loadingText', loadingText)}</InternalStatusIndicator>;\n    }\n\n    if (isNoMatch) {\n      return <div className={styles.empty}>{noMatch}</div>;\n    }\n\n    if (isEmpty) {\n      return <div className={styles.empty}>{empty}</div>;\n    }\n  }, [i18n, statusType, onRecoveryClick, isEmpty, isNoMatch, recoveryText, loadingText, errorText, empty, noMatch]);\n\n  return (\n    <div className={styles.root}>\n      <InternalLiveRegion>{!showChart && statusContainer}</InternalLiveRegion>\n    </div>\n  );\n}\n"]}

package/internal/components/dropdown-footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM5C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAI5C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/internal/components/dropdown-footer/index.js

@@ -3,9 +3,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import DropdownStatus from '../dropdown-status/index.js';
-import LiveRegion from '../live-region/index.js';
+import InternalLiveRegion from '../live-region/internal';
 import styles from './styles.css.js';
 const DropdownFooter = ({ content, id, hasItems = true }) => (React.createElement("div", { className: clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems }) },
-    React.createElement(LiveRegion, { visible: true, tagName: "div", id: id }, content && React.createElement(DropdownStatus, null, content))));
+    React.createElement(InternalLiveRegion, { id: id }, content && React.createElement(DropdownStatus, null, content))));
 export default DropdownFooter;
 //# sourceMappingURL=index.js.map

package/internal/components/dropdown-footer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAEjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,cAAc,GAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,GAAG,IAAI,EAAkB,EAAE,EAAE,CAAC,CACrG,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACvG,oBAAC,UAAU,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,IAC5C,OAAO,IAAI,oBAAC,cAAc,QAAE,OAAO,CAAkB,CAC3C,CACT,CACP,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DropdownStatus from '../dropdown-status/index.js';\nimport LiveRegion from '../live-region/index.js';\n\nimport styles from './styles.css.js';\n\ninterface DropdownFooter {\n  content?: React.ReactNode | null;\n  hasItems?: boolean;\n  id?: string;\n}\n\nconst DropdownFooter: React.FC<DropdownFooter> = ({ content, id, hasItems = true }: DropdownFooter) => (\n  <div className={clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems })}>\n    <LiveRegion visible={true} tagName=\"div\" id={id}>\n      {content && <DropdownStatus>{content}</DropdownStatus>}\n    </LiveRegion>\n  </div>\n);\n\nexport default DropdownFooter;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown-footer/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,cAAc,GAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,GAAG,IAAI,EAAkB,EAAE,EAAE,CAAC,CACrG,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACvG,oBAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,IAAG,OAAO,IAAI,oBAAC,cAAc,QAAE,OAAO,CAAkB,CAAsB,CACpG,CACP,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport DropdownStatus from '../dropdown-status/index.js';\nimport InternalLiveRegion from '../live-region/internal';\n\nimport styles from './styles.css.js';\n\ninterface DropdownFooter {\n  content?: React.ReactNode | null;\n  hasItems?: boolean;\n  id?: string;\n}\n\nconst DropdownFooter: React.FC<DropdownFooter> = ({ content, id, hasItems = true }: DropdownFooter) => (\n  <div className={clsx(styles.root, { [styles.hidden]: content === null, [styles['no-items']]: !hasItems })}>\n    <InternalLiveRegion id={id}>{content && <DropdownStatus>{content}</DropdownStatus>}</InternalLiveRegion>\n  </div>\n);\n\nexport default DropdownFooter;\n"]}

package/internal/components/live-region/controller.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The controller that manages a single live region container. It has a timer
+ * to make sure announcements are throttled correctly. It can also make sure
+ * that a message is announced again even if it matches the previous content
+ * of the live region.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ */
+export declare class LiveRegionController {
+    readonly politeness: 'polite' | 'assertive';
+    readonly delay: number;
+    /**
+     * The default delay for announcements when no delay is explicitly provided.
+     * During internal unit testing, you can import this and explicitly set it to
+     * 0 to make the live region update the DOM without waiting for a timer.
+     */
+    static defaultDelay: number;
+    private _element;
+    private _timeoutId;
+    private _lastAnnouncement;
+    private _addedTerminalPeriod;
+    private _nextAnnouncement;
+    constructor(politeness: 'polite' | 'assertive', delay?: number);
+    /**
+     * Reset the state of the controller and clear any active announcements.
+     */
+    destroy(): void;
+    announce({ message, forceReannounce }: {
+        message?: string;
+        delay?: number;
+        forceReannounce?: boolean;
+    }): void;
+    private _updateElement;
+}
+//# sourceMappingURL=controller.d.ts.map

package/internal/components/live-region/controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/controller.ts"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,qBAAa,oBAAoB;aAeb,UAAU,EAAE,QAAQ,GAAG,WAAW;aAClC,KAAK;IAfvB;;;;OAIG;IACH,OAAc,YAAY,SAAK;IAE/B,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,iBAAiB,CAAM;gBAGb,UAAU,EAAE,QAAQ,GAAG,WAAW,EAClC,KAAK,SAAoC;IAU3D;;OAEG;IACH,OAAO;IAQP,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAuB,EAAE,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE;IAkB9G,OAAO,CAAC,cAAc;CAqBvB"}

package/internal/components/live-region/controller.js

@@ -0,0 +1,77 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import styles from './styles.css.js';
+/**
+ * The controller that manages a single live region container. It has a timer
+ * to make sure announcements are throttled correctly. It can also make sure
+ * that a message is announced again even if it matches the previous content
+ * of the live region.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ */
+export class LiveRegionController {
+    constructor(politeness, delay = LiveRegionController.defaultDelay) {
+        this.politeness = politeness;
+        this.delay = delay;
+        this._addedTerminalPeriod = false;
+        this._nextAnnouncement = '';
+        this._element = document.createElement('div');
+        this._element.className = styles.announcer;
+        this._element.setAttribute('aria-live', this.politeness);
+        this._element.setAttribute('aria-atomic', 'true');
+        this._element.setAttribute('data-awsui-live-announcer', 'true');
+        document.body.appendChild(this._element);
+    }
+    /**
+     * Reset the state of the controller and clear any active announcements.
+     */
+    destroy() {
+        var _a;
+        (_a = this._element) === null || _a === void 0 ? void 0 : _a.remove();
+        if (this._timeoutId !== undefined) {
+            clearTimeout(this._timeoutId);
+            this._timeoutId = undefined;
+        }
+    }
+    announce({ message, forceReannounce = false }) {
+        if (!message) {
+            return;
+        }
+        this._nextAnnouncement = message.trim();
+        if (this.delay === 0 || forceReannounce) {
+            // If the delay is 0, just skip the timeout shenanigans and update the
+            // element synchronously. Great for tests.
+            return this._updateElement(forceReannounce);
+        }
+        if (this._timeoutId === undefined) {
+            this._timeoutId = setTimeout(() => this._updateElement(false), this.delay * 1000);
+        }
+    }
+    _updateElement(forceReannounce) {
+        if (this._nextAnnouncement !== this._lastAnnouncement) {
+            // The aria-atomic does not work properly in Voice Over, causing
+            // certain parts of the content to be ignored. To fix that,
+            // we assign the source text content as a single node.
+            this._element.textContent = this._nextAnnouncement;
+            this._addedTerminalPeriod = false;
+        }
+        else if (forceReannounce) {
+            // A (generally) safe way of forcing re-announcements is toggling the
+            // terminal period. If we only keep adding periods, it's going to be
+            // eventually interpreted as an ellipsis.
+            this._element.textContent = this._nextAnnouncement + (this._addedTerminalPeriod ? '' : '.');
+            this._addedTerminalPeriod = !this._addedTerminalPeriod;
+        }
+        // Track the announced text for deduplication.
+        this._lastAnnouncement = this._nextAnnouncement;
+        // Reset the state for the next announcement.
+        this._timeoutId = undefined;
+    }
+}
+/**
+ * The default delay for announcements when no delay is explicitly provided.
+ * During internal unit testing, you can import this and explicitly set it to
+ * 0 to make the live region update the DOM without waiting for a timer.
+ */
+LiveRegionController.defaultDelay = 2;
+//# sourceMappingURL=controller.js.map

package/internal/components/live-region/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/controller.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;;;;;GAOG;AACH,MAAM,OAAO,oBAAoB;IAc/B,YACkB,UAAkC,EAClC,QAAQ,oBAAoB,CAAC,YAAY;QADzC,eAAU,GAAV,UAAU,CAAwB;QAClC,UAAK,GAAL,KAAK,CAAoC;QALnD,yBAAoB,GAAG,KAAK,CAAC;QAC7B,sBAAiB,GAAG,EAAE,CAAC;QAM7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAC3C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC;QAChE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,OAAO;;QACL,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;SAC7B;IACH,CAAC;IAED,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,GAAG,KAAK,EAAmE;QAC5G,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;QAExC,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,eAAe,EAAE;YACvC,sEAAsE;YACtE,0CAA0C;YAC1C,OAAO,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;SACnF;IACH,CAAC;IAEO,cAAc,CAAC,eAAwB;QAC7C,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,iBAAiB,EAAE;YACrD,gEAAgE;YAChE,2DAA2D;YAC3D,sDAAsD;YACtD,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnD,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACnC;aAAM,IAAI,eAAe,EAAE;YAC1B,qEAAqE;YACrE,oEAAoE;YACpE,yCAAyC;YACzC,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5F,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC;SACxD;QAED,8CAA8C;QAC9C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAEhD,6CAA6C;QAC7C,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;IAC9B,CAAC;;AA1ED;;;;GAIG;AACW,iCAAY,GAAG,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport styles from './styles.css.js';\n\n/**\n * The controller that manages a single live region container. It has a timer\n * to make sure announcements are throttled correctly. It can also make sure\n * that a message is announced again even if it matches the previous content\n * of the live region.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n */\nexport class LiveRegionController {\n  /**\n   * The default delay for announcements when no delay is explicitly provided.\n   * During internal unit testing, you can import this and explicitly set it to\n   * 0 to make the live region update the DOM without waiting for a timer.\n   */\n  public static defaultDelay = 2;\n\n  private _element: HTMLElement;\n  private _timeoutId: number | undefined;\n  private _lastAnnouncement: string | undefined;\n  private _addedTerminalPeriod = false;\n  private _nextAnnouncement = '';\n\n  constructor(\n    public readonly politeness: 'polite' | 'assertive',\n    public readonly delay = LiveRegionController.defaultDelay\n  ) {\n    this._element = document.createElement('div');\n    this._element.className = styles.announcer;\n    this._element.setAttribute('aria-live', this.politeness);\n    this._element.setAttribute('aria-atomic', 'true');\n    this._element.setAttribute('data-awsui-live-announcer', 'true');\n    document.body.appendChild(this._element);\n  }\n\n  /**\n   * Reset the state of the controller and clear any active announcements.\n   */\n  destroy() {\n    this._element?.remove();\n    if (this._timeoutId !== undefined) {\n      clearTimeout(this._timeoutId);\n      this._timeoutId = undefined;\n    }\n  }\n\n  announce({ message, forceReannounce = false }: { message?: string; delay?: number; forceReannounce?: boolean }) {\n    if (!message) {\n      return;\n    }\n\n    this._nextAnnouncement = message.trim();\n\n    if (this.delay === 0 || forceReannounce) {\n      // If the delay is 0, just skip the timeout shenanigans and update the\n      // element synchronously. Great for tests.\n      return this._updateElement(forceReannounce);\n    }\n\n    if (this._timeoutId === undefined) {\n      this._timeoutId = setTimeout(() => this._updateElement(false), this.delay * 1000);\n    }\n  }\n\n  private _updateElement(forceReannounce: boolean) {\n    if (this._nextAnnouncement !== this._lastAnnouncement) {\n      // The aria-atomic does not work properly in Voice Over, causing\n      // certain parts of the content to be ignored. To fix that,\n      // we assign the source text content as a single node.\n      this._element.textContent = this._nextAnnouncement;\n      this._addedTerminalPeriod = false;\n    } else if (forceReannounce) {\n      // A (generally) safe way of forcing re-announcements is toggling the\n      // terminal period. If we only keep adding periods, it's going to be\n      // eventually interpreted as an ellipsis.\n      this._element.textContent = this._nextAnnouncement + (this._addedTerminalPeriod ? '' : '.');\n      this._addedTerminalPeriod = !this._addedTerminalPeriod;\n    }\n\n    // Track the announced text for deduplication.\n    this._lastAnnouncement = this._nextAnnouncement;\n\n    // Reset the state for the next announcement.\n    this._timeoutId = undefined;\n  }\n}\n"]}

package/internal/components/live-region/index.d.ts

@@ -1,65 +1,6 @@
-import React from 'react';
-import { ScreenreaderOnlyProps } from '../screenreader-only';
-export interface LiveRegionProps extends ScreenreaderOnlyProps {
-    assertive?: boolean;
-    delay?: number;
-    visible?: boolean;
-    tagName?: 'span' | 'div';
-    id?: string;
-    /**
-     * Use a list of strings and/or existing DOM elements for building the
-     * announcement text. This avoids rendering separate content just for this
-     * LiveRegion.
-     *
-     * If this property is set, the `children` will be ignored.
-     */
-    source?: Array<string | React.RefObject<HTMLElement> | undefined>;
-}
-/**
- * The live region is hidden in the layout, but visible for screen readers.
- * It's purpose it to announce changes e.g. when custom navigation logic is used.
- *
- * The way live region works differently in different browsers and screen readers and
- * it is recommended to manually test every new implementation.
- *
- * If you notice there are different words being merged together,
- * check if there are text nodes not being wrapped in elements, like:
- * ```
- * <LiveRegion>
- *   {title}
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * To fix, wrap "title" in an element:
- * ```
- * <LiveRegion>
- *   <span>{title}</span>
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * Or create a single text node if possible:
- * ```
- * <LiveRegion>
- *   {`${title} ${details}`}
- * </LiveRegion>
- * ```
- *
- * The live region is always atomic, because non-atomic regions can be treated by screen readers
- * differently and produce unexpected results. To imitate non-atomic announcements simply use
- * multiple live regions:
- * ```
- * <>
- *   <LiveRegion>{title}</LiveRegion>
- *   <LiveRegion><Details /></LiveRegion>
- * </>
- * ```
- *
- * If you place interactive content inside the LiveRegion, the content will still be
- * interactive (e.g. as a tab stop). Consider using the `source` property instead.
- */
-declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
-export default _default;
-declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, id, source, ...restProps }: LiveRegionProps): JSX.Element;
+/// <reference types="react" />
+import { LiveRegionProps } from './interfaces';
+export { LiveRegionProps };
+declare function LiveRegion({ assertive, hidden, tagName, ...restProps }: LiveRegionProps): JSX.Element;
+export default LiveRegion;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/live-region/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CACnE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAClB,SAAiB,EACjB,KAAU,EACV,OAAe,EACf,OAAO,EAAE,OAAgB,EACzB,QAAQ,EACR,EAAE,EACF,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,eAqFjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,MAAc,EAAE,OAAe,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAcxG;AAID,eAAe,UAAU,CAAC"}

package/internal/components/live-region/index.js

@@ -1,128 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { __rest } from "tslib";
-/* eslint-disable @cloudscape-design/prefer-live-region */
-import React, { memo, useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import ScreenreaderOnly from '../screenreader-only';
-import styles from './styles.css.js';
-/**
- * The live region is hidden in the layout, but visible for screen readers.
- * It's purpose it to announce changes e.g. when custom navigation logic is used.
- *
- * The way live region works differently in different browsers and screen readers and
- * it is recommended to manually test every new implementation.
- *
- * If you notice there are different words being merged together,
- * check if there are text nodes not being wrapped in elements, like:
- * ```
- * <LiveRegion>
- *   {title}
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * To fix, wrap "title" in an element:
- * ```
- * <LiveRegion>
- *   <span>{title}</span>
- *   <span><Details /></span>
- * </LiveRegion>
- * ```
- *
- * Or create a single text node if possible:
- * ```
- * <LiveRegion>
- *   {`${title} ${details}`}
- * </LiveRegion>
- * ```
- *
- * The live region is always atomic, because non-atomic regions can be treated by screen readers
- * differently and produce unexpected results. To imitate non-atomic announcements simply use
- * multiple live regions:
- * ```
- * <>
- *   <LiveRegion>{title}</LiveRegion>
- *   <LiveRegion><Details /></LiveRegion>
- * </>
- * ```
- *
- * If you place interactive content inside the LiveRegion, the content will still be
- * interactive (e.g. as a tab stop). Consider using the `source` property instead.
- */
-export default memo(LiveRegion);
+import React from 'react';
+// import useBaseComponent from '../../hooks/use-base-component';
+import { applyDisplayName } from '../../utils/apply-display-name';
+import InternalLiveRegion from './internal';
 function LiveRegion(_a) {
-    var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children, id, source } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children", "id", "source"]);
-    const sourceRef = useRef(null);
-    const targetRef = useRef(null);
-    /*
-      When React state changes, React often produces too many DOM updates, causing NVDA to
-      issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).
-  
-      The code below imitates a debouncing, scheduling a callback every time new React state
-      update is detected. When a callback resolves, it copies content from a muted element
-      to the live region, which is recognized by screen readers as an update.
-  
-      If the use case requires no announcement to be ignored, use delay = 0, but ensure it
-      does not impact the performance. If it does, prefer using a string as children prop.
-    */
-    useEffect(() => {
-        function getSourceContent() {
-            if (source) {
-                return source
-                    .map(item => {
-                    if (!item) {
-                        return undefined;
-                    }
-                    if (typeof item === 'string') {
-                        return item;
-                    }
-                    if (item.current) {
-                        return extractInnerText(item.current);
-                    }
-                })
-                    .filter(Boolean)
-                    .join(' ');
-            }
-            if (sourceRef.current) {
-                return extractInnerText(sourceRef.current);
-            }
-        }
-        function updateLiveRegion() {
-            const sourceContent = getSourceContent();
-            if (targetRef.current && sourceContent) {
-                const targetContent = extractInnerText(targetRef.current);
-                if (targetContent !== sourceContent) {
-                    // The aria-atomic does not work properly in Voice Over, causing
-                    // certain parts of the content to be ignored. To fix that,
-                    // we assign the source text content as a single node.
-                    targetRef.current.innerText = sourceContent;
-                }
-            }
-        }
-        let timeoutId;
-        if (delay) {
-            timeoutId = setTimeout(updateLiveRegion, delay);
-        }
-        else {
-            updateLiveRegion();
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    });
-    return (React.createElement(React.Fragment, null,
-        visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id, className: styles.source }, children)),
-        React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
-            !visible && !source && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true", className: styles.source }, children)),
-            React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
-}
-// This only extracts text content from the node including all its children which is enough for now.
-// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
-// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
-function extractInnerText(node) {
-    return (node.innerText || '').replace(/\s+/g, ' ').trim();
+    var { assertive = false, hidden = false, tagName = 'div' } = _a, restProps = __rest(_a, ["assertive", "hidden", "tagName"]);
+    // TODO: Switch this out when moving this component out of internal
+    // const baseComponentProps = useBaseComponent('LiveRegion');
+    const baseComponentProps = { __internalRootRef: React.useRef() };
+    return (React.createElement(InternalLiveRegion, Object.assign({ assertive: assertive, hidden: hidden, tagName: tagName }, baseComponentProps, restProps)));
 }
+applyDisplayName(LiveRegion, 'LiveRegion');
+export default LiveRegion;
 //# sourceMappingURL=index.js.map

package/internal/components/live-region/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport React, { memo, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\n\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  id?: string;\n  /**\n   * Use a list of strings and/or existing DOM elements for building the\n   * announcement text. This avoids rendering separate content just for this\n   * LiveRegion.\n   *\n   * If this property is set, the `children` will be ignored.\n   */\n  source?: Array<string | React.RefObject<HTMLElement> | undefined>;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * ```\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * To fix, wrap \"title\" in an element:\n * ```\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * Or create a single text node if possible:\n * ```\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n * ```\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * ```\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n * ```\n *\n * If you place interactive content inside the LiveRegion, the content will still be\n * interactive (e.g. as a tab stop). Consider using the `source` property instead.\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  source,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function getSourceContent() {\n      if (source) {\n        return source\n          .map(item => {\n            if (!item) {\n              return undefined;\n            }\n            if (typeof item === 'string') {\n              return item;\n            }\n            if (item.current) {\n              return extractInnerText(item.current);\n            }\n          })\n          .filter(Boolean)\n          .join(' ');\n      }\n\n      if (sourceRef.current) {\n        return extractInnerText(sourceRef.current);\n      }\n    }\n    function updateLiveRegion() {\n      const sourceContent = getSourceContent();\n\n      if (targetRef.current && sourceContent) {\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && !source && (\n        <TagName ref={sourceRef} id={id} className={styles.source}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && !source && (\n          <TagName ref={sourceRef} aria-hidden=\"true\" className={styles.source}>\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,iEAAiE;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,SAAS,UAAU,CAAC,EAAqF;QAArF,EAAE,SAAS,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,OAAiC,EAA5B,SAAS,cAAlE,kCAAoE,CAAF;IACpF,mEAAmE;IACnE,6DAA6D;IAC7D,MAAM,kBAAkB,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;IAEjE,OAAO,CACL,oBAAC,kBAAkB,kBACjB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IACZ,kBAAkB,EAClB,SAAS,EACb,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAE3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\n// import useBaseComponent from '../../hooks/use-base-component';\nimport { applyDisplayName } from '../../utils/apply-display-name';\nimport { LiveRegionProps } from './interfaces';\nimport InternalLiveRegion from './internal';\n\nexport { LiveRegionProps };\n\nfunction LiveRegion({ assertive = false, hidden = false, tagName = 'div', ...restProps }: LiveRegionProps) {\n  // TODO: Switch this out when moving this component out of internal\n  // const baseComponentProps = useBaseComponent('LiveRegion');\n  const baseComponentProps = { __internalRootRef: React.useRef() };\n\n  return (\n    <InternalLiveRegion\n      assertive={assertive}\n      hidden={hidden}\n      tagName={tagName}\n      {...baseComponentProps}\n      {...restProps}\n    />\n  );\n}\n\napplyDisplayName(LiveRegion, 'LiveRegion');\n\nexport default LiveRegion;\n"]}

package/internal/components/live-region/interfaces.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../../base-component';
+export interface LiveRegionProps extends BaseComponentProps {
+    /**
+     * The string for the aria-live announcement text. When this content
+     * changes, the text will be re-announced to assistive technologies. If this
+     * property is provided, it will be used for the live announcement instead of
+     * the `children` slot.
+     */
+    message?: string;
+    /**
+     * Whether the announcements should be made using assertive aria-live.
+     * Assertive announcements interrupt the user's action, so they should only
+     * be used when absolutely necessary.
+     */
+    assertive?: boolean;
+    /**
+     * The tag name to use for the wrapper around the `children` slot.
+     */
+    tagName?: LiveRegionProps.TagName;
+    /**
+     * Defines whether to visually hide the contents of the `children` slot.
+     */
+    hidden?: boolean;
+    /**
+     * Use the rendered content as the source for the announcement text.
+     * Prefer `message` if announcement text can be provided as a string.
+     */
+    children?: React.ReactNode;
+}
+export declare namespace LiveRegionProps {
+    type TagName = 'span' | 'div';
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/components/live-region/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAElC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACtC"}

package/internal/components/live-region/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/components/live-region/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../../base-component';\n\nexport interface LiveRegionProps extends BaseComponentProps {\n  /**\n   * The string for the aria-live announcement text. When this content\n   * changes, the text will be re-announced to assistive technologies. If this\n   * property is provided, it will be used for the live announcement instead of\n   * the `children` slot.\n   */\n  message?: string;\n\n  /**\n   * Whether the announcements should be made using assertive aria-live.\n   * Assertive announcements interrupt the user's action, so they should only\n   * be used when absolutely necessary.\n   */\n  assertive?: boolean;\n\n  /**\n   * The tag name to use for the wrapper around the `children` slot.\n   */\n  tagName?: LiveRegionProps.TagName;\n\n  /**\n   * Defines whether to visually hide the contents of the `children` slot.\n   */\n  hidden?: boolean;\n\n  /**\n   * Use the rendered content as the source for the announcement text.\n   * Prefer `message` if announcement text can be provided as a string.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace LiveRegionProps {\n  export type TagName = 'span' | 'div';\n}\n"]}