@cloudscape-design/components 3.0.1143 → 3.0.1145
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/annotation-context/annotation/annotation-popover.d.ts.map +1 -1
- package/annotation-context/annotation/annotation-popover.js +2 -5
- package/annotation-context/annotation/annotation-popover.js.map +1 -1
- package/annotation-context/annotation/styles.css.js +13 -24
- package/annotation-context/annotation/styles.scoped.css +20 -87
- package/annotation-context/annotation/styles.selectors.js +13 -24
- package/flashbar/interfaces.d.ts +1 -1
- package/flashbar/interfaces.js.map +1 -1
- package/index.d.ts +0 -1
- package/index.js +0 -1
- package/internal/base-component/styles.scoped.css +1 -1
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/hooks/use-table-interaction-metrics/index.d.ts.map +1 -1
- package/internal/hooks/use-table-interaction-metrics/index.js +10 -0
- package/internal/hooks/use-table-interaction-metrics/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/navigable-group/index.d.ts +1 -1
- package/navigable-group/index.d.ts.map +1 -1
- package/navigable-group/index.js +4 -19
- package/navigable-group/index.js.map +1 -1
- package/package.json +1 -2
- package/popover/arrow.d.ts +5 -1
- package/popover/arrow.d.ts.map +1 -1
- package/popover/arrow.js +2 -2
- package/popover/arrow.js.map +1 -1
- package/popover/styles.css.js +57 -56
- package/popover/styles.scoped.css +91 -84
- package/popover/styles.selectors.js +57 -56
- package/segmented-control/index.d.ts.map +1 -1
- package/segmented-control/index.js +13 -14
- package/segmented-control/interfaces.d.ts +31 -0
- package/segmented-control/interfaces.d.ts.map +1 -1
- package/segmented-control/interfaces.js.map +1 -1
- package/segmented-control/internal-do-not-use-core.js +19 -0
- package/segmented-control/{index.js.map → internal-do-not-use-core.js.map} +1 -1
- package/segmented-control/internal-segmented-control.d.ts +2 -1
- package/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/segmented-control/internal-segmented-control.js +4 -3
- package/segmented-control/internal-segmented-control.js.map +1 -1
- package/segmented-control/internal.d.ts +1 -0
- package/segmented-control/internal.d.ts.map +1 -1
- package/segmented-control/internal.js +2 -2
- package/segmented-control/internal.js.map +1 -1
- package/segmented-control/segment.d.ts +1 -0
- package/segmented-control/segment.d.ts.map +1 -1
- package/segmented-control/segment.js +3 -2
- package/segmented-control/segment.js.map +1 -1
- package/segmented-control/style.d.ts +29 -0
- package/segmented-control/style.d.ts.map +1 -0
- package/segmented-control/style.js +37 -0
- package/segmented-control/style.js.map +1 -0
- package/segmented-control/styles.css.js +16 -16
- package/segmented-control/styles.scoped.css +47 -59
- package/segmented-control/styles.selectors.js +16 -16
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
'use client';
|
|
4
3
|
import React from 'react';
|
|
5
|
-
|
|
4
|
+
|
|
5
|
+
import CoreComponent from './internal-do-not-use-core';
|
|
6
6
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
7
|
+
import { validateProps } from '@cloudscape-design/component-toolkit/internal';
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const SegmentedControl = (props) => {
|
|
12
|
+
validateProps('SegmentedControl', props, ["style"], {}, 'console');
|
|
13
|
+
return React.createElement(CoreComponent, props);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
|
|
18
17
|
applyDisplayName(SegmentedControl, 'SegmentedControl');
|
|
19
|
-
|
|
18
|
+
export default SegmentedControl;
|
|
@@ -36,6 +36,9 @@ export interface SegmentedControlProps extends BaseComponentProps {
|
|
|
36
36
|
* Called when the user selects a different segment.
|
|
37
37
|
*/
|
|
38
38
|
onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;
|
|
39
|
+
/**
|
|
40
|
+
* @awsuiSystem core
|
|
41
|
+
*/
|
|
39
42
|
}
|
|
40
43
|
export declare namespace SegmentedControlProps {
|
|
41
44
|
interface Option {
|
|
@@ -51,4 +54,32 @@ export declare namespace SegmentedControlProps {
|
|
|
51
54
|
interface ChangeDetail {
|
|
52
55
|
selectedId: string;
|
|
53
56
|
}
|
|
57
|
+
interface Style {
|
|
58
|
+
root?: {
|
|
59
|
+
borderRadius?: string;
|
|
60
|
+
};
|
|
61
|
+
segment?: {
|
|
62
|
+
background?: {
|
|
63
|
+
active?: string;
|
|
64
|
+
default?: string;
|
|
65
|
+
disabled?: string;
|
|
66
|
+
hover?: string;
|
|
67
|
+
};
|
|
68
|
+
color?: {
|
|
69
|
+
active?: string;
|
|
70
|
+
default?: string;
|
|
71
|
+
disabled?: string;
|
|
72
|
+
hover?: string;
|
|
73
|
+
};
|
|
74
|
+
focusRing?: {
|
|
75
|
+
borderColor?: string;
|
|
76
|
+
borderRadius?: string;
|
|
77
|
+
borderWidth?: string;
|
|
78
|
+
};
|
|
79
|
+
borderRadius?: string;
|
|
80
|
+
fontSize?: string;
|
|
81
|
+
paddingBlock?: string;
|
|
82
|
+
paddingInline?: string;
|
|
83
|
+
};
|
|
84
|
+
}
|
|
54
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAEzE;;OAEG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC,KAAK,CAAC;CACrC;AAED,yBAAiB,qBAAqB,CAAC;IACrC,UAAiB,MAAM;QACrB,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B,UAAU,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,YAAY,CAAC,EAAE,MAAM,CAAC;SACvB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,UAAU,CAAC,EAAE;gBACX,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;YACF,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;KACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface SegmentedControlProps extends BaseComponentProps {\n /**\n * ID of the selected option. If you want to clear the selection, use `null`.\n */\n selectedId: string | null;\n\n /**\n * An array of objects representing options. Only up to 6 options are supported.\n * Each segment has the following properties:\n *\n * - `id` (string) - The ID of the segment.\n * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.\n * This is required when you use an icon without `text`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * - `text` (string) - (Optional) Specifies the text of the segment.\n */\n options?: ReadonlyArray<SegmentedControlProps.Option>;\n\n /**\n * Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),\n * this label is used as `aria-label` on the group of segments. In a narrow container, where this component is displayed as a select component,\n * the label is visible and attached to the select component, unless `ariaLabelledBy` is defined. Don't use `label` and `ariaLabelledBy` at the same time.\n */\n label?: string;\n\n /**\n * Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of `label`.\n */\n ariaLabelledby?: string;\n\n /**\n * Called when the user selects a different segment.\n */\n onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;\n}\n\nexport namespace SegmentedControlProps {\n export interface Option {\n id: string;\n disabled?: boolean;\n disabledReason?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n text?: string;\n }\n\n export interface ChangeDetail {\n selectedId: string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/segmented-control/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface SegmentedControlProps extends BaseComponentProps {\n /**\n * ID of the selected option. If you want to clear the selection, use `null`.\n */\n selectedId: string | null;\n\n /**\n * An array of objects representing options. Only up to 6 options are supported.\n * Each segment has the following properties:\n *\n * - `id` (string) - The ID of the segment.\n * - `disabled` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.\n * - `disabledReason` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.\n * - `iconName` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).\n * - `iconAlt` (string) - (Optional) Specifies alternate text for the icon when using `iconUrl`, or `iconName` without `text`.\n * This is required when you use an icon without `text`.\n * - `iconUrl` (string) - (Optional) Specifies the URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * - `text` (string) - (Optional) Specifies the text of the segment.\n */\n options?: ReadonlyArray<SegmentedControlProps.Option>;\n\n /**\n * Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),\n * this label is used as `aria-label` on the group of segments. In a narrow container, where this component is displayed as a select component,\n * the label is visible and attached to the select component, unless `ariaLabelledBy` is defined. Don't use `label` and `ariaLabelledBy` at the same time.\n */\n label?: string;\n\n /**\n * Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of `label`.\n */\n ariaLabelledby?: string;\n\n /**\n * Called when the user selects a different segment.\n */\n onChange?: NonCancelableEventHandler<SegmentedControlProps.ChangeDetail>;\n\n /**\n * @awsuiSystem core\n */\n style?: SegmentedControlProps.Style;\n}\n\nexport namespace SegmentedControlProps {\n export interface Option {\n id: string;\n disabled?: boolean;\n disabledReason?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n text?: string;\n }\n\n export interface ChangeDetail {\n selectedId: string;\n }\n\n export interface Style {\n root?: {\n borderRadius?: string;\n };\n segment?: {\n background?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n color?: {\n active?: string;\n default?: string;\n disabled?: string;\n hover?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n borderRadius?: string;\n fontSize?: string;\n paddingBlock?: string;\n paddingInline?: string;\n };\n }\n}\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
'use client';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
6
|
+
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
|
+
import InternalSegmentedControl from './internal';
|
|
8
|
+
export default function SegmentedControl(props) {
|
|
9
|
+
var _a;
|
|
10
|
+
const baseComponentProps = useBaseComponent('SegmentedControl', {
|
|
11
|
+
props: {},
|
|
12
|
+
metadata: {
|
|
13
|
+
hasDisabledReasons: ((_a = props.options) !== null && _a !== void 0 ? _a : []).some(option => Boolean(option.disabledReason)),
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
return React.createElement(InternalSegmentedControl, { ...props, ...baseComponentProps });
|
|
17
|
+
}
|
|
18
|
+
applyDisplayName(SegmentedControl, 'SegmentedControl');
|
|
19
|
+
//# sourceMappingURL=internal-do-not-use-core.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,wBAAwB,MAAM,YAAY,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;;IACnE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB,EAAE;QAC9D,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE;YACR,kBAAkB,EAAE,CAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SACzF;KACF,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,wBAAwB,MAAM,YAAY,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;;IACnE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB,EAAE;QAC9D,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE;YACR,kBAAkB,EAAE,CAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SACzF;KACF,CAAC,CAAC;IAEH,OAAO,oBAAC,wBAAwB,OAAK,KAAK,KAAM,kBAAkB,GAAI,CAAC;AACzE,CAAC;AAED,gBAAgB,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControl from './internal';\n\nexport { SegmentedControlProps };\n\nexport default function SegmentedControl(props: SegmentedControlProps) {\n const baseComponentProps = useBaseComponent('SegmentedControl', {\n props: {},\n metadata: {\n hasDisabledReasons: (props.options ?? []).some(option => Boolean(option.disabledReason)),\n },\n });\n\n return <InternalSegmentedControl {...props} {...baseComponentProps} />;\n}\n\napplyDisplayName(SegmentedControl, 'SegmentedControl');\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,GACN,EAAE,qBAAqB,eAiFvB"}
|
|
@@ -7,8 +7,9 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
|
7
7
|
import { KeyCode } from '../internal/keycode';
|
|
8
8
|
import handleKey from '../internal/utils/handle-key';
|
|
9
9
|
import { Segment } from './segment';
|
|
10
|
+
import { getSegmentedControlRootStyles } from './style';
|
|
10
11
|
import styles from './styles.css.js';
|
|
11
|
-
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, }) {
|
|
12
|
+
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, }) {
|
|
12
13
|
const segmentByIdRef = useRef({});
|
|
13
14
|
const selectedOptions = (options || []).filter(option => {
|
|
14
15
|
return option.id === selectedId;
|
|
@@ -31,7 +32,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
31
32
|
const isVisualRefresh = useVisualRefresh();
|
|
32
33
|
return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
|
|
33
34
|
[styles.refresh]: isVisualRefresh,
|
|
34
|
-
}), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar" }, options &&
|
|
35
|
+
}), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar", style: getSegmentedControlRootStyles(style) }, options &&
|
|
35
36
|
options.map((option, index) => {
|
|
36
37
|
const isActive = selectedId === option.id;
|
|
37
38
|
const focusableSegmentIndex = focusableSegments.indexOf(option);
|
|
@@ -53,7 +54,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
53
54
|
if (selectedId !== option.id) {
|
|
54
55
|
fireNonCancelableEvent(onChange, { selectedId: option.id });
|
|
55
56
|
}
|
|
56
|
-
}, onKeyDown: event => moveHighlight(event, focusableSegmentIndex) }));
|
|
57
|
+
}, onKeyDown: event => moveHighlight(event, focusableSegmentIndex), style: style }));
|
|
57
58
|
})));
|
|
58
59
|
}
|
|
59
60
|
//# sourceMappingURL=internal-segmented-control.js.map
|
|
@@ -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,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,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';\nimport { getSegmentedControlRootStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n style,\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 style={getSegmentedControlRootStyles(style)}\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 style={style}\n />\n );\n })}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,eAyC/B"}
|
|
@@ -8,7 +8,7 @@ import { fireNonCancelableEvent } from '../internal/events';
|
|
|
8
8
|
import InternalSelect from '../select/internal';
|
|
9
9
|
import InternalSegmentedControlComponent from './internal-segmented-control';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
|
-
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, ...props }) {
|
|
11
|
+
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, style, ...props }) {
|
|
12
12
|
const baseProps = getBaseProps(props);
|
|
13
13
|
const selectOptions = (options || []).map(option => {
|
|
14
14
|
const label = option.text || option.iconAlt;
|
|
@@ -25,7 +25,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
|
|
|
25
25
|
onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value }),
|
|
26
26
|
};
|
|
27
27
|
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
|
|
28
|
-
React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange }),
|
|
28
|
+
React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style }),
|
|
29
29
|
React.createElement("div", { className: styles.select },
|
|
30
30
|
ariaLabelledby && React.createElement(InternalSelect, { ...selectProps, ariaLabelledby: ariaLabelledby }),
|
|
31
31
|
!ariaLabelledby && label && (React.createElement(InternalFormField, { label: label, stretch: true },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AAEzE,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACpD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC;KACxG,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AAEzE,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACpD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC;KACxG,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,cAAc,IAAI,oBAAC,cAAc,OAAK,WAAW,EAAE,cAAc,EAAE,cAAc,GAAI;YACrF,CAAC,cAAc,IAAI,KAAK,IAAI,CAC3B,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI;gBAC5C,oBAAC,cAAc,OAAK,WAAW,GAAI,CACjB,CACrB;YACA,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,oBAAC,cAAc,OAAK,WAAW,GAAI,CAC7D,CACF,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';\n\nimport InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n __internalRootRef,\n style,\n ...props\n}: InternalSegmentedControlProps) {\n const baseProps = getBaseProps(props);\n\n const selectOptions = (options || []).map(option => {\n const label = option.text || option.iconAlt;\n return { ...option, label, value: option.id };\n });\n\n const selectedOptions = selectOptions.filter(option => {\n return option.value === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n const selectProps: InternalSelectProps = {\n options: selectOptions,\n selectedOption: currentSelectedOption,\n triggerVariant: 'option',\n onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n };\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <InternalSegmentedControlComponent\n selectedId={selectedId}\n options={options}\n label={label}\n ariaLabelledby={ariaLabelledby}\n onChange={onChange}\n style={style}\n />\n <div className={styles.select}>\n {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n {!ariaLabelledby && label && (\n <InternalFormField label={label} stretch={true}>\n <InternalSelect {...selectProps} />\n </InternalFormField>\n )}\n {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -5,6 +5,7 @@ interface SegmentProps extends SegmentedControlProps.Option {
|
|
|
5
5
|
onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
6
6
|
isActive: boolean;
|
|
7
7
|
tabIndex: number;
|
|
8
|
+
style: SegmentedControlProps['style'];
|
|
8
9
|
}
|
|
9
10
|
export declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLButtonElement>>;
|
|
10
11
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,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;IACjB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,OAAO,wFA+EnB,CAAC"}
|
|
@@ -7,14 +7,15 @@ import InternalIcon from '../icon/internal';
|
|
|
7
7
|
import Tooltip from '../internal/components/tooltip';
|
|
8
8
|
import useHiddenDescription from '../internal/hooks/use-hidden-description';
|
|
9
9
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
10
|
+
import { getSegmentedControlSegmentStyles } from './style';
|
|
10
11
|
import styles from './styles.css.js';
|
|
11
|
-
export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, }, ref) => {
|
|
12
|
+
export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, style, }, ref) => {
|
|
12
13
|
const buttonRef = useRef(null);
|
|
13
14
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
14
15
|
const isDisabledWithReason = disabled && !!disabledReason;
|
|
15
16
|
const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
|
|
16
17
|
const isVisualRefresh = useVisualRefresh();
|
|
17
|
-
return (React.createElement("button", { 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 },
|
|
18
|
+
return (React.createElement("button", { 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, style: getSegmentedControlSegmentStyles(style) },
|
|
18
19
|
(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' })),
|
|
19
20
|
React.createElement("span", null, text),
|
|
20
21
|
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,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;
|
|
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,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,OAAO,MAAM,gCAAgC,CAAC;AACrD,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EACE,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,EACR,EAAE,EACF,KAAK,GACQ,EACf,GAAiC,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,oBAAoB,GAAG,QAAQ,IAAI,CAAC,CAAC,cAAc,CAAC;IAE1D,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,EACjC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,CACtC,EACD,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,EACjC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,CAAC,cAAc,mBACtB,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACxD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC7B,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACvC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACtE,MAAM,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACtE,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3E,YAAY,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,KACxE,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,iBAChC,EAAE,EACf,KAAK,EAAE,gCAAgC,CAAC,KAAK,CAAC;QAE7C,CAAC,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CACnC,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EACjF,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,GACzC,CACH;QACD,kCAAO,IAAI,CAAQ;QAElB,oBAAoB,IAAI,CACvB;YACG,aAAa;YACb,WAAW,IAAI,CACd,oBAAC,OAAO,IACN,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,EAC5C,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,cAAe,EACtB,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GACtC,CACH,CACA,CACJ,CACM,CACV,CAAC;AACJ,CAAC,CACF,CAAC","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 { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport Tooltip from '../internal/components/tooltip';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SegmentedControlProps } from './interfaces';\nimport { getSegmentedControlSegmentStyles } from './style';\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 style: SegmentedControlProps['style'];\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 style,\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 style={getSegmentedControlSegmentStyles(style)}\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"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
2
|
+
import { SegmentedControlProps } from './interfaces';
|
|
3
|
+
export declare function getSegmentedControlRootStyles(style: SegmentedControlProps['style']): {
|
|
4
|
+
borderRadius?: undefined;
|
|
5
|
+
} | {
|
|
6
|
+
borderRadius: string | undefined;
|
|
7
|
+
};
|
|
8
|
+
export declare function getSegmentedControlSegmentStyles(style: SegmentedControlProps['style']): {
|
|
9
|
+
borderRadius?: undefined;
|
|
10
|
+
fontSize?: undefined;
|
|
11
|
+
paddingBlock?: undefined;
|
|
12
|
+
paddingInline?: undefined;
|
|
13
|
+
} | {
|
|
14
|
+
[customCssProps.styleBackgroundActive]: string | undefined;
|
|
15
|
+
[customCssProps.styleBackgroundDefault]: string | undefined;
|
|
16
|
+
[customCssProps.styleBackgroundDisabled]: string | undefined;
|
|
17
|
+
[customCssProps.styleBackgroundHover]: string | undefined;
|
|
18
|
+
[customCssProps.styleColorActive]: string | undefined;
|
|
19
|
+
[customCssProps.styleColorDefault]: string | undefined;
|
|
20
|
+
[customCssProps.styleColorDisabled]: string | undefined;
|
|
21
|
+
[customCssProps.styleColorHover]: string | undefined;
|
|
22
|
+
[customCssProps.styleFocusRingBorderColor]: string | undefined;
|
|
23
|
+
[customCssProps.styleFocusRingBorderRadius]: string | undefined;
|
|
24
|
+
[customCssProps.styleFocusRingBorderWidth]: string | undefined;
|
|
25
|
+
borderRadius: string | undefined;
|
|
26
|
+
fontSize: string | undefined;
|
|
27
|
+
paddingBlock: string | undefined;
|
|
28
|
+
paddingInline: string | undefined;
|
|
29
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/style.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC;;;;EAQlF;AAED,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC;;;;;;IAUlF,CAAC,cAAc,CAAC,qBAAqB,CAAC,qBAAoC;IAC1E,CAAC,cAAc,CAAC,sBAAsB,CAAC,qBAAqC;IAC5E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAsC;IAC9E,CAAC,cAAc,CAAC,oBAAoB,CAAC,qBAAmC;IACxE,CAAC,cAAc,CAAC,gBAAgB,CAAC,qBAA+B;IAChE,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAAgC;IAClE,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBAAiC;IACpE,CAAC,cAAc,CAAC,eAAe,CAAC,qBAA8B;IAC9D,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAwC;IAClF,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAyC;IACpF,CAAC,cAAc,CAAC,yBAAyB,CAAC,qBAAwC;;;;;EAErF"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { SYSTEM } from '../internal/environment';
|
|
4
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
5
|
+
export function getSegmentedControlRootStyles(style) {
|
|
6
|
+
var _a;
|
|
7
|
+
if (SYSTEM !== 'core') {
|
|
8
|
+
return {};
|
|
9
|
+
}
|
|
10
|
+
return {
|
|
11
|
+
borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export function getSegmentedControlSegmentStyles(style) {
|
|
15
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
|
|
16
|
+
if (SYSTEM !== 'core') {
|
|
17
|
+
return {};
|
|
18
|
+
}
|
|
19
|
+
return {
|
|
20
|
+
borderRadius: (_a = style === null || style === void 0 ? void 0 : style.segment) === null || _a === void 0 ? void 0 : _a.borderRadius,
|
|
21
|
+
fontSize: (_b = style === null || style === void 0 ? void 0 : style.segment) === null || _b === void 0 ? void 0 : _b.fontSize,
|
|
22
|
+
paddingBlock: (_c = style === null || style === void 0 ? void 0 : style.segment) === null || _c === void 0 ? void 0 : _c.paddingBlock,
|
|
23
|
+
paddingInline: (_d = style === null || style === void 0 ? void 0 : style.segment) === null || _d === void 0 ? void 0 : _d.paddingInline,
|
|
24
|
+
[customCssProps.styleBackgroundActive]: (_f = (_e = style === null || style === void 0 ? void 0 : style.segment) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.active,
|
|
25
|
+
[customCssProps.styleBackgroundDefault]: (_h = (_g = style === null || style === void 0 ? void 0 : style.segment) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.default,
|
|
26
|
+
[customCssProps.styleBackgroundDisabled]: (_k = (_j = style === null || style === void 0 ? void 0 : style.segment) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k.disabled,
|
|
27
|
+
[customCssProps.styleBackgroundHover]: (_m = (_l = style === null || style === void 0 ? void 0 : style.segment) === null || _l === void 0 ? void 0 : _l.background) === null || _m === void 0 ? void 0 : _m.hover,
|
|
28
|
+
[customCssProps.styleColorActive]: (_p = (_o = style === null || style === void 0 ? void 0 : style.segment) === null || _o === void 0 ? void 0 : _o.color) === null || _p === void 0 ? void 0 : _p.active,
|
|
29
|
+
[customCssProps.styleColorDefault]: (_r = (_q = style === null || style === void 0 ? void 0 : style.segment) === null || _q === void 0 ? void 0 : _q.color) === null || _r === void 0 ? void 0 : _r.default,
|
|
30
|
+
[customCssProps.styleColorDisabled]: (_t = (_s = style === null || style === void 0 ? void 0 : style.segment) === null || _s === void 0 ? void 0 : _s.color) === null || _t === void 0 ? void 0 : _t.disabled,
|
|
31
|
+
[customCssProps.styleColorHover]: (_v = (_u = style === null || style === void 0 ? void 0 : style.segment) === null || _u === void 0 ? void 0 : _u.color) === null || _v === void 0 ? void 0 : _v.hover,
|
|
32
|
+
[customCssProps.styleFocusRingBorderColor]: (_x = (_w = style === null || style === void 0 ? void 0 : style.segment) === null || _w === void 0 ? void 0 : _w.focusRing) === null || _x === void 0 ? void 0 : _x.borderColor,
|
|
33
|
+
[customCssProps.styleFocusRingBorderRadius]: (_z = (_y = style === null || style === void 0 ? void 0 : style.segment) === null || _y === void 0 ? void 0 : _y.focusRing) === null || _z === void 0 ? void 0 : _z.borderRadius,
|
|
34
|
+
[customCssProps.styleFocusRingBorderWidth]: (_1 = (_0 = style === null || style === void 0 ? void 0 : style.segment) === null || _0 === void 0 ? void 0 : _0.focusRing) === null || _1 === void 0 ? void 0 : _1.borderWidth,
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/segmented-control/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,6BAA6B,CAAC,KAAqC;;IACjF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,YAAY;KACxC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gCAAgC,CAAC,KAAqC;;IACpF,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,YAAY;QAC1C,QAAQ,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ;QAClC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,YAAY;QAC1C,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,aAAa;QAC5C,CAAC,cAAc,CAAC,qBAAqB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,MAAM;QAC1E,CAAC,cAAc,CAAC,sBAAsB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,OAAO;QAC5E,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,QAAQ;QAC9E,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,UAAU,0CAAE,KAAK;QACxE,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,MAAM;QAChE,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,OAAO;QAClE,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,QAAQ;QACpE,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,0CAAE,KAAK;QAC9D,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,SAAS,0CAAE,WAAW;QAClF,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,SAAS,0CAAE,YAAY;QACpF,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,SAAS,0CAAE,WAAW;KACnF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { SegmentedControlProps } from './interfaces';\n\nexport function getSegmentedControlRootStyles(style: SegmentedControlProps['style']) {\n if (SYSTEM !== 'core') {\n return {};\n }\n\n return {\n borderRadius: style?.root?.borderRadius,\n };\n}\n\nexport function getSegmentedControlSegmentStyles(style: SegmentedControlProps['style']) {\n if (SYSTEM !== 'core') {\n return {};\n }\n\n return {\n borderRadius: style?.segment?.borderRadius,\n fontSize: style?.segment?.fontSize,\n paddingBlock: style?.segment?.paddingBlock,\n paddingInline: style?.segment?.paddingInline,\n [customCssProps.styleBackgroundActive]: style?.segment?.background?.active,\n [customCssProps.styleBackgroundDefault]: style?.segment?.background?.default,\n [customCssProps.styleBackgroundDisabled]: style?.segment?.background?.disabled,\n [customCssProps.styleBackgroundHover]: style?.segment?.background?.hover,\n [customCssProps.styleColorActive]: style?.segment?.color?.active,\n [customCssProps.styleColorDefault]: style?.segment?.color?.default,\n [customCssProps.styleColorDisabled]: style?.segment?.color?.disabled,\n [customCssProps.styleColorHover]: style?.segment?.color?.hover,\n [customCssProps.styleFocusRingBorderColor]: style?.segment?.focusRing?.borderColor,\n [customCssProps.styleFocusRingBorderRadius]: style?.segment?.focusRing?.borderRadius,\n [customCssProps.styleFocusRingBorderWidth]: style?.segment?.focusRing?.borderWidth,\n };\n}\n"]}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"segment": "
|
|
5
|
-
"refresh": "
|
|
6
|
-
"disabled": "
|
|
7
|
-
"selected": "
|
|
8
|
-
"icon": "
|
|
9
|
-
"with-text": "awsui_with-
|
|
10
|
-
"with-no-text": "awsui_with-no-
|
|
11
|
-
"root": "
|
|
12
|
-
"segment-part": "awsui_segment-
|
|
13
|
-
"select": "
|
|
14
|
-
"segment-count-2": "awsui_segment-count-
|
|
15
|
-
"segment-count-3": "awsui_segment-count-
|
|
16
|
-
"segment-count-4": "awsui_segment-count-
|
|
17
|
-
"segment-count-5": "awsui_segment-count-
|
|
18
|
-
"segment-count-6": "awsui_segment-count-
|
|
19
|
-
"disabled-reason-tooltip": "awsui_disabled-reason-
|
|
4
|
+
"segment": "awsui_segment_8cbea_1nnm7_161",
|
|
5
|
+
"refresh": "awsui_refresh_8cbea_1nnm7_188",
|
|
6
|
+
"disabled": "awsui_disabled_8cbea_1nnm7_194",
|
|
7
|
+
"selected": "awsui_selected_8cbea_1nnm7_251",
|
|
8
|
+
"icon": "awsui_icon_8cbea_1nnm7_261",
|
|
9
|
+
"with-text": "awsui_with-text_8cbea_1nnm7_265",
|
|
10
|
+
"with-no-text": "awsui_with-no-text_8cbea_1nnm7_271",
|
|
11
|
+
"root": "awsui_root_8cbea_1nnm7_276",
|
|
12
|
+
"segment-part": "awsui_segment-part_8cbea_1nnm7_308",
|
|
13
|
+
"select": "awsui_select_8cbea_1nnm7_251",
|
|
14
|
+
"segment-count-2": "awsui_segment-count-2_8cbea_1nnm7_343",
|
|
15
|
+
"segment-count-3": "awsui_segment-count-3_8cbea_1nnm7_347",
|
|
16
|
+
"segment-count-4": "awsui_segment-count-4_8cbea_1nnm7_351",
|
|
17
|
+
"segment-count-5": "awsui_segment-count-5_8cbea_1nnm7_355",
|
|
18
|
+
"segment-count-6": "awsui_segment-count-6_8cbea_1nnm7_359",
|
|
19
|
+
"disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1nnm7_363"
|
|
20
20
|
};
|
|
21
21
|
|