@cloudscape-design/components 3.0.137 → 3.0.138
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/components/dynamic-aria-live/index.d.ts +28 -0
- package/internal/components/dynamic-aria-live/index.d.ts.map +1 -0
- package/internal/components/dynamic-aria-live/index.js +38 -0
- package/internal/components/dynamic-aria-live/index.js.map +1 -0
- package/internal/components/live-region/aria-liva-tag.d.ts +13 -0
- package/internal/components/live-region/aria-liva-tag.d.ts.map +1 -0
- package/internal/components/live-region/aria-liva-tag.js +18 -0
- package/internal/components/live-region/aria-liva-tag.js.map +1 -0
- package/internal/components/live-region/index.d.ts +34 -34
- package/internal/components/live-region/index.d.ts.map +1 -1
- package/internal/components/live-region/index.js +38 -61
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/live-region/utils.d.ts +8 -0
- package/internal/components/live-region/utils.d.ts.map +1 -0
- package/internal/components/live-region/utils.js +24 -0
- package/internal/components/live-region/utils.js.map +1 -0
- package/internal/environment.js +1 -1
- package/internal/hooks/use-visual-mode/index.d.ts +3 -1
- package/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
- package/internal/hooks/use-visual-mode/index.js +18 -11
- package/internal/hooks/use-visual-mode/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/progress-bar/index.d.ts.map +1 -1
- package/progress-bar/index.js +4 -1
- package/progress-bar/index.js.map +1 -1
- package/progress-bar/internal.js +2 -2
- package/progress-bar/internal.js.map +1 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScreenreaderOnlyProps } from '../screenreader-only';
|
|
3
|
+
export interface DynamicAriaLiveProps extends ScreenreaderOnlyProps {
|
|
4
|
+
assertive?: boolean;
|
|
5
|
+
delay?: number;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Dynamic aria live component is hidden in the layout, but visible for screen readers.
|
|
10
|
+
* Purpose of this component is to announce recurring changes for a content.
|
|
11
|
+
*
|
|
12
|
+
* To avoid merging words, provide all text nodes wrapped with elements, like:
|
|
13
|
+
* <LiveRegion>
|
|
14
|
+
* <span>{title}</span>
|
|
15
|
+
* <span><Details /></span>
|
|
16
|
+
* </LiveRegion>
|
|
17
|
+
* Or create a single text node if possible:
|
|
18
|
+
* <LiveRegion>
|
|
19
|
+
* {`${title} ${details}`}
|
|
20
|
+
* </LiveRegion>
|
|
21
|
+
*
|
|
22
|
+
* @param delay time value in milliseconds to set minimal time interval between announcements.
|
|
23
|
+
* @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.
|
|
24
|
+
*/
|
|
25
|
+
declare const _default: React.MemoExoticComponent<typeof DynamicAriaLive>;
|
|
26
|
+
export default _default;
|
|
27
|
+
declare function DynamicAriaLive({ delay, children, ...restProps }: DynamicAriaLiveProps): JSX.Element;
|
|
28
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dynamic-aria-live/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;;AACH,wBAAqC;AAErC,iBAAS,eAAe,CAAC,EAAE,KAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,eAiBtF"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { __assign, __rest } from "tslib";
|
|
4
|
+
import React, { memo, useEffect, useMemo, useRef } from 'react';
|
|
5
|
+
import { throttle } from '../../utils/throttle';
|
|
6
|
+
import { updateLiveRegion } from '../live-region/utils';
|
|
7
|
+
import AriaLiveTag from '../live-region/aria-liva-tag';
|
|
8
|
+
/**
|
|
9
|
+
* Dynamic aria live component is hidden in the layout, but visible for screen readers.
|
|
10
|
+
* Purpose of this component is to announce recurring changes for a content.
|
|
11
|
+
*
|
|
12
|
+
* To avoid merging words, provide all text nodes wrapped with elements, like:
|
|
13
|
+
* <LiveRegion>
|
|
14
|
+
* <span>{title}</span>
|
|
15
|
+
* <span><Details /></span>
|
|
16
|
+
* </LiveRegion>
|
|
17
|
+
* Or create a single text node if possible:
|
|
18
|
+
* <LiveRegion>
|
|
19
|
+
* {`${title} ${details}`}
|
|
20
|
+
* </LiveRegion>
|
|
21
|
+
*
|
|
22
|
+
* @param delay time value in milliseconds to set minimal time interval between announcements.
|
|
23
|
+
* @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.
|
|
24
|
+
*/
|
|
25
|
+
export default memo(DynamicAriaLive);
|
|
26
|
+
function DynamicAriaLive(_a) {
|
|
27
|
+
var _b = _a.delay, delay = _b === void 0 ? 5000 : _b, children = _a.children, restProps = __rest(_a, ["delay", "children"]);
|
|
28
|
+
var sourceRef = useRef(null);
|
|
29
|
+
var targetRef = useRef(null);
|
|
30
|
+
var throttledUpdate = useMemo(function () {
|
|
31
|
+
return throttle(function () { return updateLiveRegion(targetRef, sourceRef); }, delay);
|
|
32
|
+
}, [delay]);
|
|
33
|
+
useEffect(function () {
|
|
34
|
+
throttledUpdate();
|
|
35
|
+
});
|
|
36
|
+
return (React.createElement(AriaLiveTag, __assign({ targetRef: targetRef, sourceRef: sourceRef }, restProps), children));
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dynamic-aria-live/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAQvD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC;AAErC,SAAS,eAAe,CAAC,EAA8D;IAA5D,IAAA,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAAtC,qBAAwC,CAAF;IAC7D,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD,IAAM,eAAe,GAAG,OAAO,CAAC;QAC9B,OAAO,QAAQ,CAAC,cAAM,OAAA,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,EAAtC,CAAsC,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC;QACR,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,SAAS,GACnE,QAAQ,CACG,CACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { memo, useEffect, useMemo, useRef } from 'react';\nimport { throttle } from '../../utils/throttle';\nimport { ScreenreaderOnlyProps } from '../screenreader-only';\nimport { updateLiveRegion } from '../live-region/utils';\nimport AriaLiveTag from '../live-region/aria-liva-tag';\n\nexport interface DynamicAriaLiveProps extends ScreenreaderOnlyProps {\n assertive?: boolean;\n delay?: number;\n children: React.ReactNode;\n}\n\n/**\n * Dynamic aria live component is hidden in the layout, but visible for screen readers.\n * Purpose of this component is to announce recurring changes for a content.\n *\n * To avoid merging words, provide all text nodes wrapped with elements, like:\n * <LiveRegion>\n * <span>{title}</span>\n * <span><Details /></span>\n * </LiveRegion>\n * Or create a single text node if possible:\n * <LiveRegion>\n * {`${title} ${details}`}\n * </LiveRegion>\n *\n * @param delay time value in milliseconds to set minimal time interval between announcements.\n * @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.\n */\nexport default memo(DynamicAriaLive);\n\nfunction DynamicAriaLive({ delay = 5000, children, ...restProps }: DynamicAriaLiveProps) {\n const sourceRef = useRef<HTMLSpanElement>(null);\n const targetRef = useRef<HTMLSpanElement>(null);\n\n const throttledUpdate = useMemo(() => {\n return throttle(() => updateLiveRegion(targetRef, sourceRef), delay);\n }, [delay]);\n\n useEffect(() => {\n throttledUpdate();\n });\n\n return (\n <AriaLiveTag targetRef={targetRef} sourceRef={sourceRef} {...restProps}>\n {children}\n </AriaLiveTag>\n );\n}\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScreenreaderOnlyProps } from '../screenreader-only/index.js';
|
|
3
|
+
export interface AriaLiveTagProps extends ScreenreaderOnlyProps {
|
|
4
|
+
assertive?: boolean;
|
|
5
|
+
visible?: boolean;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
targetRef: React.RefObject<HTMLSpanElement>;
|
|
8
|
+
sourceRef: React.RefObject<HTMLSpanElement>;
|
|
9
|
+
}
|
|
10
|
+
declare const _default: React.MemoExoticComponent<typeof AriaLiveTag>;
|
|
11
|
+
export default _default;
|
|
12
|
+
declare function AriaLiveTag({ assertive, visible, targetRef, sourceRef, children, ...restProps }: AriaLiveTagProps): JSX.Element;
|
|
13
|
+
//# sourceMappingURL=aria-liva-tag.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria-liva-tag.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/aria-liva-tag.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAyB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGxF,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC5C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC7C;;AAED,wBAAiC;AAEjC,iBAAS,WAAW,CAAC,EACnB,SAAiB,EACjB,OAAe,EACf,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,eAgBlB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { __assign, __rest } from "tslib";
|
|
4
|
+
/* eslint-disable @cloudscape-design/prefer-live-region */
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
import React, { memo } from 'react';
|
|
7
|
+
import ScreenreaderOnly from '../screenreader-only/index.js';
|
|
8
|
+
import styles from './styles.css.js';
|
|
9
|
+
export default memo(AriaLiveTag);
|
|
10
|
+
function AriaLiveTag(_a) {
|
|
11
|
+
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"]);
|
|
12
|
+
return (React.createElement(React.Fragment, null,
|
|
13
|
+
visible && React.createElement("span", { ref: sourceRef }, children),
|
|
14
|
+
React.createElement(ScreenreaderOnly, __assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
|
|
15
|
+
!visible && (React.createElement("span", { ref: sourceRef, "aria-hidden": "true" }, children)),
|
|
16
|
+
React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=aria-liva-tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ScreenreaderOnlyProps } from '../screenreader-only
|
|
2
|
+
import { ScreenreaderOnlyProps } from '../screenreader-only';
|
|
3
3
|
export interface LiveRegionProps extends ScreenreaderOnlyProps {
|
|
4
4
|
assertive?: boolean;
|
|
5
5
|
delay?: number;
|
|
@@ -7,39 +7,39 @@ export interface LiveRegionProps extends ScreenreaderOnlyProps {
|
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
*/
|
|
10
|
+
* The live region is hidden in the layout, but visible for screen readers.
|
|
11
|
+
* It's purpose it to announce changes e.g. when custom navigation logic is used.
|
|
12
|
+
*
|
|
13
|
+
* The way live region works differently in different browsers and screen readers and
|
|
14
|
+
* it is recommended to manually test every new implementation.
|
|
15
|
+
*
|
|
16
|
+
* If you notice there are different words being merged together,
|
|
17
|
+
* check if there are text nodes not being wrapped in elements, like:
|
|
18
|
+
* <LiveRegion>
|
|
19
|
+
* {title}
|
|
20
|
+
* <span><Details /></span>
|
|
21
|
+
* </LiveRegion>
|
|
22
|
+
*
|
|
23
|
+
* To fix, wrap "title" in an element:
|
|
24
|
+
* <LiveRegion>
|
|
25
|
+
* <span>{title}</span>
|
|
26
|
+
* <span><Details /></span>
|
|
27
|
+
* </LiveRegion>
|
|
28
|
+
*
|
|
29
|
+
* Or create a single text node if possible:
|
|
30
|
+
* <LiveRegion>
|
|
31
|
+
* {`${title} ${details}`}
|
|
32
|
+
* </LiveRegion>
|
|
33
|
+
*
|
|
34
|
+
* The live region is always atomic, because non-atomic regions can be treated by screen readers
|
|
35
|
+
* differently and produce unexpected results. To imitate non-atomic announcements simply use
|
|
36
|
+
* multiple live regions:
|
|
37
|
+
* <>
|
|
38
|
+
* <LiveRegion>{title}</LiveRegion>
|
|
39
|
+
* <LiveRegion><Details /></LiveRegion>
|
|
40
|
+
* </>
|
|
41
|
+
*/
|
|
42
42
|
declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
|
|
43
43
|
export default _default;
|
|
44
|
-
declare function LiveRegion({
|
|
44
|
+
declare function LiveRegion({ delay, children, ...restProps }: LiveRegionProps): JSX.Element;
|
|
45
45
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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"}
|
|
@@ -2,46 +2,45 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { __assign, __rest } from "tslib";
|
|
4
4
|
/* eslint-disable @cloudscape-design/prefer-live-region */
|
|
5
|
-
import clsx from 'clsx';
|
|
6
5
|
import React, { memo, useEffect, useRef } from 'react';
|
|
7
|
-
import
|
|
8
|
-
import
|
|
6
|
+
import { updateLiveRegion } from './utils';
|
|
7
|
+
import AriaLiveTag from './aria-liva-tag';
|
|
9
8
|
/**
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
*/
|
|
9
|
+
* The live region is hidden in the layout, but visible for screen readers.
|
|
10
|
+
* It's purpose it to announce changes e.g. when custom navigation logic is used.
|
|
11
|
+
*
|
|
12
|
+
* The way live region works differently in different browsers and screen readers and
|
|
13
|
+
* it is recommended to manually test every new implementation.
|
|
14
|
+
*
|
|
15
|
+
* If you notice there are different words being merged together,
|
|
16
|
+
* check if there are text nodes not being wrapped in elements, like:
|
|
17
|
+
* <LiveRegion>
|
|
18
|
+
* {title}
|
|
19
|
+
* <span><Details /></span>
|
|
20
|
+
* </LiveRegion>
|
|
21
|
+
*
|
|
22
|
+
* To fix, wrap "title" in an element:
|
|
23
|
+
* <LiveRegion>
|
|
24
|
+
* <span>{title}</span>
|
|
25
|
+
* <span><Details /></span>
|
|
26
|
+
* </LiveRegion>
|
|
27
|
+
*
|
|
28
|
+
* Or create a single text node if possible:
|
|
29
|
+
* <LiveRegion>
|
|
30
|
+
* {`${title} ${details}`}
|
|
31
|
+
* </LiveRegion>
|
|
32
|
+
*
|
|
33
|
+
* The live region is always atomic, because non-atomic regions can be treated by screen readers
|
|
34
|
+
* differently and produce unexpected results. To imitate non-atomic announcements simply use
|
|
35
|
+
* multiple live regions:
|
|
36
|
+
* <>
|
|
37
|
+
* <LiveRegion>{title}</LiveRegion>
|
|
38
|
+
* <LiveRegion><Details /></LiveRegion>
|
|
39
|
+
* </>
|
|
40
|
+
*/
|
|
42
41
|
export default memo(LiveRegion);
|
|
43
42
|
function LiveRegion(_a) {
|
|
44
|
-
var _b = _a.
|
|
43
|
+
var _b = _a.delay, delay = _b === void 0 ? 10 : _b, children = _a.children, restProps = __rest(_a, ["delay", "children"]);
|
|
45
44
|
var sourceRef = useRef(null);
|
|
46
45
|
var targetRef = useRef(null);
|
|
47
46
|
/*
|
|
@@ -56,24 +55,12 @@ function LiveRegion(_a) {
|
|
|
56
55
|
does not impact the performance. If it does, prefer using a string as children prop.
|
|
57
56
|
*/
|
|
58
57
|
useEffect(function () {
|
|
59
|
-
function updateLiveRegion() {
|
|
60
|
-
if (targetRef.current && sourceRef.current) {
|
|
61
|
-
var sourceContent = extractInnerText(sourceRef.current);
|
|
62
|
-
var targetContent = extractInnerText(targetRef.current);
|
|
63
|
-
if (targetContent !== sourceContent) {
|
|
64
|
-
// The aria-atomic does not work properly in Voice Over, causing
|
|
65
|
-
// certain parts of the content to be ignored. To fix that,
|
|
66
|
-
// we assign the source text content as a single node.
|
|
67
|
-
targetRef.current.innerText = sourceContent;
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
58
|
var timeoutId;
|
|
72
59
|
if (delay) {
|
|
73
|
-
timeoutId = setTimeout(updateLiveRegion, delay);
|
|
60
|
+
timeoutId = setTimeout(function () { return updateLiveRegion(targetRef, sourceRef); }, delay);
|
|
74
61
|
}
|
|
75
62
|
else {
|
|
76
|
-
updateLiveRegion();
|
|
63
|
+
updateLiveRegion(targetRef, sourceRef);
|
|
77
64
|
}
|
|
78
65
|
return function () {
|
|
79
66
|
if (timeoutId) {
|
|
@@ -81,16 +68,6 @@ function LiveRegion(_a) {
|
|
|
81
68
|
}
|
|
82
69
|
};
|
|
83
70
|
});
|
|
84
|
-
return (React.createElement(
|
|
85
|
-
visible && React.createElement("span", { ref: sourceRef }, children),
|
|
86
|
-
React.createElement(ScreenreaderOnly, __assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
|
|
87
|
-
!visible && (React.createElement("span", { ref: sourceRef, "aria-hidden": "true" }, children)),
|
|
88
|
-
React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
|
|
89
|
-
}
|
|
90
|
-
// This only extracts text content from the node including all its children which is enough for now.
|
|
91
|
-
// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
|
|
92
|
-
// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
|
|
93
|
-
function extractInnerText(node) {
|
|
94
|
-
return (node.innerText || '').replace(/\s+/g, ' ').trim();
|
|
71
|
+
return (React.createElement(AriaLiveTag, __assign({ targetRef: targetRef, sourceRef: sourceRef }, restProps), children));
|
|
95
72
|
}
|
|
96
73
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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,
|
|
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,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"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Updates text of the target node if it's differ from source node.
|
|
4
|
+
* @param targetRef - Ref to the element with aria-live
|
|
5
|
+
* @param sourceRef - Ref to the element to be announced
|
|
6
|
+
*/
|
|
7
|
+
export declare function updateLiveRegion(targetRef: React.RefObject<HTMLSpanElement>, sourceRef: React.RefObject<HTMLSpanElement>): void;
|
|
8
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Updates text of the target node if it's differ from source node.
|
|
3
|
+
* @param targetRef - Ref to the element with aria-live
|
|
4
|
+
* @param sourceRef - Ref to the element to be announced
|
|
5
|
+
*/
|
|
6
|
+
export function updateLiveRegion(targetRef, sourceRef) {
|
|
7
|
+
if (targetRef.current && sourceRef.current) {
|
|
8
|
+
var sourceContent = extractInnerText(sourceRef.current);
|
|
9
|
+
var targetContent = extractInnerText(targetRef.current);
|
|
10
|
+
if (targetContent !== sourceContent) {
|
|
11
|
+
// The aria-atomic does not work properly in Voice Over, causing
|
|
12
|
+
// certain parts of the content to be ignored. To fix that,
|
|
13
|
+
// we assign the source text content as a single node.
|
|
14
|
+
targetRef.current.innerText = sourceContent;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
// This only extracts text content from the node including all its children which is enough for now.
|
|
19
|
+
// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
|
|
20
|
+
// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
|
|
21
|
+
function extractInnerText(node) {
|
|
22
|
+
return (node.innerText || '').replace(/\s+/g, ' ').trim();
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare function useCurrentMode(elementRef: React.RefObject<HTMLElement>): "dark" | "light";
|
|
3
3
|
export declare function useDensityMode(elementRef: React.RefObject<HTMLElement>): "compact" | "comfortable";
|
|
4
|
-
export declare
|
|
4
|
+
export declare const useVisualRefresh: () => boolean;
|
|
5
|
+
export declare function clearVisualRefreshState(): void;
|
|
6
|
+
export declare function useVisualRefreshDynamic(): boolean;
|
|
5
7
|
export declare function useReducedMotion(elementRef: React.RefObject<HTMLElement>): boolean;
|
|
6
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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;
|
|
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;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"}
|
|
@@ -5,6 +5,8 @@ import { ALWAYS_VISUAL_REFRESH } from '../../environment';
|
|
|
5
5
|
import { isMotionDisabled } from '../../motion';
|
|
6
6
|
import { findUpUntil } from '../../utils/dom';
|
|
7
7
|
import { useMutationObserver } from '../use-mutation-observer';
|
|
8
|
+
import { isDevelopment } from '../../is-development';
|
|
9
|
+
import { warnOnce } from '../../logging';
|
|
8
10
|
export function useCurrentMode(elementRef) {
|
|
9
11
|
var _a = useState('light'), value = _a[0], setValue = _a[1];
|
|
10
12
|
useMutationObserver(elementRef, function (node) {
|
|
@@ -21,20 +23,25 @@ export function useDensityMode(elementRef) {
|
|
|
21
23
|
});
|
|
22
24
|
return value;
|
|
23
25
|
}
|
|
26
|
+
export var useVisualRefresh = ALWAYS_VISUAL_REFRESH ? function () { return true; } : useVisualRefreshDynamic;
|
|
24
27
|
// We expect VR is to be set only once and before the application is rendered.
|
|
25
28
|
var visualRefreshState = undefined;
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
// for testing
|
|
30
|
+
export function clearVisualRefreshState() {
|
|
31
|
+
visualRefreshState = undefined;
|
|
32
|
+
}
|
|
33
|
+
function detectVisualRefresh() {
|
|
34
|
+
return typeof document !== 'undefined' && !!document.querySelector('.awsui-visual-refresh');
|
|
35
|
+
}
|
|
36
|
+
export function useVisualRefreshDynamic() {
|
|
28
37
|
if (visualRefreshState === undefined) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
else {
|
|
37
|
-
visualRefreshState = !!document.querySelector('.awsui-visual-refresh');
|
|
38
|
+
visualRefreshState = detectVisualRefresh();
|
|
39
|
+
}
|
|
40
|
+
if (isDevelopment) {
|
|
41
|
+
var newVisualRefreshState = detectVisualRefresh();
|
|
42
|
+
if (newVisualRefreshState !== visualRefreshState) {
|
|
43
|
+
warnOnce('Visual Refresh', 'Dynamic visual refresh change detected. This is not supported. ' +
|
|
44
|
+
'Make sure `awsui-visual-refresh` is attached to the `<body>` element before initial React render');
|
|
38
45
|
}
|
|
39
46
|
}
|
|
40
47
|
return visualRefreshState;
|
|
@@ -1 +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;
|
|
1
|
+
{"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
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,eAiDlB"}
|
package/progress-bar/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
|
11
11
|
import { Progress, ResultState, SmallText } from './internal';
|
|
12
12
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
13
13
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
14
|
+
import DynamicAriaLive from '../internal/components/dynamic-aria-live';
|
|
14
15
|
export default function ProgressBar(_a) {
|
|
15
16
|
var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.status, status = _c === void 0 ? 'in-progress' : _c, _d = _a.variant, variant = _d === void 0 ? 'standalone' : _d, resultButtonText = _a.resultButtonText, label = _a.label, description = _a.description, additionalInfo = _a.additionalInfo, resultText = _a.resultText, onResultButtonClick = _a.onResultButtonClick, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
|
|
16
17
|
var __internalRootRef = useBaseComponent('ProgressBar').__internalRootRef;
|
|
@@ -26,7 +27,9 @@ export default function ProgressBar(_a) {
|
|
|
26
27
|
React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
|
|
27
28
|
React.createElement("div", { className: clsx(styles['word-wrap'], styles["label-".concat(variant)]), id: labelId }, label),
|
|
28
29
|
description && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, description),
|
|
29
|
-
React.createElement("div",
|
|
30
|
+
React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
|
|
31
|
+
React.createElement(Progress, { value: value, labelId: labelId, isInFlash: isInFlash }),
|
|
32
|
+
React.createElement(DynamicAriaLive, null, "".concat(label !== null && label !== void 0 ? label : '', ": ").concat(value, "%")))) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: function () {
|
|
30
33
|
fireNonCancelableEvent(onResultButtonClick);
|
|
31
34
|
} })))),
|
|
32
35
|
additionalInfo && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, additionalInfo)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '../internal/logging';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport DynamicAriaLive from '../internal/components/dynamic-aria-live';\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar');\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-progress-bar-');\n\n const labelId = `${generatedName}-label`;\n const isInFlash = variant === 'flash';\n const isInProgressState = status === 'in-progress';\n\n if (isInFlash && resultButtonText) {\n warnOnce(\n 'ProgressBar',\n 'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n ref={__internalRootRef}\n >\n <div className={isInFlash ? styles['flash-container'] : undefined}>\n <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n {label}\n </div>\n {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n <div>\n {isInProgressState ? (\n <>\n <Progress value={value} labelId={labelId} isInFlash={isInFlash} />\n <DynamicAriaLive>{`${label ?? ''}: ${value}%`}</DynamicAriaLive>\n </>\n ) : (\n <ResultState\n resultText={resultText}\n isInFlash={isInFlash}\n resultButtonText={resultButtonText}\n status={status}\n onClick={() => {\n fireNonCancelableEvent(onResultButtonClick);\n }}\n />\n )}\n </div>\n </div>\n {additionalInfo && <SmallText color={isInFlash ? 'inherit' : undefined}>{additionalInfo}</SmallText>}\n </div>\n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
|
package/progress-bar/internal.js
CHANGED
|
@@ -32,10 +32,10 @@ export var ResultState = function (_a) {
|
|
|
32
32
|
var isInFlash = _a.isInFlash, resultText = _a.resultText, resultButtonText = _a.resultButtonText, status = _a.status, onClick = _a.onClick;
|
|
33
33
|
var hasResultButton = !!resultButtonText;
|
|
34
34
|
if (isInFlash) {
|
|
35
|
-
return (React.createElement("div", { className: styles["result-container-".concat(status)] },
|
|
35
|
+
return (React.createElement("div", { className: styles["result-container-".concat(status)], "aria-live": "polite", "aria-atomic": "true" },
|
|
36
36
|
React.createElement("span", { className: styles['result-text'] }, resultText)));
|
|
37
37
|
}
|
|
38
|
-
return (React.createElement("div", { className: styles["result-container-".concat(status)] },
|
|
38
|
+
return (React.createElement("div", { className: styles["result-container-".concat(status)], "aria-live": "polite", "aria-atomic": "true" },
|
|
39
39
|
React.createElement("span", { className: clsx(hasResultButton && styles['with-result-button']) },
|
|
40
40
|
React.createElement(InternalStatusIndicator, { type: status === 'success' ? 'success' : 'error' },
|
|
41
41
|
React.createElement("span", { className: styles['result-text'] }, resultText))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,IAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,IAAM,KAAK,GAAG,UAAC,KAAa,EAAE,UAAkB,EAAE,UAAkB;IAClE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;AAC3D,CAAC,CAAC;AAOF,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,EAA4C;QAA1C,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA;IAClD,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAM,aAAa,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC;QAC1C,kCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,aAAa,IAAI,SAAS,IAAI,MAAM,CAAC,QAAQ,EAC7C,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CACzC,mBACc,aAAa,mBACb,CAAC,EAChB,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,aAAa,qBACH,OAAO,GACxB;QACF,6CAAkB,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;YAChE,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAChG,UAAG,aAAa,MAAG,CACR,CACT,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAAmC;QAAjC,KAAK,WAAA,EAAE,QAAQ,cAAA;IACzC,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IACtF,QAAQ,CACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UAAC,EAAkC;QAAhC,OAAO,aAAA,EAAE,QAAQ,cAAA;IACvC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;QACrC,oBAAC,cAAc,IAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,IAC/C,QAAQ,CACM,CACb,CACP,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAA8E;QAA5E,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAE,gBAAgB,sBAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA;IACpF,IAAM,eAAe,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAE3C,IAAI,SAAS,EAAE;QACb,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,2BAAoB,MAAM,CAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n value: number;\n isInFlash: boolean;\n labelId: string;\n}\nexport const Progress = ({ value, isInFlash, labelId }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n return (\n <div className={styles['progress-container']}>\n <progress\n className={clsx(\n styles.progress,\n progressValue >= MAX_VALUE && styles.complete,\n isInFlash && styles['progress-in-flash']\n )}\n aria-valuenow={progressValue}\n aria-valuemin={0}\n max={MAX_VALUE}\n value={progressValue}\n aria-labelledby={labelId}\n />\n <span aria-hidden=\"true\" className={styles['percentage-container']}>\n <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n {`${progressValue}%`}\n </InternalBox>\n </span>\n </div>\n );\n};\n\ninterface SmallTextProps {\n color?: BoxProps.Color;\n children: React.ReactNode;\n}\n\nexport const SmallText = ({ color, children }: SmallTextProps) => {\n return (\n <InternalBox className={styles['word-wrap']} variant=\"small\" display=\"block\" color={color}>\n {children}\n </InternalBox>\n );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n return (\n <div className={styles['result-button']}>\n <InternalButton formAction=\"none\" onClick={onClick}>\n {children}\n </InternalButton>\n </div>\n );\n};\n\ninterface ResultStateProps {\n isInFlash: boolean;\n resultText: React.ReactNode;\n resultButtonText?: string;\n status: ProgressBarProps.Status;\n onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n const hasResultButton = !!resultButtonText;\n\n if (isInFlash) {\n return (\n <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n <span className={styles['result-text']}>{resultText}</span>\n </div>\n );\n }\n\n return (\n <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n <span className={clsx(hasResultButton && styles['with-result-button'])}>\n <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n <span className={styles['result-text']}>{resultText}</span>\n </InternalStatusIndicator>\n </span>\n {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n </div>\n );\n};\n"]}
|