@cloudscape-design/components 3.0.136 → 3.0.138

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScreenreaderOnlyProps } from '../screenreader-only/index.js';
+import { ScreenreaderOnlyProps } from '../screenreader-only';
 export interface LiveRegionProps extends ScreenreaderOnlyProps {
     assertive?: boolean;
     delay?: number;
@@ -7,39 +7,39 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
     children: React.ReactNode;
 }
 /**
-  The live region is hidden in the layout, but visible for screen readers.
-  It's purpose it to announce changes e.g. when custom navigation logic is used.
-
-  The way live region works differently in different browsers and screen readers and
-  it is recommended to manually test every new implementation.
-
-  If you notice there are different words being merged together,
-  check if there are text nodes not being wrapped in elements, like:
-  <LiveRegion>
-    {title}
-    <span><Details /></span>
-  </LiveRegion>
-
-  To fix, wrap "title" in an element:
-  <LiveRegion>
-    <span>{title}</span>
-    <span><Details /></span>
-  </LiveRegion>
-
-  Or create a single text node if possible:
-  <LiveRegion>
-    {`${title} ${details}`}
-  </LiveRegion>
-
-  The live region is always atomic, because non-atomic regions can be treated by screen readers
-  differently and produce unexpected results. To imitate non-atomic announcements simply use
-  multiple live regions:
-  <>
-    <LiveRegion>{title}</LiveRegion>
-    <LiveRegion><Details /></LiveRegion>
-  </>
-*/
+ * The live region is hidden in the layout, but visible for screen readers.
+ * It's purpose it to announce changes e.g. when custom navigation logic is used.
+ *
+ * The way live region works differently in different browsers and screen readers and
+ * it is recommended to manually test every new implementation.
+ *
+ * If you notice there are different words being merged together,
+ * check if there are text nodes not being wrapped in elements, like:
+ * <LiveRegion>
+ *   {title}
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * To fix, wrap "title" in an element:
+ * <LiveRegion>
+ *   <span>{title}</span>
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * Or create a single text node if possible:
+ * <LiveRegion>
+ *   {`${title} ${details}`}
+ * </LiveRegion>
+ *
+ * The live region is always atomic, because non-atomic regions can be treated by screen readers
+ * differently and produce unexpected results. To imitate non-atomic announcements simply use
+ * multiple live regions:
+ * <>
+ *   <LiveRegion>{title}</LiveRegion>
+ *   <LiveRegion><Details /></LiveRegion>
+ * </>
+ */
 declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
 export default _default;
-declare function LiveRegion({ assertive, delay, visible, children, ...restProps }: LiveRegionProps): JSX.Element;
+declare function LiveRegion({ delay, children, ...restProps }: LiveRegionProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGxF,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;;AACF,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,KAAU,EAAE,OAAe,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eA0D9G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;;AACH,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,KAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAmC1E"}

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

@@ -2,46 +2,45 @@
 // SPDX-License-Identifier: Apache-2.0
 import { __assign, __rest } from "tslib";
 /* eslint-disable @cloudscape-design/prefer-live-region */
-import clsx from 'clsx';
 import React, { memo, useEffect, useRef } from 'react';
-import ScreenreaderOnly from '../screenreader-only/index.js';
-import styles from './styles.css.js';
+import { updateLiveRegion } from './utils';
+import AriaLiveTag from './aria-liva-tag';
 /**
-  The live region is hidden in the layout, but visible for screen readers.
-  It's purpose it to announce changes e.g. when custom navigation logic is used.
-
-  The way live region works differently in different browsers and screen readers and
-  it is recommended to manually test every new implementation.
-
-  If you notice there are different words being merged together,
-  check if there are text nodes not being wrapped in elements, like:
-  <LiveRegion>
-    {title}
-    <span><Details /></span>
-  </LiveRegion>
-
-  To fix, wrap "title" in an element:
-  <LiveRegion>
-    <span>{title}</span>
-    <span><Details /></span>
-  </LiveRegion>
-
-  Or create a single text node if possible:
-  <LiveRegion>
-    {`${title} ${details}`}
-  </LiveRegion>
-
-  The live region is always atomic, because non-atomic regions can be treated by screen readers
-  differently and produce unexpected results. To imitate non-atomic announcements simply use
-  multiple live regions:
-  <>
-    <LiveRegion>{title}</LiveRegion>
-    <LiveRegion><Details /></LiveRegion>
-  </>
-*/
+ * The live region is hidden in the layout, but visible for screen readers.
+ * It's purpose it to announce changes e.g. when custom navigation logic is used.
+ *
+ * The way live region works differently in different browsers and screen readers and
+ * it is recommended to manually test every new implementation.
+ *
+ * If you notice there are different words being merged together,
+ * check if there are text nodes not being wrapped in elements, like:
+ * <LiveRegion>
+ *   {title}
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * To fix, wrap "title" in an element:
+ * <LiveRegion>
+ *   <span>{title}</span>
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * Or create a single text node if possible:
+ * <LiveRegion>
+ *   {`${title} ${details}`}
+ * </LiveRegion>
+ *
+ * The live region is always atomic, because non-atomic regions can be treated by screen readers
+ * differently and produce unexpected results. To imitate non-atomic announcements simply use
+ * multiple live regions:
+ * <>
+ *   <LiveRegion>{title}</LiveRegion>
+ *   <LiveRegion><Details /></LiveRegion>
+ * </>
+ */
 export default memo(LiveRegion);
 function LiveRegion(_a) {
-    var _b = _a.assertive, assertive = _b === void 0 ? false : _b, _c = _a.delay, delay = _c === void 0 ? 10 : _c, _d = _a.visible, visible = _d === void 0 ? false : _d, children = _a.children, restProps = __rest(_a, ["assertive", "delay", "visible", "children"]);
+    var _b = _a.delay, delay = _b === void 0 ? 10 : _b, children = _a.children, restProps = __rest(_a, ["delay", "children"]);
     var sourceRef = useRef(null);
     var targetRef = useRef(null);
     /*
@@ -56,24 +55,12 @@ function LiveRegion(_a) {
       does not impact the performance. If it does, prefer using a string as children prop.
     */
     useEffect(function () {
-        function updateLiveRegion() {
-            if (targetRef.current && sourceRef.current) {
-                var sourceContent = extractInnerText(sourceRef.current);
-                var targetContent = extractInnerText(targetRef.current);
-                if (targetContent !== sourceContent) {
-                    // The aria-atomic does not work properly in Voice Over, causing
-                    // certain parts of the content to be ignored. To fix that,
-                    // we assign the source text content as a single node.
-                    targetRef.current.innerText = sourceContent;
-                }
-            }
-        }
         var timeoutId;
         if (delay) {
-            timeoutId = setTimeout(updateLiveRegion, delay);
+            timeoutId = setTimeout(function () { return updateLiveRegion(targetRef, sourceRef); }, delay);
         }
         else {
-            updateLiveRegion();
+            updateLiveRegion(targetRef, sourceRef);
         }
         return function () {
             if (timeoutId) {
@@ -81,16 +68,6 @@ function LiveRegion(_a) {
             }
         };
     });
-    return (React.createElement(React.Fragment, null,
-        visible && React.createElement("span", { ref: sourceRef }, children),
-        React.createElement(ScreenreaderOnly, __assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
-            !visible && (React.createElement("span", { ref: sourceRef, "aria-hidden": "true" }, children)),
-            React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
-}
-// This only extracts text content from the node including all its children which is enough for now.
-// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
-// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
-function extractInnerText(node) {
-    return (node.innerText || '').replace(/\s+/g, ' ').trim();
+    return (React.createElement(AriaLiveTag, __assign({ targetRef: targetRef, sourceRef: sourceRef }, restProps), children));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,+BAA+B,CAAC;AACxF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAA2F;IAAzF,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAAxE,6CAA0E,CAAF;IAC1F,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,8BAAM,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAQ;QAEnD,oBAAC,gBAAgB,eAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;YAC/E,CAAC,OAAO,IAAI,CACX,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,IACrC,QAAQ,CACJ,CACR;YAED,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CAClB,CACJ,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only/index.js';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n  The live region is hidden in the layout, but visible for screen readers.\n  It's purpose it to announce changes e.g. when custom navigation logic is used.\n\n  The way live region works differently in different browsers and screen readers and\n  it is recommended to manually test every new implementation.\n\n  If you notice there are different words being merged together,\n  check if there are text nodes not being wrapped in elements, like:\n  <LiveRegion>\n    {title}\n    <span><Details /></span>\n  </LiveRegion>\n\n  To fix, wrap \"title\" in an element:\n  <LiveRegion>\n    <span>{title}</span>\n    <span><Details /></span>\n  </LiveRegion>\n\n  Or create a single text node if possible:\n  <LiveRegion>\n    {`${title} ${details}`}\n  </LiveRegion>\n\n  The live region is always atomic, because non-atomic regions can be treated by screen readers\n  differently and produce unexpected results. To imitate non-atomic announcements simply use\n  multiple live regions:\n  <>\n    <LiveRegion>{title}</LiveRegion>\n    <LiveRegion><Details /></LiveRegion>\n  </>\n*/\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ assertive = false, delay = 10, visible = false, children, ...restProps }: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement>(null);\n  const targetRef = useRef<HTMLSpanElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    function updateLiveRegion() {\n      if (targetRef.current && sourceRef.current) {\n        const sourceContent = extractInnerText(sourceRef.current);\n        const targetContent = extractInnerText(targetRef.current);\n        if (targetContent !== sourceContent) {\n          // The aria-atomic does not work properly in Voice Over, causing\n          // certain parts of the content to be ignored. To fix that,\n          // we assign the source text content as a single node.\n          targetRef.current.innerText = sourceContent;\n        }\n      }\n    }\n\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(updateLiveRegion, delay);\n    } else {\n      updateLiveRegion();\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <>\n      {visible && <span ref={sourceRef}>{children}</span>}\n\n      <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n        {!visible && (\n          <span ref={sourceRef} aria-hidden=\"true\">\n            {children}\n          </span>\n        )}\n\n        <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n      </ScreenreaderOnly>\n    </>\n  );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAS1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAAuD;IAArD,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAApC,qBAAsC,CAAF;IACtD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,cAAM,OAAA,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,EAAtC,CAAsC,EAAE,KAAK,CAAC,CAAC;SAC7E;aAAM;YACL,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACxC;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,SAAS,GACnE,QAAQ,CACG,CACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport React, { memo, useEffect, useRef } from 'react';\nimport { ScreenreaderOnlyProps } from '../screenreader-only';\nimport { updateLiveRegion } from './utils';\nimport AriaLiveTag from './aria-liva-tag';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n  assertive?: boolean;\n  delay?: number;\n  visible?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * <LiveRegion>\n *   {title}\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * To fix, wrap \"title\" in an element:\n * <LiveRegion>\n *   <span>{title}</span>\n *   <span><Details /></span>\n * </LiveRegion>\n *\n * Or create a single text node if possible:\n * <LiveRegion>\n *   {`${title} ${details}`}\n * </LiveRegion>\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * <>\n *   <LiveRegion>{title}</LiveRegion>\n *   <LiveRegion><Details /></LiveRegion>\n * </>\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ delay = 10, children, ...restProps }: LiveRegionProps) {\n  const sourceRef = useRef<HTMLSpanElement>(null);\n  const targetRef = useRef<HTMLSpanElement>(null);\n\n  /*\n    When React state changes, React often produces too many DOM updates, causing NVDA to\n    issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n    The code below imitates a debouncing, scheduling a callback every time new React state\n    update is detected. When a callback resolves, it copies content from a muted element\n    to the live region, which is recognized by screen readers as an update.\n\n    If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n    does not impact the performance. If it does, prefer using a string as children prop.\n  */\n  useEffect(() => {\n    let timeoutId: null | number;\n    if (delay) {\n      timeoutId = setTimeout(() => updateLiveRegion(targetRef, sourceRef), delay);\n    } else {\n      updateLiveRegion(targetRef, sourceRef);\n    }\n\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  });\n\n  return (\n    <AriaLiveTag targetRef={targetRef} sourceRef={sourceRef} {...restProps}>\n      {children}\n    </AriaLiveTag>\n  );\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * Updates text of the target node if it's differ from source node.
+ * @param targetRef - Ref to the element with aria-live
+ * @param sourceRef - Ref to the element to be announced
+ */
+export function updateLiveRegion(targetRef, sourceRef) {
+    if (targetRef.current && sourceRef.current) {
+        var sourceContent = extractInnerText(sourceRef.current);
+        var targetContent = extractInnerText(targetRef.current);
+        if (targetContent !== sourceContent) {
+            // The aria-atomic does not work properly in Voice Over, causing
+            // certain parts of the content to be ignored. To fix that,
+            // we assign the source text content as a single node.
+            targetRef.current.innerText = sourceContent;
+        }
+    }
+}
+// This only extracts text content from the node including all its children which is enough for now.
+// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
+// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
+function extractInnerText(node) {
+    return (node.innerText || '').replace(/\s+/g, ' ').trim();
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/utils.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAC9B,SAA2C,EAC3C,SAA2C;IAE3C,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;QAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;YACnC,gEAAgE;YAChE,2DAA2D;YAC3D,sDAAsD;YACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;SAC7C;KACF;AACH,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\n/**\n * Updates text of the target node if it's differ from source node.\n * @param targetRef - Ref to the element with aria-live\n * @param sourceRef - Ref to the element to be announced\n */\nexport function updateLiveRegion(\n  targetRef: React.RefObject<HTMLSpanElement>,\n  sourceRef: React.RefObject<HTMLSpanElement>\n) {\n  if (targetRef.current && sourceRef.current) {\n    const sourceContent = extractInnerText(sourceRef.current);\n    const targetContent = extractInnerText(targetRef.current);\n    if (targetContent !== sourceContent) {\n      // The aria-atomic does not work properly in Voice Over, causing\n      // certain parts of the content to be ignored. To fix that,\n      // we assign the source text content as a single node.\n      targetRef.current.innerText = sourceContent;\n    }\n  }\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n  return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}

package/internal/environment.js

@@ -1,5 +1,5 @@
 
-    export var PACKAGE_VERSION = '3.0.0 (308d769)';
+    export var PACKAGE_VERSION = '3.0.0 (6a2e638)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/generated/theming/index.cjs

@@ -57,6 +57,7 @@ module.exports.preset = {
       "colorGreen700": "#1a520f",
       "colorGreen900": "#001a02",
       "colorGrey100": "#fbfbfb",
+      "colorGrey125": "#f8f8f8",
       "colorGrey150": "#f4f4f4",
       "colorGrey200": "#e9ebed",
       "colorGrey300": "#d1d5db",
@@ -778,6 +779,10 @@ module.exports.preset = {
         "light": "{colorGrey150}",
         "dark": "{colorGrey650}"
       },
+      "colorBackgroundCellShaded": {
+        "light": "{colorGrey125}",
+        "dark": "{colorGrey700}"
+      },
       "colorBackgroundCodeEditorGutterActiveLineDefault": {
         "light": "{colorGrey550}",
         "dark": "{colorGrey500}"
@@ -2302,6 +2307,10 @@ module.exports.preset = {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
@@ -3208,6 +3217,10 @@ module.exports.preset = {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
@@ -4062,6 +4075,10 @@ module.exports.preset = {
             "light": "{colorGrey150}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey125}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey500}"
@@ -4916,6 +4933,10 @@ module.exports.preset = {
             "light": "{colorGrey150}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey125}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey500}"
@@ -5862,6 +5883,7 @@ module.exports.preset = {
       "colorBackgroundButtonPrimaryDisabled": "color",
       "colorBackgroundButtonPrimaryHover": "color",
       "colorBackgroundCalendarToday": "color",
+      "colorBackgroundCellShaded": "color",
       "colorBackgroundCodeEditorGutterActiveLineDefault": "color",
       "colorBackgroundCodeEditorGutterActiveLineError": "color",
       "colorBackgroundCodeEditorGutterDefault": "color",
@@ -6667,6 +6689,7 @@ module.exports.preset = {
     "colorGreen700": "color-green-700",
     "colorGreen900": "color-green-900",
     "colorGrey100": "color-grey-100",
+    "colorGrey125": "color-grey-125",
     "colorGrey150": "color-grey-150",
     "colorGrey200": "color-grey-200",
     "colorGrey300": "color-grey-300",
@@ -6866,6 +6889,7 @@ module.exports.preset = {
     "colorBackgroundButtonPrimaryDisabled": "color-background-button-primary-disabled",
     "colorBackgroundButtonPrimaryHover": "color-background-button-primary-hover",
     "colorBackgroundCalendarToday": "color-background-calendar-today",
+    "colorBackgroundCellShaded": "color-background-cell-shaded",
     "colorBackgroundCodeEditorGutterActiveLineDefault": "color-background-code-editor-gutter-active-line-default",
     "colorBackgroundCodeEditorGutterActiveLineError": "color-background-code-editor-gutter-active-line-error",
     "colorBackgroundCodeEditorGutterDefault": "color-background-code-editor-gutter-default",
@@ -7311,6 +7335,7 @@ module.exports.preset = {
     "colorGreen700": "--color-green-700-mxknm4",
     "colorGreen900": "--color-green-900-mcc3zx",
     "colorGrey100": "--color-grey-100-yub70k",
+    "colorGrey125": "--color-grey-125-cl5sjj",
     "colorGrey150": "--color-grey-150-4ycuod",
     "colorGrey200": "--color-grey-200-llwxhx",
     "colorGrey300": "--color-grey-300-gjxrd6",
@@ -7510,6 +7535,7 @@ module.exports.preset = {
     "colorBackgroundButtonPrimaryDisabled": "--color-background-button-primary-disabled-eon7km",
     "colorBackgroundButtonPrimaryHover": "--color-background-button-primary-hover-qu1zio",
     "colorBackgroundCalendarToday": "--color-background-calendar-today-762czq",
+    "colorBackgroundCellShaded": "--color-background-cell-shaded-26ubfj",
     "colorBackgroundCodeEditorGutterActiveLineDefault": "--color-background-code-editor-gutter-active-line-default-p2p8kl",
     "colorBackgroundCodeEditorGutterActiveLineError": "--color-background-code-editor-gutter-active-line-error-lfh0u4",
     "colorBackgroundCodeEditorGutterDefault": "--color-background-code-editor-gutter-default-l5k65m",

package/internal/generated/theming/index.js

@@ -57,6 +57,7 @@ export var preset = {
       "colorGreen700": "#1a520f",
       "colorGreen900": "#001a02",
       "colorGrey100": "#fbfbfb",
+      "colorGrey125": "#f8f8f8",
       "colorGrey150": "#f4f4f4",
       "colorGrey200": "#e9ebed",
       "colorGrey300": "#d1d5db",
@@ -778,6 +779,10 @@ export var preset = {
         "light": "{colorGrey150}",
         "dark": "{colorGrey650}"
       },
+      "colorBackgroundCellShaded": {
+        "light": "{colorGrey125}",
+        "dark": "{colorGrey700}"
+      },
       "colorBackgroundCodeEditorGutterActiveLineDefault": {
         "light": "{colorGrey550}",
         "dark": "{colorGrey500}"
@@ -2302,6 +2307,10 @@ export var preset = {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
@@ -3208,6 +3217,10 @@ export var preset = {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey700}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey500}",
             "dark": "{colorGrey500}"
@@ -4062,6 +4075,10 @@ export var preset = {
             "light": "{colorGrey150}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey125}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey500}"
@@ -4916,6 +4933,10 @@ export var preset = {
             "light": "{colorGrey150}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundCellShaded": {
+            "light": "{colorGrey125}",
+            "dark": "{colorGrey700}"
+          },
           "colorBackgroundCodeEditorGutterActiveLineDefault": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey500}"
@@ -5862,6 +5883,7 @@ export var preset = {
       "colorBackgroundButtonPrimaryDisabled": "color",
       "colorBackgroundButtonPrimaryHover": "color",
       "colorBackgroundCalendarToday": "color",
+      "colorBackgroundCellShaded": "color",
       "colorBackgroundCodeEditorGutterActiveLineDefault": "color",
       "colorBackgroundCodeEditorGutterActiveLineError": "color",
       "colorBackgroundCodeEditorGutterDefault": "color",
@@ -6667,6 +6689,7 @@ export var preset = {
     "colorGreen700": "color-green-700",
     "colorGreen900": "color-green-900",
     "colorGrey100": "color-grey-100",
+    "colorGrey125": "color-grey-125",
     "colorGrey150": "color-grey-150",
     "colorGrey200": "color-grey-200",
     "colorGrey300": "color-grey-300",
@@ -6866,6 +6889,7 @@ export var preset = {
     "colorBackgroundButtonPrimaryDisabled": "color-background-button-primary-disabled",
     "colorBackgroundButtonPrimaryHover": "color-background-button-primary-hover",
     "colorBackgroundCalendarToday": "color-background-calendar-today",
+    "colorBackgroundCellShaded": "color-background-cell-shaded",
     "colorBackgroundCodeEditorGutterActiveLineDefault": "color-background-code-editor-gutter-active-line-default",
     "colorBackgroundCodeEditorGutterActiveLineError": "color-background-code-editor-gutter-active-line-error",
     "colorBackgroundCodeEditorGutterDefault": "color-background-code-editor-gutter-default",
@@ -7311,6 +7335,7 @@ export var preset = {
     "colorGreen700": "--color-green-700-mxknm4",
     "colorGreen900": "--color-green-900-mcc3zx",
     "colorGrey100": "--color-grey-100-yub70k",
+    "colorGrey125": "--color-grey-125-cl5sjj",
     "colorGrey150": "--color-grey-150-4ycuod",
     "colorGrey200": "--color-grey-200-llwxhx",
     "colorGrey300": "--color-grey-300-gjxrd6",
@@ -7510,6 +7535,7 @@ export var preset = {
     "colorBackgroundButtonPrimaryDisabled": "--color-background-button-primary-disabled-eon7km",
     "colorBackgroundButtonPrimaryHover": "--color-background-button-primary-hover-qu1zio",
     "colorBackgroundCalendarToday": "--color-background-calendar-today-762czq",
+    "colorBackgroundCellShaded": "--color-background-cell-shaded-26ubfj",
     "colorBackgroundCodeEditorGutterActiveLineDefault": "--color-background-code-editor-gutter-active-line-default-p2p8kl",
     "colorBackgroundCodeEditorGutterActiveLineError": "--color-background-code-editor-gutter-active-line-error-lfh0u4",
     "colorBackgroundCodeEditorGutterDefault": "--color-background-code-editor-gutter-default-l5k65m",

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

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

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

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

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

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

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

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

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "308d7696b2b568577d722a9eb0a04fcf6c883369"
+  "commit": "6a2e6386b2fbe18f2c4b45a235799e136798c40b"
 }