@cloudscape-design/components 3.0.137 → 3.0.139

package/autosuggest/interfaces.d.ts

@@ -45,7 +45,7 @@ export interface AutosuggestProps extends BaseComponentProps, BaseInputProps, In
      * them from server.
      *
      * By default the component will filter the provided `options` based on the value of the filtering input field.
-     * Only options that have a `value` or `label` that contains the input value as a substring
+     * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring
      * are displayed in the list of options.
      *
      * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are

package/autosuggest/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/autosuggest/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport {\n  BaseDropdownHostProps,\n  OptionsLoadItemsDetail,\n  OptionsFilteringType,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status';\nimport { BaseInputProps, InputAutoCorrect, InputKeyEvents, InputProps } from '../input/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AutosuggestProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    BaseDropdownHostProps,\n    InputKeyEvents,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: AutosuggestProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value` or `label` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Specifies a function that generates the custom value indicator (for example, `Use \"${value}\"`).\n   */\n  enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n\n  /**\n   * Specifies the text that's displayed when there aren't any suggestions to display.\n   * This is displayed when `statusType` is set to `finished` or it's not set at all.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.\n   * Instead, use `onSelect` in combination with the `onChange` handler only as an optional convenience for the user.\n   */\n  onSelect?: NonCancelableEventHandler<AutosuggestProps.SelectDetail>;\n\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: AutosuggestProps.ContainingOptionAndGroupString;\n}\n\nexport namespace AutosuggestProps {\n  export type ChangeDetail = InputProps.ChangeDetail;\n  export type KeyDetail = InputProps.KeyDetail;\n  export type FilteringType = OptionsFilteringType;\n  export type Option = OptionDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  export type EnteredTextLabel = (value: string) => string;\n  export interface OptionGroup extends Option {\n    label?: string;\n    options: ReadonlyArray<Option>;\n  }\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n  export type StatusType = DropdownStatusProps.StatusType;\n  export interface SelectDetail {\n    value: string;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the input control.\n     */\n    select(): void;\n  }\n}\n\n// TODO: use DropdownOption type same as in select and multiselect\nexport type AutosuggestItem = (AutosuggestProps.Option | AutosuggestProps.OptionGroup) & {\n  type?: 'parent' | 'child' | 'use-entered';\n  option: OptionDefinition | OptionGroup;\n};\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/autosuggest/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';\nimport {\n  BaseDropdownHostProps,\n  OptionsLoadItemsDetail,\n  OptionsFilteringType,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status';\nimport { BaseInputProps, InputAutoCorrect, InputKeyEvents, InputProps } from '../input/interfaces';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface AutosuggestProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    BaseDropdownHostProps,\n    InputKeyEvents,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: AutosuggestProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Specifies a function that generates the custom value indicator (for example, `Use \"${value}\"`).\n   */\n  enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n\n  /**\n   * Specifies the text that's displayed when there aren't any suggestions to display.\n   * This is displayed when `statusType` is set to `finished` or it's not set at all.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.\n   * Instead, use `onSelect` in combination with the `onChange` handler only as an optional convenience for the user.\n   */\n  onSelect?: NonCancelableEventHandler<AutosuggestProps.SelectDetail>;\n\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: AutosuggestProps.ContainingOptionAndGroupString;\n}\n\nexport namespace AutosuggestProps {\n  export type ChangeDetail = InputProps.ChangeDetail;\n  export type KeyDetail = InputProps.KeyDetail;\n  export type FilteringType = OptionsFilteringType;\n  export type Option = OptionDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n  export type EnteredTextLabel = (value: string) => string;\n  export interface OptionGroup extends Option {\n    label?: string;\n    options: ReadonlyArray<Option>;\n  }\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n  export type StatusType = DropdownStatusProps.StatusType;\n  export interface SelectDetail {\n    value: string;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n\n    /**\n     * Selects all text in the input control.\n     */\n    select(): void;\n  }\n}\n\n// TODO: use DropdownOption type same as in select and multiselect\nexport type AutosuggestItem = (AutosuggestProps.Option | AutosuggestProps.OptionGroup) & {\n  type?: 'parent' | 'child' | 'use-entered';\n  option: OptionDefinition | OptionGroup;\n};\n"]}

package/internal/components/dynamic-aria-live/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ScreenreaderOnlyProps } from '../screenreader-only';
+export interface DynamicAriaLiveProps extends ScreenreaderOnlyProps {
+    assertive?: boolean;
+    delay?: number;
+    children: React.ReactNode;
+}
+/**
+ * Dynamic aria live component is hidden in the layout, but visible for screen readers.
+ * Purpose of this component is to announce recurring changes for a content.
+ *
+ * To avoid merging words, provide all text nodes wrapped with elements, like:
+ * <LiveRegion>
+ *   <span>{title}</span>
+ *   <span><Details /></span>
+ * </LiveRegion>
+ * Or create a single text node if possible:
+ * <LiveRegion>
+ *   {`${title} ${details}`}
+ * </LiveRegion>
+ *
+ * @param delay time value in milliseconds to set minimal time interval between announcements.
+ * @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.
+ */
+declare const _default: React.MemoExoticComponent<typeof DynamicAriaLive>;
+export default _default;
+declare function DynamicAriaLive({ delay, children, ...restProps }: DynamicAriaLiveProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/dynamic-aria-live/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dynamic-aria-live/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;;AACH,wBAAqC;AAErC,iBAAS,eAAe,CAAC,EAAE,KAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,eAiBtF"}

package/internal/components/dynamic-aria-live/index.js

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __assign, __rest } from "tslib";
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { throttle } from '../../utils/throttle';
+import { updateLiveRegion } from '../live-region/utils';
+import AriaLiveTag from '../live-region/aria-liva-tag';
+/**
+ * Dynamic aria live component is hidden in the layout, but visible for screen readers.
+ * Purpose of this component is to announce recurring changes for a content.
+ *
+ * To avoid merging words, provide all text nodes wrapped with elements, like:
+ * <LiveRegion>
+ *   <span>{title}</span>
+ *   <span><Details /></span>
+ * </LiveRegion>
+ * Or create a single text node if possible:
+ * <LiveRegion>
+ *   {`${title} ${details}`}
+ * </LiveRegion>
+ *
+ * @param delay time value in milliseconds to set minimal time interval between announcements.
+ * @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.
+ */
+export default memo(DynamicAriaLive);
+function DynamicAriaLive(_a) {
+    var _b = _a.delay, delay = _b === void 0 ? 5000 : _b, children = _a.children, restProps = __rest(_a, ["delay", "children"]);
+    var sourceRef = useRef(null);
+    var targetRef = useRef(null);
+    var throttledUpdate = useMemo(function () {
+        return throttle(function () { return updateLiveRegion(targetRef, sourceRef); }, delay);
+    }, [delay]);
+    useEffect(function () {
+        throttledUpdate();
+    });
+    return (React.createElement(AriaLiveTag, __assign({ targetRef: targetRef, sourceRef: sourceRef }, restProps), children));
+}
+//# sourceMappingURL=index.js.map

package/internal/components/dynamic-aria-live/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dynamic-aria-live/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAQvD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC;AAErC,SAAS,eAAe,CAAC,EAA8D;IAA5D,IAAA,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAAtC,qBAAwC,CAAF;IAC7D,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD,IAAM,eAAe,GAAG,OAAO,CAAC;QAC9B,OAAO,QAAQ,CAAC,cAAM,OAAA,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,EAAtC,CAAsC,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC;QACR,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,SAAS,GACnE,QAAQ,CACG,CACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { memo, useEffect, useMemo, useRef } from 'react';\nimport { throttle } from '../../utils/throttle';\nimport { ScreenreaderOnlyProps } from '../screenreader-only';\nimport { updateLiveRegion } from '../live-region/utils';\nimport AriaLiveTag from '../live-region/aria-liva-tag';\n\nexport interface DynamicAriaLiveProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  children: React.ReactNode;\n}\n\n/**\n * Dynamic aria live component is hidden in the layout, but visible for screen readers.\n * Purpose of this component is to announce recurring changes for a content.\n *\n * To avoid merging words, provide all text nodes wrapped with elements, like:\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n * Or create a single text node if possible:\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n *\n * @param delay time value in milliseconds to set minimal time interval between announcements.\n * @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.\n */\nexport default memo(DynamicAriaLive);\n\nfunction DynamicAriaLive({ delay = 5000, children, ...restProps }: DynamicAriaLiveProps) {\n  const sourceRef = useRef<HTMLSpanElement>(null);\n  const targetRef = useRef<HTMLSpanElement>(null);\n\n  const throttledUpdate = useMemo(() => {\n    return throttle(() => updateLiveRegion(targetRef, sourceRef), delay);\n  }, [delay]);\n\n  useEffect(() => {\n    throttledUpdate();\n  });\n\n  return (\n    <AriaLiveTag targetRef={targetRef} sourceRef={sourceRef} {...restProps}>\n      {children}\n    </AriaLiveTag>\n  );\n}\n"]}

package/internal/components/live-region/aria-liva-tag.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ScreenreaderOnlyProps } from '../screenreader-only/index.js';
+export interface AriaLiveTagProps extends ScreenreaderOnlyProps {
+    assertive?: boolean;
+    visible?: boolean;
+    children: React.ReactNode;
+    targetRef: React.RefObject<HTMLSpanElement>;
+    sourceRef: React.RefObject<HTMLSpanElement>;
+}
+declare const _default: React.MemoExoticComponent<typeof AriaLiveTag>;
+export default _default;
+declare function AriaLiveTag({ assertive, visible, targetRef, sourceRef, children, ...restProps }: AriaLiveTagProps): JSX.Element;
+//# sourceMappingURL=aria-liva-tag.d.ts.map

package/internal/components/live-region/aria-liva-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-liva-tag.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/aria-liva-tag.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAyB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGxF,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC5C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC7C;;AAED,wBAAiC;AAEjC,iBAAS,WAAW,CAAC,EACnB,SAAiB,EACjB,OAAe,EACf,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,eAgBlB"}

package/internal/components/live-region/aria-liva-tag.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __assign, __rest } from "tslib";
+/* eslint-disable @cloudscape-design/prefer-live-region */
+import clsx from 'clsx';
+import React, { memo } from 'react';
+import ScreenreaderOnly from '../screenreader-only/index.js';
+import styles from './styles.css.js';
+export default memo(AriaLiveTag);
+function AriaLiveTag(_a) {
+    var _b = _a.assertive, assertive = _b === void 0 ? false : _b, _c = _a.visible, visible = _c === void 0 ? false : _c, targetRef = _a.targetRef, sourceRef = _a.sourceRef, children = _a.children, restProps = __rest(_a, ["assertive", "visible", "targetRef", "sourceRef", "children"]);
+    return (React.createElement(React.Fragment, null,
+        visible && React.createElement("span", { ref: sourceRef }, children),
+        React.createElement(ScreenreaderOnly, __assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
+            !visible && (React.createElement("span", { ref: sourceRef, "aria-hidden": "true" }, children)),
+            React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
+}
+//# sourceMappingURL=aria-liva-tag.js.map

package/internal/components/live-region/aria-liva-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-liva-tag.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/aria-liva-tag.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,gBAA2C,MAAM,+BAA+B,CAAC;AACxF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,eAAe,IAAI,CAAC,WAAW,CAAC,CAAC;AAEjC,SAAS,WAAW,CAAC,EAOF;IANjB,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,SAAS,eAAA,EACT,SAAS,eAAA,EACT,QAAQ,cAAA,EACL,SAAS,cANO,8DAOpB,CADa;IAEZ,OAAO,CACL;QACG,OAAO,IAAI,8BAAM,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAQ;QAEnD,oBAAC,gBAAgB,eAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,IACrC,QAAQ,CACJ,CACR;YAED,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CAClB,CACJ,CAAC;AACJ,CAAC","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 clsx from 'clsx';\nimport React, { memo } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only/index.js';\nimport styles from './styles.css.js';\n\nexport interface AriaLiveTagProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  visible?: boolean;\n  children: React.ReactNode;\n  targetRef: React.RefObject<HTMLSpanElement>;\n  sourceRef: React.RefObject<HTMLSpanElement>;\n}\n\nexport default memo(AriaLiveTag);\n\nfunction AriaLiveTag({\n  assertive = false,\n  visible = false,\n  targetRef,\n  sourceRef,\n  children,\n  ...restProps\n}: AriaLiveTagProps) {\n  return (\n    <>\n      {visible && <span ref={sourceRef}>{children}</span>}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && (\n          <span ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </span>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n"]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScreenreaderOnlyProps } from '../screenreader-only/index.js';
+import { ScreenreaderOnlyProps } from '../screenreader-only';
 export interface LiveRegionProps extends ScreenreaderOnlyProps {
     assertive?: boolean;
     delay?: number;
@@ -7,39 +7,39 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
     children: React.ReactNode;
 }
 /**
-  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>
-  </>
-*/
+ * 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>
+ * </>
+ */
 declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
 export default _default;
-declare function LiveRegion({ assertive, delay, visible, children, ...restProps }: LiveRegionProps): JSX.Element;
+declare function LiveRegion({ delay, children, ...restProps }: LiveRegionProps): JSX.Element;
 //# 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":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGxF,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;;AACF,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,KAAU,EAAE,OAAe,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eA0D9G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,KAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAmC1E"}

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

@@ -2,46 +2,45 @@
 // SPDX-License-Identifier: Apache-2.0
 import { __assign, __rest } from "tslib";
 /* eslint-disable @cloudscape-design/prefer-live-region */
-import clsx from 'clsx';
 import React, { memo, useEffect, useRef } from 'react';
-import ScreenreaderOnly from '../screenreader-only/index.js';
-import styles from './styles.css.js';
+import { updateLiveRegion } from './utils';
+import AriaLiveTag from './aria-liva-tag';
 /**
-  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>
-  </>
-*/
+ * 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>
+ * </>
+ */
 export default memo(LiveRegion);
 function LiveRegion(_a) {
-    var _b = _a.assertive, assertive = _b === void 0 ? false : _b, _c = _a.delay, delay = _c === void 0 ? 10 : _c, _d = _a.visible, visible = _d === void 0 ? false : _d, children = _a.children, restProps = __rest(_a, ["assertive", "delay", "visible", "children"]);
+    var _b = _a.delay, delay = _b === void 0 ? 10 : _b, children = _a.children, restProps = __rest(_a, ["delay", "children"]);
     var sourceRef = useRef(null);
     var targetRef = useRef(null);
     /*
@@ -56,24 +55,12 @@ function LiveRegion(_a) {
       does not impact the performance. If it does, prefer using a string as children prop.
     */
     useEffect(function () {
-        function updateLiveRegion() {
-            if (targetRef.current && sourceRef.current) {
-                var sourceContent = extractInnerText(sourceRef.current);
-                var 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;
-                }
-            }
-        }
         var timeoutId;
         if (delay) {
-            timeoutId = setTimeout(updateLiveRegion, delay);
+            timeoutId = setTimeout(function () { return updateLiveRegion(targetRef, sourceRef); }, delay);
         }
         else {
-            updateLiveRegion();
+            updateLiveRegion(targetRef, sourceRef);
         }
         return function () {
             if (timeoutId) {
@@ -81,16 +68,6 @@ function LiveRegion(_a) {
             }
         };
     });
-    return (React.createElement(React.Fragment, null,
-        visible && React.createElement("span", { ref: sourceRef }, children),
-        React.createElement(ScreenreaderOnly, __assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
-            !visible && (React.createElement("span", { ref: sourceRef, "aria-hidden": "true" }, 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();
+    return (React.createElement(AriaLiveTag, __assign({ targetRef: targetRef, sourceRef: sourceRef }, restProps), children));
 }
 //# 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":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,+BAA+B,CAAC;AACxF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAA2F;IAAzF,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAAxE,6CAA0E,CAAF;IAC1F,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,8BAAM,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAQ;QAEnD,oBAAC,gBAAgB,eAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,IACrC,QAAQ,CACJ,CACR;YAED,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CAClB,CACJ,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","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 clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only/index.js';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  children: React.ReactNode;\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  <LiveRegion>\n    {title}\n    <span><Details /></span>\n  </LiveRegion>\n\n  To fix, wrap \"title\" in an element:\n  <LiveRegion>\n    <span>{title}</span>\n    <span><Details /></span>\n  </LiveRegion>\n\n  Or create a single text node if possible:\n  <LiveRegion>\n    {`${title} ${details}`}\n  </LiveRegion>\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    <LiveRegion>{title}</LiveRegion>\n    <LiveRegion><Details /></LiveRegion>\n  </>\n*/\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ assertive = false, delay = 10, visible = false, children, ...restProps }: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement>(null);\n  const targetRef = useRef<HTMLSpanElement>(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 updateLiveRegion() {\n      if (targetRef.current && sourceRef.current) {\n        const sourceContent = extractInnerText(sourceRef.current);\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 && <span ref={sourceRef}>{children}</span>}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && (\n          <span ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </span>\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,0DAA0D;AAE1D,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAS1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAAuD;IAArD,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAApC,qBAAsC,CAAF;IACtD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,cAAM,OAAA,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,EAAtC,CAAsC,EAAE,KAAK,CAAC,CAAC;SAC7E;aAAM;YACL,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACxC;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,SAAS,GACnE,QAAQ,CACG,CACf,CAAC;AACJ,CAAC","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 { ScreenreaderOnlyProps } from '../screenreader-only';\nimport { updateLiveRegion } from './utils';\nimport AriaLiveTag from './aria-liva-tag';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  children: React.ReactNode;\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 * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * To fix, wrap \"title\" in an element:\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * Or create a single text node if possible:\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\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 *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ delay = 10, children, ...restProps }: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement>(null);\n  const targetRef = useRef<HTMLSpanElement>(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    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(() => updateLiveRegion(targetRef, sourceRef), delay);\n    } else {\n      updateLiveRegion(targetRef, sourceRef);\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <AriaLiveTag targetRef={targetRef} sourceRef={sourceRef} {...restProps}>\n      {children}\n    </AriaLiveTag>\n  );\n}\n"]}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Updates text of the target node if it's differ from source node.
+ * @param targetRef - Ref to the element with aria-live
+ * @param sourceRef - Ref to the element to be announced
+ */
+export declare function updateLiveRegion(targetRef: React.RefObject<HTMLSpanElement>, sourceRef: React.RefObject<HTMLSpanElement>): void;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,EAC3C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,QAY5C"}

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

@@ -0,0 +1,24 @@
+/**
+ * Updates text of the target node if it's differ from source node.
+ * @param targetRef - Ref to the element with aria-live
+ * @param sourceRef - Ref to the element to be announced
+ */
+export function updateLiveRegion(targetRef, sourceRef) {
+    if (targetRef.current && sourceRef.current) {
+        var sourceContent = extractInnerText(sourceRef.current);
+        var 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;
+        }
+    }
+}
+// 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();
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/utils.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAC9B,SAA2C,EAC3C,SAA2C;IAE3C,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;QAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;YACnC,gEAAgE;YAChE,2DAA2D;YAC3D,sDAAsD;YACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;SAC7C;KACF;AACH,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\n/**\n * Updates text of the target node if it's differ from source node.\n * @param targetRef - Ref to the element with aria-live\n * @param sourceRef - Ref to the element to be announced\n */\nexport function updateLiveRegion(\n  targetRef: React.RefObject<HTMLSpanElement>,\n  sourceRef: React.RefObject<HTMLSpanElement>\n) {\n  if (targetRef.current && sourceRef.current) {\n    const sourceContent = extractInnerText(sourceRef.current);\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// 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"]}

package/internal/environment.js

@@ -1,5 +1,5 @@
 
-    export var PACKAGE_VERSION = '3.0.0 (fe9e4c3)';
+    export var PACKAGE_VERSION = '3.0.0 (0d5d310)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/hooks/use-visual-mode/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export declare function useCurrentMode(elementRef: React.RefObject<HTMLElement>): "dark" | "light";
 export declare function useDensityMode(elementRef: React.RefObject<HTMLElement>): "compact" | "comfortable";
-export declare function useVisualRefresh(): boolean;
+export declare const useVisualRefresh: () => boolean;
+export declare function clearVisualRefreshState(): void;
+export declare function useVisualRefreshDynamic(): boolean;
 export declare function useReducedMotion(elementRef: React.RefObject<HTMLElement>): boolean;
 //# sourceMappingURL=index.d.ts.map

package/internal/hooks/use-visual-mode/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,wBAAgB,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,oBAUtE;AAED,wBAAgB,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,6BAUtE;AAKD,wBAAgB,gBAAgB,YAa/B;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,WAMxE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,wBAAgB,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,oBAUtE;AAED,wBAAgB,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,6BAUtE;AAED,eAAO,MAAM,gBAAgB,eAA+D,CAAC;AAM7F,wBAAgB,uBAAuB,SAEtC;AAMD,wBAAgB,uBAAuB,YAetC;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,WAMxE"}

package/internal/hooks/use-visual-mode/index.js

@@ -5,6 +5,8 @@ import { ALWAYS_VISUAL_REFRESH } from '../../environment';
 import { isMotionDisabled } from '../../motion';
 import { findUpUntil } from '../../utils/dom';
 import { useMutationObserver } from '../use-mutation-observer';
+import { isDevelopment } from '../../is-development';
+import { warnOnce } from '../../logging';
 export function useCurrentMode(elementRef) {
     var _a = useState('light'), value = _a[0], setValue = _a[1];
     useMutationObserver(elementRef, function (node) {
@@ -21,20 +23,25 @@ export function useDensityMode(elementRef) {
     });
     return value;
 }
+export var useVisualRefresh = ALWAYS_VISUAL_REFRESH ? function () { return true; } : useVisualRefreshDynamic;
 // We expect VR is to be set only once and before the application is rendered.
 var visualRefreshState = undefined;
-export function useVisualRefresh() {
-    var _a, _b;
+// for testing
+export function clearVisualRefreshState() {
+    visualRefreshState = undefined;
+}
+function detectVisualRefresh() {
+    return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh');
+}
+export function useVisualRefreshDynamic() {
     if (visualRefreshState === undefined) {
-        var supportsCSSVariables = typeof window !== 'undefined' && ((_b = (_a = window.CSS) === null || _a === void 0 ? void 0 : _a.supports) === null || _b === void 0 ? void 0 : _b.call(_a, 'color', 'var(--test-var)'));
-        if (ALWAYS_VISUAL_REFRESH) {
-            visualRefreshState = true;
-        }
-        else if (!supportsCSSVariables) {
-            visualRefreshState = false;
-        }
-        else {
-            visualRefreshState = !!document.querySelector('.awsui-visual-refresh');
+        visualRefreshState = detectVisualRefresh();
+    }
+    if (isDevelopment) {
+        var newVisualRefreshState = detectVisualRefresh();
+        if (newVisualRefreshState !== visualRefreshState) {
+            warnOnce('Visual Refresh', 'Dynamic visual refresh change detected. This is not supported. ' +
+                'Make sure `awsui-visual-refresh` is attached to the `<body>` element before initial React render');
         }
     }
     return visualRefreshState;

package/internal/hooks/use-visual-mode/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-visual-mode/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,UAAU,cAAc,CAAC,UAAwC;IAC/D,IAAA,KAAoB,QAAQ,CAAmB,OAAO,CAAC,EAAtD,KAAK,QAAA,EAAE,QAAQ,QAAuC,CAAC;IAC9D,mBAAmB,CAAC,UAAU,EAAE,UAAA,IAAI;QAClC,IAAM,cAAc,GAAG,WAAW,CAChC,IAAI,EACJ,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAhG,CAAgG,CACzG,CAAC;QACF,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,UAAwC;IAC/D,IAAA,KAAoB,QAAQ,CAA4B,aAAa,CAAC,EAArE,KAAK,QAAA,EAAE,QAAQ,QAAsD,CAAC;IAC7E,mBAAmB,CAAC,UAAU,EAAE,UAAA,IAAI;QAClC,IAAM,iBAAiB,GAAG,WAAW,CACnC,IAAI,EACJ,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,4BAA4B,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAtG,CAAsG,CAC/G,CAAC;QACF,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC;AAED,8EAA8E;AAC9E,IAAI,kBAAkB,GAAwB,SAAS,CAAC;AAExD,MAAM,UAAU,gBAAgB;;IAC9B,IAAI,kBAAkB,KAAK,SAAS,EAAE;QACpC,IAAM,oBAAoB,GAAG,OAAO,MAAM,KAAK,WAAW,KAAI,MAAA,MAAA,MAAM,CAAC,GAAG,0CAAE,QAAQ,mDAAG,OAAO,EAAE,iBAAiB,CAAC,CAAA,CAAC;QAEjH,IAAI,qBAAqB,EAAE;YACzB,kBAAkB,GAAG,IAAI,CAAC;SAC3B;aAAM,IAAI,CAAC,oBAAoB,EAAE;YAChC,kBAAkB,GAAG,KAAK,CAAC;SAC5B;aAAM;YACL,kBAAkB,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;SACxE;KACF;IACD,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,UAAwC;IACjE,IAAA,KAAoB,QAAQ,CAAC,KAAK,CAAC,EAAlC,KAAK,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAC1C,mBAAmB,CAAC,UAAU,EAAE,UAAA,IAAI;QAClC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { ALWAYS_VISUAL_REFRESH } from '../../environment';\nimport { isMotionDisabled } from '../../motion';\nimport { findUpUntil } from '../../utils/dom';\nimport { useMutationObserver } from '../use-mutation-observer';\n\nexport function useCurrentMode(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState<'light' | 'dark'>('light');\n  useMutationObserver(elementRef, node => {\n    const darkModeParent = findUpUntil(\n      node,\n      node => node.classList.contains('awsui-polaris-dark-mode') || node.classList.contains('awsui-dark-mode')\n    );\n    setValue(darkModeParent ? 'dark' : 'light');\n  });\n  return value;\n}\n\nexport function useDensityMode(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState<'comfortable' | 'compact'>('comfortable');\n  useMutationObserver(elementRef, node => {\n    const compactModeParent = findUpUntil(\n      node,\n      node => node.classList.contains('awsui-polaris-compact-mode') || node.classList.contains('awsui-compact-mode')\n    );\n    setValue(compactModeParent ? 'compact' : 'comfortable');\n  });\n  return value;\n}\n\n// We expect VR is to be set only once and before the application is rendered.\nlet visualRefreshState: undefined | boolean = undefined;\n\nexport function useVisualRefresh() {\n  if (visualRefreshState === undefined) {\n    const supportsCSSVariables = typeof window !== 'undefined' && window.CSS?.supports?.('color', 'var(--test-var)');\n\n    if (ALWAYS_VISUAL_REFRESH) {\n      visualRefreshState = true;\n    } else if (!supportsCSSVariables) {\n      visualRefreshState = false;\n    } else {\n      visualRefreshState = !!document.querySelector('.awsui-visual-refresh');\n    }\n  }\n  return visualRefreshState;\n}\n\nexport function useReducedMotion(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState(false);\n  useMutationObserver(elementRef, node => {\n    setValue(isMotionDisabled(node));\n  });\n  return value;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-visual-mode/index.ts"],"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, { useState } from 'react';\nimport { ALWAYS_VISUAL_REFRESH } from '../../environment';\nimport { isMotionDisabled } from '../../motion';\nimport { findUpUntil } from '../../utils/dom';\nimport { useMutationObserver } from '../use-mutation-observer';\nimport { isDevelopment } from '../../is-development';\nimport { warnOnce } from '../../logging';\n\nexport function useCurrentMode(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState<'light' | 'dark'>('light');\n  useMutationObserver(elementRef, node => {\n    const darkModeParent = findUpUntil(\n      node,\n      node => node.classList.contains('awsui-polaris-dark-mode') || node.classList.contains('awsui-dark-mode')\n    );\n    setValue(darkModeParent ? 'dark' : 'light');\n  });\n  return value;\n}\n\nexport function useDensityMode(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState<'comfortable' | 'compact'>('comfortable');\n  useMutationObserver(elementRef, node => {\n    const compactModeParent = findUpUntil(\n      node,\n      node => node.classList.contains('awsui-polaris-compact-mode') || node.classList.contains('awsui-compact-mode')\n    );\n    setValue(compactModeParent ? 'compact' : 'comfortable');\n  });\n  return value;\n}\n\nexport const useVisualRefresh = ALWAYS_VISUAL_REFRESH ? () => true : useVisualRefreshDynamic;\n\n// We expect VR is to be set only once and before the application is rendered.\nlet visualRefreshState: undefined | boolean = undefined;\n\n// for testing\nexport function clearVisualRefreshState() {\n  visualRefreshState = undefined;\n}\n\nfunction detectVisualRefresh() {\n  return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh');\n}\n\nexport function useVisualRefreshDynamic() {\n  if (visualRefreshState === undefined) {\n    visualRefreshState = detectVisualRefresh();\n  }\n  if (isDevelopment) {\n    const newVisualRefreshState = detectVisualRefresh();\n    if (newVisualRefreshState !== visualRefreshState) {\n      warnOnce(\n        'Visual Refresh',\n        'Dynamic visual refresh change detected. This is not supported. ' +\n          'Make sure `awsui-visual-refresh` is attached to the `<body>` element before initial React render'\n      );\n    }\n  }\n  return visualRefreshState;\n}\n\nexport function useReducedMotion(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState(false);\n  useMutationObserver(elementRef, node => {\n    setValue(isMotionDisabled(node));\n  });\n  return value;\n}\n"]}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "fe9e4c3f1b1082fad0ddfe885386c9495cbfa417"
+  "commit": "0d5d3109f9ede8efdecb530a570357cadafd4dc6"
 }

package/package.json

@@ -112,6 +112,6 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.137",
+  "version": "3.0.139",
   "license": "Apache-2.0"
 }

package/progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,eA8ClB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,eAiDlB"}

package/progress-bar/index.js

@@ -11,6 +11,7 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { Progress, ResultState, SmallText } from './internal';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
+import DynamicAriaLive from '../internal/components/dynamic-aria-live';
 export default function ProgressBar(_a) {
     var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.status, status = _c === void 0 ? 'in-progress' : _c, _d = _a.variant, variant = _d === void 0 ? 'standalone' : _d, resultButtonText = _a.resultButtonText, label = _a.label, description = _a.description, additionalInfo = _a.additionalInfo, resultText = _a.resultText, onResultButtonClick = _a.onResultButtonClick, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
     var __internalRootRef = useBaseComponent('ProgressBar').__internalRootRef;
@@ -26,7 +27,9 @@ export default function ProgressBar(_a) {
         React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
             React.createElement("div", { className: clsx(styles['word-wrap'], styles["label-".concat(variant)]), id: labelId }, label),
             description && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, description),
-            React.createElement("div", { "aria-live": "polite", "aria-atomic": "true" }, isInProgressState ? (React.createElement(Progress, { value: value, labelId: labelId, isInFlash: isInFlash })) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: function () {
+            React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
+                React.createElement(Progress, { value: value, labelId: labelId, isInFlash: isInFlash }),
+                React.createElement(DynamicAriaLive, null, "".concat(label !== null && label !== void 0 ? label : '', ": ").concat(value, "%")))) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: function () {
                     fireNonCancelableEvent(onResultButtonClick);
                 } })))),
         additionalInfo && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, additionalInfo)));

package/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/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 from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '../internal/logging';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n  value = 0,\n  status = 'in-progress',\n  variant = 'standalone',\n  resultButtonText,\n  label,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  ...rest\n}: ProgressBarProps) {\n  const { __internalRootRef } = useBaseComponent('ProgressBar');\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-progress-bar-');\n\n  const labelId = `${generatedName}-label`;\n  const isInFlash = variant === 'flash';\n  const isInProgressState = status === 'in-progress';\n\n  if (isInFlash && resultButtonText) {\n    warnOnce(\n      'ProgressBar',\n      'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n      ref={__internalRootRef}\n    >\n      <div className={isInFlash ? styles['flash-container'] : undefined}>\n        <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n          {label}\n        </div>\n        {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n        <div aria-live=\"polite\" aria-atomic=\"true\">\n          {isInProgressState ? (\n            <Progress value={value} labelId={labelId} isInFlash={isInFlash} />\n          ) : (\n            <ResultState\n              resultText={resultText}\n              isInFlash={isInFlash}\n              resultButtonText={resultButtonText}\n              status={status}\n              onClick={() => {\n                fireNonCancelableEvent(onResultButtonClick);\n              }}\n            />\n          )}\n        </div>\n      </div>\n      {additionalInfo && <SmallText color={isInFlash ? 'inherit' : undefined}>{additionalInfo}</SmallText>}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/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 from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '../internal/logging';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport DynamicAriaLive from '../internal/components/dynamic-aria-live';\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n  value = 0,\n  status = 'in-progress',\n  variant = 'standalone',\n  resultButtonText,\n  label,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  ...rest\n}: ProgressBarProps) {\n  const { __internalRootRef } = useBaseComponent('ProgressBar');\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-progress-bar-');\n\n  const labelId = `${generatedName}-label`;\n  const isInFlash = variant === 'flash';\n  const isInProgressState = status === 'in-progress';\n\n  if (isInFlash && resultButtonText) {\n    warnOnce(\n      'ProgressBar',\n      'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n      ref={__internalRootRef}\n    >\n      <div className={isInFlash ? styles['flash-container'] : undefined}>\n        <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n          {label}\n        </div>\n        {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n        <div>\n          {isInProgressState ? (\n            <>\n              <Progress value={value} labelId={labelId} isInFlash={isInFlash} />\n              <DynamicAriaLive>{`${label ?? ''}: ${value}%`}</DynamicAriaLive>\n            </>\n          ) : (\n            <ResultState\n              resultText={resultText}\n              isInFlash={isInFlash}\n              resultButtonText={resultButtonText}\n              status={status}\n              onClick={() => {\n                fireNonCancelableEvent(onResultButtonClick);\n              }}\n            />\n          )}\n        </div>\n      </div>\n      {additionalInfo && <SmallText color={isInFlash ? 'inherit' : undefined}>{additionalInfo}</SmallText>}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}

package/progress-bar/internal.js

@@ -32,10 +32,10 @@ export var ResultState = function (_a) {
     var isInFlash = _a.isInFlash, resultText = _a.resultText, resultButtonText = _a.resultButtonText, status = _a.status, onClick = _a.onClick;
     var hasResultButton = !!resultButtonText;
     if (isInFlash) {
-        return (React.createElement("div", { className: styles["result-container-".concat(status)] },
+        return (React.createElement("div", { className: styles["result-container-".concat(status)], "aria-live": "polite", "aria-atomic": "true" },
             React.createElement("span", { className: styles['result-text'] }, resultText)));
     }
-    return (React.createElement("div", { className: styles["result-container-".concat(status)] },
+    return (React.createElement("div", { className: styles["result-container-".concat(status)], "aria-live": "polite", "aria-atomic": "true" },
         React.createElement("span", { className: clsx(hasResultButton && styles['with-result-button']) },
             React.createElement(InternalStatusIndicator, { type: status === 'success' ? 'success' : 'error' },
                 React.createElement("span", { className: styles['result-text'] }, resultText))),

package/progress-bar/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.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 from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  labelId: string;\n}\nexport const Progress = ({ value, isInFlash, labelId }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(\n          styles.progress,\n          progressValue >= MAX_VALUE && styles.complete,\n          isInFlash && styles['progress-in-flash']\n        )}\n        aria-valuenow={progressValue}\n        aria-valuemin={0}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-labelledby={labelId}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  children: React.ReactNode;\n}\n\nexport const SmallText = ({ color, children }: SmallTextProps) => {\n  return (\n    <InternalBox className={styles['word-wrap']} variant=\"small\" display=\"block\" color={color}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]}>\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]}>\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.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 from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  labelId: string;\n}\nexport const Progress = ({ value, isInFlash, labelId }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(\n          styles.progress,\n          progressValue >= MAX_VALUE && styles.complete,\n          isInFlash && styles['progress-in-flash']\n        )}\n        aria-valuenow={progressValue}\n        aria-valuemin={0}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-labelledby={labelId}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  children: React.ReactNode;\n}\n\nexport const SmallText = ({ color, children }: SmallTextProps) => {\n  return (\n    <InternalBox className={styles['word-wrap']} variant=\"small\" display=\"block\" color={color}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}

package/select/interfaces.d.ts

@@ -44,7 +44,7 @@ export interface BaseSelectProps extends BaseDropdownHostProps, BaseComponentPro
      * them from server.
      *
      * By default the component will filter the provided `options` based on the value of the filtering input field.
-     * Only options that have a `value` or `label` that contains the input value as a substring
+     * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring
      * are displayed in the list of options.
      *
      * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are

package/select/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';\nimport {\n  BaseDropdownHostProps,\n  OptionsFilteringType,\n  OptionsLoadItemsDetail,\n} from '../internal/components/dropdown/interfaces';\n\nexport interface BaseSelectProps\n  extends BaseDropdownHostProps,\n    BaseComponentProps,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: SelectProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value` or `label` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Determines whether the whole select component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Specifies the placeholder to display in the filtering input if filtering is enabled.\n   */\n  filteringPlaceholder?: string;\n  /**\n   * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n   */\n  filteringAriaLabel?: string;\n  /**\n   * Deprecated, has no effect.\n   * @deprecated\n   */\n  name?: string;\n  /**\n   * Specifies the hint text that's displayed in the field when no option has been selected.\n   */\n  placeholder?: string;\n  /**\n   * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n   */\n  controlId?: string;\n  /**\n   * Adds `aria-required` to the native input element.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Adds `aria-label` to the select element.\n   */\n  ariaLabel?: string;\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n  /**\n   * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n   */\n  noMatch?: React.ReactNode;\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler;\n  /**\n   * Called when input focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n  /**\n   * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n   */\n  triggerVariant?: SelectProps.TriggerVariant;\n  /**\n   * Specifies the currently selected option.\n   * If you want to clear the selection, use `null`.\n   */\n  selectedOption: SelectProps.Option | null;\n  /**\n   * Called when the user selects an option.\n   * The event `detail` contains the current `selectedOption`.\n   */\n  onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n}\n\nexport namespace SelectProps {\n  export type FilteringType = OptionsFilteringType;\n  export type TriggerVariant = 'label' | 'option';\n\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n\n  export interface ChangeDetail {\n    selectedOption: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';\nimport {\n  BaseDropdownHostProps,\n  OptionsFilteringType,\n  OptionsLoadItemsDetail,\n} from '../internal/components/dropdown/interfaces';\n\nexport interface BaseSelectProps\n  extends BaseDropdownHostProps,\n    BaseComponentProps,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   * - `label` (string) - (Optional) Option text displayed to the user.\n   * - `description` (string) - (Optional) Further information about the option that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option is disabled.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.\n   * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * #### OptionGroup\n   * - `label` (string) - Option group text displayed to the user.\n   * - `disabled` (boolean) - (Optional) Determines whether the option group is disabled.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: SelectProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Determines whether the whole select component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Specifies the placeholder to display in the filtering input if filtering is enabled.\n   */\n  filteringPlaceholder?: string;\n  /**\n   * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n   */\n  filteringAriaLabel?: string;\n  /**\n   * Deprecated, has no effect.\n   * @deprecated\n   */\n  name?: string;\n  /**\n   * Specifies the hint text that's displayed in the field when no option has been selected.\n   */\n  placeholder?: string;\n  /**\n   * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n   */\n  controlId?: string;\n  /**\n   * Adds `aria-required` to the native input element.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Adds `aria-label` to the select element.\n   */\n  ariaLabel?: string;\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n  /**\n   * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n   */\n  noMatch?: React.ReactNode;\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler;\n  /**\n   * Called when input focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n  /**\n   * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n   */\n  triggerVariant?: SelectProps.TriggerVariant;\n  /**\n   * Specifies the currently selected option.\n   * If you want to clear the selection, use `null`.\n   */\n  selectedOption: SelectProps.Option | null;\n  /**\n   * Called when the user selects an option.\n   * The event `detail` contains the current `selectedOption`.\n   */\n  onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n}\n\nexport namespace SelectProps {\n  export type FilteringType = OptionsFilteringType;\n  export type TriggerVariant = 'label' | 'option';\n\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n\n  export interface ChangeDetail {\n    selectedOption: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}