@cloudscape-design/components 3.0.744 → 3.0.746
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/alert/actions-wrapper/index.d.ts.map +1 -1
- package/alert/actions-wrapper/index.js +5 -1
- package/alert/actions-wrapper/index.js.map +1 -1
- package/alert/analytics-metadata/interfaces.d.ts +20 -0
- package/alert/analytics-metadata/interfaces.d.ts.map +1 -0
- package/alert/analytics-metadata/interfaces.js +4 -0
- package/alert/analytics-metadata/interfaces.js.map +1 -0
- package/alert/analytics-metadata/styles.css.js +6 -0
- package/alert/analytics-metadata/styles.scoped.css +7 -0
- package/alert/analytics-metadata/styles.selectors.js +7 -0
- package/alert/index.d.ts.map +1 -1
- package/alert/index.js +10 -1
- package/alert/index.js.map +1 -1
- package/alert/internal.d.ts.map +1 -1
- package/alert/internal.js +6 -2
- package/alert/internal.js.map +1 -1
- package/button-dropdown/internal.d.ts.map +1 -1
- package/button-dropdown/internal.js +1 -1
- package/button-dropdown/internal.js.map +1 -1
- package/internal/base-component/styles.scoped.css +4 -2
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +1 -0
- package/internal/generated/styles/tokens.js +3 -2
- package/internal/generated/theming/index.cjs +37 -6
- package/internal/generated/theming/index.js +37 -6
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/popover/body.d.ts +2 -1
- package/popover/body.d.ts.map +1 -1
- package/popover/body.js +3 -2
- package/popover/body.js.map +1 -1
- package/popover/internal.d.ts +1 -0
- package/popover/internal.d.ts.map +1 -1
- package/popover/internal.js +2 -2
- package/popover/internal.js.map +1 -1
- package/progress-bar/styles.css.js +19 -19
- package/progress-bar/styles.scoped.css +35 -53
- package/progress-bar/styles.selectors.js +19 -19
- package/property-filter/analytics-metadata/interfaces.d.ts +47 -0
- package/property-filter/analytics-metadata/interfaces.d.ts.map +1 -0
- package/property-filter/analytics-metadata/interfaces.js +4 -0
- package/property-filter/analytics-metadata/interfaces.js.map +1 -0
- package/property-filter/analytics-metadata/styles.css.js +7 -0
- package/property-filter/analytics-metadata/styles.scoped.css +8 -0
- package/property-filter/analytics-metadata/styles.selectors.js +8 -0
- package/property-filter/filtering-token/index.d.ts +1 -1
- package/property-filter/filtering-token/index.d.ts.map +1 -1
- package/property-filter/filtering-token/index.js +16 -8
- package/property-filter/filtering-token/index.js.map +1 -1
- package/property-filter/index.d.ts.map +1 -1
- package/property-filter/index.js +11 -1
- package/property-filter/index.js.map +1 -1
- package/property-filter/internal.d.ts.map +1 -1
- package/property-filter/internal.js +11 -6
- package/property-filter/internal.js.map +1 -1
- package/property-filter/token-editor-inputs.js +2 -2
- package/property-filter/token-editor-inputs.js.map +1 -1
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +9 -2
- package/property-filter/token-editor.js.map +1 -1
- package/property-filter/token.d.ts.map +1 -1
- package/property-filter/token.js +13 -5
- package/property-filter/token.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -709,6 +709,10 @@ export var preset = {
|
|
|
709
709
|
"light": "{colorChartsOrange1000}",
|
|
710
710
|
"dark": "{colorChartsOrange1000}"
|
|
711
711
|
},
|
|
712
|
+
"colorGreyOpaque10": {
|
|
713
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
714
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
715
|
+
},
|
|
712
716
|
"colorGreyOpaque25": {
|
|
713
717
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
714
718
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -2923,6 +2927,10 @@ export var preset = {
|
|
|
2923
2927
|
"id": "top-navigation",
|
|
2924
2928
|
"selector": ".awsui-context-top-navigation",
|
|
2925
2929
|
"tokens": {
|
|
2930
|
+
"colorGreyOpaque10": {
|
|
2931
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
2932
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
2933
|
+
},
|
|
2926
2934
|
"colorGreyOpaque25": {
|
|
2927
2935
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
2928
2936
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -4057,6 +4065,10 @@ export var preset = {
|
|
|
4057
4065
|
"light": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
|
|
4058
4066
|
"dark": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)"
|
|
4059
4067
|
},
|
|
4068
|
+
"colorGreyOpaque10": {
|
|
4069
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
4070
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
4071
|
+
},
|
|
4060
4072
|
"colorGreyOpaque25": {
|
|
4061
4073
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
4062
4074
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -5123,6 +5135,10 @@ export var preset = {
|
|
|
5123
5135
|
"id": "flashbar",
|
|
5124
5136
|
"selector": ".awsui-context-flashbar",
|
|
5125
5137
|
"tokens": {
|
|
5138
|
+
"colorGreyOpaque10": {
|
|
5139
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
5140
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
5141
|
+
},
|
|
5126
5142
|
"colorGreyOpaque25": {
|
|
5127
5143
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
5128
5144
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -6189,6 +6205,10 @@ export var preset = {
|
|
|
6189
6205
|
"id": "flashbar-warning",
|
|
6190
6206
|
"selector": ".awsui-context-flashbar-warning",
|
|
6191
6207
|
"tokens": {
|
|
6208
|
+
"colorGreyOpaque10": {
|
|
6209
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
6210
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
6211
|
+
},
|
|
6192
6212
|
"colorGreyOpaque25": {
|
|
6193
6213
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
6194
6214
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -6446,16 +6466,16 @@ export var preset = {
|
|
|
6446
6466
|
"dark": "{colorBlue500}"
|
|
6447
6467
|
},
|
|
6448
6468
|
"colorBackgroundProgressBarContentInFlash": {
|
|
6449
|
-
"light": "{
|
|
6450
|
-
"dark": "{
|
|
6469
|
+
"light": "{colorGrey900}",
|
|
6470
|
+
"dark": "{colorGrey900}"
|
|
6451
6471
|
},
|
|
6452
6472
|
"colorBackgroundProgressBarLayoutDefault": {
|
|
6453
6473
|
"light": "{colorGrey200}",
|
|
6454
6474
|
"dark": "{colorGrey650}"
|
|
6455
6475
|
},
|
|
6456
6476
|
"colorBackgroundProgressBarLayoutInFlash": {
|
|
6457
|
-
"light": "{
|
|
6458
|
-
"dark": "{
|
|
6477
|
+
"light": "{colorGreyOpaque10}",
|
|
6478
|
+
"dark": "{colorGreyOpaque10}"
|
|
6459
6479
|
},
|
|
6460
6480
|
"colorBackgroundSegmentActive": {
|
|
6461
6481
|
"light": "{colorBlue600}",
|
|
@@ -7255,6 +7275,10 @@ export var preset = {
|
|
|
7255
7275
|
"id": "alert",
|
|
7256
7276
|
"selector": ".awsui-context-alert",
|
|
7257
7277
|
"tokens": {
|
|
7278
|
+
"colorGreyOpaque10": {
|
|
7279
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
7280
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
7281
|
+
},
|
|
7258
7282
|
"colorGreyOpaque25": {
|
|
7259
7283
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
7260
7284
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -8323,6 +8347,10 @@ export var preset = {
|
|
|
8323
8347
|
"id": "alert-header",
|
|
8324
8348
|
"selector": ".awsui-context-content-header .awsui-context-alert",
|
|
8325
8349
|
"tokens": {
|
|
8350
|
+
"colorGreyOpaque10": {
|
|
8351
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
8352
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
8353
|
+
},
|
|
8326
8354
|
"colorGreyOpaque25": {
|
|
8327
8355
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
8328
8356
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -9541,6 +9569,7 @@ export var preset = {
|
|
|
9541
9569
|
"colorChartsPaletteCategorical48": "color",
|
|
9542
9570
|
"colorChartsPaletteCategorical49": "color",
|
|
9543
9571
|
"colorChartsPaletteCategorical50": "color",
|
|
9572
|
+
"colorGreyOpaque10": "color",
|
|
9544
9573
|
"colorGreyOpaque25": "color",
|
|
9545
9574
|
"colorGreyOpaque40": "color",
|
|
9546
9575
|
"colorGreyOpaque50": "color",
|
|
@@ -10774,6 +10803,7 @@ export var preset = {
|
|
|
10774
10803
|
"colorChartsPaletteCategorical48": "color-charts-palette-categorical-48",
|
|
10775
10804
|
"colorChartsPaletteCategorical49": "color-charts-palette-categorical-49",
|
|
10776
10805
|
"colorChartsPaletteCategorical50": "color-charts-palette-categorical-50",
|
|
10806
|
+
"colorGreyOpaque10": "color-grey-opaque-10",
|
|
10777
10807
|
"colorGreyOpaque25": "color-grey-opaque-25",
|
|
10778
10808
|
"colorGreyOpaque40": "color-grey-opaque-40",
|
|
10779
10809
|
"colorGreyOpaque50": "color-grey-opaque-50",
|
|
@@ -11500,6 +11530,7 @@ export var preset = {
|
|
|
11500
11530
|
"colorChartsPaletteCategorical48": "--color-charts-palette-categorical-48-tptw1p",
|
|
11501
11531
|
"colorChartsPaletteCategorical49": "--color-charts-palette-categorical-49-6lrkes",
|
|
11502
11532
|
"colorChartsPaletteCategorical50": "--color-charts-palette-categorical-50-mqbaxr",
|
|
11533
|
+
"colorGreyOpaque10": "--color-grey-opaque-10-xipm4s",
|
|
11503
11534
|
"colorGreyOpaque25": "--color-grey-opaque-25-igqnxy",
|
|
11504
11535
|
"colorGreyOpaque40": "--color-grey-opaque-40-wxjof3",
|
|
11505
11536
|
"colorGreyOpaque50": "--color-grey-opaque-50-akurqr",
|
|
@@ -11564,9 +11595,9 @@ export var preset = {
|
|
|
11564
11595
|
"colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-905myr",
|
|
11565
11596
|
"colorBackgroundPopover": "--color-background-popover-szburm",
|
|
11566
11597
|
"colorBackgroundProgressBarContentDefault": "--color-background-progress-bar-content-default-yvwdkl",
|
|
11567
|
-
"colorBackgroundProgressBarContentInFlash": "--color-background-progress-bar-content-in-flash-
|
|
11598
|
+
"colorBackgroundProgressBarContentInFlash": "--color-background-progress-bar-content-in-flash-qj6j8l",
|
|
11568
11599
|
"colorBackgroundProgressBarLayoutDefault": "--color-background-progress-bar-layout-default-ktc0zl",
|
|
11569
|
-
"colorBackgroundProgressBarLayoutInFlash": "--color-background-progress-bar-layout-in-flash-
|
|
11600
|
+
"colorBackgroundProgressBarLayoutInFlash": "--color-background-progress-bar-layout-in-flash-d3q12s",
|
|
11570
11601
|
"colorBackgroundSegmentActive": "--color-background-segment-active-366806",
|
|
11571
11602
|
"colorBackgroundSegmentDefault": "--color-background-segment-default-3arros",
|
|
11572
11603
|
"colorBackgroundSegmentDisabled": "--color-background-segment-disabled-o4y9v5",
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
package/popover/body.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export interface PopoverBodyProps {
|
|
|
9
9
|
overflowVisible?: 'content' | 'both';
|
|
10
10
|
className?: string;
|
|
11
11
|
ariaLabelledby?: string;
|
|
12
|
+
closeAnalyticsAction?: string;
|
|
12
13
|
}
|
|
13
|
-
export default function PopoverBody({ dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, overflowVisible, className, ariaLabelledby, }: PopoverBodyProps): JSX.Element;
|
|
14
|
+
export default function PopoverBody({ dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, overflowVisible, className, ariaLabelledby, closeAnalyticsAction, }: PopoverBodyProps): JSX.Element;
|
|
14
15
|
//# sourceMappingURL=body.d.ts.map
|
package/popover/body.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAc9D,MAAM,WAAW,gBAAgB;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAEpC,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAErC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,aAAa,EAAE,iBAAiB,EAChC,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,eAAe,EACf,SAAS,EACT,cAAc,EACd,oBAAoB,GACrB,EAAE,gBAAgB,eAgFlB"}
|
package/popover/body.js
CHANGED
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React, { useCallback, useEffect, useRef } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
+
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
5
6
|
import { InternalButton } from '../button/internal';
|
|
6
7
|
import { useInternalI18n } from '../i18n/context';
|
|
7
8
|
import FocusLock from '../internal/components/focus-lock';
|
|
8
9
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
9
10
|
import { KeyCode } from '../internal/keycode';
|
|
10
11
|
import styles from './styles.css.js';
|
|
11
|
-
export default function PopoverBody({ dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, overflowVisible, className, ariaLabelledby, }) {
|
|
12
|
+
export default function PopoverBody({ dismissButton: showDismissButton, dismissAriaLabel, header, children, onDismiss, variant, overflowVisible, className, ariaLabelledby, closeAnalyticsAction, }) {
|
|
12
13
|
const i18n = useInternalI18n('popover');
|
|
13
14
|
const labelledById = useUniqueId('awsui-popover-');
|
|
14
15
|
const dismissButtonFocused = useRef(false);
|
|
@@ -29,7 +30,7 @@ export default function PopoverBody({ dismissButton: showDismissButton, dismissA
|
|
|
29
30
|
}
|
|
30
31
|
dismissButtonFocused.current = showDismissButton;
|
|
31
32
|
}, [showDismissButton]);
|
|
32
|
-
const dismissButton = (showDismissButton !== null && showDismissButton !== void 0 ? showDismissButton : null) && (React.createElement("div", { className: styles.dismiss },
|
|
33
|
+
const dismissButton = (showDismissButton !== null && showDismissButton !== void 0 ? showDismissButton : null) && (React.createElement("div", Object.assign({ className: styles.dismiss }, (closeAnalyticsAction ? getAnalyticsMetadataAttribute({ action: closeAnalyticsAction }) : {})),
|
|
33
34
|
React.createElement(InternalButton, { variant: "icon", formAction: "none", iconName: "close", className: styles['dismiss-control'], ariaLabel: i18n('dismissAriaLabel', dismissAriaLabel), onClick: () => onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(), ref: dismissButtonRef })));
|
|
34
35
|
const isDialog = showDismissButton;
|
|
35
36
|
const shouldTrapFocus = showDismissButton && variant !== 'annotation';
|
package/popover/body.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../src/popover/body.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, { useCallback, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\n\nimport styles from './styles.css.js';\n\nexport interface PopoverBodyProps {\n dismissButton: boolean;\n dismissAriaLabel: string | undefined;\n onDismiss: (() => void) | undefined;\n\n header: React.ReactNode | undefined;\n children: React.ReactNode;\n variant?: 'annotation';\n overflowVisible?: 'content' | 'both';\n\n className?: string;\n ariaLabelledby?: string;\n\n closeAnalyticsAction?: string;\n}\n\nexport default function PopoverBody({\n dismissButton: showDismissButton,\n dismissAriaLabel,\n header,\n children,\n onDismiss,\n variant,\n overflowVisible,\n className,\n ariaLabelledby,\n closeAnalyticsAction,\n}: PopoverBodyProps) {\n const i18n = useInternalI18n('popover');\n const labelledById = useUniqueId('awsui-popover-');\n const dismissButtonFocused = useRef(false);\n const dismissButtonRef = useRef<ButtonProps.Ref>(null);\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n event.stopPropagation();\n onDismiss?.();\n }\n },\n [onDismiss]\n );\n\n // Implement our own auto-focus rather than using FocusLock's,\n // because we also want to focus the dismiss button when it\n // is added dynamically (e.g. in chart popovers)\n useEffect(() => {\n if (showDismissButton && !dismissButtonFocused.current) {\n dismissButtonRef.current?.focus({ preventScroll: true });\n }\n dismissButtonFocused.current = showDismissButton;\n }, [showDismissButton]);\n\n const dismissButton = (showDismissButton ?? null) && (\n <div\n className={styles.dismiss}\n {...(closeAnalyticsAction ? getAnalyticsMetadataAttribute({ action: closeAnalyticsAction }) : {})}\n >\n <InternalButton\n variant=\"icon\"\n formAction=\"none\"\n iconName=\"close\"\n className={styles['dismiss-control']}\n ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n onClick={() => onDismiss?.()}\n ref={dismissButtonRef}\n />\n </div>\n );\n\n const isDialog = showDismissButton;\n const shouldTrapFocus = showDismissButton && variant !== 'annotation';\n\n const dialogProps = isDialog\n ? {\n role: 'dialog',\n 'aria-modal': shouldTrapFocus ? true : undefined,\n 'aria-labelledby': ariaLabelledby ?? (header ? labelledById : undefined),\n }\n : {};\n\n return (\n <div\n className={clsx(styles.body, className, {\n [styles['body-overflow-visible']]: overflowVisible === 'both',\n })}\n onKeyDown={onKeyDown}\n {...dialogProps}\n >\n <FocusLock disabled={!shouldTrapFocus} autoFocus={false}>\n {header && (\n <div className={clsx(styles['header-row'], showDismissButton && styles['has-dismiss'])}>\n {dismissButton}\n <div className={styles.header} id={labelledById}>\n <h2>{header}</h2>\n </div>\n </div>\n )}\n <div className={!header && showDismissButton ? styles['has-dismiss'] : undefined}>\n {!header && dismissButton}\n <div className={clsx(styles.content, { [styles['content-overflow-visible']]: !!overflowVisible })}>\n {children}\n </div>\n </div>\n </FocusLock>\n </div>\n );\n}\n"]}
|
package/popover/internal.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' |
|
|
|
6
6
|
__onOpen?: NonCancelableEventHandler<null>;
|
|
7
7
|
triggerType?: PopoverProps.TriggerType | 'filtering-token';
|
|
8
8
|
size: PopoverProps.Size | 'content';
|
|
9
|
+
__closeAnalyticsAction?: string;
|
|
9
10
|
}
|
|
10
11
|
export interface InternalPopoverRef {
|
|
11
12
|
dismissPopover: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAU7F,OAAO,EAA0B,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC7F,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,MAAM,CAAC,EAAE,0BAA0B;IAClH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,YAAY,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAC3D,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/popover/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAU7F,OAAO,EAA0B,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC7F,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,YAAY,EAAE,aAAa,GAAG,MAAM,CAAC,EAAE,0BAA0B;IAClH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,YAAY,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAC3D,IAAI,EAAE,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC7B;;AAED,wBAAiD"}
|
package/popover/internal.js
CHANGED
|
@@ -21,7 +21,7 @@ import PopoverContainer from './container';
|
|
|
21
21
|
import styles from './styles.css.js';
|
|
22
22
|
export default React.forwardRef(InternalPopover);
|
|
23
23
|
function InternalPopover(_a, ref) {
|
|
24
|
-
var { position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, children, header, content, triggerAriaLabel, wrapTriggerText = true, renderWithPortal = false, __onOpen, __internalRootRef = null } = _a, restProps = __rest(_a, ["position", "size", "fixedWidth", "triggerType", "dismissButton", "children", "header", "content", "triggerAriaLabel", "wrapTriggerText", "renderWithPortal", "__onOpen", "__internalRootRef"]);
|
|
24
|
+
var { position = 'right', size = 'medium', fixedWidth = false, triggerType = 'text', dismissButton = true, children, header, content, triggerAriaLabel, wrapTriggerText = true, renderWithPortal = false, __onOpen, __internalRootRef = null, __closeAnalyticsAction } = _a, restProps = __rest(_a, ["position", "size", "fixedWidth", "triggerType", "dismissButton", "children", "header", "content", "triggerAriaLabel", "wrapTriggerText", "renderWithPortal", "__onOpen", "__internalRootRef", "__closeAnalyticsAction"]);
|
|
25
25
|
const baseProps = getBaseProps(restProps);
|
|
26
26
|
const triggerRef = useRef(null);
|
|
27
27
|
const popoverRef = useRef(null);
|
|
@@ -92,7 +92,7 @@ function InternalPopover(_a, ref) {
|
|
|
92
92
|
const referrerId = useUniqueId();
|
|
93
93
|
const popoverContent = (React.createElement("div", { "aria-live": dismissButton ? undefined : 'polite', "aria-atomic": dismissButton ? undefined : true, className: clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content']), "data-awsui-referrer-id": referrerId }, visible && (React.createElement(PopoverContainer, { size: size, fixedWidth: fixedWidth, position: position, trackRef: triggerRef, arrow: position => React.createElement(Arrow, { position: position }), renderWithPortal: renderWithPortal, zIndex: renderWithPortal ? 7000 : undefined },
|
|
94
94
|
React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
|
|
95
|
-
React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: header, onDismiss: onDismiss, overflowVisible: "both" }, content))))));
|
|
95
|
+
React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: header, onDismiss: onDismiss, overflowVisible: "both", closeAnalyticsAction: __closeAnalyticsAction }, content))))));
|
|
96
96
|
const mergedRef = useMergeRefs(popoverRef, __internalRootRef);
|
|
97
97
|
return (React.createElement("span", Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className, triggerType === 'filtering-token' && styles['root-filtering-token']), ref: mergedRef, onMouseDown: () => {
|
|
98
98
|
// Indicate there was a click inside popover recently, including nested portals.
|
package/popover/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport Portal from '../internal/components/portal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n triggerType?: PopoverProps.TriggerType | 'filtering-token';\n size: PopoverProps.Size | 'content';\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n focus: HTMLElement['focus'];\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n wrapTriggerText = true,\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n focus: () => {\n setVisible(false);\n focusTrigger();\n },\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n {visible && (\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n )}\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n triggerType === 'filtering-token' && styles['root-filtering-token']\n )}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n </span>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/popover/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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable } from '../internal/components/focus-lock/utils';\nimport Portal from '../internal/components/portal';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport ResetContextsForModal from '../internal/context/reset-contexts-for-modal';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport Arrow from './arrow';\nimport PopoverBody from './body';\nimport PopoverContainer from './container';\nimport { PopoverProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' | 'size'>, InternalBaseComponentProps {\n __onOpen?: NonCancelableEventHandler<null>;\n triggerType?: PopoverProps.TriggerType | 'filtering-token';\n size: PopoverProps.Size | 'content';\n __closeAnalyticsAction?: string;\n}\n\nexport interface InternalPopoverRef {\n dismissPopover: () => void;\n focus: HTMLElement['focus'];\n}\n\nexport default React.forwardRef(InternalPopover);\n\nfunction InternalPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n triggerType = 'text',\n dismissButton = true,\n\n children,\n header,\n content,\n triggerAriaLabel,\n\n wrapTriggerText = true,\n renderWithPortal = false,\n\n __onOpen,\n __internalRootRef = null,\n __closeAnalyticsAction,\n ...restProps\n }: InternalPopoverProps,\n ref: React.Ref<InternalPopoverRef>\n) {\n const baseProps = getBaseProps(restProps);\n const triggerRef = useRef<HTMLElement | null>(null);\n const popoverRef = useRef<HTMLDivElement | null>(null);\n const clickFrameId = useRef<number | null>(null);\n\n const i18n = useInternalI18n('popover');\n const dismissAriaLabel = i18n('dismissAriaLabel', restProps.dismissAriaLabel);\n\n const [visible, setVisible] = useState(false);\n\n const focusTrigger = useCallback(() => {\n if (triggerType === 'text') {\n triggerRef.current?.focus();\n } else {\n triggerRef.current && getFirstFocusable(triggerRef.current)?.focus();\n }\n }, [triggerType]);\n\n const onTriggerClick = useCallback(() => {\n fireNonCancelableEvent(__onOpen);\n setVisible(true);\n }, [__onOpen]);\n\n const onDismiss = useCallback(() => {\n setVisible(false);\n focusTrigger();\n }, [focusTrigger]);\n\n const onTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n const isEscapeKey = event.keyCode === KeyCode.escape;\n const isTabKey = event.keyCode === KeyCode.tab;\n if (isEscapeKey && visible) {\n event.stopPropagation();\n }\n if (isTabKey || isEscapeKey) {\n setVisible(false);\n }\n },\n [visible]\n );\n\n useImperativeHandle(ref, () => ({\n dismissPopover: onDismiss,\n focus: () => {\n setVisible(false);\n focusTrigger();\n },\n }));\n\n useEffect(() => {\n if (!triggerRef.current) {\n return;\n }\n const document = triggerRef.current.ownerDocument;\n\n const onDocumentClick = () => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n if (clickFrameId.current === null) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }, []);\n\n const popoverClasses = usePortalModeClasses(triggerRef);\n\n const triggerProps = {\n // https://github.com/microsoft/TypeScript/issues/36659\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: triggerRef as any,\n onClick: onTriggerClick,\n onKeyDown: onTriggerKeyDown,\n className: clsx(styles.trigger, styles[`trigger-type-${triggerType}`]),\n };\n const { tabIndex: triggerTabIndex } = useSingleTabStopNavigation(triggerRef);\n\n const referrerId = useUniqueId();\n\n const popoverContent = (\n <div\n aria-live={dismissButton ? undefined : 'polite'}\n aria-atomic={dismissButton ? undefined : true}\n className={clsx(popoverClasses, !renderWithPortal && styles['popover-inline-content'])}\n data-awsui-referrer-id={referrerId}\n >\n {visible && (\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={triggerRef}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={renderWithPortal}\n zIndex={renderWithPortal ? 7000 : undefined}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={header}\n onDismiss={onDismiss}\n overflowVisible=\"both\"\n closeAnalyticsAction={__closeAnalyticsAction}\n >\n {content}\n </PopoverBody>\n </LinkDefaultVariantContext.Provider>\n </PopoverContainer>\n )}\n </div>\n );\n\n const mergedRef = useMergeRefs(popoverRef, __internalRootRef);\n\n return (\n <span\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n triggerType === 'filtering-token' && styles['root-filtering-token']\n )}\n ref={mergedRef}\n onMouseDown={() => {\n // Indicate there was a click inside popover recently, including nested portals.\n clickFrameId.current = requestAnimationFrame(() => {\n clickFrameId.current = null;\n });\n }}\n >\n {triggerType === 'text' ? (\n <button\n {...triggerProps}\n className={clsx(triggerProps.className, wrapTriggerText === false && styles['overflow-ellipsis'])}\n tabIndex={triggerTabIndex}\n type=\"button\"\n aria-haspopup=\"dialog\"\n id={referrerId}\n aria-label={triggerAriaLabel}\n >\n {children}\n </button>\n ) : (\n <span {...triggerProps} id={referrerId}>\n {children}\n </span>\n )}\n <ResetContextsForModal>\n {renderWithPortal ? <Portal>{popoverContent}</Portal> : popoverContent}\n </ResetContextsForModal>\n </span>\n );\n}\n"]}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"progress": "
|
|
5
|
-
"result-state": "awsui_result-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"root": "
|
|
8
|
-
"with-result-button": "awsui_with-result-
|
|
9
|
-
"result-text": "awsui_result-
|
|
10
|
-
"result-container-error": "awsui_result-container-
|
|
11
|
-
"result-container-success": "awsui_result-container-
|
|
12
|
-
"result-button": "awsui_result-
|
|
13
|
-
"word-wrap": "awsui_word-
|
|
14
|
-
"label-flash": "awsui_label-
|
|
15
|
-
"label-key-value": "awsui_label-key-
|
|
16
|
-
"flash": "
|
|
17
|
-
"progress-container": "awsui_progress-
|
|
18
|
-
"percentage-container": "awsui_percentage-
|
|
19
|
-
"percentage": "
|
|
20
|
-
"complete": "
|
|
21
|
-
"progress-in-flash": "awsui_progress-in-
|
|
22
|
-
"additional-info": "awsui_additional-
|
|
4
|
+
"progress": "awsui_progress_11huc_pv5bx_353",
|
|
5
|
+
"result-state": "awsui_result-state_11huc_pv5bx_367",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_pv5bx_1",
|
|
7
|
+
"root": "awsui_root_11huc_pv5bx_389",
|
|
8
|
+
"with-result-button": "awsui_with-result-button_11huc_pv5bx_424",
|
|
9
|
+
"result-text": "awsui_result-text_11huc_pv5bx_428",
|
|
10
|
+
"result-container-error": "awsui_result-container-error_11huc_pv5bx_432",
|
|
11
|
+
"result-container-success": "awsui_result-container-success_11huc_pv5bx_432",
|
|
12
|
+
"result-button": "awsui_result-button_11huc_pv5bx_436",
|
|
13
|
+
"word-wrap": "awsui_word-wrap_11huc_pv5bx_442",
|
|
14
|
+
"label-flash": "awsui_label-flash_11huc_pv5bx_447",
|
|
15
|
+
"label-key-value": "awsui_label-key-value_11huc_pv5bx_451",
|
|
16
|
+
"flash": "awsui_flash_11huc_pv5bx_459",
|
|
17
|
+
"progress-container": "awsui_progress-container_11huc_pv5bx_463",
|
|
18
|
+
"percentage-container": "awsui_percentage-container_11huc_pv5bx_470",
|
|
19
|
+
"percentage": "awsui_percentage_11huc_pv5bx_470",
|
|
20
|
+
"complete": "awsui_complete_11huc_pv5bx_516",
|
|
21
|
+
"progress-in-flash": "awsui_progress-in-flash_11huc_pv5bx_529",
|
|
22
|
+
"additional-info": "awsui_additional-info_11huc_pv5bx_542"
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -350,27 +350,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
350
350
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
351
351
|
SPDX-License-Identifier: Apache-2.0
|
|
352
352
|
*/
|
|
353
|
-
.
|
|
353
|
+
.awsui_progress_11huc_pv5bx_353:not(#\9)::-webkit-progress-value {
|
|
354
354
|
-webkit-transition: width var(--motion-duration-moderate-5k1phv, 135ms) linear;
|
|
355
355
|
transition: width var(--motion-duration-moderate-5k1phv, 135ms) linear;
|
|
356
356
|
}
|
|
357
357
|
@media (prefers-reduced-motion: reduce) {
|
|
358
|
-
.
|
|
358
|
+
.awsui_progress_11huc_pv5bx_353:not(#\9)::-webkit-progress-value {
|
|
359
359
|
animation: none;
|
|
360
360
|
-webkit-transition: none;
|
|
361
361
|
transition: none;
|
|
362
362
|
}
|
|
363
363
|
}
|
|
364
|
-
.awsui-motion-disabled .
|
|
364
|
+
.awsui-motion-disabled .awsui_progress_11huc_pv5bx_353:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_pv5bx_353:not(#\9)::-webkit-progress-value {
|
|
365
365
|
animation: none;
|
|
366
366
|
-webkit-transition: none;
|
|
367
367
|
transition: none;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
.awsui_result-
|
|
371
|
-
animation: awsui_awsui-motion-fade-
|
|
370
|
+
.awsui_result-state_11huc_pv5bx_367:not(#\9) {
|
|
371
|
+
animation: awsui_awsui-motion-fade-in_11huc_pv5bx_1 var(--motion-duration-transition-show-paced-9s9l5z, 180ms) var(--motion-easing-transition-show-paced-eobwvi, ease-out);
|
|
372
372
|
}
|
|
373
|
-
@keyframes awsui_awsui-motion-fade-
|
|
373
|
+
@keyframes awsui_awsui-motion-fade-in_11huc_pv5bx_1 {
|
|
374
374
|
from {
|
|
375
375
|
opacity: 0.2;
|
|
376
376
|
}
|
|
@@ -379,17 +379,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
381
|
@media (prefers-reduced-motion: reduce) {
|
|
382
|
-
.awsui_result-
|
|
382
|
+
.awsui_result-state_11huc_pv5bx_367:not(#\9) {
|
|
383
383
|
animation: none;
|
|
384
384
|
transition: none;
|
|
385
385
|
}
|
|
386
386
|
}
|
|
387
|
-
.awsui-motion-disabled .awsui_result-
|
|
387
|
+
.awsui-motion-disabled .awsui_result-state_11huc_pv5bx_367:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_pv5bx_367:not(#\9) {
|
|
388
388
|
animation: none;
|
|
389
389
|
transition: none;
|
|
390
390
|
}
|
|
391
391
|
|
|
392
|
-
.
|
|
392
|
+
.awsui_root_11huc_pv5bx_389:not(#\9) {
|
|
393
393
|
border-collapse: separate;
|
|
394
394
|
border-spacing: 0;
|
|
395
395
|
box-sizing: border-box;
|
|
@@ -425,34 +425,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
425
425
|
-moz-osx-font-smoothing: auto;
|
|
426
426
|
}
|
|
427
427
|
|
|
428
|
-
.awsui_with-result-
|
|
428
|
+
.awsui_with-result-button_11huc_pv5bx_424:not(#\9) {
|
|
429
429
|
padding-inline-end: var(--space-m-udix3p, 16px);
|
|
430
430
|
}
|
|
431
431
|
|
|
432
|
-
.awsui_result-
|
|
432
|
+
.awsui_result-text_11huc_pv5bx_428:not(#\9) {
|
|
433
433
|
/* used in test-utils */
|
|
434
434
|
}
|
|
435
435
|
|
|
436
|
-
.awsui_result-container-
|
|
436
|
+
.awsui_result-container-error_11huc_pv5bx_432:not(#\9), .awsui_result-container-success_11huc_pv5bx_432:not(#\9) {
|
|
437
437
|
/* used in test-utils */
|
|
438
438
|
}
|
|
439
439
|
|
|
440
|
-
.awsui_result-
|
|
440
|
+
.awsui_result-button_11huc_pv5bx_436:not(#\9) {
|
|
441
441
|
display: inline-block;
|
|
442
442
|
margin-block: var(--space-scaled-xxs-7597g1, 4px);
|
|
443
443
|
margin-inline: 0;
|
|
444
444
|
}
|
|
445
445
|
|
|
446
|
-
.awsui_word-
|
|
446
|
+
.awsui_word-wrap_11huc_pv5bx_442:not(#\9) {
|
|
447
447
|
min-inline-size: 0;
|
|
448
448
|
word-break: break-word;
|
|
449
449
|
}
|
|
450
450
|
|
|
451
|
-
.awsui_label-
|
|
452
|
-
color:
|
|
451
|
+
.awsui_label-flash_11huc_pv5bx_447:not(#\9) {
|
|
452
|
+
color: inherit;
|
|
453
453
|
font-weight: 700;
|
|
454
454
|
}
|
|
455
|
-
.awsui_label-key-
|
|
455
|
+
.awsui_label-key-value_11huc_pv5bx_451:not(#\9) {
|
|
456
456
|
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
457
457
|
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
458
458
|
font-weight: var(--font-display-label-weight-815ja9, 700);
|
|
@@ -460,18 +460,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
460
460
|
margin-block-end: var(--space-scaled-xxxs-27y4hv, 2px);
|
|
461
461
|
}
|
|
462
462
|
|
|
463
|
-
.
|
|
463
|
+
.awsui_flash_11huc_pv5bx_459:not(#\9) {
|
|
464
464
|
color: inherit;
|
|
465
465
|
}
|
|
466
466
|
|
|
467
|
-
.awsui_progress-
|
|
467
|
+
.awsui_progress-container_11huc_pv5bx_463:not(#\9) {
|
|
468
468
|
display: flex;
|
|
469
469
|
align-items: center;
|
|
470
470
|
max-inline-size: 800px;
|
|
471
471
|
block-size: var(--line-height-body-m-30ar75, 20px);
|
|
472
472
|
}
|
|
473
473
|
|
|
474
|
-
.awsui_percentage-
|
|
474
|
+
.awsui_percentage-container_11huc_pv5bx_470:not(#\9) {
|
|
475
475
|
inline-size: 33px;
|
|
476
476
|
flex-shrink: 0;
|
|
477
477
|
white-space: nowrap;
|
|
@@ -481,11 +481,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
481
481
|
letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
|
|
482
482
|
}
|
|
483
483
|
|
|
484
|
-
.
|
|
484
|
+
.awsui_percentage_11huc_pv5bx_470:not(#\9) {
|
|
485
485
|
/* used in test-utils */
|
|
486
486
|
}
|
|
487
487
|
|
|
488
|
-
.
|
|
488
|
+
.awsui_progress_11huc_pv5bx_353:not(#\9) {
|
|
489
489
|
inline-size: 100%;
|
|
490
490
|
margin-inline-end: var(--space-s-34lx8l, 12px);
|
|
491
491
|
min-inline-size: 0;
|
|
@@ -499,7 +499,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
499
499
|
border-end-end-radius: 10px;
|
|
500
500
|
background-color: var(--color-background-progress-bar-layout-default-ktc0zl, #e9ebed);
|
|
501
501
|
}
|
|
502
|
-
.
|
|
502
|
+
.awsui_progress_11huc_pv5bx_353:not(#\9)::-webkit-progress-bar {
|
|
503
503
|
block-size: 4px;
|
|
504
504
|
border-block: 0;
|
|
505
505
|
border-inline: none;
|
|
@@ -510,57 +510,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
510
510
|
border-end-end-radius: 10px;
|
|
511
511
|
background-color: var(--color-background-progress-bar-layout-default-ktc0zl, #e9ebed);
|
|
512
512
|
}
|
|
513
|
-
.
|
|
513
|
+
.awsui_progress_11huc_pv5bx_353:not(#\9)::-webkit-progress-value {
|
|
514
514
|
border-start-start-radius: 10px;
|
|
515
515
|
border-start-end-radius: 0;
|
|
516
516
|
border-end-start-radius: 10px;
|
|
517
517
|
border-end-end-radius: 0;
|
|
518
518
|
background-color: var(--color-background-progress-bar-content-default-yvwdkl, #0972d3);
|
|
519
519
|
}
|
|
520
|
-
.
|
|
520
|
+
.awsui_progress_11huc_pv5bx_353.awsui_complete_11huc_pv5bx_516:not(#\9)::-webkit-progress-value {
|
|
521
521
|
border-start-start-radius: 10px;
|
|
522
522
|
border-start-end-radius: 10px;
|
|
523
523
|
border-end-start-radius: 10px;
|
|
524
524
|
border-end-end-radius: 10px;
|
|
525
525
|
}
|
|
526
|
-
.
|
|
526
|
+
.awsui_progress_11huc_pv5bx_353:not(#\9)::-moz-progress-bar {
|
|
527
527
|
border-start-start-radius: 10px;
|
|
528
528
|
border-start-end-radius: 0;
|
|
529
529
|
border-end-start-radius: 10px;
|
|
530
530
|
border-end-end-radius: 0;
|
|
531
531
|
background-color: var(--color-background-progress-bar-content-default-yvwdkl, #0972d3);
|
|
532
532
|
}
|
|
533
|
-
.
|
|
534
|
-
|
|
535
|
-
border-start-end-radius: 0;
|
|
536
|
-
border-end-start-radius: 10px;
|
|
537
|
-
border-end-end-radius: 0;
|
|
538
|
-
background-color: #0073bb;
|
|
539
|
-
border-block: none;
|
|
540
|
-
border-inline: none;
|
|
541
|
-
}
|
|
542
|
-
.awsui_progress_11huc_15662_353.awsui_complete_11huc_15662_516:not(#\9)::-ms-fill {
|
|
543
|
-
border-start-start-radius: 10px;
|
|
544
|
-
border-start-end-radius: 10px;
|
|
545
|
-
border-end-start-radius: 10px;
|
|
546
|
-
border-end-end-radius: 10px;
|
|
547
|
-
}
|
|
548
|
-
.awsui_progress_11huc_15662_353.awsui_progress-in-flash_11huc_15662_544:not(#\9) {
|
|
549
|
-
background-color: var(--color-background-progress-bar-layout-in-flash-rlu77n, rgba(255, 255, 255, 0.25));
|
|
550
|
-
}
|
|
551
|
-
.awsui_progress_11huc_15662_353.awsui_progress-in-flash_11huc_15662_544:not(#\9)::-webkit-progress-bar {
|
|
552
|
-
background-color: var(--color-background-progress-bar-layout-in-flash-rlu77n, rgba(255, 255, 255, 0.25));
|
|
533
|
+
.awsui_progress_11huc_pv5bx_353.awsui_progress-in-flash_11huc_pv5bx_529:not(#\9) {
|
|
534
|
+
background-color: var(--color-background-progress-bar-layout-in-flash-d3q12s, rgba(255, 255, 255, 0.25));
|
|
553
535
|
}
|
|
554
|
-
.
|
|
555
|
-
background-color: var(--color-background-progress-bar-content-in-flash-
|
|
536
|
+
.awsui_progress_11huc_pv5bx_353.awsui_progress-in-flash_11huc_pv5bx_529:not(#\9)::-moz-progress-bar {
|
|
537
|
+
background-color: var(--color-background-progress-bar-content-in-flash-qj6j8l, #ffffff);
|
|
556
538
|
}
|
|
557
|
-
.
|
|
558
|
-
background-color: var(--color-background-progress-bar-
|
|
539
|
+
.awsui_progress_11huc_pv5bx_353.awsui_progress-in-flash_11huc_pv5bx_529:not(#\9)::-webkit-progress-bar {
|
|
540
|
+
background-color: var(--color-background-progress-bar-layout-in-flash-d3q12s, rgba(255, 255, 255, 0.25));
|
|
559
541
|
}
|
|
560
|
-
.
|
|
561
|
-
background-color:
|
|
542
|
+
.awsui_progress_11huc_pv5bx_353.awsui_progress-in-flash_11huc_pv5bx_529:not(#\9)::-webkit-progress-value {
|
|
543
|
+
background-color: var(--color-background-progress-bar-content-in-flash-qj6j8l, #ffffff);
|
|
562
544
|
}
|
|
563
545
|
|
|
564
|
-
.awsui_additional-
|
|
546
|
+
.awsui_additional-info_11huc_pv5bx_542:not(#\9) {
|
|
565
547
|
/* used in test-utils */
|
|
566
548
|
}
|