@cloudscape-design/components 3.0.635 → 3.0.637
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/app-layout/visual-refresh/main.d.ts.map +1 -1
- package/app-layout/visual-refresh/main.js +2 -2
- package/app-layout/visual-refresh/main.js.map +1 -1
- package/internal/components/live-region/index.js +2 -2
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/live-region/styles.css.js +2 -1
- package/internal/components/live-region/styles.scoped.css +5 -1
- package/internal/components/live-region/styles.selectors.js +2 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/progress-bar/index.d.ts +1 -1
- package/progress-bar/index.d.ts.map +1 -1
- package/progress-bar/index.js +6 -4
- package/progress-bar/index.js.map +1 -1
- package/progress-bar/interfaces.d.ts +4 -0
- package/progress-bar/interfaces.d.ts.map +1 -1
- package/progress-bar/interfaces.js.map +1 -1
- package/progress-bar/internal.d.ts +4 -2
- package/progress-bar/internal.d.ts.map +1 -1
- package/progress-bar/internal.js +4 -4
- package/progress-bar/internal.js.map +1 -1
- package/split-panel/icons/resize-handler.d.ts.map +1 -1
- package/split-panel/icons/resize-handler.js +1 -1
- package/split-panel/icons/resize-handler.js.map +1 -1
- package/table/body-cell/styles.css.js +45 -44
- package/table/body-cell/styles.scoped.css +186 -165
- package/table/body-cell/styles.selectors.js +45 -44
- package/table/body-cell/td-element.js +2 -2
- package/table/body-cell/td-element.js.map +1 -1
- package/table/expandable-rows/expandable-rows-utils.d.ts +5 -3
- package/table/expandable-rows/expandable-rows-utils.d.ts.map +1 -1
- package/table/expandable-rows/expandable-rows-utils.js +10 -10
- package/table/expandable-rows/expandable-rows-utils.js.map +1 -1
- package/table/interfaces.d.ts +40 -1
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +56 -32
- package/table/internal.js.map +1 -1
- package/table/progressive-loading/items-loader.d.ts +13 -0
- package/table/progressive-loading/items-loader.d.ts.map +1 -0
- package/table/progressive-loading/items-loader.js +26 -0
- package/table/progressive-loading/items-loader.js.map +1 -0
- package/table/progressive-loading/progressive-loading-utils.d.ts +14 -0
- package/table/progressive-loading/progressive-loading-utils.d.ts.map +1 -0
- package/table/progressive-loading/progressive-loading-utils.js +42 -0
- package/table/progressive-loading/progressive-loading-utils.js.map +1 -0
- package/table/progressive-loading/styles.css.js +6 -0
- package/table/progressive-loading/styles.scoped.css +7 -0
- package/table/progressive-loading/styles.selectors.js +7 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,IAAI,
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,IAAI,gBA4D3B"}
|
|
@@ -9,7 +9,7 @@ import styles from './styles.css.js';
|
|
|
9
9
|
import testutilStyles from '../test-classes/styles.css.js';
|
|
10
10
|
import * as tokens from '../../internal/generated/styles/tokens';
|
|
11
11
|
export default function Main() {
|
|
12
|
-
const { content, disableBodyScroll, disableContentPaddings, footerHeight, hasDrawerViewportOverlay, navigationOpen, placement, hasBackgroundOverlap, isMobile, isSplitPanelOpen, isToolsOpen, mainElement, notificationsHeight, stickyNotifications, offsetBottom, splitPanelDisplayed, splitPanelPosition, activeDrawerId, } = useAppLayoutInternals();
|
|
12
|
+
const { content, disableBodyScroll, disableContentPaddings, footerHeight, hasDrawerViewportOverlay, navigationOpen, placement, hasBackgroundOverlap, isMobile, isSplitPanelOpen, isToolsOpen, mainElement, notificationsHeight, stickyNotifications, offsetBottom, splitPanelDisplayed, splitPanelPosition, activeDrawerId, hasStickyBackground, } = useAppLayoutInternals();
|
|
13
13
|
const splitPanelHeight = offsetBottom - footerHeight;
|
|
14
14
|
return (React.createElement("div", { className: clsx(styles.container, styles[`split-panel-position-${splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom'}`], {
|
|
15
15
|
[styles['disable-content-paddings']]: disableContentPaddings,
|
|
@@ -21,6 +21,6 @@ export default function Main() {
|
|
|
21
21
|
[styles.unfocusable]: hasDrawerViewportOverlay,
|
|
22
22
|
}, testutilStyles.content), ref: mainElement, style: Object.assign({ [customCssProps.splitPanelHeight]: `${splitPanelHeight}px` }, getStickyOffsetVars(placement.insetBlockStart, offsetBottom, stickyNotifications && notificationsHeight > 0
|
|
23
23
|
? `${tokens.spaceXs} + ${notificationsHeight}px + ${!hasBackgroundOverlap ? tokens.spaceXxxs : '0px'}`
|
|
24
|
-
: '0px', `var(${customCssProps.mobileBarHeight})`, !!disableBodyScroll, isMobile, hasBackgroundOverlap && !isMobile ? tokens.spaceScaledS : '0px')) }, content));
|
|
24
|
+
: '0px', `var(${customCssProps.mobileBarHeight})`, !!disableBodyScroll, isMobile, hasBackgroundOverlap && hasStickyBackground && !isMobile ? tokens.spaceScaledS : '0px')) }, content));
|
|
25
25
|
}
|
|
26
26
|
//# sourceMappingURL=main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,wBAAwB,EACxB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,
|
|
1
|
+
{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,MAAM,EACJ,OAAO,EACP,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,wBAAwB,EACxB,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,wBAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,EAAE,CAAC,EAChE;YACE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,sBAAsB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,mBAAmB;YAChD,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;YAC9C,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW;YACtC,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc;YAC/C,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,gBAAgB;YACjD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK,kBACH,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,IAAI,IACvD,mBAAmB,CACpB,SAAS,CAAC,eAAe,EACzB,YAAY,EACZ,mBAAmB,IAAI,mBAAmB,GAAG,CAAC;YAC5C,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,MAAM,mBAAmB,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE;YACtG,CAAC,CAAC,KAAK,EACT,OAAO,cAAc,CAAC,eAAe,GAAG,EACxC,CAAC,CAAC,iBAAiB,EACnB,QAAQ,EACR,oBAAoB,IAAI,mBAAmB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CACvF,KAGF,OAAO,CACJ,CACP,CAAC;AACJ,CAAC","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 { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { getStickyOffsetVars } from '../utils/sticky-offsets';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport * as tokens from '../../internal/generated/styles/tokens';\n\nexport default function Main() {\n const {\n content,\n disableBodyScroll,\n disableContentPaddings,\n footerHeight,\n hasDrawerViewportOverlay,\n navigationOpen,\n placement,\n hasBackgroundOverlap,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n mainElement,\n notificationsHeight,\n stickyNotifications,\n offsetBottom,\n splitPanelDisplayed,\n splitPanelPosition,\n activeDrawerId,\n hasStickyBackground,\n } = useAppLayoutInternals();\n\n const splitPanelHeight = offsetBottom - footerHeight;\n\n return (\n <div\n className={clsx(\n styles.container,\n styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n {\n [styles['disable-content-paddings']]: disableContentPaddings,\n [styles['has-split-panel']]: splitPanelDisplayed,\n [styles['is-navigation-open']]: navigationOpen,\n [styles['is-tools-open']]: isToolsOpen,\n [styles['has-active-drawer']]: !!activeDrawerId,\n [styles['is-split-panel-open']]: isSplitPanelOpen,\n [styles.unfocusable]: hasDrawerViewportOverlay,\n },\n testutilStyles.content\n )}\n ref={mainElement}\n style={{\n [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n ...getStickyOffsetVars(\n placement.insetBlockStart,\n offsetBottom,\n stickyNotifications && notificationsHeight > 0\n ? `${tokens.spaceXs} + ${notificationsHeight}px + ${!hasBackgroundOverlap ? tokens.spaceXxxs : '0px'}`\n : '0px',\n `var(${customCssProps.mobileBarHeight})`,\n !!disableBodyScroll,\n isMobile,\n hasBackgroundOverlap && hasStickyBackground && !isMobile ? tokens.spaceScaledS : '0px'\n ),\n }}\n >\n {content}\n </div>\n );\n}\n"]}
|
|
@@ -114,9 +114,9 @@ function LiveRegion(_a) {
|
|
|
114
114
|
};
|
|
115
115
|
});
|
|
116
116
|
return (React.createElement(React.Fragment, null,
|
|
117
|
-
visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id }, children)),
|
|
117
|
+
visible && !source && (React.createElement(TagName, { ref: sourceRef, id: id, className: styles.source }, children)),
|
|
118
118
|
React.createElement(ScreenreaderOnly, Object.assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
|
|
119
|
-
!visible && !source && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true" }, children)),
|
|
119
|
+
!visible && !source && (React.createElement(TagName, { ref: sourceRef, "aria-hidden": "true", className: styles.source }, children)),
|
|
120
120
|
React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' }))));
|
|
121
121
|
}
|
|
122
122
|
// This only extracts text content from the node including all its children which is enough for now.
|
|
@@ -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,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,sBAAsB,CAAC;AAC/E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAkBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EASF;QATE,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,OAAO,EAAE,OAAO,GAAG,MAAM,EACzB,QAAQ,EACR,EAAE,EACF,MAAM,OAEU,EADb,SAAS,cARM,wEASnB,CADa;IAEZ,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEjE;;;;;;;;;;MAUE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,gBAAgB;YACvB,IAAI,MAAM,EAAE;gBACV,OAAO,MAAM;qBACV,GAAG,CAAC,IAAI,CAAC,EAAE;oBACV,IAAI,CAAC,IAAI,EAAE;wBACT,OAAO,SAAS,CAAC;qBAClB;oBACD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;wBAC5B,OAAO,IAAI,CAAC;qBACb;oBACD,IAAI,IAAI,CAAC,OAAO,EAAE;wBAChB,OAAO,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;qBACvC;gBACH,CAAC,CAAC;qBACD,MAAM,CAAC,OAAO,CAAC;qBACf,IAAI,CAAC,GAAG,CAAC,CAAC;aACd;YAED,IAAI,SAAS,CAAC,OAAO,EAAE;gBACrB,OAAO,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;aAC5C;QACH,CAAC;QACD,SAAS,gBAAgB;YACvB,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YAEzC,IAAI,SAAS,CAAC,OAAO,IAAI,aAAa,EAAE;gBACtC,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL;QACG,OAAO,IAAI,CAAC,MAAM,IAAI,CACrB,oBAAC,OAAO,IAAC,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n assertive?: boolean;\n delay?: number;\n visible?: boolean;\n tagName?: 'span' | 'div';\n id?: string;\n /**\n * Use a list of strings and/or existing DOM elements for building the\n * announcement text. This avoids rendering separate content just for this\n * LiveRegion.\n *\n * If this property is set, the `children` will be ignored.\n */\n source?: Array<string | React.RefObject<HTMLElement> | undefined>;\n}\n\n/**\n * The live region is hidden in the layout, but visible for screen readers.\n * It's purpose it to announce changes e.g. when custom navigation logic is used.\n *\n * The way live region works differently in different browsers and screen readers and\n * it is recommended to manually test every new implementation.\n *\n * If you notice there are different words being merged together,\n * check if there are text nodes not being wrapped in elements, like:\n * ```\n * <LiveRegion>\n * {title}\n * <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * To fix, wrap \"title\" in an element:\n * ```\n * <LiveRegion>\n * <span>{title}</span>\n * <span><Details /></span>\n * </LiveRegion>\n * ```\n *\n * Or create a single text node if possible:\n * ```\n * <LiveRegion>\n * {`${title} ${details}`}\n * </LiveRegion>\n * ```\n *\n * The live region is always atomic, because non-atomic regions can be treated by screen readers\n * differently and produce unexpected results. To imitate non-atomic announcements simply use\n * multiple live regions:\n * ```\n * <>\n * <LiveRegion>{title}</LiveRegion>\n * <LiveRegion><Details /></LiveRegion>\n * </>\n * ```\n *\n * If you place interactive content inside the LiveRegion, the content will still be\n * interactive (e.g. as a tab stop). Consider using the `source` property instead.\n */\nexport default memo(LiveRegion);\n\nfunction LiveRegion({\n assertive = false,\n delay = 10,\n visible = false,\n tagName: TagName = 'span',\n children,\n id,\n source,\n ...restProps\n}: LiveRegionProps) {\n const sourceRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n const targetRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n\n /*\n When React state changes, React often produces too many DOM updates, causing NVDA to\n issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n The code below imitates a debouncing, scheduling a callback every time new React state\n update is detected. When a callback resolves, it copies content from a muted element\n to the live region, which is recognized by screen readers as an update.\n\n If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n does not impact the performance. If it does, prefer using a string as children prop.\n */\n useEffect(() => {\n function getSourceContent() {\n if (source) {\n return source\n .map(item => {\n if (!item) {\n return undefined;\n }\n if (typeof item === 'string') {\n return item;\n }\n if (item.current) {\n return extractInnerText(item.current);\n }\n })\n .filter(Boolean)\n .join(' ');\n }\n\n if (sourceRef.current) {\n return extractInnerText(sourceRef.current);\n }\n }\n function updateLiveRegion() {\n const sourceContent = getSourceContent();\n\n if (targetRef.current && sourceContent) {\n const targetContent = extractInnerText(targetRef.current);\n if (targetContent !== sourceContent) {\n // The aria-atomic does not work properly in Voice Over, causing\n // certain parts of the content to be ignored. To fix that,\n // we assign the source text content as a single node.\n targetRef.current.innerText = sourceContent;\n }\n }\n }\n\n let timeoutId: null | number;\n if (delay) {\n timeoutId = setTimeout(updateLiveRegion, delay);\n } else {\n updateLiveRegion();\n }\n\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n };\n });\n\n return (\n <>\n {visible && !source && (\n <TagName ref={sourceRef} id={id} className={styles.source}>\n {children}\n </TagName>\n )}\n\n <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n {!visible && !source && (\n <TagName ref={sourceRef} aria-hidden=\"true\" className={styles.source}>\n {children}\n </TagName>\n )}\n\n <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n </ScreenreaderOnly>\n </>\n );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
*/
|
|
5
|
-
.
|
|
5
|
+
.awsui_root_3bgfn_64bxr_5:not(#\9) {
|
|
6
|
+
/* used in test-utils */
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.awsui_source_3bgfn_64bxr_9:not(#\9) {
|
|
6
10
|
/* used in test-utils */
|
|
7
11
|
}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
package/progress-bar/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProgressBarProps } from './interfaces';
|
|
3
3
|
export { ProgressBarProps };
|
|
4
|
-
export default function ProgressBar({ value, status, variant, resultButtonText, label, ariaLabel, ariaLabelledby, description, additionalInfo, resultText, onResultButtonClick, ...rest }: ProgressBarProps): JSX.Element;
|
|
4
|
+
export default function ProgressBar({ value, status, variant, resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, ...rest }: ProgressBarProps): JSX.Element;
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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;AAYhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAYhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,eA2FlB"}
|
package/progress-bar/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import { throttle } from '../internal/utils/throttle';
|
|
|
16
16
|
import LiveRegion from '../internal/components/live-region';
|
|
17
17
|
const ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements
|
|
18
18
|
export default function ProgressBar(_a) {
|
|
19
|
-
var { value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, description, additionalInfo, resultText, onResultButtonClick } = _a, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "ariaLabel", "ariaLabelledby", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
|
|
19
|
+
var { value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick } = _a, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
|
|
20
20
|
const { __internalRootRef } = useBaseComponent('ProgressBar', {
|
|
21
21
|
props: { variant },
|
|
22
22
|
});
|
|
@@ -25,6 +25,8 @@ export default function ProgressBar(_a) {
|
|
|
25
25
|
const labelId = `${generatedName}-label`;
|
|
26
26
|
const isInFlash = variant === 'flash';
|
|
27
27
|
const isInProgressState = status === 'in-progress';
|
|
28
|
+
const descriptionId = useUniqueId('progressbar-description-');
|
|
29
|
+
const additionalInfoId = useUniqueId('progressbar-additional-info-');
|
|
28
30
|
const [announcedValue, setAnnouncedValue] = useState('');
|
|
29
31
|
const throttledAssertion = useMemo(() => {
|
|
30
32
|
return throttle((value) => {
|
|
@@ -40,16 +42,16 @@ export default function ProgressBar(_a) {
|
|
|
40
42
|
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef }),
|
|
41
43
|
React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
|
|
42
44
|
React.createElement("div", { className: clsx(styles['word-wrap'], styles[`label-${variant}`]), id: labelId }, label),
|
|
43
|
-
description && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, description),
|
|
45
|
+
description && (React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined, id: descriptionId }, description)),
|
|
44
46
|
React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
|
|
45
|
-
React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), isInFlash: isInFlash }),
|
|
47
|
+
React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash }),
|
|
46
48
|
React.createElement(LiveRegion, { delay: 0 },
|
|
47
49
|
label,
|
|
48
50
|
label ? ': ' : null,
|
|
49
51
|
announcedValue))) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
|
|
50
52
|
fireNonCancelableEvent(onResultButtonClick);
|
|
51
53
|
} })))),
|
|
52
|
-
additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined }, additionalInfo))));
|
|
54
|
+
additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined, id: additionalInfoId }, additionalInfo))));
|
|
53
55
|
}
|
|
54
56
|
applyDisplayName(ProgressBar, 'ProgressBar');
|
|
55
57
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,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,+CAA+C,CAAC;AAEzE,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,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAE5D,MAAM,mBAAmB,GAAG,IAAI,CAAC,CAAC,gDAAgD;AAIlF,MAAM,CAAC,OAAO,UAAU,WAAW,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, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { joinStrings } from '../internal/utils/strings';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar', {\n props: { variant },\n });\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 const descriptionId = useUniqueId('progressbar-description-');\n const additionalInfoId = useUniqueId('progressbar-additional-info-');\n\n const [announcedValue, setAnnouncedValue] = useState('');\n const throttledAssertion = useMemo(() => {\n return throttle((value: ProgressBarProps['value']) => {\n setAnnouncedValue(`${value}%`);\n }, ASSERTION_FREQUENCY);\n }, []);\n\n useEffect(() => {\n throttledAssertion(value);\n }, [throttledAssertion, value]);\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 && (\n <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n {description}\n </SmallText>\n )}\n <div>\n {isInProgressState ? (\n <>\n <Progress\n value={value}\n ariaLabel={ariaLabel}\n ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n ariaDescribedby={joinStrings(\n description ? descriptionId : undefined,\n additionalInfo ? additionalInfoId : undefined,\n ariaDescribedby\n )}\n isInFlash={isInFlash}\n />\n <LiveRegion delay={0}>\n {label}\n {label ? ': ' : null}\n {announcedValue}\n </LiveRegion>\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 && (\n <SmallText\n className={styles['additional-info']}\n color={isInFlash ? 'inherit' : undefined}\n id={additionalInfoId}\n >\n {additionalInfo}\n </SmallText>\n )}\n </div>\n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
|
|
@@ -40,6 +40,10 @@ export interface ProgressBarProps extends BaseComponentProps {
|
|
|
40
40
|
* Adds `aria-labelledby` to the progress bar.
|
|
41
41
|
*/
|
|
42
42
|
ariaLabelledby?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Adds `aria-describedby` to the progress bar.
|
|
45
|
+
*/
|
|
46
|
+
ariaDescribedby?: string;
|
|
43
47
|
/**
|
|
44
48
|
* Short description of the operation that appears at the top of the component.
|
|
45
49
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CACjD;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CACjD;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n /**\n * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n */\n value?: number;\n\n /**\n * Specifies the status of the progress bar. You can set it to one of the following:\n *\n * - `\"in-progress\"` - Displays a progress bar.\n * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n * `resultText`, and a result button.\n */\n status?: ProgressBarProps.Status;\n\n /**\n * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n *\n * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n * Note that the result button isn't displayed when using this variant.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n * - `\"standalone\"` Use in all other cases. This is the default value.\n */\n variant?: ProgressBarProps.Variant;\n\n /**\n * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n * If `resultButtonText` is empty, the result button isn't displayed.\n *\n * Note: If you use the `flash` variant, the result button isn't displayed.\n * Add a button using the `action` property of the flashbar item instead.\n */\n resultButtonText?: string;\n\n /**\n * Adds an `aria-label` to the progress bar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the progress bar.\n */\n ariaLabelledby?: string;\n\n /**\n * Short description of the operation that appears at the top of the component.\n *\n * Make sure that you always provide a label for accessibility.\n */\n label?: React.ReactNode;\n\n /**\n * More detailed information about the operation that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Information that's displayed below the progress bar or status text.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Content that's displayed when `status` is set to `error` or `success`.\n */\n resultText?: React.ReactNode;\n\n /**\n * Called when the user clicks the result state button.\n *\n * Note: If you are using the `flash` variant, the result button isn't displayed.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n */\n onResultButtonClick?: NonCancelableEventHandler;\n}\n\nexport namespace ProgressBarProps {\n export type Status = 'in-progress' | 'success' | 'error';\n export type Variant = 'standalone' | 'flash' | 'key-value';\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n /**\n * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n */\n value?: number;\n\n /**\n * Specifies the status of the progress bar. You can set it to one of the following:\n *\n * - `\"in-progress\"` - Displays a progress bar.\n * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n * `resultText`, and a result button.\n */\n status?: ProgressBarProps.Status;\n\n /**\n * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n *\n * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n * Note that the result button isn't displayed when using this variant.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n * - `\"standalone\"` Use in all other cases. This is the default value.\n */\n variant?: ProgressBarProps.Variant;\n\n /**\n * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n * If `resultButtonText` is empty, the result button isn't displayed.\n *\n * Note: If you use the `flash` variant, the result button isn't displayed.\n * Add a button using the `action` property of the flashbar item instead.\n */\n resultButtonText?: string;\n\n /**\n * Adds an `aria-label` to the progress bar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the progress bar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the progress bar.\n */\n ariaDescribedby?: string;\n\n /**\n * Short description of the operation that appears at the top of the component.\n *\n * Make sure that you always provide a label for accessibility.\n */\n label?: React.ReactNode;\n\n /**\n * More detailed information about the operation that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Information that's displayed below the progress bar or status text.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Content that's displayed when `status` is set to `error` or `success`.\n */\n resultText?: React.ReactNode;\n\n /**\n * Called when the user clicks the result state button.\n *\n * Note: If you are using the `flash` variant, the result button isn't displayed.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n */\n onResultButtonClick?: NonCancelableEventHandler;\n}\n\nexport namespace ProgressBarProps {\n export type Status = 'in-progress' | 'success' | 'error';\n export type Variant = 'standalone' | 'flash' | 'key-value';\n}\n"]}
|
|
@@ -6,14 +6,16 @@ interface ProgressProps {
|
|
|
6
6
|
isInFlash: boolean;
|
|
7
7
|
ariaLabel?: string;
|
|
8
8
|
ariaLabelledby?: string;
|
|
9
|
+
ariaDescribedby?: string;
|
|
9
10
|
}
|
|
10
|
-
export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby }: ProgressProps) => JSX.Element;
|
|
11
|
+
export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: ProgressProps) => JSX.Element;
|
|
11
12
|
interface SmallTextProps {
|
|
12
13
|
color?: BoxProps.Color;
|
|
14
|
+
id?: string;
|
|
13
15
|
children: React.ReactNode;
|
|
14
16
|
className?: string;
|
|
15
17
|
}
|
|
16
|
-
export declare const SmallText: ({ color, children, className }: SmallTextProps) => JSX.Element;
|
|
18
|
+
export declare const SmallText: ({ color, children, className, id }: SmallTextProps) => JSX.Element;
|
|
17
19
|
interface ResultStateProps {
|
|
18
20
|
isInFlash: boolean;
|
|
19
21
|
resultText: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AACD,eAAO,MAAM,QAAQ,qEAAsE,aAAa,gBA0BvG,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,uCAAwC,cAAc,gBAM3E,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,iEAAkE,gBAAgB,gBAqBzG,CAAC"}
|
package/progress-bar/internal.js
CHANGED
|
@@ -10,16 +10,16 @@ const MAX_VALUE = 100;
|
|
|
10
10
|
const clamp = (value, lowerLimit, upperLimit) => {
|
|
11
11
|
return Math.max(Math.min(value, upperLimit), lowerLimit);
|
|
12
12
|
};
|
|
13
|
-
export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby }) => {
|
|
13
|
+
export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }) => {
|
|
14
14
|
const roundedValue = Math.round(value);
|
|
15
15
|
const progressValue = clamp(roundedValue, 0, MAX_VALUE);
|
|
16
16
|
return (React.createElement("div", { className: styles['progress-container'] },
|
|
17
|
-
React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined }),
|
|
17
|
+
React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby }),
|
|
18
18
|
React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
|
|
19
19
|
React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, `${progressValue}%`))));
|
|
20
20
|
};
|
|
21
|
-
export const SmallText = ({ color, children, className }) => {
|
|
22
|
-
return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color }, children));
|
|
21
|
+
export const SmallText = ({ color, children, className, id }) => {
|
|
22
|
+
return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color, id: id }, children));
|
|
23
23
|
};
|
|
24
24
|
const ResultButton = ({ onClick, children }) => {
|
|
25
25
|
return (React.createElement("div", { className: styles['result-button'] },
|
|
@@ -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,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,UAAkB,EAAE,UAAkB,EAAE,EAAE;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;AAC3D,CAAC,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 ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: 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 max={MAX_VALUE}\n value={progressValue}\n aria-label={ariaLabel}\n // Ensures aria-label takes precedence over aria-labelledby\n aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n aria-describedby={ariaDescribedby}\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 id?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n return (\n <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize-handler.d.ts","sourceRoot":"","sources":["../../../../src/split-panel/icons/resize-handler.tsx"],"names":[],"mappings":";AAIA,QAAA,MAAM,aAAa;;
|
|
1
|
+
{"version":3,"file":"resize-handler.d.ts","sourceRoot":"","sources":["../../../../src/split-panel/icons/resize-handler.tsx"],"names":[],"mappings":";AAIA,QAAA,MAAM,aAAa;;iBAalB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
|
-
const ResizeHandler = ({ className }) => (React.createElement("svg", { focusable: false, className: className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16" },
|
|
4
|
+
const ResizeHandler = ({ className }) => (React.createElement("svg", { focusable: false, className: className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": true },
|
|
5
5
|
React.createElement("line", { strokeWidth: "2", x1: "2", y1: "5", x2: "14", y2: "5" }),
|
|
6
6
|
React.createElement("line", { strokeWidth: "2", x1: "14", y1: "10", x2: "2", y2: "10" })));
|
|
7
7
|
export default ResizeHandler;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize-handler.js","sourceRoot":"","sources":["../../../../src/split-panel/icons/resize-handler.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,EAAE,EAAE,CAAC,CAC/D,6BACE,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW;
|
|
1
|
+
{"version":3,"file":"resize-handler.js","sourceRoot":"","sources":["../../../../src/split-panel/icons/resize-handler.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,EAAE,EAAE,CAAC,CAC/D,6BACE,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,iBACN,IAAI;IAEjB,8BAAM,WAAW,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;IACrD,8BAAM,WAAW,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,CACnD,CACP,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nconst ResizeHandler = ({ className }: { className?: string }) => (\n <svg\n focusable={false}\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n aria-hidden={true}\n >\n <line strokeWidth=\"2\" x1=\"2\" y1=\"5\" x2=\"14\" y2=\"5\" />\n <line strokeWidth=\"2\" x1=\"14\" y1=\"10\" x2=\"2\" y2=\"10\" />\n </svg>\n);\n\nexport default ResizeHandler;\n"]}
|
|
@@ -1,49 +1,50 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"expandable-toggle-wrapper": "awsui_expandable-toggle-
|
|
5
|
-
"body-cell": "awsui_body-
|
|
6
|
-
"body-cell-content": "awsui_body-cell-
|
|
7
|
-
"body-cell-wrap": "awsui_body-cell-
|
|
8
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
9
|
-
"has-striped-rows": "awsui_has-striped-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"body-cell-
|
|
22
|
-
"body-cell-
|
|
23
|
-
"
|
|
24
|
-
"has-
|
|
25
|
-
"
|
|
26
|
-
"body-cell-
|
|
27
|
-
"body-cell-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"sticky-cell
|
|
32
|
-
"sticky-cell-
|
|
33
|
-
"sticky-cell-last-inline-
|
|
34
|
-
"
|
|
35
|
-
"body-cell-
|
|
36
|
-
"body-cell-
|
|
37
|
-
"body-cell-
|
|
38
|
-
"body-cell-
|
|
39
|
-
"body-cell-editor
|
|
40
|
-
"body-cell-editor-
|
|
41
|
-
"body-cell-editor-
|
|
42
|
-
"body-cell-editor-
|
|
43
|
-
"body-cell-
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"body-cell-
|
|
4
|
+
"expandable-toggle-wrapper": "awsui_expandable-toggle-wrapper_c6tup_fo032_99",
|
|
5
|
+
"body-cell": "awsui_body-cell_c6tup_fo032_107",
|
|
6
|
+
"body-cell-content": "awsui_body-cell-content_c6tup_fo032_121",
|
|
7
|
+
"body-cell-wrap": "awsui_body-cell-wrap_c6tup_fo032_124",
|
|
8
|
+
"is-visual-refresh": "awsui_is-visual-refresh_c6tup_fo032_136",
|
|
9
|
+
"has-striped-rows": "awsui_has-striped-rows_c6tup_fo032_148",
|
|
10
|
+
"expandable-level-0": "awsui_expandable-level-0_c6tup_fo032_151",
|
|
11
|
+
"expandable-level-1": "awsui_expandable-level-1_c6tup_fo032_154",
|
|
12
|
+
"expandable-level-2": "awsui_expandable-level-2_c6tup_fo032_157",
|
|
13
|
+
"expandable-level-3": "awsui_expandable-level-3_c6tup_fo032_160",
|
|
14
|
+
"expandable-level-4": "awsui_expandable-level-4_c6tup_fo032_163",
|
|
15
|
+
"expandable-level-5": "awsui_expandable-level-5_c6tup_fo032_166",
|
|
16
|
+
"expandable-level-6": "awsui_expandable-level-6_c6tup_fo032_169",
|
|
17
|
+
"expandable-level-7": "awsui_expandable-level-7_c6tup_fo032_172",
|
|
18
|
+
"expandable-level-8": "awsui_expandable-level-8_c6tup_fo032_175",
|
|
19
|
+
"expandable-level-9": "awsui_expandable-level-9_c6tup_fo032_178",
|
|
20
|
+
"expandable-level-next": "awsui_expandable-level-next_c6tup_fo032_181",
|
|
21
|
+
"body-cell-edit-active": "awsui_body-cell-edit-active_c6tup_fo032_184",
|
|
22
|
+
"body-cell-interactive": "awsui_body-cell-interactive_c6tup_fo032_184",
|
|
23
|
+
"body-cell-editable": "awsui_body-cell-editable_c6tup_fo032_184",
|
|
24
|
+
"has-striped-rows-sticky-cell-pad-inline-start": "awsui_has-striped-rows-sticky-cell-pad-inline-start_c6tup_fo032_256",
|
|
25
|
+
"has-selection": "awsui_has-selection_c6tup_fo032_292",
|
|
26
|
+
"body-cell-first-row": "awsui_body-cell-first-row_c6tup_fo032_331",
|
|
27
|
+
"body-cell-last-row": "awsui_body-cell-last-row_c6tup_fo032_334",
|
|
28
|
+
"body-cell-selected": "awsui_body-cell-selected_c6tup_fo032_334",
|
|
29
|
+
"has-footer": "awsui_has-footer_c6tup_fo032_334",
|
|
30
|
+
"body-cell-shaded": "awsui_body-cell-shaded_c6tup_fo032_344",
|
|
31
|
+
"sticky-cell": "awsui_sticky-cell_c6tup_fo032_370",
|
|
32
|
+
"sticky-cell-pad-left": "awsui_sticky-cell-pad-left_c6tup_fo032_378",
|
|
33
|
+
"sticky-cell-last-inline-end": "awsui_sticky-cell-last-inline-end_c6tup_fo032_428",
|
|
34
|
+
"sticky-cell-last-inline-start": "awsui_sticky-cell-last-inline-start_c6tup_fo032_436",
|
|
35
|
+
"body-cell-next-selected": "awsui_body-cell-next-selected_c6tup_fo032_467",
|
|
36
|
+
"body-cell-prev-selected": "awsui_body-cell-prev-selected_c6tup_fo032_471",
|
|
37
|
+
"body-cell-editor-wrapper": "awsui_body-cell-editor-wrapper_c6tup_fo032_495",
|
|
38
|
+
"body-cell-success": "awsui_body-cell-success_c6tup_fo032_502",
|
|
39
|
+
"body-cell-editor": "awsui_body-cell-editor_c6tup_fo032_495",
|
|
40
|
+
"body-cell-editor-disabled": "awsui_body-cell-editor-disabled_c6tup_fo032_529",
|
|
41
|
+
"body-cell-editor-form": "awsui_body-cell-editor-form_c6tup_fo032_538",
|
|
42
|
+
"body-cell-editor-row": "awsui_body-cell-editor-row_c6tup_fo032_548",
|
|
43
|
+
"body-cell-editor-controls": "awsui_body-cell-editor-controls_c6tup_fo032_558",
|
|
44
|
+
"body-cell-expandable": "awsui_body-cell-expandable_c6tup_fo032_561",
|
|
45
|
+
"resizable-columns": "awsui_resizable-columns_c6tup_fo032_582",
|
|
46
|
+
"expandable-cell-content": "awsui_expandable-cell-content_c6tup_fo032_585",
|
|
47
|
+
"body-cell-edit-disabled-popover": "awsui_body-cell-edit-disabled-popover_c6tup_fo032_633",
|
|
48
|
+
"body-cell-has-success": "awsui_body-cell-has-success_c6tup_fo032_636"
|
|
48
49
|
};
|
|
49
50
|
|