@cloudscape-design/components 3.0.905 → 3.0.907
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/base-component/styles.scoped.css +21 -14
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.js +3 -3
- package/internal/generated/theming/index.cjs +35 -35
- package/internal/generated/theming/index.js +35 -35
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/segmented-control/internal-segmented-control.js +5 -1
- package/segmented-control/internal-segmented-control.js.map +1 -1
- package/segmented-control/segment.d.ts.map +1 -1
- package/segmented-control/segment.js +3 -1
- package/segmented-control/segment.js.map +1 -1
- package/segmented-control/styles.css.js +16 -15
- package/segmented-control/styles.scoped.css +104 -81
- package/segmented-control/styles.selectors.js +16 -15
- package/table/internal.js +2 -2
- package/table/internal.js.map +1 -1
- package/test-utils/dom/input/base-input.js +5 -4
- package/test-utils/dom/input/base-input.js.map +1 -1
- package/test-utils/dom/prompt-input/index.js +5 -4
- package/test-utils/dom/prompt-input/index.js.map +1 -1
- package/test-utils/dom/textarea/index.js +5 -4
- package/test-utils/dom/textarea/index.js.map +1 -1
- package/test-utils/selectors/input/base-input.js +2 -0
- package/test-utils/selectors/input/base-input.js.map +1 -1
- package/test-utils/selectors/prompt-input/index.js +2 -0
- package/test-utils/selectors/prompt-input/index.js.map +1 -1
- package/test-utils/selectors/textarea/index.js +2 -0
- package/test-utils/selectors/textarea/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React, { useRef } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
6
|
+
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
6
7
|
import { KeyCode } from '../internal/keycode';
|
|
7
8
|
import handleKey from '../internal/utils/handle-key';
|
|
8
9
|
import { Segment } from './segment';
|
|
@@ -27,7 +28,10 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
27
28
|
const nextSegmentId = focusableSegments[nextIndex].id;
|
|
28
29
|
(_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
29
30
|
};
|
|
30
|
-
|
|
31
|
+
const isVisualRefresh = useVisualRefresh();
|
|
32
|
+
return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
|
|
33
|
+
[styles.refresh]: isVisualRefresh,
|
|
34
|
+
}), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
|
|
31
35
|
options.map((option, index) => {
|
|
32
36
|
const isActive = selectedId === option.id;
|
|
33
37
|
const focusableSegmentIndex = focusableSegments.indexOf(option);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,GACc;IACtB,MAAM,cAAc,GAAG,MAAM,CAAsC,EAAE,CAAC,CAAC;IACvE,MAAM,eAAe,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACtD,OAAO,MAAM,CAAC,EAAE,KAAK,UAAU,CAAC;IAClC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,iBAAiB,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAC9C,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAC3E,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA6C,EAAE,WAAmB,EAAE,EAAE;;QAC3F,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE;YACrE,OAAO;SACR;QAED,IAAI,SAAS,GAAG,WAAW,CAAC;QAE5B,SAAS,CAAC,KAAK,EAAE;YACf,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,GAAG,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;YACrG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,GAAG,WAAW,GAAG,CAAC,KAAK,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;SACpG,CAAC,CAAC;QAEH,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;QACtD,MAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,0CAAE,KAAK,EAAE,CAAC;IACjD,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n}: SegmentedControlProps) {\n const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n const selectedOptions = (options || []).filter(option => {\n return option.id === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n const focusableSegments = (options || []).filter(\n option => !option.disabled || (option.disabled && !!option.disabledReason)\n );\n\n const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n return;\n }\n\n let nextIndex = activeIndex;\n\n handleKey(event, {\n onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n });\n\n const nextSegmentId = focusableSegments[nextIndex].id;\n segmentByIdRef.current[nextSegmentId]?.focus();\n };\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], {\n [styles.refresh]: isVisualRefresh,\n })}\n aria-label={label}\n aria-labelledby={ariaLabelledby}\n role=\"toolbar\"\n >\n {options &&\n options.map((option: SegmentedControlProps.Option, index) => {\n const isActive = selectedId === option.id;\n const focusableSegmentIndex = focusableSegments.indexOf(option);\n let tabIndex = isActive ? 0 : -1;\n if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n tabIndex = 0;\n }\n return (\n <Segment\n key={index}\n id={option.id}\n disabled={!!option.disabled}\n disabledReason={option.disabledReason}\n iconName={option.iconName}\n iconAlt={option.iconAlt}\n iconUrl={option.iconUrl}\n iconSvg={option.iconSvg}\n text={option.text}\n isActive={isActive}\n tabIndex={tabIndex}\n ref={node => {\n if (node) {\n segmentByIdRef.current[option.id] = node;\n } else {\n delete segmentByIdRef.current[option.id];\n }\n }}\n onClick={() => {\n if (option.disabled) {\n return;\n }\n\n if (selectedId !== option.id) {\n fireNonCancelableEvent(onChange, { selectedId: option.id });\n }\n }}\n onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n />\n );\n })}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,wFA6EnB,CAAC"}
|
|
@@ -6,13 +6,15 @@ import InternalIcon from '../icon/internal';
|
|
|
6
6
|
import Tooltip from '../internal/components/tooltip';
|
|
7
7
|
import useHiddenDescription from '../internal/hooks/use-hidden-description';
|
|
8
8
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
9
|
+
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
9
10
|
import styles from './styles.css.js';
|
|
10
11
|
export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, }, ref) => {
|
|
11
12
|
const buttonRef = useRef(null);
|
|
12
13
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
13
14
|
const isDisabledWithReason = disabled && !!disabledReason;
|
|
14
15
|
const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
|
|
15
|
-
|
|
16
|
+
const isVisualRefresh = useVisualRefresh();
|
|
17
|
+
return (React.createElement("button", Object.assign({ className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined }, (isDisabledWithReason ? targetProps : {}), { "data-testid": id }),
|
|
16
18
|
(iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
|
|
17
19
|
React.createElement("span", null, text),
|
|
18
20
|
isDisabledWithReason && (React.createElement(React.Fragment, null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../icon/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SegmentedControlProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n isActive: boolean;\n tabIndex: number;\n}\n\nexport const Segment = React.forwardRef(\n (\n {\n disabled,\n disabledReason,\n text,\n iconName,\n iconAlt,\n iconUrl,\n iconSvg,\n isActive,\n onClick,\n onKeyDown,\n tabIndex,\n id,\n }: SegmentProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const buttonRef = useRef<HTMLElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const isDisabledWithReason = disabled && !!disabledReason;\n\n const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <button\n className={clsx(\n styles.segment,\n { [styles.disabled]: !!disabled },\n { [styles.selected]: isActive },\n { [styles.refresh]: isVisualRefresh }\n )}\n ref={useMergeRefs(ref, buttonRef)}\n onClick={onClick}\n onKeyDown={onKeyDown}\n disabled={disabled && !disabledReason}\n aria-disabled={isDisabledWithReason ? 'true' : undefined}\n type=\"button\"\n tabIndex={tabIndex}\n aria-pressed={isActive ? 'true' : 'false'}\n aria-label={!text ? iconAlt : undefined}\n onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n {...(isDisabledWithReason ? targetProps : {})}\n data-testid={id}\n >\n {(iconName || iconUrl || iconSvg) && (\n <InternalIcon\n className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n name={iconName}\n url={iconUrl}\n svg={iconSvg}\n alt={iconAlt}\n variant={disabled ? 'disabled' : 'normal'}\n />\n )}\n <span>{text}</span>\n\n {isDisabledWithReason && (\n <>\n {descriptionEl}\n {showTooltip && (\n <Tooltip\n className={styles['disabled-reason-tooltip']}\n trackRef={buttonRef}\n value={disabledReason!}\n onDismiss={() => setShowTooltip(false)}\n />\n )}\n </>\n )}\n </button>\n );\n }\n);\n"]}
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"segment": "
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"with-
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"segment-count-
|
|
15
|
-
"segment-count-
|
|
16
|
-
"segment-count-
|
|
17
|
-
"segment-count-
|
|
18
|
-
"
|
|
4
|
+
"segment": "awsui_segment_8cbea_iu5r7_161",
|
|
5
|
+
"refresh": "awsui_refresh_8cbea_iu5r7_187",
|
|
6
|
+
"disabled": "awsui_disabled_8cbea_iu5r7_193",
|
|
7
|
+
"selected": "awsui_selected_8cbea_iu5r7_256",
|
|
8
|
+
"icon": "awsui_icon_8cbea_iu5r7_279",
|
|
9
|
+
"with-text": "awsui_with-text_8cbea_iu5r7_283",
|
|
10
|
+
"with-no-text": "awsui_with-no-text_8cbea_iu5r7_289",
|
|
11
|
+
"root": "awsui_root_8cbea_iu5r7_294",
|
|
12
|
+
"segment-part": "awsui_segment-part_8cbea_iu5r7_326",
|
|
13
|
+
"select": "awsui_select_8cbea_iu5r7_256",
|
|
14
|
+
"segment-count-2": "awsui_segment-count-2_8cbea_iu5r7_359",
|
|
15
|
+
"segment-count-3": "awsui_segment-count-3_8cbea_iu5r7_363",
|
|
16
|
+
"segment-count-4": "awsui_segment-count-4_8cbea_iu5r7_367",
|
|
17
|
+
"segment-count-5": "awsui_segment-count-5_8cbea_iu5r7_371",
|
|
18
|
+
"segment-count-6": "awsui_segment-count-6_8cbea_iu5r7_375",
|
|
19
|
+
"disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_iu5r7_379"
|
|
19
20
|
};
|
|
20
21
|
|
|
@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
158
158
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
159
159
|
SPDX-License-Identifier: Apache-2.0
|
|
160
160
|
*/
|
|
161
|
-
.
|
|
161
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9) {
|
|
162
162
|
font-size: var(--font-size-body-m-x4okxb, 14px);
|
|
163
163
|
line-height: var(--line-height-body-m-30ar75, 20px);
|
|
164
164
|
word-wrap: break-word;
|
|
@@ -168,121 +168,130 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
168
168
|
-webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
|
|
169
169
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
|
|
170
170
|
letter-spacing: 0.25px;
|
|
171
|
-
border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-segment-default-qegins, #424650);
|
|
172
|
-
border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-segment-default-qegins, #424650);
|
|
173
171
|
padding-block: var(--space-scaled-xxs-7597g1, 4px);
|
|
174
|
-
padding-inline: var(--space-button-horizontal-8jxzea, 20px);
|
|
175
|
-
border-inline-end-width: 0;
|
|
172
|
+
padding-inline: calc(var(--space-button-horizontal-8jxzea, 20px) - var(--space-static-xxs-82cdfi, 4px));
|
|
176
173
|
background: var(--color-background-segment-default-voaiuw, #ffffff);
|
|
177
174
|
color: var(--color-text-segment-default-iib3us, #424650);
|
|
178
175
|
overflow: visible;
|
|
176
|
+
border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
|
|
177
|
+
border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
|
|
178
|
+
border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
|
|
179
|
+
border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
|
|
180
|
+
position: relative;
|
|
181
|
+
block-size: calc(100% - var(--space-static-xxs-82cdfi, 4px));
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
border-inline: none;
|
|
185
|
+
border-block: none;
|
|
179
186
|
}
|
|
180
|
-
.
|
|
181
|
-
|
|
182
|
-
}
|
|
183
|
-
.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(1) {
|
|
184
|
-
grid-column: 1;
|
|
185
|
-
-ms-grid-column: 1;
|
|
186
|
-
}
|
|
187
|
-
.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(2) {
|
|
188
|
-
grid-column: 2;
|
|
189
|
-
-ms-grid-column: 2;
|
|
190
|
-
}
|
|
191
|
-
.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(3) {
|
|
192
|
-
grid-column: 3;
|
|
193
|
-
-ms-grid-column: 3;
|
|
194
|
-
}
|
|
195
|
-
.awsui_segment_8cbea_m0ww2_161:not(#\9):nth-child(4) {
|
|
196
|
-
grid-column: 4;
|
|
197
|
-
-ms-grid-column: 4;
|
|
187
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187) {
|
|
188
|
+
block-size: calc(100% - var(--space-static-xxs-82cdfi, 4px) - 2 * var(--border-width-field-h1g7tw, 2px));
|
|
198
189
|
}
|
|
199
|
-
.
|
|
200
|
-
|
|
201
|
-
-ms-grid-column: 5;
|
|
190
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
|
|
191
|
+
outline: none;
|
|
202
192
|
}
|
|
203
|
-
.
|
|
204
|
-
|
|
205
|
-
-
|
|
193
|
+
.awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193:not(#\9) {
|
|
194
|
+
background: var(--color-background-segment-disabled-9tsgp1, #ffffff);
|
|
195
|
+
border-color: var(--color-border-segment-disabled-jfhyf7, #424650);
|
|
196
|
+
color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
|
|
206
197
|
}
|
|
207
|
-
body[data-awsui-focus-visible=true] .
|
|
198
|
+
body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
|
|
208
199
|
position: relative;
|
|
209
200
|
}
|
|
210
|
-
body[data-awsui-focus-visible=true] .
|
|
201
|
+
body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus {
|
|
211
202
|
outline: 2px dotted transparent;
|
|
212
|
-
outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-
|
|
203
|
+
outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) - 1px);
|
|
213
204
|
}
|
|
214
|
-
body[data-awsui-focus-visible=true] .
|
|
205
|
+
body[data-awsui-focus-visible=true] .awsui_segment_8cbea_iu5r7_161:not(#\9):focus::before {
|
|
215
206
|
content: " ";
|
|
216
207
|
display: block;
|
|
217
208
|
position: absolute;
|
|
218
|
-
inset-inline-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-
|
|
219
|
-
inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-
|
|
220
|
-
inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-
|
|
221
|
-
block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-
|
|
209
|
+
inset-inline-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
|
|
210
|
+
inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
|
|
211
|
+
inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
|
|
212
|
+
block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px) + var(--space-segmented-control-focus-outline-gutter-ublqj7, 6px));
|
|
222
213
|
border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
223
214
|
border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
224
215
|
border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
225
216
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
226
217
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
227
218
|
}
|
|
228
|
-
.
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
219
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):not(:last-child)::after {
|
|
220
|
+
content: "";
|
|
221
|
+
position: absolute;
|
|
222
|
+
inset-inline-end: calc(-1 * (var(--space-static-xxs-82cdfi, 4px) + 1px));
|
|
223
|
+
block-size: calc(100% - (var(--space-static-xxs-82cdfi, 4px) + var(--space-static-xxxs-3gu9os, 2px)) * 2);
|
|
224
|
+
min-block-size: calc(var(--line-height-body-m-30ar75, 20px) - var(--space-static-xxs-82cdfi, 4px) * 2);
|
|
225
|
+
inline-size: 1px;
|
|
226
|
+
background: var(--color-border-input-default-l7v83d, #8c8c94);
|
|
227
|
+
z-index: 1;
|
|
234
228
|
}
|
|
235
|
-
.
|
|
236
|
-
|
|
237
|
-
border-start-end-radius: 0;
|
|
238
|
-
border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
|
|
239
|
-
border-end-end-radius: 0;
|
|
229
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187):not(:last-child)::after {
|
|
230
|
+
inset-inline-end: calc(-1 * var(--space-static-xxs-82cdfi, 4px));
|
|
240
231
|
}
|
|
241
|
-
.
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
|
|
232
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(1) {
|
|
233
|
+
grid-column: 1;
|
|
234
|
+
-ms-grid-column: 1;
|
|
245
235
|
}
|
|
246
|
-
.
|
|
247
|
-
|
|
236
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(2) {
|
|
237
|
+
grid-column: 2;
|
|
238
|
+
-ms-grid-column: 2;
|
|
248
239
|
}
|
|
249
|
-
.
|
|
240
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(3) {
|
|
241
|
+
grid-column: 3;
|
|
242
|
+
-ms-grid-column: 3;
|
|
243
|
+
}
|
|
244
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(4) {
|
|
245
|
+
grid-column: 4;
|
|
246
|
+
-ms-grid-column: 4;
|
|
247
|
+
}
|
|
248
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(5) {
|
|
249
|
+
grid-column: 5;
|
|
250
|
+
-ms-grid-column: 5;
|
|
251
|
+
}
|
|
252
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):nth-child(6) {
|
|
253
|
+
grid-column: 6;
|
|
254
|
+
-ms-grid-column: 6;
|
|
255
|
+
}
|
|
256
|
+
.awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256:not(#\9) {
|
|
250
257
|
background: var(--color-background-segment-active-bkvyiy, #006ce0);
|
|
251
|
-
border-color: var(--color-border-segment-active-0hw1oi, #424650);
|
|
252
258
|
color: var(--color-text-segment-active-fc6owc, #ffffff);
|
|
253
259
|
}
|
|
254
|
-
.
|
|
260
|
+
.awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161:not(#\9), .awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193:not(#\9) {
|
|
255
261
|
border-inline-start-color: var(--color-border-segment-active-0hw1oi, #424650);
|
|
256
262
|
}
|
|
257
|
-
.
|
|
258
|
-
|
|
259
|
-
|
|
263
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):not(.awsui_disabled_8cbea_iu5r7_193) + .awsui_segment_8cbea_iu5r7_161.awsui_disabled_8cbea_iu5r7_193 {
|
|
264
|
+
border-inline-start-color: var(--color-border-segment-default-qegins, #424650);
|
|
265
|
+
}
|
|
266
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) {
|
|
267
|
+
background: var(--color-background-segment-hover-jancts, #f0fbff);
|
|
268
|
+
color: var(--color-text-segment-hover-yckzgd, #002b66);
|
|
260
269
|
border-color: var(--color-border-segment-hover-cs1sac, #424650);
|
|
261
270
|
cursor: pointer;
|
|
262
271
|
}
|
|
263
|
-
.
|
|
272
|
+
.awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) + .awsui_segment_8cbea_iu5r7_161:not(.awsui_selected_8cbea_iu5r7_256) {
|
|
264
273
|
border-inline-start-color: var(--color-border-segment-hover-cs1sac, #424650);
|
|
265
274
|
}
|
|
266
|
-
.
|
|
275
|
+
.awsui_segment_8cbea_iu5r7_161.awsui_selected_8cbea_iu5r7_256 + .awsui_segment_8cbea_iu5r7_161:not(#\9):hover:not(.awsui_selected_8cbea_iu5r7_256):not(.awsui_disabled_8cbea_iu5r7_193):not(:focus) {
|
|
267
276
|
border-inline-start-color: var(--color-border-segment-active-0hw1oi, #424650);
|
|
268
277
|
}
|
|
269
278
|
|
|
270
|
-
.
|
|
279
|
+
.awsui_icon_8cbea_iu5r7_279:not(#\9) {
|
|
271
280
|
/* used in test-utils */
|
|
272
281
|
}
|
|
273
282
|
|
|
274
|
-
.awsui_with-
|
|
283
|
+
.awsui_with-text_8cbea_iu5r7_283:not(#\9) {
|
|
275
284
|
position: relative;
|
|
276
285
|
inset-inline-start: calc(-1 * var(--space-xxs-p8yyaw, 4px));
|
|
277
286
|
margin-inline-end: var(--space-xxs-p8yyaw, 4px);
|
|
278
287
|
}
|
|
279
288
|
|
|
280
|
-
.awsui_with-no-
|
|
289
|
+
.awsui_with-no-text_8cbea_iu5r7_289:not(#\9) {
|
|
281
290
|
margin-inline: auto;
|
|
282
291
|
inset-inline: 0;
|
|
283
292
|
}
|
|
284
293
|
|
|
285
|
-
.
|
|
294
|
+
.awsui_root_8cbea_iu5r7_294:not(#\9) {
|
|
286
295
|
border-collapse: separate;
|
|
287
296
|
border-spacing: 0;
|
|
288
297
|
box-sizing: border-box;
|
|
@@ -315,44 +324,58 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_m0ww2_161:not(#\9):focu
|
|
|
315
324
|
-moz-osx-font-smoothing: auto;
|
|
316
325
|
}
|
|
317
326
|
|
|
318
|
-
.awsui_segment-
|
|
327
|
+
.awsui_segment-part_8cbea_iu5r7_326:not(#\9) {
|
|
319
328
|
display: inline-grid;
|
|
329
|
+
border-inline: solid var(--border-width-field-h1g7tw, 2px) var(--color-border-input-default-l7v83d, #8c8c94);
|
|
330
|
+
border-block: solid var(--border-width-field-h1g7tw, 2px) var(--color-border-input-default-l7v83d, #8c8c94);
|
|
331
|
+
border-start-start-radius: var(--border-radius-button-ypmfry, 20px);
|
|
332
|
+
border-start-end-radius: var(--border-radius-button-ypmfry, 20px);
|
|
333
|
+
border-end-start-radius: var(--border-radius-button-ypmfry, 20px);
|
|
334
|
+
border-end-end-radius: var(--border-radius-button-ypmfry, 20px);
|
|
335
|
+
align-items: center;
|
|
336
|
+
min-block-size: calc(var(--line-height-body-m-30ar75, 20px) + var(--space-static-xxs-82cdfi, 4px));
|
|
337
|
+
padding-inline: var(--space-static-xxxs-3gu9os, 2px);
|
|
338
|
+
gap: calc(var(--space-static-xxs-82cdfi, 4px) * 2 + 1px);
|
|
339
|
+
}
|
|
340
|
+
.awsui_segment-part_8cbea_iu5r7_326:not(#\9):not(.awsui_refresh_8cbea_iu5r7_187) {
|
|
341
|
+
padding-inline: calc(var(--space-static-xxxs-3gu9os, 2px) + 1px);
|
|
342
|
+
gap: calc(var(--space-static-xxs-82cdfi, 4px) * 2 - 1px);
|
|
320
343
|
}
|
|
321
344
|
@media (max-width: 688px) {
|
|
322
|
-
.awsui_segment-
|
|
345
|
+
.awsui_segment-part_8cbea_iu5r7_326:not(#\9) {
|
|
323
346
|
display: none;
|
|
324
347
|
}
|
|
325
348
|
}
|
|
326
349
|
|
|
327
|
-
.
|
|
350
|
+
.awsui_select_8cbea_iu5r7_256:not(#\9) {
|
|
328
351
|
display: none;
|
|
329
352
|
}
|
|
330
353
|
@media (max-width: 688px) {
|
|
331
|
-
.
|
|
354
|
+
.awsui_select_8cbea_iu5r7_256:not(#\9) {
|
|
332
355
|
display: block;
|
|
333
356
|
}
|
|
334
357
|
}
|
|
335
358
|
|
|
336
|
-
.awsui_segment-count-
|
|
337
|
-
grid-template-columns:
|
|
359
|
+
.awsui_segment-count-2_8cbea_iu5r7_359:not(#\9) {
|
|
360
|
+
grid-template-columns: repeat(2, auto);
|
|
338
361
|
}
|
|
339
362
|
|
|
340
|
-
.awsui_segment-count-
|
|
341
|
-
grid-template-columns:
|
|
363
|
+
.awsui_segment-count-3_8cbea_iu5r7_363:not(#\9) {
|
|
364
|
+
grid-template-columns: repeat(3, auto);
|
|
342
365
|
}
|
|
343
366
|
|
|
344
|
-
.awsui_segment-count-
|
|
345
|
-
grid-template-columns:
|
|
367
|
+
.awsui_segment-count-4_8cbea_iu5r7_367:not(#\9) {
|
|
368
|
+
grid-template-columns: repeat(4, auto);
|
|
346
369
|
}
|
|
347
370
|
|
|
348
|
-
.awsui_segment-count-
|
|
349
|
-
grid-template-columns:
|
|
371
|
+
.awsui_segment-count-5_8cbea_iu5r7_371:not(#\9) {
|
|
372
|
+
grid-template-columns: repeat(5, auto);
|
|
350
373
|
}
|
|
351
374
|
|
|
352
|
-
.awsui_segment-count-
|
|
353
|
-
grid-template-columns:
|
|
375
|
+
.awsui_segment-count-6_8cbea_iu5r7_375:not(#\9) {
|
|
376
|
+
grid-template-columns: repeat(6, auto);
|
|
354
377
|
}
|
|
355
378
|
|
|
356
|
-
.awsui_disabled-reason-
|
|
379
|
+
.awsui_disabled-reason-tooltip_8cbea_iu5r7_379:not(#\9) {
|
|
357
380
|
/* used in test-utils or tests */
|
|
358
381
|
}
|
|
@@ -2,20 +2,21 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"segment": "
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"with-
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"segment-count-
|
|
16
|
-
"segment-count-
|
|
17
|
-
"segment-count-
|
|
18
|
-
"segment-count-
|
|
19
|
-
"
|
|
5
|
+
"segment": "awsui_segment_8cbea_iu5r7_161",
|
|
6
|
+
"refresh": "awsui_refresh_8cbea_iu5r7_187",
|
|
7
|
+
"disabled": "awsui_disabled_8cbea_iu5r7_193",
|
|
8
|
+
"selected": "awsui_selected_8cbea_iu5r7_256",
|
|
9
|
+
"icon": "awsui_icon_8cbea_iu5r7_279",
|
|
10
|
+
"with-text": "awsui_with-text_8cbea_iu5r7_283",
|
|
11
|
+
"with-no-text": "awsui_with-no-text_8cbea_iu5r7_289",
|
|
12
|
+
"root": "awsui_root_8cbea_iu5r7_294",
|
|
13
|
+
"segment-part": "awsui_segment-part_8cbea_iu5r7_326",
|
|
14
|
+
"select": "awsui_select_8cbea_iu5r7_256",
|
|
15
|
+
"segment-count-2": "awsui_segment-count-2_8cbea_iu5r7_359",
|
|
16
|
+
"segment-count-3": "awsui_segment-count-3_8cbea_iu5r7_363",
|
|
17
|
+
"segment-count-4": "awsui_segment-count-4_8cbea_iu5r7_367",
|
|
18
|
+
"segment-count-5": "awsui_segment-count-5_8cbea_iu5r7_371",
|
|
19
|
+
"segment-count-6": "awsui_segment-count-6_8cbea_iu5r7_375",
|
|
20
|
+
"disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_iu5r7_379"
|
|
20
21
|
};
|
|
21
22
|
|
package/table/internal.js
CHANGED
|
@@ -121,14 +121,14 @@ const InternalTable = React.forwardRef((_a, ref) => {
|
|
|
121
121
|
});
|
|
122
122
|
};
|
|
123
123
|
const getComponentConfiguration = () => {
|
|
124
|
-
var _a;
|
|
124
|
+
var _a, _b;
|
|
125
125
|
const filterData = filterRef.current;
|
|
126
126
|
const paginationData = paginationRef.current;
|
|
127
127
|
return {
|
|
128
128
|
variant,
|
|
129
129
|
flowType: (_a = rest.analyticsMetadata) === null || _a === void 0 ? void 0 : _a.flowType,
|
|
130
130
|
instanceIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier,
|
|
131
|
-
taskName: getHeaderText(),
|
|
131
|
+
taskName: (_b = analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier) !== null && _b !== void 0 ? _b : getHeaderText(),
|
|
132
132
|
patternIdentifier: getPatternIdentifier(),
|
|
133
133
|
sortedBy: {
|
|
134
134
|
columnId: sortingColumn === null || sortingColumn === void 0 ? void 0 : sortingColumn.sortingField,
|