@cloudscape-design/components-themeable 3.0.813 → 3.0.815

package/lib/internal/template/internal/generated/theming/index.js

@@ -1078,12 +1078,12 @@ export var preset = {
         "dark": "{colorGrey850}"
       },
       "colorTextChatBubbleOutgoing": {
-        "light": "{colorTextBodyDefault}",
-        "dark": "{colorTextBodyDefault}"
+        "light": "{colorTextBodySecondary}",
+        "dark": "{colorTextBodySecondary}"
       },
       "colorTextChatBubbleIncoming": {
-        "light": "{colorTextBodyDefault}",
-        "dark": "{colorTextBodyDefault}"
+        "light": "{colorTextBodySecondary}",
+        "dark": "{colorTextBodySecondary}"
       },
       "colorBorderButtonNormalActive": {
         "light": "{colorBlue800}",
@@ -1871,7 +1871,7 @@ export var preset = {
       "borderRadiusTabsFocusRing": "20px",
       "borderRadiusTiles": "{borderRadiusInput}",
       "borderRadiusToken": "{borderRadiusInput}",
-      "borderRadiusChatBubble": "2px",
+      "borderRadiusChatBubble": "8px",
       "borderRadiusTutorialPanelItem": "{borderRadiusInput}",
       "borderTableStickyWidth": "1px",
       "borderLinkFocusRingOutline": "0",
@@ -3313,12 +3313,12 @@ export var preset = {
             "dark": "{colorGrey850}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
@@ -4467,12 +4467,12 @@ export var preset = {
             "dark": "{colorGrey850}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorBlue400}",
@@ -5553,12 +5553,12 @@ export var preset = {
             "dark": "{colorGrey850}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorWhite}",
@@ -6639,12 +6639,12 @@ export var preset = {
             "dark": "{colorGrey850}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -7725,12 +7725,12 @@ export var preset = {
             "dark": "{colorGrey850}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -8813,12 +8813,12 @@ export var preset = {
             "dark": "{colorGrey850}"
           },
           "colorTextChatBubbleOutgoing": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorTextChatBubbleIncoming": {
-            "light": "{colorTextBodyDefault}",
-            "dark": "{colorTextBodyDefault}"
+            "light": "{colorTextBodySecondary}",
+            "dark": "{colorTextBodySecondary}"
           },
           "colorBorderButtonNormalActive": {
             "light": "{colorTextButtonNormalHover}",
@@ -10226,6 +10226,8 @@ export var preset = {
     "colorBackgroundStatusSuccess",
     "colorBackgroundStatusWarning",
     "colorBackgroundToggleCheckedDisabled",
+    "colorBackgroundChatBubbleOutgoing",
+    "colorBackgroundChatBubbleIncoming",
     "colorTextChatBubbleOutgoing",
     "colorTextChatBubbleIncoming",
     "colorBorderButtonNormalActive",
@@ -11751,8 +11753,8 @@ export var preset = {
     "colorBackgroundLoadingBarGenAi": "--color-background-loading-bar-gen-ai-7qfi9s",
     "colorBackgroundChatBubbleOutgoing": "--color-background-chat-bubble-outgoing-pfqan2",
     "colorBackgroundChatBubbleIncoming": "--color-background-chat-bubble-incoming-brq006",
-    "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-bvbr0v",
-    "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-x2kig8",
+    "colorTextChatBubbleOutgoing": "--color-text-chat-bubble-outgoing-25z5e0",
+    "colorTextChatBubbleIncoming": "--color-text-chat-bubble-incoming-t2slde",
     "colorBorderButtonNormalActive": "--color-border-button-normal-active-mn0ayd",
     "colorBorderButtonNormalDefault": "--color-border-button-normal-default-uzqi0v",
     "colorBorderToggleButtonNormalPressed": "--color-border-toggle-button-normal-pressed-lylxt2",
@@ -12011,7 +12013,7 @@ export var preset = {
     "borderRadiusTabsFocusRing": "--border-radius-tabs-focus-ring-1q0rjo",
     "borderRadiusTiles": "--border-radius-tiles-60y8e6",
     "borderRadiusToken": "--border-radius-token-923jqq",
-    "borderRadiusChatBubble": "--border-radius-chat-bubble-ur269r",
+    "borderRadiusChatBubble": "--border-radius-chat-bubble-qvkt36",
     "borderRadiusTutorialPanelItem": "--border-radius-tutorial-panel-item-b44p0a",
     "borderTableStickyWidth": "--border-table-sticky-width-87kf12",
     "borderLinkFocusRingOutline": "--border-link-focus-ring-outline-kkfop6",

package/lib/internal/template/internal/hooks/use-dom-attribute/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useDOMAttribute(elementRef: React.RefObject<HTMLElement>, attributeName: string, value: string): {
+    [x: string]: string | undefined;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/hooks/use-dom-attribute/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-dom-attribute/index.tsx"],"names":[],"mappings":";AAQA,wBAAgB,eAAe,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;;EAY7G"}

package/lib/internal/template/internal/hooks/use-dom-attribute/index.js

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef } from 'react';
+/*
+ * This hook allows setting an DOM attribute after the first render, without rerendering the component.
+ */
+export function useDOMAttribute(elementRef, attributeName, value) {
+    const attributeValueRef = useRef();
+    useEffect(() => {
+        var _a;
+        // With this effect, we apply the attribute only on the client, to avoid hydration errors.
+        attributeValueRef.current = value;
+        (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(attributeName, value);
+    }, [attributeName, value, elementRef]);
+    return {
+        [attributeName]: attributeValueRef.current,
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/internal/template/internal/hooks/use-dom-attribute/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-dom-attribute/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,UAAwC,EAAE,aAAqB,EAAE,KAAa;IAC5G,MAAM,iBAAiB,GAAG,MAAM,EAAsB,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;;QACb,0FAA0F;QAC1F,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAC;QAClC,MAAA,UAAU,CAAC,OAAO,0CAAE,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvC,OAAO;QACL,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC,OAAO;KAC3C,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\n\n/*\n * This hook allows setting an DOM attribute after the first render, without rerendering the component.\n */\nexport function useDOMAttribute(elementRef: React.RefObject<HTMLElement>, attributeName: string, value: string) {\n  const attributeValueRef = useRef<string | undefined>();\n\n  useEffect(() => {\n    // With this effect, we apply the attribute only on the client, to avoid hydration errors.\n    attributeValueRef.current = value;\n    elementRef.current?.setAttribute(attributeName, value);\n  }, [attributeName, value, elementRef]);\n\n  return {\n    [attributeName]: attributeValueRef.current,\n  };\n}\n"]}

package/lib/internal/template/internal/hooks/use-performance-marks/index.d.ts

@@ -5,6 +5,6 @@
  * correctly.
  */
 export declare function usePerformanceMarks(name: string, enabled: boolean, elementRef: React.RefObject<HTMLElement>, getDetails: () => Record<string, string | boolean | number | undefined>, dependencies: React.DependencyList): {
-    "data-analytics-performance-mark": string | undefined;
+    [x: string]: string | undefined;
 };
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/hooks/use-performance-marks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-performance-marks/index.ts"],"names":[],"mappings":";AA4BA;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EACxC,UAAU,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,EACvE,YAAY,EAAE,KAAK,CAAC,cAAc;;EAyDnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-performance-marks/index.ts"],"names":[],"mappings":";AAUA;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EACxC,UAAU,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,EACvE,YAAY,EAAE,KAAK,CAAC,cAAc;;EA0DnC"}

package/lib/internal/template/internal/hooks/use-performance-marks/index.js

@@ -1,25 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useModalContext } from '../../context/modal-context';
+import { useDOMAttribute } from '../use-dom-attribute';
 import { useEffectOnUpdate } from '../use-effect-on-update';
 import { useRandomId } from '../use-unique-id';
-/*
-This hook allows setting an HTML attribute after the first render, without rerendering the component.
-*/
-function usePerformanceMarkAttribute(elementRef, value) {
-    const attributeName = 'data-analytics-performance-mark';
-    const attributeValueRef = useRef();
-    useEffect(() => {
-        var _a;
-        // With this effect, we apply the attribute only on the client, to avoid hydration errors.
-        attributeValueRef.current = value;
-        (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(attributeName, value);
-    }, [value, elementRef]);
-    return {
-        [attributeName]: attributeValueRef.current,
-    };
-}
 /**
  * This function returns an object that needs to be spread onto the same
  * element as the `elementRef`, so that the data attribute is applied
@@ -28,7 +13,7 @@ function usePerformanceMarkAttribute(elementRef, value) {
 export function usePerformanceMarks(name, enabled, elementRef, getDetails, dependencies) {
     const id = useRandomId();
     const { isInModal } = useModalContext();
-    const attributes = usePerformanceMarkAttribute(elementRef, id);
+    const attributes = useDOMAttribute(elementRef, 'data-analytics-performance-mark', id);
     useEffect(() => {
         if (!enabled || !elementRef.current || isInModal) {
             return;

package/lib/internal/template/internal/hooks/use-performance-marks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-performance-marks/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C;;EAEE;AACF,SAAS,2BAA2B,CAAC,UAAwC,EAAE,KAAa;IAC1F,MAAM,aAAa,GAAG,iCAAiC,CAAC;IAExD,MAAM,iBAAiB,GAAG,MAAM,EAAsB,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;;QACb,0FAA0F;QAC1F,iBAAiB,CAAC,OAAO,GAAG,KAAK,CAAC;QAClC,MAAA,UAAU,CAAC,OAAO,0CAAE,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAExB,OAAO;QACL,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC,OAAO;KAC3C,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAY,EACZ,OAAgB,EAChB,UAAwC,EACxC,UAAuE,EACvE,YAAkC;IAElC,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,2BAA2B,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,SAAS,EAAE;YAChD,OAAO;SACR;QAED,MAAM,cAAc,GAClB,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YAClC,UAAU,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC;YACnC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC;QAE/D,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,MAAM,gBAAgB,GAAG,GAAG,IAAI,UAAU,CAAC;QAE3C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE;YACjC,MAAM,kBACJ,MAAM,EAAE,OAAO,EACf,kBAAkB,EAAE,EAAE,IACnB,UAAU,EAAE,CAChB;SACF,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iBAAiB,CAAC,GAAG,EAAE;QACrB,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,SAAS,EAAE;YAChD,OAAO;SACR;QACD,MAAM,cAAc,GAClB,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YAClC,UAAU,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC;YACnC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC;QAE/D,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,MAAM,eAAe,GAAG,GAAG,IAAI,SAAS,CAAC;QAEzC,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE;YAChC,MAAM,kBACJ,MAAM,EAAE,OAAO,EACf,kBAAkB,EAAE,EAAE,IACnB,UAAU,EAAE,CAChB;SACF,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\n\nimport { useModalContext } from '../../context/modal-context';\nimport { useEffectOnUpdate } from '../use-effect-on-update';\nimport { useRandomId } from '../use-unique-id';\n\n/*\nThis hook allows setting an HTML attribute after the first render, without rerendering the component.\n*/\nfunction usePerformanceMarkAttribute(elementRef: React.RefObject<HTMLElement>, value: string) {\n  const attributeName = 'data-analytics-performance-mark';\n\n  const attributeValueRef = useRef<string | undefined>();\n\n  useEffect(() => {\n    // With this effect, we apply the attribute only on the client, to avoid hydration errors.\n    attributeValueRef.current = value;\n    elementRef.current?.setAttribute(attributeName, value);\n  }, [value, elementRef]);\n\n  return {\n    [attributeName]: attributeValueRef.current,\n  };\n}\n\n/**\n * This function returns an object that needs to be spread onto the same\n * element as the `elementRef`, so that the data attribute is applied\n * correctly.\n */\nexport function usePerformanceMarks(\n  name: string,\n  enabled: boolean,\n  elementRef: React.RefObject<HTMLElement>,\n  getDetails: () => Record<string, string | boolean | number | undefined>,\n  dependencies: React.DependencyList\n) {\n  const id = useRandomId();\n  const { isInModal } = useModalContext();\n  const attributes = usePerformanceMarkAttribute(elementRef, id);\n  useEffect(() => {\n    if (!enabled || !elementRef.current || isInModal) {\n      return;\n    }\n\n    const elementVisible =\n      elementRef.current.offsetWidth > 0 &&\n      elementRef.current.offsetHeight > 0 &&\n      getComputedStyle(elementRef.current).visibility !== 'hidden';\n\n    if (!elementVisible) {\n      return;\n    }\n\n    const renderedMarkName = `${name}Rendered`;\n\n    performance.mark(renderedMarkName, {\n      detail: {\n        source: 'awsui',\n        instanceIdentifier: id,\n        ...getDetails(),\n      },\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffectOnUpdate(() => {\n    if (!enabled || !elementRef.current || isInModal) {\n      return;\n    }\n    const elementVisible =\n      elementRef.current.offsetWidth > 0 &&\n      elementRef.current.offsetHeight > 0 &&\n      getComputedStyle(elementRef.current).visibility !== 'hidden';\n\n    if (!elementVisible) {\n      return;\n    }\n\n    const updatedMarkName = `${name}Updated`;\n\n    performance.mark(updatedMarkName, {\n      detail: {\n        source: 'awsui',\n        instanceIdentifier: id,\n        ...getDetails(),\n      },\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return attributes;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-performance-marks/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAY,EACZ,OAAgB,EAChB,UAAwC,EACxC,UAAuE,EACvE,YAAkC;IAElC,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,eAAe,CAAC,UAAU,EAAE,iCAAiC,EAAE,EAAE,CAAC,CAAC;IAEtF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,SAAS,EAAE;YAChD,OAAO;SACR;QAED,MAAM,cAAc,GAClB,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YAClC,UAAU,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC;YACnC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC;QAE/D,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,MAAM,gBAAgB,GAAG,GAAG,IAAI,UAAU,CAAC;QAE3C,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE;YACjC,MAAM,kBACJ,MAAM,EAAE,OAAO,EACf,kBAAkB,EAAE,EAAE,IACnB,UAAU,EAAE,CAChB;SACF,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iBAAiB,CAAC,GAAG,EAAE;QACrB,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,SAAS,EAAE;YAChD,OAAO;SACR;QACD,MAAM,cAAc,GAClB,UAAU,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;YAClC,UAAU,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC;YACnC,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,QAAQ,CAAC;QAE/D,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QAED,MAAM,eAAe,GAAG,GAAG,IAAI,SAAS,CAAC;QAEzC,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE;YAChC,MAAM,kBACJ,MAAM,EAAE,OAAO,EACf,kBAAkB,EAAE,EAAE,IACnB,UAAU,EAAE,CAChB;SACF,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect } from 'react';\n\nimport { useModalContext } from '../../context/modal-context';\nimport { useDOMAttribute } from '../use-dom-attribute';\nimport { useEffectOnUpdate } from '../use-effect-on-update';\nimport { useRandomId } from '../use-unique-id';\n\n/**\n * This function returns an object that needs to be spread onto the same\n * element as the `elementRef`, so that the data attribute is applied\n * correctly.\n */\nexport function usePerformanceMarks(\n  name: string,\n  enabled: boolean,\n  elementRef: React.RefObject<HTMLElement>,\n  getDetails: () => Record<string, string | boolean | number | undefined>,\n  dependencies: React.DependencyList\n) {\n  const id = useRandomId();\n  const { isInModal } = useModalContext();\n  const attributes = useDOMAttribute(elementRef, 'data-analytics-performance-mark', id);\n\n  useEffect(() => {\n    if (!enabled || !elementRef.current || isInModal) {\n      return;\n    }\n\n    const elementVisible =\n      elementRef.current.offsetWidth > 0 &&\n      elementRef.current.offsetHeight > 0 &&\n      getComputedStyle(elementRef.current).visibility !== 'hidden';\n\n    if (!elementVisible) {\n      return;\n    }\n\n    const renderedMarkName = `${name}Rendered`;\n\n    performance.mark(renderedMarkName, {\n      detail: {\n        source: 'awsui',\n        instanceIdentifier: id,\n        ...getDetails(),\n      },\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffectOnUpdate(() => {\n    if (!enabled || !elementRef.current || isInModal) {\n      return;\n    }\n    const elementVisible =\n      elementRef.current.offsetWidth > 0 &&\n      elementRef.current.offsetHeight > 0 &&\n      getComputedStyle(elementRef.current).visibility !== 'hidden';\n\n    if (!elementVisible) {\n      return;\n    }\n\n    const updatedMarkName = `${name}Updated`;\n\n    performance.mark(updatedMarkName, {\n      detail: {\n        source: 'awsui',\n        instanceIdentifier: id,\n        ...getDetails(),\n      },\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  return attributes;\n}\n"]}

package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.d.ts

@@ -1,11 +1,18 @@
+/// <reference types="react" />
+import { JSONObject } from '../../analytics/interfaces';
 export interface UseTableInteractionMetricsProps {
+    elementRef: React.RefObject<HTMLElement>;
     instanceIdentifier: string | undefined;
     loading: boolean | undefined;
     itemCount: number;
     getComponentIdentifier: () => string | undefined;
+    getComponentConfiguration: () => JSONObject;
     interactionMetadata: () => string;
 }
-export declare function useTableInteractionMetrics({ itemCount, instanceIdentifier, getComponentIdentifier, loading, interactionMetadata, }: UseTableInteractionMetricsProps): {
+export declare function useTableInteractionMetrics({ elementRef, itemCount, instanceIdentifier, getComponentIdentifier, getComponentConfiguration, loading, interactionMetadata, }: UseTableInteractionMetricsProps): {
+    tableInteractionAttributes: {
+        [x: string]: string | undefined;
+    };
     setLastUserAction: (name: string) => undefined;
 };
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,+BAA+B;IAC9C,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjD,mBAAmB,EAAE,MAAM,MAAM,CAAC;CACnC;AAED,wBAAgB,0BAA0B,CAAC,EACzC,SAAS,EACT,kBAAkB,EAClB,sBAAsB,EACtB,OAAe,EACf,mBAAmB,GACpB,EAAE,+BAA+B;8BAoCJ,MAAM;EAEnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAWxD,MAAM,WAAW,+BAA+B;IAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACjD,yBAAyB,EAAE,MAAM,UAAU,CAAC;IAC5C,mBAAmB,EAAE,MAAM,MAAM,CAAC;CACnC;AAED,wBAAgB,0BAA0B,CAAC,EACzC,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,sBAAsB,EACtB,yBAAyB,EACzB,OAAe,EACf,mBAAmB,GACpB,EAAE,+BAA+B;;;;8BA2DJ,MAAM;EAEnC"}

package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.js

@@ -1,19 +1,30 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect, useRef } from 'react';
-import { PerformanceMetrics } from '../../analytics';
+import { ComponentMetrics, PerformanceMetrics } from '../../analytics';
+import { useDOMAttribute } from '../use-dom-attribute';
 import { useEffectOnUpdate } from '../use-effect-on-update';
+import { useRandomId } from '../use-unique-id';
 /*
 If the last user interaction is more than this time ago, it is not considered
 to be the cause of the current loading state.
 */
 const USER_ACTION_TIME_LIMIT = 1000;
-export function useTableInteractionMetrics({ itemCount, instanceIdentifier, getComponentIdentifier, loading = false, interactionMetadata, }) {
+export function useTableInteractionMetrics({ elementRef, itemCount, instanceIdentifier, getComponentIdentifier, getComponentConfiguration, loading = false, interactionMetadata, }) {
+    const taskInteractionId = useRandomId();
+    const tableInteractionAttributes = useDOMAttribute(elementRef, 'data-analytics-task-interaction-id', taskInteractionId);
     const lastUserAction = useRef(null);
     const capturedUserAction = useRef(null);
     const loadingStartTime = useRef(null);
-    const metadata = useRef({ itemCount, getComponentIdentifier, interactionMetadata });
-    metadata.current = { itemCount, getComponentIdentifier, interactionMetadata };
+    const metadata = useRef({ itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata });
+    metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };
+    useEffect(() => {
+        ComponentMetrics.componentMounted({
+            taskInteractionId,
+            componentName: 'table',
+            componentConfiguration: metadata.current.getComponentConfiguration(),
+        });
+    }, [taskInteractionId]);
     useEffect(() => {
         if (loading) {
             loadingStartTime.current = performance.now();
@@ -26,7 +37,7 @@ export function useTableInteractionMetrics({ itemCount, instanceIdentifier, getC
         }
     }, [loading]);
     useEffectOnUpdate(() => {
-        var _a;
+        var _a, _b;
         if (!loading && loadingStartTime.current !== null) {
             const loadingDuration = performance.now() - loadingStartTime.current;
             loadingStartTime.current = null;
@@ -38,9 +49,16 @@ export function useTableInteractionMetrics({ itemCount, instanceIdentifier, getC
                 instanceIdentifier,
                 noOfResourcesInTable: metadata.current.itemCount,
             });
+            ComponentMetrics.componentUpdated({
+                taskInteractionId,
+                componentName: 'table',
+                actionType: (_b = capturedUserAction.current) !== null && _b !== void 0 ? _b : '',
+                componentConfiguration: metadata.current.getComponentConfiguration(),
+            });
         }
-    }, [instanceIdentifier, loading]);
+    }, [instanceIdentifier, loading, taskInteractionId]);
     return {
+        tableInteractionAttributes,
         setLastUserAction: (name) => void (lastUserAction.current = { name, time: performance.now() }),
     };
 }

package/lib/internal/template/internal/hooks/use-table-interaction-metrics/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;EAGE;AACF,MAAM,sBAAsB,GAAG,IAAK,CAAC;AAUrC,MAAM,UAAU,0BAA0B,CAAC,EACzC,SAAS,EACT,kBAAkB,EAClB,sBAAsB,EACtB,OAAO,GAAG,KAAK,EACf,mBAAmB,GACa;IAChC,MAAM,cAAc,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IAC3E,MAAM,kBAAkB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACvD,MAAM,gBAAgB,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC,CAAC;IACpF,QAAQ,CAAC,OAAO,GAAG,EAAE,SAAS,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;IAC9E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE;YACX,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;YAE7C,IAAI,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,sBAAsB,EAAE;gBACtG,kBAAkB,CAAC,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC;aAC1D;iBAAM;gBACL,kBAAkB,CAAC,OAAO,GAAG,IAAI,CAAC;aACnC;SACF;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,iBAAiB,CAAC,GAAG,EAAE;;QACrB,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,KAAK,IAAI,EAAE;YACjD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC;YACrE,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;YAEhC,kBAAkB,CAAC,gBAAgB,CAAC;gBAClC,UAAU,EAAE,MAAA,kBAAkB,CAAC,OAAO,mCAAI,EAAE;gBAC5C,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC;gBAC5C,mBAAmB,EAAE,QAAQ,CAAC,OAAO,CAAC,mBAAmB,EAAE;gBAC3D,mBAAmB,EAAE,QAAQ,CAAC,OAAO,CAAC,sBAAsB,EAAE;gBAC9D,kBAAkB;gBAClB,oBAAoB,EAAE,QAAQ,CAAC,OAAO,CAAC,SAAS;aACjD,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC;IAElC,OAAO;QACL,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,GAAG,EAAE,EAAE,CAAC;KACvG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useRef } from 'react';\n\nimport { PerformanceMetrics } from '../../analytics';\nimport { useEffectOnUpdate } from '../use-effect-on-update';\n\n/*\nIf the last user interaction is more than this time ago, it is not considered\nto be the cause of the current loading state.\n*/\nconst USER_ACTION_TIME_LIMIT = 1_000;\n\nexport interface UseTableInteractionMetricsProps {\n  instanceIdentifier: string | undefined;\n  loading: boolean | undefined;\n  itemCount: number;\n  getComponentIdentifier: () => string | undefined;\n  interactionMetadata: () => string;\n}\n\nexport function useTableInteractionMetrics({\n  itemCount,\n  instanceIdentifier,\n  getComponentIdentifier,\n  loading = false,\n  interactionMetadata,\n}: UseTableInteractionMetricsProps) {\n  const lastUserAction = useRef<{ name: string; time: number } | null>(null);\n  const capturedUserAction = useRef<string | null>(null);\n  const loadingStartTime = useRef<number | null>(null);\n\n  const metadata = useRef({ itemCount, getComponentIdentifier, interactionMetadata });\n  metadata.current = { itemCount, getComponentIdentifier, interactionMetadata };\n  useEffect(() => {\n    if (loading) {\n      loadingStartTime.current = performance.now();\n\n      if (lastUserAction.current && lastUserAction.current.time > performance.now() - USER_ACTION_TIME_LIMIT) {\n        capturedUserAction.current = lastUserAction.current.name;\n      } else {\n        capturedUserAction.current = null;\n      }\n    }\n  }, [loading]);\n\n  useEffectOnUpdate(() => {\n    if (!loading && loadingStartTime.current !== null) {\n      const loadingDuration = performance.now() - loadingStartTime.current;\n      loadingStartTime.current = null;\n\n      PerformanceMetrics.tableInteraction({\n        userAction: capturedUserAction.current ?? '',\n        interactionTime: Math.round(loadingDuration),\n        interactionMetadata: metadata.current.interactionMetadata(),\n        componentIdentifier: metadata.current.getComponentIdentifier(),\n        instanceIdentifier,\n        noOfResourcesInTable: metadata.current.itemCount,\n      });\n    }\n  }, [instanceIdentifier, loading]);\n\n  return {\n    setLastUserAction: (name: string) => void (lastUserAction.current = { name, time: performance.now() }),\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-table-interaction-metrics/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\n\nimport { useEffect, useRef } from 'react';\n\nimport { ComponentMetrics, PerformanceMetrics } from '../../analytics';\nimport { JSONObject } from '../../analytics/interfaces';\nimport { useDOMAttribute } from '../use-dom-attribute';\nimport { useEffectOnUpdate } from '../use-effect-on-update';\nimport { useRandomId } from '../use-unique-id';\n\n/*\nIf the last user interaction is more than this time ago, it is not considered\nto be the cause of the current loading state.\n*/\nconst USER_ACTION_TIME_LIMIT = 1_000;\n\nexport interface UseTableInteractionMetricsProps {\n  elementRef: React.RefObject<HTMLElement>;\n  instanceIdentifier: string | undefined;\n  loading: boolean | undefined;\n  itemCount: number;\n  getComponentIdentifier: () => string | undefined;\n  getComponentConfiguration: () => JSONObject;\n  interactionMetadata: () => string;\n}\n\nexport function useTableInteractionMetrics({\n  elementRef,\n  itemCount,\n  instanceIdentifier,\n  getComponentIdentifier,\n  getComponentConfiguration,\n  loading = false,\n  interactionMetadata,\n}: UseTableInteractionMetricsProps) {\n  const taskInteractionId = useRandomId();\n  const tableInteractionAttributes = useDOMAttribute(\n    elementRef,\n    'data-analytics-task-interaction-id',\n    taskInteractionId\n  );\n  const lastUserAction = useRef<{ name: string; time: number } | null>(null);\n  const capturedUserAction = useRef<string | null>(null);\n  const loadingStartTime = useRef<number | null>(null);\n\n  const metadata = useRef({ itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata });\n  metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };\n\n  useEffect(() => {\n    ComponentMetrics.componentMounted({\n      taskInteractionId,\n      componentName: 'table',\n      componentConfiguration: metadata.current.getComponentConfiguration(),\n    });\n  }, [taskInteractionId]);\n\n  useEffect(() => {\n    if (loading) {\n      loadingStartTime.current = performance.now();\n\n      if (lastUserAction.current && lastUserAction.current.time > performance.now() - USER_ACTION_TIME_LIMIT) {\n        capturedUserAction.current = lastUserAction.current.name;\n      } else {\n        capturedUserAction.current = null;\n      }\n    }\n  }, [loading]);\n\n  useEffectOnUpdate(() => {\n    if (!loading && loadingStartTime.current !== null) {\n      const loadingDuration = performance.now() - loadingStartTime.current;\n      loadingStartTime.current = null;\n\n      PerformanceMetrics.tableInteraction({\n        userAction: capturedUserAction.current ?? '',\n        interactionTime: Math.round(loadingDuration),\n        interactionMetadata: metadata.current.interactionMetadata(),\n        componentIdentifier: metadata.current.getComponentIdentifier(),\n        instanceIdentifier,\n        noOfResourcesInTable: metadata.current.itemCount,\n      });\n\n      ComponentMetrics.componentUpdated({\n        taskInteractionId,\n        componentName: 'table',\n        actionType: capturedUserAction.current ?? '',\n        componentConfiguration: metadata.current.getComponentConfiguration(),\n      });\n    }\n  }, [instanceIdentifier, loading, taskInteractionId]);\n\n  return {\n    tableInteractionAttributes,\n    setLastUserAction: (name: string) => void (lastUserAction.current = { name, time: performance.now() }),\n  };\n}\n"]}

package/lib/internal/template/live-region/controller.d.ts.map

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

package/lib/internal/template/{internal/components/live-region → live-region}/controller.js

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
 /**
  * The controller that manages a single live region container. It has a timer
  * to make sure announcements are throttled correctly. It can also make sure
@@ -16,10 +17,9 @@ export class LiveRegionController {
         this._addedTerminalPeriod = false;
         this._nextAnnouncement = '';
         this._element = document.createElement('div');
-        this._element.className = styles.announcer;
+        this._element.className = `${styles.announcer} ${testUtilStyles.announcer}`;
         this._element.setAttribute('aria-live', this.politeness);
         this._element.setAttribute('aria-atomic', 'true');
-        this._element.setAttribute('data-awsui-live-announcer', 'true');
         document.body.appendChild(this._element);
     }
     /**

package/lib/internal/template/live-region/controller.js.map

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

package/lib/internal/template/live-region/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/live-region/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,MAAc,EAAE,OAAe,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAYxG;AAID,eAAe,UAAU,CAAC"}

package/lib/internal/template/{internal/components/live-region → live-region}/index.js

@@ -2,14 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import { __rest } from "tslib";
 import React from 'react';
-// import useBaseComponent from '../../hooks/use-base-component';
-import { applyDisplayName } from '../../utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalLiveRegion from './internal';
 function LiveRegion(_a) {
     var { assertive = false, hidden = false, tagName = 'div' } = _a, restProps = __rest(_a, ["assertive", "hidden", "tagName"]);
-    // TODO: Switch this out when moving this component out of internal
-    // const baseComponentProps = useBaseComponent('LiveRegion');
-    const baseComponentProps = { __internalRootRef: React.useRef() };
+    const baseComponentProps = useBaseComponent('LiveRegion', { props: { assertive, hidden } });
     return (React.createElement(InternalLiveRegion, Object.assign({ assertive: assertive, hidden: hidden, tagName: tagName }, baseComponentProps, restProps)));
 }
 applyDisplayName(LiveRegion, 'LiveRegion');

package/lib/internal/template/live-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,SAAS,UAAU,CAAC,EAAqF;QAArF,EAAE,SAAS,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,OAAiC,EAA5B,SAAS,cAAlE,kCAAoE,CAAF;IACpF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;IAE5F,OAAO,CACL,oBAAC,kBAAkB,kBACjB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IACZ,kBAAkB,EAClB,SAAS,EACb,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAE3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { LiveRegionProps } from './interfaces';\nimport InternalLiveRegion from './internal';\n\nexport { LiveRegionProps };\n\nfunction LiveRegion({ assertive = false, hidden = false, tagName = 'div', ...restProps }: LiveRegionProps) {\n  const baseComponentProps = useBaseComponent('LiveRegion', { props: { assertive, hidden } });\n\n  return (\n    <InternalLiveRegion\n      assertive={assertive}\n      hidden={hidden}\n      tagName={tagName}\n      {...baseComponentProps}\n      {...restProps}\n    />\n  );\n}\n\napplyDisplayName(LiveRegion, 'LiveRegion');\n\nexport default LiveRegion;\n"]}

package/lib/internal/template/{internal/components/live-region → live-region}/interfaces.d.ts

@@ -1,13 +1,6 @@
 /// <reference types="react" />
-import { BaseComponentProps } from '../../base-component';
+import { BaseComponentProps } from '../internal/base-component';
 export interface LiveRegionProps extends BaseComponentProps {
-    /**
-     * The string for the aria-live announcement text. When this content
-     * changes, the text will be re-announced to assistive technologies. If this
-     * property is provided, it will be used for the live announcement instead of
-     * the `children` slot.
-     */
-    message?: string;
     /**
      * Whether the announcements should be made using assertive aria-live.
      * Assertive announcements interrupt the user's action, so they should only
@@ -19,12 +12,13 @@ export interface LiveRegionProps extends BaseComponentProps {
      */
     tagName?: LiveRegionProps.TagName;
     /**
-     * Defines whether to visually hide the contents of the `children` slot.
+     * Determines whether to visually hide the contents of the `children` slot.
      */
     hidden?: boolean;
     /**
-     * Use the rendered content as the source for the announcement text.
-     * Prefer `message` if announcement text can be provided as a string.
+     * Use the rendered content as the source for the announcement text. When the
+     * text content inside this slot changes, it will be re-announced to
+     * assistive technologies.
      */
     children?: React.ReactNode;
 }

package/lib/internal/template/live-region/interfaces.d.ts.map

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

package/lib/internal/template/live-region/interfaces.js.map

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

package/lib/internal/template/{internal/components/live-region → live-region}/internal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InternalBaseComponentProps } from '../../hooks/use-base-component';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { LiveRegionProps } from './interfaces';
 export interface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {
     /**

package/lib/internal/template/live-region/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAItE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,WAAW,uBAAwB,SAAQ,0BAA0B,EAAE,eAAe;IAC1F;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAED,wBAyEG"}

package/lib/internal/template/{internal/components/live-region → live-region}/internal.js

@@ -3,12 +3,13 @@
 import { __rest } from "tslib";
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import clsx from 'clsx';
-import { getBaseProps } from '../../base-component';
-import { useMergeRefs } from '../../hooks/use-merge-refs';
+import { getBaseProps } from '../internal/base-component';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { LiveRegionController } from './controller';
 import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
 export default React.forwardRef(function InternalLiveRegion(_a, ref) {
-    var { assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, message, children, __internalRootRef, className } = _a, restProps = __rest(_a, ["assertive", "hidden", "tagName", "delay", "sources", "message", "children", "__internalRootRef", "className"]);
+    var { assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, children, __internalRootRef, className } = _a, restProps = __rest(_a, ["assertive", "hidden", "tagName", "delay", "sources", "children", "__internalRootRef", "className"]);
     const baseProps = getBaseProps(restProps);
     const childrenRef = useRef(null);
     const mergedRef = useMergeRefs(childrenRef, __internalRootRef);
@@ -35,13 +36,12 @@ export default React.forwardRef(function InternalLiveRegion(_a, ref) {
         };
     }, [assertive]);
     const getContent = () => {
-        return sources
-            ? getSourceContent(sources)
-            : message
-                ? message
-                : childrenRef.current
-                    ? extractTextContent(childrenRef.current)
-                    : undefined;
+        if (sources) {
+            return getSourceContent(sources);
+        }
+        if (childrenRef.current) {
+            return extractTextContent(childrenRef.current);
+        }
     };
     // Call the controller on every render. The controller will deduplicate the
     // message against the previous announcement internally.
@@ -55,7 +55,7 @@ export default React.forwardRef(function InternalLiveRegion(_a, ref) {
             (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message: getContent(), delay, forceReannounce: true });
         },
     }));
-    return (React.createElement(TagName, Object.assign({ ref: mergedRef }, baseProps, { className: clsx(styles.root, className), hidden: hidden }), children));
+    return (React.createElement(TagName, Object.assign({ ref: mergedRef }, baseProps, { className: clsx(styles.root, testUtilStyles.root, className), hidden: hidden }), children));
 });
 function extractTextContent(node) {
     // We use the text content of the node as the announcement text.

package/lib/internal/template/live-region/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/live-region/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\n\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { LiveRegionController } from './controller';\nimport { LiveRegionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport interface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {\n  /**\n   * The delay between each announcement from this live region. You should\n   * leave this set to the default unless this live region is commonly\n   * interrupted by other actions (like text entry in text filtering).\n   */\n  delay?: number;\n\n  /**\n   * Use a list of strings and/or refs to existing elements for building the\n   * announcement text. If this property is set, `children` and `message` will\n   * be ignored.\n   */\n  sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;\n}\n\nexport interface InternalLiveRegionRef {\n  /**\n   * Force the live region to announce the message, even if it's the same as\n   * the previously announced message.\n   *\n   * This is useful when making status updates after a change (e.g. filtering)\n   * where the new message might be the same as the old one, but the announcement\n   * also serves to tell screen reader users that the action was performed.\n   */\n  reannounce(): void;\n}\n\nexport default React.forwardRef(function InternalLiveRegion(\n  {\n    assertive = false,\n    hidden = false,\n    tagName: TagName = 'div',\n    delay,\n    sources,\n    children,\n    __internalRootRef,\n    className,\n    ...restProps\n  }: InternalLiveRegionProps,\n  ref: React.Ref<InternalLiveRegionRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const childrenRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(childrenRef, __internalRootRef);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (childrenRef.current) {\n      childrenRef.current.inert = hidden;\n    }\n  }, [hidden]);\n\n  // Initialize the live region controller inside an effect. We have to do this\n  // because the controller depends on DOM elements, which aren't available on the\n  // server.\n  const liveRegionControllerRef = useRef<LiveRegionController | undefined>();\n  useEffect(() => {\n    const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite');\n    liveRegionControllerRef.current = liveRegionController;\n    return () => {\n      liveRegionController.destroy();\n      liveRegionControllerRef.current = undefined;\n    };\n  }, [assertive]);\n\n  const getContent = () => {\n    if (sources) {\n      return getSourceContent(sources);\n    }\n    if (childrenRef.current) {\n      return extractTextContent(childrenRef.current);\n    }\n  };\n\n  // Call the controller on every render. The controller will deduplicate the\n  // message against the previous announcement internally.\n  useEffect(() => {\n    liveRegionControllerRef.current?.announce({ message: getContent(), delay });\n  });\n\n  useImperativeHandle(ref, () => ({\n    reannounce() {\n      liveRegionControllerRef.current?.announce({ message: getContent(), delay, forceReannounce: true });\n    },\n  }));\n\n  return (\n    <TagName\n      ref={mergedRef}\n      {...baseProps}\n      className={clsx(styles.root, testUtilStyles.root, className)}\n      hidden={hidden}\n    >\n      {children}\n    </TagName>\n  );\n});\n\nfunction extractTextContent(node: HTMLElement): string {\n  // We use the text content of the node as the announcement text.\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.\n  return (node.textContent || '').replace(/\\s+/g, ' ').trim();\n}\n\nfunction getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {\n  return source\n    .map(item => {\n      if (!item || typeof item === 'string') {\n        return item;\n      }\n      if (item.current) {\n        return extractTextContent(item.current);\n      }\n    })\n    .filter(Boolean)\n    .join(' ');\n}\n"]}

package/lib/internal/template/live-region/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_1iee7_di2un_141",
+  "announcer": "awsui_announcer_1iee7_di2un_149"
+};
+  

package/lib/internal/template/{internal/components/live-region → live-region}/styles.scoped.css

@@ -138,15 +138,15 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_3bgfn_di2un_141:not(#\9) {
+.awsui_root_1iee7_di2un_141:not(#\9) {
   display: contents;
 }
 
-.awsui_root_3bgfn_di2un_141[hidden]:not(#\9) {
+.awsui_root_1iee7_di2un_141[hidden]:not(#\9) {
   display: none;
 }
 
-.awsui_announcer_3bgfn_di2un_149:not(#\9) {
+.awsui_announcer_1iee7_di2un_149:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;