@cloudscape-design/components-themeable 3.0.1151 → 3.0.1153
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/annotation-context/annotation/styles.scss +0 -2
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/internal/styles/forms/mixins.scss +5 -1
- package/lib/internal/scss/popover/arrow.scss +17 -3
- package/lib/internal/scss/radio-group/styles.scss +4 -0
- package/lib/internal/scss/segmented-control/segment.scss +21 -44
- package/lib/internal/scss/tree-view/vertical-connector/styles.scss +4 -3
- package/lib/internal/template/annotation-context/annotation/annotation-popover.d.ts.map +1 -1
- package/lib/internal/template/annotation-context/annotation/annotation-popover.js +2 -5
- package/lib/internal/template/annotation-context/annotation/annotation-popover.js.map +1 -1
- package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -24
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +20 -87
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -24
- package/lib/internal/template/flashbar/interfaces.d.ts +1 -1
- package/lib/internal/template/flashbar/interfaces.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/navigable-group/index.d.ts +1 -1
- package/lib/internal/template/navigable-group/index.d.ts.map +1 -1
- package/lib/internal/template/navigable-group/index.js +3 -3
- package/lib/internal/template/navigable-group/index.js.map +1 -1
- package/lib/internal/template/popover/arrow.d.ts +2 -1
- package/lib/internal/template/popover/arrow.d.ts.map +1 -1
- package/lib/internal/template/popover/arrow.js +2 -2
- package/lib/internal/template/popover/arrow.js.map +1 -1
- package/lib/internal/template/popover/styles.css.js +57 -56
- package/lib/internal/template/popover/styles.scoped.css +91 -84
- package/lib/internal/template/popover/styles.selectors.js +57 -56
- package/lib/internal/template/prompt-input/styles.d.ts +38 -1
- package/lib/internal/template/prompt-input/styles.d.ts.map +1 -1
- package/lib/internal/template/prompt-input/styles.js +1 -2
- package/lib/internal/template/prompt-input/styles.js.map +1 -1
- package/lib/internal/template/radio-group/internal.d.ts.map +1 -1
- package/lib/internal/template/radio-group/internal.js +1 -1
- package/lib/internal/template/radio-group/internal.js.map +1 -1
- package/lib/internal/template/radio-group/styles.css.js +6 -5
- package/lib/internal/template/radio-group/styles.scoped.css +10 -6
- package/lib/internal/template/radio-group/styles.selectors.js +6 -5
- package/lib/internal/template/segmented-control/index.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/index.js.map +1 -1
- package/lib/internal/template/segmented-control/interfaces.d.ts +32 -0
- package/lib/internal/template/segmented-control/interfaces.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/interfaces.js.map +1 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.d.ts +1 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/internal-segmented-control.js +4 -3
- package/lib/internal/template/segmented-control/internal-segmented-control.js.map +1 -1
- package/lib/internal/template/segmented-control/internal.d.ts +1 -1
- package/lib/internal/template/segmented-control/internal.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/internal.js +2 -2
- package/lib/internal/template/segmented-control/internal.js.map +1 -1
- package/lib/internal/template/segmented-control/segment.d.ts +1 -0
- package/lib/internal/template/segmented-control/segment.d.ts.map +1 -1
- package/lib/internal/template/segmented-control/segment.js +3 -2
- package/lib/internal/template/segmented-control/segment.js.map +1 -1
- package/lib/internal/template/segmented-control/style.d.ts +30 -0
- package/lib/internal/template/segmented-control/style.d.ts.map +1 -0
- package/lib/internal/template/segmented-control/style.js +37 -0
- package/lib/internal/template/segmented-control/style.js.map +1 -0
- package/lib/internal/template/segmented-control/styles.css.js +16 -16
- package/lib/internal/template/segmented-control/styles.scoped.css +47 -59
- package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
- package/lib/internal/template/test-utils/dom/radio-group/index.d.ts +1 -0
- package/lib/internal/template/test-utils/dom/radio-group/index.js +5 -3
- package/lib/internal/template/test-utils/dom/radio-group/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/radio-group/index.d.ts +1 -0
- package/lib/internal/template/test-utils/selectors/radio-group/index.js +5 -3
- package/lib/internal/template/test-utils/selectors/radio-group/index.js.map +1 -1
- package/lib/internal/template/tree-view/vertical-connector/styles.css.js +3 -3
- package/lib/internal/template/tree-view/vertical-connector/styles.scoped.css +5 -5
- package/lib/internal/template/tree-view/vertical-connector/styles.selectors.js +3 -3
- package/package.json +1 -1
- package/lib/internal/scss/annotation-context/annotation/arrow.scss +0 -113
|
@@ -1,5 +1,42 @@
|
|
|
1
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
1
2
|
import { PromptInputProps } from './interfaces';
|
|
2
3
|
export declare function getPromptInputStyles(style: PromptInputProps['style']): {
|
|
3
|
-
|
|
4
|
+
borderRadius?: undefined;
|
|
5
|
+
borderWidth?: undefined;
|
|
6
|
+
fontSize?: undefined;
|
|
7
|
+
fontWeight?: undefined;
|
|
8
|
+
paddingBlock?: undefined;
|
|
9
|
+
paddingInline?: undefined;
|
|
10
|
+
} | {
|
|
11
|
+
[customCssProps.promptInputStyleBackgroundDefault]: string | undefined;
|
|
12
|
+
[customCssProps.promptInputStyleBackgroundDisabled]: string | undefined;
|
|
13
|
+
[customCssProps.promptInputStyleBackgroundHover]: string | undefined;
|
|
14
|
+
[customCssProps.promptInputStyleBackgroundFocus]: string | undefined;
|
|
15
|
+
[customCssProps.promptInputStyleBackgroundReadonly]: string | undefined;
|
|
16
|
+
[customCssProps.promptInputStyleBorderColorDefault]: string | undefined;
|
|
17
|
+
[customCssProps.promptInputStyleBorderColorDisabled]: string | undefined;
|
|
18
|
+
[customCssProps.promptInputStyleBorderColorHover]: string | undefined;
|
|
19
|
+
[customCssProps.promptInputStyleBorderColorFocus]: string | undefined;
|
|
20
|
+
[customCssProps.promptInputStyleBorderColorReadonly]: string | undefined;
|
|
21
|
+
[customCssProps.promptInputStyleBoxShadowDefault]: string | undefined;
|
|
22
|
+
[customCssProps.promptInputStyleBoxShadowDisabled]: string | undefined;
|
|
23
|
+
[customCssProps.promptInputStyleBoxShadowHover]: string | undefined;
|
|
24
|
+
[customCssProps.promptInputStyleBoxShadowFocus]: string | undefined;
|
|
25
|
+
[customCssProps.promptInputStyleBoxShadowReadonly]: string | undefined;
|
|
26
|
+
[customCssProps.promptInputStyleColorDefault]: string | undefined;
|
|
27
|
+
[customCssProps.promptInputStyleColorDisabled]: string | undefined;
|
|
28
|
+
[customCssProps.promptInputStyleColorHover]: string | undefined;
|
|
29
|
+
[customCssProps.promptInputStyleColorFocus]: string | undefined;
|
|
30
|
+
[customCssProps.promptInputStyleColorReadonly]: string | undefined;
|
|
31
|
+
[customCssProps.promptInputStylePlaceholderColor]: string | undefined;
|
|
32
|
+
[customCssProps.promptInputStylePlaceholderFontSize]: string | undefined;
|
|
33
|
+
[customCssProps.promptInputStylePlaceholderFontWeight]: string | undefined;
|
|
34
|
+
[customCssProps.promptInputStylePlaceholderFontStyle]: string | undefined;
|
|
35
|
+
borderRadius: string | undefined;
|
|
36
|
+
borderWidth: string | undefined;
|
|
37
|
+
fontSize: string | undefined;
|
|
38
|
+
fontWeight: string | undefined;
|
|
39
|
+
paddingBlock: string | undefined;
|
|
40
|
+
paddingInline: string | undefined;
|
|
4
41
|
};
|
|
5
42
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;;;;;;;;IAYjE,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAuC;IACzF,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAwC;IAC3F,CAAC,cAAc,CAAC,+BAA+B,CAAC,qBAAqC;IACrF,CAAC,cAAc,CAAC,+BAA+B,CAAC,qBAAqC;IACrF,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAwC;IAC3F,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAmC;IACtF,CAAC,cAAc,CAAC,mCAAmC,CAAC,qBAAoC;IACxF,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAiC;IAClF,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAiC;IAClF,CAAC,cAAc,CAAC,mCAAmC,CAAC,qBAAoC;IACxF,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAiC;IAClF,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAkC;IACpF,CAAC,cAAc,CAAC,8BAA8B,CAAC,qBAA+B;IAC9E,CAAC,cAAc,CAAC,8BAA8B,CAAC,qBAA+B;IAC9E,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAkC;IACpF,CAAC,cAAc,CAAC,4BAA4B,CAAC,qBAA6B;IAC1E,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAA8B;IAC5E,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAA2B;IACtE,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAA2B;IACtE,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAA8B;IAC5E,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAA2B;IAC5E,CAAC,cAAc,CAAC,mCAAmC,CAAC,qBAA8B;IAClF,CAAC,cAAc,CAAC,qCAAqC,CAAC,qBAAgC;IACtF,CAAC,cAAc,CAAC,oCAAoC,CAAC,qBAA+B;;;;;;;EAEvF"}
|
|
@@ -7,7 +7,7 @@ export function getPromptInputStyles(style) {
|
|
|
7
7
|
if (SYSTEM !== 'core') {
|
|
8
8
|
return {};
|
|
9
9
|
}
|
|
10
|
-
|
|
10
|
+
return {
|
|
11
11
|
borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius,
|
|
12
12
|
borderWidth: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderWidth,
|
|
13
13
|
fontSize: (_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.fontSize,
|
|
@@ -39,6 +39,5 @@ export function getPromptInputStyles(style) {
|
|
|
39
39
|
[customCssProps.promptInputStylePlaceholderFontWeight]: (_24 = style === null || style === void 0 ? void 0 : style.placeholder) === null || _24 === void 0 ? void 0 : _24.fontWeight,
|
|
40
40
|
[customCssProps.promptInputStylePlaceholderFontStyle]: (_25 = style === null || style === void 0 ? void 0 : style.placeholder) === null || _25 === void 0 ? void 0 : _25.fontStyle,
|
|
41
41
|
};
|
|
42
|
-
return Object.fromEntries(Object.entries(properties).filter(([, value]) => value !== undefined));
|
|
43
42
|
}
|
|
44
43
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/prompt-input/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,oBAAoB,CAAC,KAAgC;;IACnE,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/prompt-input/styles.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 { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { PromptInputProps } from './interfaces';\n\nexport function getPromptInputStyles(style: PromptInputProps['style']) {\n if (SYSTEM !== 'core') {\n return {};\n }\n\n return {\n borderRadius: style?.root?.borderRadius,\n borderWidth: style?.root?.borderWidth,\n fontSize: style?.root?.fontSize,\n fontWeight: style?.root?.fontWeight,\n paddingBlock: style?.root?.paddingBlock,\n paddingInline: style?.root?.paddingInline,\n [customCssProps.promptInputStyleBackgroundDefault]: style?.root?.backgroundColor?.default,\n [customCssProps.promptInputStyleBackgroundDisabled]: style?.root?.backgroundColor?.disabled,\n [customCssProps.promptInputStyleBackgroundHover]: style?.root?.backgroundColor?.hover,\n [customCssProps.promptInputStyleBackgroundFocus]: style?.root?.backgroundColor?.focus,\n [customCssProps.promptInputStyleBackgroundReadonly]: style?.root?.backgroundColor?.readonly,\n [customCssProps.promptInputStyleBorderColorDefault]: style?.root?.borderColor?.default,\n [customCssProps.promptInputStyleBorderColorDisabled]: style?.root?.borderColor?.disabled,\n [customCssProps.promptInputStyleBorderColorHover]: style?.root?.borderColor?.hover,\n [customCssProps.promptInputStyleBorderColorFocus]: style?.root?.borderColor?.focus,\n [customCssProps.promptInputStyleBorderColorReadonly]: style?.root?.borderColor?.readonly,\n [customCssProps.promptInputStyleBoxShadowDefault]: style?.root?.boxShadow?.default,\n [customCssProps.promptInputStyleBoxShadowDisabled]: style?.root?.boxShadow?.disabled,\n [customCssProps.promptInputStyleBoxShadowHover]: style?.root?.boxShadow?.hover,\n [customCssProps.promptInputStyleBoxShadowFocus]: style?.root?.boxShadow?.focus,\n [customCssProps.promptInputStyleBoxShadowReadonly]: style?.root?.boxShadow?.readonly,\n [customCssProps.promptInputStyleColorDefault]: style?.root?.color?.default,\n [customCssProps.promptInputStyleColorDisabled]: style?.root?.color?.disabled,\n [customCssProps.promptInputStyleColorHover]: style?.root?.color?.hover,\n [customCssProps.promptInputStyleColorFocus]: style?.root?.color?.focus,\n [customCssProps.promptInputStyleColorReadonly]: style?.root?.color?.readonly,\n [customCssProps.promptInputStylePlaceholderColor]: style?.placeholder?.color,\n [customCssProps.promptInputStylePlaceholderFontSize]: style?.placeholder?.fontSize,\n [customCssProps.promptInputStylePlaceholderFontWeight]: style?.placeholder?.fontWeight,\n [customCssProps.promptInputStylePlaceholderFontStyle]: style?.placeholder?.fontStyle,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,QAAA,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,QAAA,MAAM,kBAAkB,0HAgFvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -17,7 +17,7 @@ const InternalRadioGroup = React.forwardRef(({ name, value, items, ariaLabel, ar
|
|
|
17
17
|
const baseProps = getBaseProps(props);
|
|
18
18
|
const generatedName = useUniqueId('awsui-radio-');
|
|
19
19
|
const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);
|
|
20
|
-
return (React.createElement("div", { role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined, ...baseProps, className: clsx(baseProps.className, testUtilStyles.root, styles['radio-group'], direction === 'horizontal' && styles['horizontal-group']), ref: __internalRootRef }, items &&
|
|
20
|
+
return (React.createElement("div", { role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined, ...baseProps, className: clsx(baseProps.className, testUtilStyles.root, styles.root, styles['radio-group'], direction === 'horizontal' && styles['horizontal-group']), ref: __internalRootRef }, items &&
|
|
21
21
|
items.map((item, index) => (React.createElement(RadioButton, { key: item.value, ref: index === radioButtonRefIndex ? radioButtonRef : undefined, className: clsx(styles.radio, item.description && styles['radio--has-description'], direction === 'horizontal' && styles.horizontal, item.value === value && analyticsSelectors.selected), checked: item.value === value, name: name || generatedName, value: item.value, description: item.description, disabled: item.disabled, onSelect: () => fireNonCancelableEvent(onChange, { value: item.value }), controlId: item.controlId, readOnly: readOnly, style: style, ...getAnalyticsMetadataAttribute(!item.disabled && !readOnly
|
|
22
22
|
? {
|
|
23
23
|
detail: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport RadioButton from '../internal/components/radio-button';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataRadioGroupSelect } from './analytics-metadata/interfaces';\nimport { RadioGroupProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalRadioGroupProps = RadioGroupProps & InternalBaseComponentProps;\n\nconst InternalRadioGroup = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n onChange,\n readOnly,\n __internalRootRef,\n style,\n direction,\n ...props\n }: InternalRadioGroupProps,\n ref: React.Ref<RadioGroupProps.Ref>\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);\n const baseProps = getBaseProps(props);\n const generatedName = useUniqueId('awsui-radio-');\n\n const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n\n return (\n <div\n role=\"radiogroup\"\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n aria-readonly={readOnly ? 'true' : undefined}\n {...baseProps}\n className={clsx(\n baseProps.className,\n testUtilStyles.root,\n styles['radio-group'],\n direction === 'horizontal' && styles['horizontal-group']\n )}\n ref={__internalRootRef}\n >\n {items &&\n items.map((item, index) => (\n <RadioButton\n key={item.value}\n ref={index === radioButtonRefIndex ? radioButtonRef : undefined}\n className={clsx(\n styles.radio,\n item.description && styles['radio--has-description'],\n direction === 'horizontal' && styles.horizontal,\n item.value === value && analyticsSelectors.selected\n )}\n checked={item.value === value}\n name={name || generatedName}\n value={item.value}\n description={item.description}\n disabled={item.disabled}\n onSelect={() => fireNonCancelableEvent(onChange, { value: item.value })}\n controlId={item.controlId}\n readOnly={readOnly}\n style={style}\n {...getAnalyticsMetadataAttribute(\n !item.disabled && !readOnly\n ? {\n detail: {\n position: `${index + 1}`,\n value: item.value,\n } as Partial<GeneratedAnalyticsMetadataRadioGroupSelect['detail']>,\n }\n : {}\n )}\n >\n {item.label}\n </RadioButton>\n ))}\n </div>\n );\n }\n);\n\nexport default InternalRadioGroup;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport RadioButton from '../internal/components/radio-button';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { GeneratedAnalyticsMetadataRadioGroupSelect } from './analytics-metadata/interfaces';\nimport { RadioGroupProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ntype InternalRadioGroupProps = RadioGroupProps & InternalBaseComponentProps;\n\nconst InternalRadioGroup = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n ariaControls,\n onChange,\n readOnly,\n __internalRootRef,\n style,\n direction,\n ...props\n }: InternalRadioGroupProps,\n ref: React.Ref<RadioGroupProps.Ref>\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);\n const baseProps = getBaseProps(props);\n const generatedName = useUniqueId('awsui-radio-');\n\n const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n\n return (\n <div\n role=\"radiogroup\"\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n aria-controls={ariaControls}\n aria-readonly={readOnly ? 'true' : undefined}\n {...baseProps}\n className={clsx(\n baseProps.className,\n testUtilStyles.root,\n styles.root,\n styles['radio-group'],\n direction === 'horizontal' && styles['horizontal-group']\n )}\n ref={__internalRootRef}\n >\n {items &&\n items.map((item, index) => (\n <RadioButton\n key={item.value}\n ref={index === radioButtonRefIndex ? radioButtonRef : undefined}\n className={clsx(\n styles.radio,\n item.description && styles['radio--has-description'],\n direction === 'horizontal' && styles.horizontal,\n item.value === value && analyticsSelectors.selected\n )}\n checked={item.value === value}\n name={name || generatedName}\n value={item.value}\n description={item.description}\n disabled={item.disabled}\n onSelect={() => fireNonCancelableEvent(onChange, { value: item.value })}\n controlId={item.controlId}\n readOnly={readOnly}\n style={style}\n {...getAnalyticsMetadataAttribute(\n !item.disabled && !readOnly\n ? {\n detail: {\n position: `${index + 1}`,\n value: item.value,\n } as Partial<GeneratedAnalyticsMetadataRadioGroupSelect['detail']>,\n }\n : {}\n )}\n >\n {item.label}\n </RadioButton>\n ))}\n </div>\n );\n }\n);\n\nexport default InternalRadioGroup;\n"]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
4
|
+
"root": "awsui_root_1mabk_3hsov_145",
|
|
5
|
+
"radio-group": "awsui_radio-group_1mabk_3hsov_149",
|
|
6
|
+
"horizontal-group": "awsui_horizontal-group_1mabk_3hsov_180",
|
|
7
|
+
"radio": "awsui_radio_1mabk_3hsov_149",
|
|
8
|
+
"horizontal": "awsui_horizontal_1mabk_3hsov_180",
|
|
9
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_3hsov_194"
|
|
9
10
|
};
|
|
10
11
|
|
|
@@ -142,7 +142,11 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
145
|
+
.awsui_root_1mabk_3hsov_145:not(#\9) {
|
|
146
|
+
/* used for backwards-compatibility with older versions of test-utils */
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.awsui_radio-group_1mabk_3hsov_149:not(#\9) {
|
|
146
150
|
border-collapse: separate;
|
|
147
151
|
border-spacing: 0;
|
|
148
152
|
box-sizing: border-box;
|
|
@@ -173,24 +177,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
173
177
|
-webkit-font-smoothing: auto;
|
|
174
178
|
-moz-osx-font-smoothing: auto;
|
|
175
179
|
}
|
|
176
|
-
.awsui_radio-
|
|
180
|
+
.awsui_radio-group_1mabk_3hsov_149:not(#\9):not(.awsui_horizontal-group_1mabk_3hsov_180) {
|
|
177
181
|
display: block;
|
|
178
182
|
}
|
|
179
|
-
.awsui_radio-
|
|
183
|
+
.awsui_radio-group_1mabk_3hsov_149.awsui_horizontal-group_1mabk_3hsov_180:not(#\9) {
|
|
180
184
|
display: flex;
|
|
181
185
|
align-items: flex-start;
|
|
182
186
|
flex-wrap: wrap;
|
|
183
187
|
gap: var(--space-scaled-l-66n9sr, 20px);
|
|
184
188
|
}
|
|
185
189
|
|
|
186
|
-
.
|
|
190
|
+
.awsui_radio_1mabk_3hsov_149 + .awsui_radio_1mabk_3hsov_149:not(#\9):not(.awsui_horizontal_1mabk_3hsov_180) {
|
|
187
191
|
margin-block-start: var(--space-scaled-xxs-jatbiv, 4px);
|
|
188
192
|
}
|
|
189
193
|
|
|
190
|
-
.awsui_radio--has-
|
|
194
|
+
.awsui_radio--has-description_1mabk_3hsov_194 + .awsui_radio_1mabk_3hsov_149:not(#\9):not(.awsui_horizontal_1mabk_3hsov_180) {
|
|
191
195
|
margin-block-start: var(--space-scaled-xs-sppte9, 8px);
|
|
192
196
|
}
|
|
193
197
|
|
|
194
|
-
.
|
|
198
|
+
.awsui_radio_1mabk_3hsov_149.awsui_horizontal_1mabk_3hsov_180:not(#\9) {
|
|
195
199
|
max-inline-size: calc(16 * var(--space-scaled-xxl-9ur2is, 32px));
|
|
196
200
|
}
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
5
|
+
"root": "awsui_root_1mabk_3hsov_145",
|
|
6
|
+
"radio-group": "awsui_radio-group_1mabk_3hsov_149",
|
|
7
|
+
"horizontal-group": "awsui_horizontal-group_1mabk_3hsov_180",
|
|
8
|
+
"radio": "awsui_radio_1mabk_3hsov_149",
|
|
9
|
+
"horizontal": "awsui_horizontal_1mabk_3hsov_180",
|
|
10
|
+
"radio--has-description": "awsui_radio--has-description_1mabk_3hsov_194"
|
|
10
11
|
};
|
|
11
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eASpE"}
|
|
@@ -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"]}
|
|
@@ -36,6 +36,10 @@ 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
|
+
*/
|
|
42
|
+
style?: SegmentedControlProps.Style;
|
|
39
43
|
}
|
|
40
44
|
export declare namespace SegmentedControlProps {
|
|
41
45
|
interface Option {
|
|
@@ -51,5 +55,33 @@ export declare namespace SegmentedControlProps {
|
|
|
51
55
|
interface ChangeDetail {
|
|
52
56
|
selectedId: string;
|
|
53
57
|
}
|
|
58
|
+
interface Style {
|
|
59
|
+
root?: {
|
|
60
|
+
borderRadius?: string;
|
|
61
|
+
};
|
|
62
|
+
segment?: {
|
|
63
|
+
background?: {
|
|
64
|
+
active?: string;
|
|
65
|
+
default?: string;
|
|
66
|
+
disabled?: string;
|
|
67
|
+
hover?: string;
|
|
68
|
+
};
|
|
69
|
+
color?: {
|
|
70
|
+
active?: string;
|
|
71
|
+
default?: string;
|
|
72
|
+
disabled?: string;
|
|
73
|
+
hover?: string;
|
|
74
|
+
};
|
|
75
|
+
focusRing?: {
|
|
76
|
+
borderColor?: string;
|
|
77
|
+
borderRadius?: string;
|
|
78
|
+
borderWidth?: string;
|
|
79
|
+
};
|
|
80
|
+
borderRadius?: string;
|
|
81
|
+
fontSize?: string;
|
|
82
|
+
paddingBlock?: string;
|
|
83
|
+
paddingInline?: string;
|
|
84
|
+
};
|
|
85
|
+
}
|
|
54
86
|
}
|
|
55
87
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -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"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SegmentedControlProps } from './interfaces';
|
|
2
|
-
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, }: SegmentedControlProps): JSX.Element;
|
|
2
|
+
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, }: SegmentedControlProps): JSX.Element;
|
|
3
3
|
//# sourceMappingURL=internal-segmented-control.d.ts.map
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
2
2
|
import { SegmentedControlProps } from './interfaces';
|
|
3
3
|
type InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;
|
|
4
|
-
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, ...props }: InternalSegmentedControlProps): JSX.Element;
|
|
4
|
+
export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, style, ...props }: InternalSegmentedControlProps): JSX.Element;
|
|
5
5
|
export {};
|
|
6
6
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -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":"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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 { 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,30 @@
|
|
|
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
|
+
};
|
|
30
|
+
//# sourceMappingURL=style.d.ts.map
|
|
@@ -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"}
|