@cloudscape-design/components 3.0.636 → 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/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
|
@@ -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"]}
|
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"]}
|