@cloudscape-design/components 3.0.442 → 3.0.443

package/anchor-navigation/use-scroll-spy.js

@@ -25,7 +25,7 @@ export default function useScrollSpy({ hrefs, scrollSpyOffset, activeHref, }) {
         setLastAnchorExists(isBrowser && !!document.getElementById((_a = hrefs[hrefs.length - 1]) === null || _a === void 0 ? void 0 : _a.slice(1)));
     }, [hrefs]);
     // Get the bounding rectangle of an element by href
-    const getRectByHref = useCallback((href) => {
+    const getRectByHref = useCallback(href => {
         var _a;
         return (_a = document.getElementById(href.slice(1))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     }, []);

package/anchor-navigation/use-scroll-spy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-spy.js","sourceRoot":"lib/default/","sources":["anchor-navigation/use-scroll-spy.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,eAAe,EACf,UAAU,GAKX;IACC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAqB,UAAU,CAAC,CAAC;IAC/E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;;QACb,mBAAmB,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAA,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,0CAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjG,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,mDAAmD;IACnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;;QACjD,OAAO,MAAA,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0CAAE,qBAAqB,EAAE,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,oDAAoD;IACpD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,gBAAgB,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,mEAAmE;IACnE,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACvB,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;YACjC,OAAO,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,GAAG,IAAI,eAAe,CAAC;QAClF,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5C,uEAAuE;IACvE,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACtC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;YACjC,OAAO,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC;QACnD,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAE3B,uBAAuB;IACvB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,UAAU,IAAI,CAAC,SAAS,EAAE;YAC5B,OAAO;SACR;QAED,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;QAE3B,IAAI,QAAQ,CAAC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,IAAI,YAAY,EAAE,EAAE;YACrE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;SACzC;aAAM;YACL,cAAc,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;SACtF;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,YAAY,EAAE,CAAC;YACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACnE,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACrD,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect, useState } from 'react';\n\nconst isBrowser = typeof window !== 'undefined';\n\n/**\n * Hook to implement scroll-spy functionality.\n *\n * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.\n * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.\n * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.\n * Useful for accommodating fixed or sticky headers.\n * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,\n * and the scroll-spy logic will be disabled.\n *\n * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.\n */\nexport default function useScrollSpy({\n  hrefs,\n  scrollSpyOffset,\n  activeHref,\n}: {\n  hrefs: string[];\n  scrollSpyOffset: number;\n  activeHref?: string;\n}): string | undefined {\n  const [currentHref, setCurrentHref] = useState<string | undefined>(activeHref);\n  const [lastAnchorExists, setLastAnchorExists] = useState(false);\n\n  useEffect(() => {\n    setCurrentHref(activeHref);\n  }, [activeHref]);\n\n  useEffect(() => {\n    setLastAnchorExists(isBrowser && !!document.getElementById(hrefs[hrefs.length - 1]?.slice(1)));\n  }, [hrefs]);\n\n  // Get the bounding rectangle of an element by href\n  const getRectByHref = useCallback((href: string) => {\n    return document.getElementById(href.slice(1))?.getBoundingClientRect();\n  }, []);\n\n  // Check if we're scrolled to the bottom of the page\n  const isPageBottom = useCallback(() => {\n    return lastAnchorExists && Math.ceil(window.scrollY) >= Math.floor(document.body.scrollHeight - window.innerHeight);\n  }, [lastAnchorExists]);\n\n  // Find the first href for which the element is within the viewport\n  const findHrefInView = useCallback(() => {\n    return hrefs.find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight && rect.top >= scrollSpyOffset;\n    });\n  }, [getRectByHref, scrollSpyOffset, hrefs]);\n\n  // Find the last href where its element is above or within the viewport\n  const findLastHrefInView = useCallback(() => {\n    return [...hrefs].reverse().find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight;\n    });\n  }, [getRectByHref, hrefs]);\n\n  // Scroll event handler\n  const handleScroll = useCallback(() => {\n    if (activeHref || !isBrowser) {\n      return;\n    }\n\n    const { scrollY } = window;\n\n    if (document.body.scrollHeight > window.innerHeight && isPageBottom()) {\n      setCurrentHref(hrefs[hrefs.length - 1]);\n    } else {\n      setCurrentHref(findHrefInView() || (scrollY > 0 ? findLastHrefInView() : undefined));\n    }\n  }, [activeHref, isPageBottom, findHrefInView, findLastHrefInView, hrefs]);\n\n  useEffect(() => {\n    if (isBrowser) {\n      handleScroll();\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        window.removeEventListener('scroll', handleScroll);\n      };\n    }\n  }, [handleScroll]);\n\n  return currentHref;\n}\n"]}
+{"version":3,"file":"use-scroll-spy.js","sourceRoot":"lib/default/","sources":["anchor-navigation/use-scroll-spy.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 { useCallback, useEffect, useState } from 'react';\n\nconst isBrowser = typeof window !== 'undefined';\n\n/**\n * Hook to implement scroll-spy functionality.\n *\n * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.\n * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.\n * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.\n * Useful for accommodating fixed or sticky headers.\n * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,\n * and the scroll-spy logic will be disabled.\n *\n * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.\n */\nexport default function useScrollSpy({\n  hrefs,\n  scrollSpyOffset,\n  activeHref,\n}: {\n  hrefs: string[];\n  scrollSpyOffset: number;\n  activeHref?: string;\n}): string | undefined {\n  const [currentHref, setCurrentHref] = useState<string | undefined>(activeHref);\n  const [lastAnchorExists, setLastAnchorExists] = useState(false);\n\n  useEffect(() => {\n    setCurrentHref(activeHref);\n  }, [activeHref]);\n\n  useEffect(() => {\n    setLastAnchorExists(isBrowser && !!document.getElementById(hrefs[hrefs.length - 1]?.slice(1)));\n  }, [hrefs]);\n\n  // Get the bounding rectangle of an element by href\n  const getRectByHref = useCallback(href => {\n    return document.getElementById(href.slice(1))?.getBoundingClientRect();\n  }, []);\n\n  // Check if we're scrolled to the bottom of the page\n  const isPageBottom = useCallback(() => {\n    return lastAnchorExists && Math.ceil(window.scrollY) >= Math.floor(document.body.scrollHeight - window.innerHeight);\n  }, [lastAnchorExists]);\n\n  // Find the first href for which the element is within the viewport\n  const findHrefInView = useCallback(() => {\n    return hrefs.find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight && rect.top >= scrollSpyOffset;\n    });\n  }, [getRectByHref, scrollSpyOffset, hrefs]);\n\n  // Find the last href where its element is above or within the viewport\n  const findLastHrefInView = useCallback(() => {\n    return [...hrefs].reverse().find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight;\n    });\n  }, [getRectByHref, hrefs]);\n\n  // Scroll event handler\n  const handleScroll = useCallback(() => {\n    if (activeHref || !isBrowser) {\n      return;\n    }\n\n    const { scrollY } = window;\n\n    if (document.body.scrollHeight > window.innerHeight && isPageBottom()) {\n      setCurrentHref(hrefs[hrefs.length - 1]);\n    } else {\n      setCurrentHref(findHrefInView() || (scrollY > 0 ? findLastHrefInView() : undefined));\n    }\n  }, [activeHref, isPageBottom, findHrefInView, findLastHrefInView, hrefs]);\n\n  useEffect(() => {\n    if (isBrowser) {\n      handleScroll();\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        window.removeEventListener('scroll', handleScroll);\n      };\n    }\n  }, [handleScroll]);\n\n  return currentHref;\n}\n"]}

package/flashbar/flash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flash.d.ts","sourceRoot":"lib/default/","sources":["flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiD1B,eAAO,MAAM,cAAc,mEACf,WAAW,GAAG,IAAI,UAAU,MAAM,UAM7C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC;CACzC;AAED,eAAO,MAAM,KAAK,mFAyHjB,CAAC"}
+{"version":3,"file":"flash.d.ts","sourceRoot":"lib/default/","sources":["flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiD1B,eAAO,MAAM,cAAc,mEACf,WAAW,GAAG,IAAI,UAAU,MAAM,UAM7C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC;CACzC;AAED,eAAO,MAAM,KAAK,mFAsHjB,CAAC"}

package/flashbar/flash.js

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import React from 'react';
 import InternalSpinner from '../spinner/internal';
 import InternalIcon from '../icon/internal';
@@ -32,7 +33,8 @@ export const focusFlashById = throttle((element, itemId) => {
     const selector = `[data-itemid="${CSS.escape(itemId)}"] .${styles['flash-focus-container']}`;
     (_a = element === null || element === void 0 ? void 0 : element.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.focus();
 }, FOCUS_THROTTLE_DELAY, { trailing: false });
-export const Flash = React.forwardRef(({ id, header, content, dismissible, dismissLabel, statusIconAriaLabel, loading, action, buttonText, onButtonClick, onDismiss, className, transitionState, ariaRole, i18nStrings, type = 'info', }, ref) => {
+export const Flash = React.forwardRef((_a, ref) => {
+    var { id, header, content, dismissible, dismissLabel, loading, action, buttonText, onButtonClick, onDismiss, className, transitionState, ariaRole, i18nStrings, type = 'info' } = _a, props = __rest(_a, ["id", "header", "content", "dismissible", "dismissLabel", "loading", "action", "buttonText", "onButtonClick", "onDismiss", "className", "transitionState", "ariaRole", "i18nStrings", "type"]);
     if (isDevelopment) {
         if (buttonText && !onButtonClick) {
             warnOnce('Flashbar', `You provided a \`buttonText\` prop without an \`onButtonClick\` handler. This will render a non-interactive action button.`);
@@ -52,6 +54,8 @@ export const Flash = React.forwardRef(({ id, header, content, dismissible, dismi
     const analyticsAttributes = {
         [DATA_ATTR_ANALYTICS_FLASHBAR]: effectiveType,
     };
+    const statusIconAriaLabel = props.statusIconAriaLabel ||
+        (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`]);
     return (
     // We're not using "polite" or "assertive" here, just turning default behavior off.
     // eslint-disable-next-line @cloudscape-design/prefer-live-region
@@ -65,8 +69,7 @@ export const Flash = React.forwardRef(({ id, header, content, dismissible, dismi
         }, getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar')) }, analyticsAttributes),
         React.createElement("div", { className: styles['flash-body'] },
             React.createElement("div", { className: styles['flash-focus-container'], tabIndex: -1 },
-                React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']), role: "img", "aria-label": statusIconAriaLabel ||
-                        (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`]) }, icon),
+                React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']), role: "img", "aria-label": statusIconAriaLabel }, icon),
                 React.createElement("div", { className: clsx(styles['flash-message'], styles['flash-text']) },
                     React.createElement("div", { className: styles['flash-header'], ref: headerRef }, header),
                     React.createElement("div", { className: styles['flash-content'], ref: contentRef }, content))),
@@ -75,11 +78,6 @@ export const Flash = React.forwardRef(({ id, header, content, dismissible, dismi
                     actionButton: styles['action-button'],
                 }, action: action, discoveredActions: discoveredActions, buttonText: buttonText, onButtonClick: onButtonClick })),
         dismissible && dismissButton(dismissLabel, handleDismiss),
-        ariaRole === 'status' && (React.createElement(LiveRegion, null,
-            statusIconAriaLabel,
-            " ",
-            header,
-            " ",
-            content))));
+        ariaRole === 'status' && React.createElement(LiveRegion, { source: [statusIconAriaLabel, headerRef, contentRef] })));
 });
 //# sourceMappingURL=flash.js.map

package/flashbar/flash.js.map

@@ -1 +1 @@
-{"version":3,"file":"flash.js","sourceRoot":"lib/default/","sources":["flashbar/flash.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 { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\nimport { ButtonProps } from '../button/interfaces';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport { sendDismissMetric } from './internal/analytics';\n\nimport { FOCUS_THROTTLE_DELAY } from './utils';\nimport { DATA_ATTR_ANALYTICS_FLASHBAR } from '../internal/analytics/selectors';\nimport { createUseDiscoveredAction } from '../internal/plugins/helpers';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { ActionsWrapper } from '../alert/actions-wrapper';\n\nconst ICON_TYPES = {\n  success: 'status-positive',\n  warning: 'status-warning',\n  info: 'status-info',\n  error: 'status-negative',\n  'in-progress': 'status-in-progress',\n} as const;\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.flashbar.onActionRegistered);\n\nfunction dismissButton(\n  dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n  onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n  return (\n    <div className={styles['dismiss-button-wrapper']}>\n      <InternalButton\n        onClick={onDismiss}\n        className={styles['dismiss-button']}\n        variant=\"flashbar-icon\"\n        iconName=\"close\"\n        formAction=\"none\"\n        ariaLabel={dismissLabel}\n      />\n    </div>\n  );\n}\n\nexport const focusFlashById = throttle(\n  (element: HTMLElement | null, itemId: string) => {\n    const selector = `[data-itemid=\"${CSS.escape(itemId)}\"] .${styles['flash-focus-container']}`;\n    element?.querySelector<HTMLElement>(selector)?.focus();\n  },\n  FOCUS_THROTTLE_DELAY,\n  { trailing: false }\n);\n\nexport interface FlashProps extends FlashbarProps.MessageDefinition {\n  className: string;\n  transitionState?: string;\n  i18nStrings?: FlashbarProps.I18nStrings;\n}\n\nexport const Flash = React.forwardRef(\n  (\n    {\n      id,\n      header,\n      content,\n      dismissible,\n      dismissLabel,\n      statusIconAriaLabel,\n      loading,\n      action,\n      buttonText,\n      onButtonClick,\n      onDismiss,\n      className,\n      transitionState,\n      ariaRole,\n      i18nStrings,\n      type = 'info',\n    }: FlashProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (isDevelopment) {\n      if (buttonText && !onButtonClick) {\n        warnOnce(\n          'Flashbar',\n          `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n        );\n      }\n\n      if (dismissible && !onDismiss) {\n        warnOnce(\n          'Flashbar',\n          `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n        );\n      }\n    }\n\n    const { discoveredActions, headerRef, contentRef } = useDiscoveredAction(type);\n\n    const iconType = ICON_TYPES[type];\n\n    const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n    const effectiveType = loading ? 'info' : type;\n\n    const handleDismiss: ButtonProps['onClick'] = event => {\n      sendDismissMetric(effectiveType);\n      onDismiss && onDismiss(event);\n    };\n\n    const analyticsAttributes = {\n      [DATA_ATTR_ANALYTICS_FLASHBAR]: effectiveType,\n    };\n\n    return (\n      // We're not using \"polite\" or \"assertive\" here, just turning default behavior off.\n      // eslint-disable-next-line @cloudscape-design/prefer-live-region\n      <div\n        ref={ref}\n        role={ariaRole}\n        aria-live={ariaRole ? 'off' : undefined}\n        data-itemid={id}\n        className={clsx(\n          styles.flash,\n          styles[`flash-type-${effectiveType}`],\n          className,\n          transitionState && {\n            [styles.enter]: transitionState === 'enter',\n            [styles.entering]: transitionState === 'entering',\n            [styles.entered]: transitionState === 'entered',\n            [styles.exit]: transitionState === 'exit',\n            [styles.exiting]: transitionState === 'exiting',\n            [styles.exited]: transitionState === 'exited',\n          },\n          getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar')\n        )}\n        {...analyticsAttributes}\n      >\n        <div className={styles['flash-body']}>\n          <div className={styles['flash-focus-container']} tabIndex={-1}>\n            <div\n              className={clsx(styles['flash-icon'], styles['flash-text'])}\n              role=\"img\"\n              aria-label={\n                statusIconAriaLabel ||\n                i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`]\n              }\n            >\n              {icon}\n            </div>\n            <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n              <div className={styles['flash-header']} ref={headerRef}>\n                {header}\n              </div>\n              <div className={styles['flash-content']} ref={contentRef}>\n                {content}\n              </div>\n            </div>\n          </div>\n          <ActionsWrapper\n            className={styles['action-button-wrapper']}\n            testUtilClasses={{\n              actionSlot: styles['action-slot'],\n              actionButton: styles['action-button'],\n            }}\n            action={action}\n            discoveredActions={discoveredActions}\n            buttonText={buttonText}\n            onButtonClick={onButtonClick}\n          />\n        </div>\n        {dismissible && dismissButton(dismissLabel, handleDismiss)}\n        {ariaRole === 'status' && (\n          <LiveRegion>\n            {statusIconAriaLabel} {header} {content}\n          </LiveRegion>\n        )}\n      </div>\n    );\n  }\n);\n"]}
+{"version":3,"file":"flash.js","sourceRoot":"lib/default/","sources":["flashbar/flash.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 { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\nimport { ButtonProps } from '../button/interfaces';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport { sendDismissMetric } from './internal/analytics';\n\nimport { FOCUS_THROTTLE_DELAY } from './utils';\nimport { DATA_ATTR_ANALYTICS_FLASHBAR } from '../internal/analytics/selectors';\nimport { createUseDiscoveredAction } from '../internal/plugins/helpers';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { ActionsWrapper } from '../alert/actions-wrapper';\n\nconst ICON_TYPES = {\n  success: 'status-positive',\n  warning: 'status-warning',\n  info: 'status-info',\n  error: 'status-negative',\n  'in-progress': 'status-in-progress',\n} as const;\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.flashbar.onActionRegistered);\n\nfunction dismissButton(\n  dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n  onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n  return (\n    <div className={styles['dismiss-button-wrapper']}>\n      <InternalButton\n        onClick={onDismiss}\n        className={styles['dismiss-button']}\n        variant=\"flashbar-icon\"\n        iconName=\"close\"\n        formAction=\"none\"\n        ariaLabel={dismissLabel}\n      />\n    </div>\n  );\n}\n\nexport const focusFlashById = throttle(\n  (element: HTMLElement | null, itemId: string) => {\n    const selector = `[data-itemid=\"${CSS.escape(itemId)}\"] .${styles['flash-focus-container']}`;\n    element?.querySelector<HTMLElement>(selector)?.focus();\n  },\n  FOCUS_THROTTLE_DELAY,\n  { trailing: false }\n);\n\nexport interface FlashProps extends FlashbarProps.MessageDefinition {\n  className: string;\n  transitionState?: string;\n  i18nStrings?: FlashbarProps.I18nStrings;\n}\n\nexport const Flash = React.forwardRef(\n  (\n    {\n      id,\n      header,\n      content,\n      dismissible,\n      dismissLabel,\n      loading,\n      action,\n      buttonText,\n      onButtonClick,\n      onDismiss,\n      className,\n      transitionState,\n      ariaRole,\n      i18nStrings,\n      type = 'info',\n      ...props\n    }: FlashProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (isDevelopment) {\n      if (buttonText && !onButtonClick) {\n        warnOnce(\n          'Flashbar',\n          `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n        );\n      }\n\n      if (dismissible && !onDismiss) {\n        warnOnce(\n          'Flashbar',\n          `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n        );\n      }\n    }\n\n    const { discoveredActions, headerRef, contentRef } = useDiscoveredAction(type);\n\n    const iconType = ICON_TYPES[type];\n\n    const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n    const effectiveType = loading ? 'info' : type;\n\n    const handleDismiss: ButtonProps['onClick'] = event => {\n      sendDismissMetric(effectiveType);\n      onDismiss && onDismiss(event);\n    };\n\n    const analyticsAttributes = {\n      [DATA_ATTR_ANALYTICS_FLASHBAR]: effectiveType,\n    };\n\n    const statusIconAriaLabel =\n      props.statusIconAriaLabel ||\n      i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`];\n\n    return (\n      // We're not using \"polite\" or \"assertive\" here, just turning default behavior off.\n      // eslint-disable-next-line @cloudscape-design/prefer-live-region\n      <div\n        ref={ref}\n        role={ariaRole}\n        aria-live={ariaRole ? 'off' : undefined}\n        data-itemid={id}\n        className={clsx(\n          styles.flash,\n          styles[`flash-type-${effectiveType}`],\n          className,\n          transitionState && {\n            [styles.enter]: transitionState === 'enter',\n            [styles.entering]: transitionState === 'entering',\n            [styles.entered]: transitionState === 'entered',\n            [styles.exit]: transitionState === 'exit',\n            [styles.exiting]: transitionState === 'exiting',\n            [styles.exited]: transitionState === 'exited',\n          },\n          getVisualContextClassname(type === 'warning' && !loading ? 'flashbar-warning' : 'flashbar')\n        )}\n        {...analyticsAttributes}\n      >\n        <div className={styles['flash-body']}>\n          <div className={styles['flash-focus-container']} tabIndex={-1}>\n            <div\n              className={clsx(styles['flash-icon'], styles['flash-text'])}\n              role=\"img\"\n              aria-label={statusIconAriaLabel}\n            >\n              {icon}\n            </div>\n            <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n              <div className={styles['flash-header']} ref={headerRef}>\n                {header}\n              </div>\n              <div className={styles['flash-content']} ref={contentRef}>\n                {content}\n              </div>\n            </div>\n          </div>\n          <ActionsWrapper\n            className={styles['action-button-wrapper']}\n            testUtilClasses={{\n              actionSlot: styles['action-slot'],\n              actionButton: styles['action-button'],\n            }}\n            action={action}\n            discoveredActions={discoveredActions}\n            buttonText={buttonText}\n            onButtonClick={onButtonClick}\n          />\n        </div>\n        {dismissible && dismissButton(dismissLabel, handleDismiss)}\n        {ariaRole === 'status' && <LiveRegion source={[statusIconAriaLabel, headerRef, contentRef]} />}\n      </div>\n    );\n  }\n);\n"]}

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

@@ -5,8 +5,15 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
     delay?: number;
     visible?: boolean;
     tagName?: 'span' | 'div';
-    children: React.ReactNode;
     id?: string;
+    /**
+     * Use a list of strings and/or existing DOM elements for building the
+     * announcement text. This avoids rendering separate content just for this
+     * LiveRegion.
+     *
+     * If this property is set, the `children` will be ignored.
+     */
+    source?: Array<string | React.RefObject<HTMLElement> | undefined>;
 }
 /**
  * The live region is hidden in the layout, but visible for screen readers.
@@ -17,31 +24,42 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
  *
  * If you notice there are different words being merged together,
  * check if there are text nodes not being wrapped in elements, like:
+ * ```
  * <LiveRegion>
  *   {title}
  *   <span><Details /></span>
  * </LiveRegion>
+ * ```
  *
  * To fix, wrap "title" in an element:
+ * ```
  * <LiveRegion>
  *   <span>{title}</span>
  *   <span><Details /></span>
  * </LiveRegion>
+ * ```
  *
  * Or create a single text node if possible:
+ * ```
  * <LiveRegion>
  *   {`${title} ${details}`}
  * </LiveRegion>
+ * ```
  *
  * The live region is always atomic, because non-atomic regions can be treated by screen readers
  * differently and produce unexpected results. To imitate non-atomic announcements simply use
  * multiple live regions:
+ * ```
  * <>
  *   <LiveRegion>{title}</LiveRegion>
  *   <LiveRegion><Details /></LiveRegion>
  * </>
+ * ```
+ *
+ * If you place interactive content inside the LiveRegion, the content will still be
+ * interactive (e.g. as a tab stop). Consider using the `source` property instead.
  */
 declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
 export default _default;
-declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, id, ...restProps }: LiveRegionProps): JSX.Element;
+declare function LiveRegion({ assertive, delay, visible, tagName: TagName, children, id, source, ...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":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAClB,SAAiB,EACjB,KAAU,EACV,OAAe,EACf,OAAO,EAAE,OAAgB,EACzB,QAAQ,EACR,EAAE,EACF,GAAG,SAAS,EACb,EAAE,eAAe,eA8DjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CACnE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAClB,SAAiB,EACjB,KAAU,EACV,OAAe,EACf,OAAO,EAAE,OAAgB,EACzB,QAAQ,EACR,EAAE,EACF,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,eAqFjB"}

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

@@ -15,33 +15,44 @@ import styles from './styles.css.js';
  *
  * If you notice there are different words being merged together,
  * check if there are text nodes not being wrapped in elements, like:
+ * ```
  * <LiveRegion>
  *   {title}
  *   <span><Details /></span>
  * </LiveRegion>
+ * ```
  *
  * To fix, wrap "title" in an element:
+ * ```
  * <LiveRegion>
  *   <span>{title}</span>
  *   <span><Details /></span>
  * </LiveRegion>
+ * ```
  *
  * Or create a single text node if possible:
+ * ```
  * <LiveRegion>
  *   {`${title} ${details}`}
  * </LiveRegion>
+ * ```
  *
  * The live region is always atomic, because non-atomic regions can be treated by screen readers
  * differently and produce unexpected results. To imitate non-atomic announcements simply use
  * multiple live regions:
+ * ```
  * <>
  *   <LiveRegion>{title}</LiveRegion>
  *   <LiveRegion><Details /></LiveRegion>
  * </>
+ * ```
+ *
+ * If you place interactive content inside the LiveRegion, the content will still be
+ * interactive (e.g. as a tab stop). Consider using the `source` property instead.
  */
 export default memo(LiveRegion);
 function LiveRegion(_a) {
-    var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children, id } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children", "id"]);
+    var { assertive = false, delay = 10, visible = false, tagName: TagName = 'span', children, id, source } = _a, restProps = __rest(_a, ["assertive", "delay", "visible", "tagName", "children", "id", "source"]);
     const sourceRef = useRef(null);
     const targetRef = useRef(null);
     /*
@@ -56,9 +67,30 @@ function LiveRegion(_a) {
       does not impact the performance. If it does, prefer using a string as children prop.
     */
     useEffect(() => {
+        function getSourceContent() {
+            if (source) {
+                return source
+                    .map(item => {
+                    if (!item) {
+                        return undefined;
+                    }
+                    if (typeof item === 'string') {
+                        return item;
+                    }
+                    if (item.current) {
+                        return extractInnerText(item.current);
+                    }
+                })
+                    .filter(Boolean)
+                    .join(' ');
+            }
+            if (sourceRef.current) {
+                return extractInnerText(sourceRef.current);
+            }
+        }
         function updateLiveRegion() {
-            if (targetRef.current && sourceRef.current) {
-                const sourceContent = extractInnerText(sourceRef.current);
+            const sourceContent = getSourceContent();
+            if (targetRef.current && sourceContent) {
                 const targetContent = extractInnerText(targetRef.current);
                 if (targetContent !== sourceContent) {
                     // The aria-atomic does not work properly in Voice Over, causing
@@ -82,9 +114,9 @@ function LiveRegion(_a) {
         };
     });
     return (React.createElement(React.Fragment, null,
-        visible && (React.createElement(TagName, { ref: sourceRef, id: id }, children)),
+        visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id }, children)),
         React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
-            !visible && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true" }, children)),
+            !visible && !source && (React.createElement(TagName, { 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.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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,sBAAsB,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAQF;QARE,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,EACzB,QAAQ,EACR,EAAE,OAEc,EADb,SAAS,cAPM,8DAQnB,CADa;IAEZ,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEjE;;;;;;;;;;MAUE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,MAAM,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,GAAG,EAAE;YACV,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,IAC5B,QAAQ,CACD,CACX;QAED,oBAAC,gBAAgB,oBAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,iBAAc,MAAM,IACxC,QAAQ,CACD,CACX;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';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  children: React.ReactNode;\n  id?: string;\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({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function 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 && (\n        <TagName ref={sourceRef} id={id}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && (\n          <TagName ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/live-region/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  tagName?: 'span' | 'div';\n  id?: string;\n  /**\n   * Use a list of strings and/or existing DOM elements for building the\n   * announcement text. This avoids rendering separate content just for this\n   * LiveRegion.\n   *\n   * If this property is set, the `children` will be ignored.\n   */\n  source?: Array<string | React.RefObject<HTMLElement> | undefined>;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * ```\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * To fix, wrap \"title\" in an element:\n * ```\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * Or create a single text node if possible:\n * ```\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n * ```\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * ```\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n * ```\n *\n * If you place interactive content inside the LiveRegion, the content will still be\n * interactive (e.g. as a tab stop). Consider using the `source` property instead.\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n  assertive = false,\n  delay = 10,\n  visible = false,\n  tagName: TagName = 'span',\n  children,\n  id,\n  source,\n  ...restProps\n}: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function getSourceContent() {\n      if (source) {\n        return source\n          .map(item => {\n            if (!item) {\n              return undefined;\n            }\n            if (typeof item === 'string') {\n              return item;\n            }\n            if (item.current) {\n              return extractInnerText(item.current);\n            }\n          })\n          .filter(Boolean)\n          .join(' ');\n      }\n\n      if (sourceRef.current) {\n        return extractInnerText(sourceRef.current);\n      }\n    }\n    function updateLiveRegion() {\n      const sourceContent = getSourceContent();\n\n      if (targetRef.current && sourceContent) {\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && !source && (\n        <TagName ref={sourceRef} id={id}>\n          {children}\n        </TagName>\n      )}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && !source && (\n          <TagName ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </TagName>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}

package/internal/components/screenreader-only/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export interface ScreenreaderOnlyProps {
     id?: string;
     className?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 /**
  * Makes content now shown on a screen but still announced by screen-reader users.

package/internal/components/screenreader-only/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAEpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAEpE"}

package/internal/components/screenreader-only/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,OAAO,8CAAU,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;AAC5E,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\n\nexport interface ScreenreaderOnlyProps {\n  id?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * Makes content now shown on a screen but still announced by screen-reader users.\n * The component is suitable when the aria-label cannot be used, e.g. to avoid elemnts being announced as \"blank\".\n *\n * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:\n *\n * ```\n * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'\n *\n * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent\n *\n * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent\n * ```\n */\nexport default function ScreenreaderOnly(props: ScreenreaderOnlyProps) {\n  return <span {...props} className={clsx(styles.root, props.className)} />;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,OAAO,8CAAU,KAAK,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;AAC5E,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\n\nexport interface ScreenreaderOnlyProps {\n  id?: string;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Makes content now shown on a screen but still announced by screen-reader users.\n * The component is suitable when the aria-label cannot be used, e.g. to avoid elemnts being announced as \"blank\".\n *\n * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:\n *\n * ```\n * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'\n *\n * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent\n *\n * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent\n * ```\n */\nexport default function ScreenreaderOnly(props: ScreenreaderOnlyProps) {\n  return <span {...props} className={clsx(styles.root, props.className)} />;\n}\n"]}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (00c3e7ae)";
+export var PACKAGE_VERSION = "3.0.0 (be8a0396)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (00c3e7ae)",
+  "PACKAGE_VERSION": "3.0.0 (be8a0396)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "00c3e7ae5e175f7ad7a87a9b5e9571bad9aefe22"
+  "commit": "be8a0396919c2f0cc51c918ff929d0508c4958f0"
 }

package/package.json

@@ -113,7 +113,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.442",
+  "version": "3.0.443",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/table/column-widths-utils.d.ts

@@ -1,4 +1,3 @@
 import { TableProps } from './interfaces';
 export declare function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>): void;
-export declare function setElementWidths(element: undefined | HTMLElement, styles: React.CSSProperties): void;
 //# sourceMappingURL=column-widths-utils.d.ts.map

package/table/column-widths-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-widths-utils.d.ts","sourceRoot":"lib/default/","sources":["table/column-widths-utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,wBAAgB,iBAAiB,CAAC,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAKnG;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,SAAS,GAAG,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,aAAa,QAiB7F"}
+{"version":3,"file":"column-widths-utils.d.ts","sourceRoot":"lib/default/","sources":["table/column-widths-utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,wBAAgB,iBAAiB,CAAC,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAKnG"}

package/table/column-widths-utils.js

@@ -7,24 +7,6 @@ export function checkColumnWidths(columnDefinitions) {
         checkProperty(column, 'width');
     }
 }
-export function setElementWidths(element, styles) {
-    function setProperty(property) {
-        const value = styles[property];
-        let widthCssValue = '';
-        if (typeof value === 'number') {
-            widthCssValue = value + 'px';
-        }
-        if (typeof value === 'string') {
-            widthCssValue = value;
-        }
-        if (element && element.style[property] !== widthCssValue) {
-            element.style[property] = widthCssValue;
-        }
-    }
-    setProperty('width');
-    setProperty('minWidth');
-    setProperty('maxWidth');
-}
 function checkProperty(column, name) {
     const value = column[name];
     if (typeof value !== 'number' && typeof value !== 'undefined') {

package/table/column-widths-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-widths-utils.js","sourceRoot":"lib/default/","sources":["table/column-widths-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,MAAM,UAAU,iBAAiB,CAAC,iBAAkE;IAClG,KAAK,MAAM,MAAM,IAAI,iBAAiB,EAAE;QACtC,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAClC,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KAChC;AACH,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAAgC,EAAE,MAA2B;IAC5F,SAAS,WAAW,CAAC,QAA2C;QAC9D,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/B,IAAI,aAAa,GAAG,EAAE,CAAC;QACvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC;SAC9B;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,aAAa,GAAG,KAAK,CAAC;SACvB;QACD,IAAI,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,aAAa,EAAE;YACxD,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;SACzC;IACH,CAAC;IACD,WAAW,CAAC,OAAO,CAAC,CAAC;IACrB,WAAW,CAAC,UAAU,CAAC,CAAC;IACxB,WAAW,CAAC,UAAU,CAAC,CAAC;AAC1B,CAAC;AAED,SAAS,aAAa,CAAC,MAAwC,EAAE,IAA0B;IACzF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;QAC7D,QAAQ,CACN,OAAO,EACP,qCAAqC,IAAI,iCAAiC,KAAK,uCAAuC,CACvH,CAAC;KACH;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { TableProps } from './interfaces';\n\nexport function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {\n  for (const column of columnDefinitions) {\n    checkProperty(column, 'minWidth');\n    checkProperty(column, 'width');\n  }\n}\n\nexport function setElementWidths(element: undefined | HTMLElement, styles: React.CSSProperties) {\n  function setProperty(property: 'width' | 'minWidth' | 'maxWidth') {\n    const value = styles[property];\n    let widthCssValue = '';\n    if (typeof value === 'number') {\n      widthCssValue = value + 'px';\n    }\n    if (typeof value === 'string') {\n      widthCssValue = value;\n    }\n    if (element && element.style[property] !== widthCssValue) {\n      element.style[property] = widthCssValue;\n    }\n  }\n  setProperty('width');\n  setProperty('minWidth');\n  setProperty('maxWidth');\n}\n\nfunction checkProperty(column: TableProps.ColumnDefinition<any>, name: 'width' | 'minWidth') {\n  const value = column[name];\n  if (typeof value !== 'number' && typeof value !== 'undefined') {\n    warnOnce(\n      'Table',\n      `resizableColumns feature requires ${name} property to be a number, got ${value}. The component may work incorrectly.`\n    );\n  }\n}\n"]}
+{"version":3,"file":"column-widths-utils.js","sourceRoot":"lib/default/","sources":["table/column-widths-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAGzE,MAAM,UAAU,iBAAiB,CAAC,iBAAkE;IAClG,KAAK,MAAM,MAAM,IAAI,iBAAiB,EAAE;QACtC,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAClC,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KAChC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,MAAwC,EAAE,IAA0B;IACzF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;QAC7D,QAAQ,CACN,OAAO,EACP,qCAAqC,IAAI,iCAAiC,KAAK,uCAAuC,CACvH,CAAC;KACH;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { TableProps } from './interfaces';\n\nexport function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {\n  for (const column of columnDefinitions) {\n    checkProperty(column, 'minWidth');\n    checkProperty(column, 'width');\n  }\n}\n\nfunction checkProperty(column: TableProps.ColumnDefinition<any>, name: 'width' | 'minWidth') {\n  const value = column[name];\n  if (typeof value !== 'number' && typeof value !== 'undefined') {\n    warnOnce(\n      'Table',\n      `resizableColumns feature requires ${name} property to be a number, got ${value}. The component may work incorrectly.`\n    );\n  }\n}\n"]}

package/table/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["table/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAc,MAAM,cAAc,CAAC;AA+C/D,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBAqbK,CAAC;AAEzB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["table/internal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAc,MAAM,cAAc,CAAC;AA+C/D,eAAO,MAAM,sBAAsB,qBAWX,CAAC;AAEzB,QAAA,MAAM,aAAa,qBAgbK,CAAC;AAEzB,eAAe,aAAa,CAAC"}

package/table/internal.js

@@ -52,8 +52,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
     stickyHeader = stickyHeader && supportsStickyPosition();
     const isMobile = useMobile();
     const [containerWidth, wrapperMeasureRef] = useContainerQuery(rect => rect.contentBoxWidth);
-    const wrapperMeasureRefObject = useRef(null);
-    const wrapperMeasureMergedRef = useMergeRefs(wrapperMeasureRef, wrapperMeasureRefObject);
+    const wrapperRefObject = useRef(null);
     const [tableWidth, tableMeasureRef] = useContainerQuery(rect => rect.contentBoxWidth);
     const tableRefObject = useRef(null);
     const secondaryWrapperRef = React.useRef(null);
@@ -68,7 +67,6 @@ const InternalTable = React.forwardRef((_a, ref) => {
             cancelEdit,
         });
     }, [cancelEdit]);
-    const wrapperRefObject = useRef(null);
     const handleScroll = useScrollSync([wrapperRefObject, scrollbarRef, secondaryWrapperRef]);
     const { moveFocusDown, moveFocusUp, moveFocus } = useSelectionFocusMove(selectionType, items.length);
     const { onRowClickHandler, onRowContextMenuHandler } = useRowEvents({ onRowClick, onRowContextMenu });
@@ -130,6 +128,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
     const hasEditableCells = !!columnDefinitions.find(col => col.editConfig);
     const tableRole = hasEditableCells ? 'grid-default' : 'table';
     const theadProps = {
+        containerWidth,
         selectionType,
         getSelectAllProps,
         columnDefinitions: visibleColumnDefinitions,
@@ -171,7 +170,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
     const toolsHeaderHeight = (_f = (_e = toolsHeaderWrapper === null || toolsHeaderWrapper === void 0 ? void 0 : toolsHeaderWrapper.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().height) !== null && _f !== void 0 ? _f : 0;
     const totalColumnsCount = selectionType ? visibleColumnDefinitions.length + 1 : visibleColumnDefinitions.length;
     return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
-        React.createElement(ColumnWidthsProvider, { visibleColumns: visibleColumnWidthsWithSelection, resizableColumns: resizableColumns, containerRef: wrapperMeasureRefObject },
+        React.createElement(ColumnWidthsProvider, { visibleColumns: visibleColumnWidthsWithSelection, resizableColumns: resizableColumns },
             React.createElement(InternalContainer, Object.assign({}, baseProps, { __internalRootRef: __internalRootRef, className: clsx(baseProps.className, styles.root), __funnelSubStepProps: __funnelSubStepProps, header: React.createElement(React.Fragment, null,
                     hasHeader && (React.createElement("div", { ref: overlapElement, className: clsx(hasDynamicHeight && [styles['dark-header'], 'awsui-context-content-header']) },
                         React.createElement("div", { ref: toolsHeaderWrapper, className: clsx(styles['header-controls'], styles[`variant-${computedVariant}`]) },
@@ -185,7 +184,7 @@ const InternalTable = React.forwardRef((_a, ref) => {
                         [styles['has-footer']]: hasFooter,
                         [styles['has-header']]: hasHeader,
                     }), style: stickyState.style.wrapper, onScroll: handleScroll }, wrapperProps),
-                    React.createElement("div", { className: styles['wrapper-content-measure'], ref: wrapperMeasureMergedRef }),
+                    React.createElement("div", { className: styles['wrapper-content-measure'], ref: wrapperMeasureRef }),
                     !!renderAriaLive && !!firstIndex && (React.createElement(LiveRegion, null,
                         React.createElement("span", null, renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })))),
                     React.createElement("table", Object.assign({ ref: tableRef, className: clsx(styles.table, resizableColumns && styles['table-layout-fixed'], contentDensity === 'compact' && getVisualContextClassname('compact-table')) }, getTableRoleProps({