@cloudscape-design/components 3.0.1389 → 3.0.1390
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/i18n/utils/i18n-formatter.d.ts.map +1 -1
- package/i18n/utils/i18n-formatter.js +36 -5
- package/i18n/utils/i18n-formatter.js.map +1 -1
- package/internal/base-component/styles.scoped.css +1 -1
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/manifest.json +1 -1
- package/manifest.json +2 -2
- package/package.json +1 -1
- package/toggle/internal.d.ts +6 -0
- package/toggle/internal.d.ts.map +1 -1
- package/toggle/internal.js +3 -3
- package/toggle/internal.js.map +1 -1
- package/toggle/styles.css.js +10 -10
- package/toggle/styles.scoped.css +73 -36
- package/toggle/styles.selectors.js +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-formatter.d.ts","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"i18n-formatter.d.ts","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,SAAS,EAAE,MAAM,GAAG;QACnB,CAAC,MAAM,EAAE,MAAM,GAAG;YAChB,CAAC,SAAS,EAAE,MAAM,GAAG;gBACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,oBAAoB,EAAE,CAAC;aAChD,CAAC;SACH,CAAC;KACH,CAAC;CACH;AAED;;;;GAIG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAe;IAMhC,OAAO,CAAC,qBAAqB,CAA+C;gBAEhE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY;IAKlD,MAAM,CAAC,WAAW,EAAE,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EACtE,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,WAAW,EACrB,aAAa,CAAC,EAAE,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,GACvD,WAAW;CAsEf"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import IntlMessageFormat from 'intl-messageformat';
|
|
4
|
+
import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
4
5
|
import { getMatchableLocales } from './locales';
|
|
5
6
|
import { normalizeMessages } from './messages';
|
|
6
7
|
/**
|
|
@@ -29,6 +30,10 @@ export class I18nFormatter {
|
|
|
29
30
|
const cacheKey = `${namespace}.${component}.${key}`;
|
|
30
31
|
let intlMessageFormat;
|
|
31
32
|
const cachedFormatter = this._localeFormatterCache.get(cacheKey);
|
|
33
|
+
// A null entry means this message already failed to parse; don't retry.
|
|
34
|
+
if (cachedFormatter === null) {
|
|
35
|
+
return provided;
|
|
36
|
+
}
|
|
32
37
|
if (cachedFormatter) {
|
|
33
38
|
// If an IntlMessageFormat instance was cached for this locale, just use that.
|
|
34
39
|
intlMessageFormat = cachedFormatter;
|
|
@@ -49,14 +54,40 @@ export class I18nFormatter {
|
|
|
49
54
|
return provided;
|
|
50
55
|
}
|
|
51
56
|
// Lazily create an IntlMessageFormat object for this key.
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
// Invalid ICU syntax falls back to the provided value instead of crashing the render.
|
|
58
|
+
try {
|
|
59
|
+
intlMessageFormat = new IntlMessageFormat(message, this._locale);
|
|
60
|
+
this._localeFormatterCache.set(cacheKey, intlMessageFormat);
|
|
61
|
+
}
|
|
62
|
+
catch (error) {
|
|
63
|
+
warnOnce('I18nProvider', `Malformed message "${cacheKey}" for locale "${this._locale}": ${error}`);
|
|
64
|
+
this._localeFormatterCache.set(cacheKey, null);
|
|
65
|
+
return provided;
|
|
66
|
+
}
|
|
54
67
|
}
|
|
68
|
+
// Formatting can throw at runtime (e.g. a message/component contract mismatch),
|
|
69
|
+
// so degrade gracefully instead of crashing the consumer's page.
|
|
55
70
|
if (customHandler) {
|
|
56
|
-
|
|
71
|
+
// The returned formatFn may be invoked later during render, so guard it. It must return a string.
|
|
72
|
+
return customHandler(args => {
|
|
73
|
+
try {
|
|
74
|
+
return intlMessageFormat.format(args);
|
|
75
|
+
}
|
|
76
|
+
catch (error) {
|
|
77
|
+
warnOnce('I18nProvider', `Failed to format message "${cacheKey}" for locale "${this._locale}": ${error}`);
|
|
78
|
+
return '';
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
// Assuming `ReturnValue extends string` since a customHandler wasn't provided.
|
|
84
|
+
return intlMessageFormat.format();
|
|
85
|
+
}
|
|
86
|
+
catch (error) {
|
|
87
|
+
warnOnce('I18nProvider', `Failed to format message "${cacheKey}" for locale "${this._locale}": ${error}`);
|
|
88
|
+
// Fall back so the component's own default string logic takes over.
|
|
89
|
+
return provided;
|
|
57
90
|
}
|
|
58
|
-
// Assuming `ReturnValue extends string` since a customHandler wasn't provided.
|
|
59
|
-
return intlMessageFormat.format();
|
|
60
91
|
}
|
|
61
92
|
}
|
|
62
93
|
//# sourceMappingURL=i18n-formatter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n-formatter.js","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAGtC,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"i18n-formatter.js","sourceRoot":"","sources":["../../../../src/i18n/utils/i18n-formatter.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { MessageFormatElement } from '@formatjs/icu-messageformat-parser';\nimport IntlMessageFormat from 'intl-messageformat';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { CustomHandler } from '../context';\nimport { getMatchableLocales } from './locales';\nimport { normalizeMessages } from './messages';\n\n/**\n * The expected shape of the fully resolved messages object.\n * Typescript ensures any static imports are properly typed, but since this\n * depends on types from formatjs, it should not be included in any files that\n * need to support older versions of TypeScript (3.7 and up).\n */\nexport interface I18nMessages {\n [namespace: string]: {\n [locale: string]: {\n [component: string]: {\n [key: string]: string | MessageFormatElement[];\n };\n };\n };\n}\n\n/**\n * A stateful container for formatting internal strings. Caches formatters\n * where possible; a new instance must be created if locale or messages may\n * have changed.\n */\nexport class I18nFormatter {\n private _locale: string;\n private _messages: I18nMessages;\n\n // Create a per-render cache of messages and IntlMessageFormat instances.\n // Not memoizing it allows us to reset the cache when the component rerenders\n // with potentially different locale or messages. We expect this component to\n // be placed above AppLayout and therefore rerender very infrequently.\n private _localeFormatterCache = new Map<string, IntlMessageFormat | null>();\n\n constructor(locale: string, messages: I18nMessages) {\n this._locale = locale.toLowerCase();\n this._messages = normalizeMessages([messages]);\n }\n\n format<ReturnValue, FormatFnArgs extends Record<string, string | number>>(\n namespace: string,\n component: string,\n key: string,\n provided: ReturnValue,\n customHandler?: CustomHandler<ReturnValue, FormatFnArgs>\n ): ReturnValue {\n // A general rule in this library is that undefined is basically\n // treated as \"not provided\". So even if a user explicitly provides an\n // undefined value, it will default to i18n provider values.\n if (provided !== undefined) {\n return provided;\n }\n\n const cacheKey = `${namespace}.${component}.${key}`;\n let intlMessageFormat: IntlMessageFormat;\n\n const cachedFormatter = this._localeFormatterCache.get(cacheKey);\n // A null entry means this message already failed to parse; don't retry.\n if (cachedFormatter === null) {\n return provided;\n }\n if (cachedFormatter) {\n // If an IntlMessageFormat instance was cached for this locale, just use that.\n intlMessageFormat = cachedFormatter;\n } else {\n // Widen the locale string (e.g. en-GB -> en) until we find a locale\n // that contains the message we need.\n let message: string | MessageFormatElement[] | undefined;\n const matchableLocales = getMatchableLocales(this._locale);\n for (const matchableLocale of matchableLocales) {\n message = this._messages?.[namespace]?.[matchableLocale]?.[component]?.[key];\n if (message !== undefined) {\n break;\n }\n }\n\n // If a message wasn't found, exit early.\n if (message === undefined) {\n return provided;\n }\n\n // Lazily create an IntlMessageFormat object for this key.\n // Invalid ICU syntax falls back to the provided value instead of crashing the render.\n try {\n intlMessageFormat = new IntlMessageFormat(message, this._locale);\n this._localeFormatterCache.set(cacheKey, intlMessageFormat);\n } catch (error) {\n warnOnce('I18nProvider', `Malformed message \"${cacheKey}\" for locale \"${this._locale}\": ${error}`);\n this._localeFormatterCache.set(cacheKey, null);\n return provided;\n }\n }\n\n // Formatting can throw at runtime (e.g. a message/component contract mismatch),\n // so degrade gracefully instead of crashing the consumer's page.\n if (customHandler) {\n // The returned formatFn may be invoked later during render, so guard it. It must return a string.\n return customHandler(args => {\n try {\n return intlMessageFormat.format(args) as string;\n } catch (error) {\n warnOnce('I18nProvider', `Failed to format message \"${cacheKey}\" for locale \"${this._locale}\": ${error}`);\n return '';\n }\n });\n }\n try {\n // Assuming `ReturnValue extends string` since a customHandler wasn't provided.\n return intlMessageFormat.format() as ReturnValue;\n } catch (error) {\n warnOnce('I18nProvider', `Failed to format message \"${cacheKey}\" for locale \"${this._locale}\": ${error}`);\n // Fall back so the component's own default string logic takes over.\n return provided;\n }\n }\n}\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (818f03b7)";
|
|
3
|
+
export var GIT_SHA = "818f03b7";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "core";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|
package/internal/manifest.json
CHANGED
package/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -377,7 +377,7 @@
|
|
|
377
377
|
"./internal/base-theme/styles.css.js",
|
|
378
378
|
"./internal/base-component/styles.css.js"
|
|
379
379
|
],
|
|
380
|
-
"version": "3.0.
|
|
380
|
+
"version": "3.0.1390",
|
|
381
381
|
"repository": {
|
|
382
382
|
"type": "git",
|
|
383
383
|
"url": "https://github.com/cloudscape-design/components.git"
|
package/toggle/internal.d.ts
CHANGED
|
@@ -2,7 +2,13 @@ import React from 'react';
|
|
|
2
2
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
3
|
import { ToggleProps } from './interfaces';
|
|
4
4
|
interface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {
|
|
5
|
+
styleClassNames?: StyleClassNames;
|
|
5
6
|
__injectAnalyticsComponentMetadata?: boolean;
|
|
6
7
|
}
|
|
8
|
+
interface StyleClassNames {
|
|
9
|
+
control?: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
}
|
|
7
13
|
declare const InternalToggle: React.ForwardRefExoticComponent<InternalToggleProps & React.RefAttributes<ToggleProps.Ref>>;
|
|
8
14
|
export default InternalToggle;
|
package/toggle/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,6FA0GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/toggle/internal.js
CHANGED
|
@@ -11,7 +11,7 @@ import useForwardFocus from '../internal/hooks/forward-focus';
|
|
|
11
11
|
import WithNativeAttributes from '../internal/utils/with-native-attributes';
|
|
12
12
|
import { getAbstractSwitchStyles, getStyledControlStyle } from './style';
|
|
13
13
|
import styles from './styles.css.js';
|
|
14
|
-
const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, nativeInputAttributes, __internalRootRef, style, __injectAnalyticsComponentMetadata, ...rest }, ref) => {
|
|
14
|
+
const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, nativeInputAttributes, __internalRootRef, style, styleClassNames, __injectAnalyticsComponentMetadata, ...rest }, ref) => {
|
|
15
15
|
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
|
|
16
16
|
const baseProps = getBaseProps(rest);
|
|
17
17
|
const checkboxRef = useRef(null);
|
|
@@ -30,11 +30,11 @@ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, r
|
|
|
30
30
|
analyticsMetadata.action = !checked ? 'select' : 'deselect';
|
|
31
31
|
}
|
|
32
32
|
useForwardFocus(ref, checkboxRef);
|
|
33
|
-
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
|
|
33
|
+
return (React.createElement(AbstractSwitch, { ...baseProps, className: clsx(styles.root, baseProps.className), controlClassName: clsx(styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.control, styles['toggle-control'], {
|
|
34
34
|
[styles['toggle-control-checked']]: checked,
|
|
35
35
|
[styles['toggle-control-disabled']]: disabled,
|
|
36
36
|
[styles['toggle-control-readonly']]: readOnly,
|
|
37
|
-
}), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Toggle", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
|
|
37
|
+
}), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, labelClassName: styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.label, description: description, descriptionClassName: styleClassNames === null || styleClassNames === void 0 ? void 0 : styleClassNames.description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement(WithNativeAttributes, { ...nativeControlProps, tag: "input", componentName: "Toggle", nativeAttributes: nativeInputAttributes, ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
|
|
38
38
|
// empty handler to suppress React controllability warning
|
|
39
39
|
onChange: () => { } })), onClick: () => {
|
|
40
40
|
var _a;
|
package/toggle/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.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,EAEL,6BAA6B,GAC9B,MAAM,kEAAkE,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAE9D,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAG5E,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEzE,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataToggleComponent } from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\nimport { getAbstractSwitchStyles, getStyledControlStyle } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {\n styleClassNames?: StyleClassNames;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\n// Style API v2\ninterface StyleClassNames {\n control?: string;\n label?: string;\n description?: string;\n}\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n (\n {\n controlId,\n checked,\n name,\n disabled,\n readOnly,\n children,\n description,\n ariaLabel,\n ariaControls,\n onFocus,\n onBlur,\n onChange,\n nativeInputAttributes,\n __internalRootRef,\n style,\n styleClassNames,\n __injectAnalyticsComponentMetadata,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataToggleComponent = {\n name: 'awsui.Toggle',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styleClassNames?.control, styles['toggle-control'], {\n [styles['toggle-control-checked']]: checked,\n [styles['toggle-control-disabled']]: disabled,\n [styles['toggle-control-readonly']]: readOnly,\n })}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n labelClassName={styleClassNames?.label}\n description={description}\n descriptionClassName={styleClassNames?.description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"Toggle\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(onChange, { checked: !checked });\n }}\n styledControl={\n /*Using span, not div for HTML validity*/\n <span\n className={clsx(styles['toggle-handle'], {\n [styles['toggle-handle-checked']]: checked,\n [styles['toggle-handle-disabled']]: disabled,\n [styles['toggle-handle-readonly']]: readOnly,\n })}\n style={getStyledControlStyle(style, checked, disabled, readOnly)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
|
package/toggle/styles.css.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"outline": "
|
|
6
|
-
"toggle-control": "awsui_toggle-
|
|
7
|
-
"toggle-control-checked": "awsui_toggle-control-
|
|
8
|
-
"toggle-control-disabled": "awsui_toggle-control-
|
|
9
|
-
"toggle-control-readonly": "awsui_toggle-control-
|
|
10
|
-
"toggle-handle": "awsui_toggle-
|
|
11
|
-
"toggle-handle-checked": "awsui_toggle-handle-
|
|
12
|
-
"toggle-handle-disabled": "awsui_toggle-handle-
|
|
13
|
-
"toggle-handle-readonly": "awsui_toggle-handle-
|
|
4
|
+
"root": "awsui_root_4yi2u_1yvqv_40",
|
|
5
|
+
"outline": "awsui_outline_4yi2u_1yvqv_73",
|
|
6
|
+
"toggle-control": "awsui_toggle-control_4yi2u_1yvqv_95",
|
|
7
|
+
"toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1yvqv_115",
|
|
8
|
+
"toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1yvqv_118",
|
|
9
|
+
"toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1yvqv_124",
|
|
10
|
+
"toggle-handle": "awsui_toggle-handle_4yi2u_1yvqv_128",
|
|
11
|
+
"toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1yvqv_153",
|
|
12
|
+
"toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1yvqv_160",
|
|
13
|
+
"toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1yvqv_164"
|
|
14
14
|
};
|
|
15
15
|
|
package/toggle/styles.scoped.css
CHANGED
|
@@ -6,7 +6,38 @@
|
|
|
6
6
|
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
7
7
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
8
8
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
9
|
-
|
|
9
|
+
@property --awsui-style-color {
|
|
10
|
+
syntax: "*";
|
|
11
|
+
inherits: false;
|
|
12
|
+
}
|
|
13
|
+
@property --awsui-style-background-color {
|
|
14
|
+
syntax: "*";
|
|
15
|
+
inherits: false;
|
|
16
|
+
}
|
|
17
|
+
@property --awsui-style-focus-ring-color {
|
|
18
|
+
syntax: "*";
|
|
19
|
+
inherits: false;
|
|
20
|
+
}
|
|
21
|
+
@property --awsui-style-focus-ring-width {
|
|
22
|
+
syntax: "*";
|
|
23
|
+
inherits: false;
|
|
24
|
+
}
|
|
25
|
+
@property --awsui-style-focus-ring-radius {
|
|
26
|
+
syntax: "*";
|
|
27
|
+
inherits: false;
|
|
28
|
+
}
|
|
29
|
+
@property --awsui-style-focus-ring-gutter-block {
|
|
30
|
+
syntax: "*";
|
|
31
|
+
inherits: false;
|
|
32
|
+
}
|
|
33
|
+
@property --awsui-style-focus-ring-gutter-inline {
|
|
34
|
+
syntax: "*";
|
|
35
|
+
inherits: false;
|
|
36
|
+
}
|
|
37
|
+
/* awsui:style-api-slot name=control tokens=color, background-color, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
|
|
38
|
+
/* awsui:style-api-slot name=label tokens=color */
|
|
39
|
+
/* awsui:style-api-slot name=description tokens=color */
|
|
40
|
+
.awsui_root_4yi2u_1yvqv_40:not(#\9) {
|
|
10
41
|
border-collapse: separate;
|
|
11
42
|
border-spacing: 0;
|
|
12
43
|
box-sizing: border-box;
|
|
@@ -39,63 +70,69 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
39
70
|
display: flex;
|
|
40
71
|
}
|
|
41
72
|
|
|
42
|
-
.
|
|
43
|
-
--awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #006ce0));
|
|
73
|
+
.awsui_outline_4yi2u_1yvqv_73:not(#\9) {
|
|
44
74
|
position: relative;
|
|
45
75
|
}
|
|
46
|
-
.
|
|
76
|
+
.awsui_outline_4yi2u_1yvqv_73:not(#\9) {
|
|
47
77
|
outline: 2px dotted transparent;
|
|
48
|
-
outline-offset: calc(2px - 1px);
|
|
78
|
+
outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, 2px) - 1px);
|
|
49
79
|
}
|
|
50
|
-
.
|
|
80
|
+
.awsui_outline_4yi2u_1yvqv_73:not(#\9)::before {
|
|
51
81
|
content: " ";
|
|
52
82
|
display: block;
|
|
53
83
|
position: absolute;
|
|
54
|
-
inset-inline-start: calc(-1 * 2px);
|
|
55
|
-
inset-block-start: calc(-1 * 2px);
|
|
56
|
-
inline-size: calc(100% + 2px + 2px);
|
|
57
|
-
block-size: calc(100% + 2px + 2px);
|
|
58
|
-
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
|
|
59
|
-
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
|
|
60
|
-
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
|
|
61
|
-
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px));
|
|
62
|
-
box-shadow: var(--awsui-style-focus-ring-
|
|
84
|
+
inset-inline-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
|
|
85
|
+
inset-block-start: calc(-1 * var(--awsui-internal-style-focus-ring-gutter-block, 2px));
|
|
86
|
+
inline-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-inline, 2px) + var(--awsui-internal-style-focus-ring-gutter-inline, 2px));
|
|
87
|
+
block-size: calc(100% + var(--awsui-internal-style-focus-ring-gutter-block, 2px) + var(--awsui-internal-style-focus-ring-gutter-block, 2px));
|
|
88
|
+
border-start-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
|
|
89
|
+
border-start-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
|
|
90
|
+
border-end-start-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
|
|
91
|
+
border-end-end-radius: var(--awsui-internal-style-focus-ring-radius, var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 4px)));
|
|
92
|
+
box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-style-focus-ring-border-width-66120l, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #006ce0)));
|
|
63
93
|
}
|
|
64
94
|
|
|
65
|
-
.awsui_toggle-
|
|
95
|
+
.awsui_toggle-control_4yi2u_1yvqv_95:not(#\9) {
|
|
96
|
+
--awsui-internal-style-color: var(--awsui-style-color);
|
|
97
|
+
--awsui-internal-style-background-color: var(--awsui-style-background-color);
|
|
98
|
+
--awsui-internal-style-focus-ring-color: var(--awsui-style-focus-ring-color);
|
|
99
|
+
--awsui-internal-style-focus-ring-width: var(--awsui-style-focus-ring-width);
|
|
100
|
+
--awsui-internal-style-focus-ring-radius: var(--awsui-style-focus-ring-radius);
|
|
101
|
+
--awsui-internal-style-focus-ring-gutter-block: var(--awsui-style-focus-ring-gutter-block);
|
|
102
|
+
--awsui-internal-style-focus-ring-gutter-inline: var(--awsui-style-focus-ring-gutter-inline);
|
|
66
103
|
forced-color-adjust: none;
|
|
67
104
|
margin-block-start: calc((var(--line-height-body-m-5xw6xo, 20px) - 16px) / 2);
|
|
68
105
|
min-block-size: 16px;
|
|
69
106
|
min-inline-size: 24px;
|
|
70
107
|
block-size: 16px;
|
|
71
108
|
inline-size: 24px;
|
|
72
|
-
background: var(--color-background-toggle-default-quxg9w, #424650);
|
|
109
|
+
background: var(--awsui-internal-style-background-color, var(--color-background-toggle-default-quxg9w, #424650));
|
|
73
110
|
border-start-start-radius: 8px;
|
|
74
111
|
border-start-end-radius: 8px;
|
|
75
112
|
border-end-start-radius: 8px;
|
|
76
113
|
border-end-end-radius: 8px;
|
|
77
114
|
}
|
|
78
|
-
.awsui_toggle-control-
|
|
79
|
-
background: var(--color-background-control-checked-ksqwhc, #006ce0);
|
|
115
|
+
.awsui_toggle-control-checked_4yi2u_1yvqv_115:not(#\9) {
|
|
116
|
+
background: var(--awsui-internal-style-background-color, var(--color-background-control-checked-ksqwhc, #006ce0));
|
|
80
117
|
}
|
|
81
|
-
.awsui_toggle-control-
|
|
82
|
-
background: var(--color-background-control-disabled-m61b8s, #dedee3);
|
|
118
|
+
.awsui_toggle-control-disabled_4yi2u_1yvqv_118:not(#\9) {
|
|
119
|
+
background: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #dedee3));
|
|
83
120
|
}
|
|
84
|
-
.awsui_toggle-control-
|
|
85
|
-
background: var(--color-background-toggle-checked-disabled-81loy3, #b8e7ff);
|
|
121
|
+
.awsui_toggle-control-disabled_4yi2u_1yvqv_118.awsui_toggle-control-checked_4yi2u_1yvqv_115:not(#\9) {
|
|
122
|
+
background: var(--awsui-internal-style-background-color, var(--color-background-toggle-checked-disabled-81loy3, #b8e7ff));
|
|
86
123
|
}
|
|
87
|
-
.awsui_toggle-control-
|
|
88
|
-
background: var(--color-background-control-disabled-m61b8s, #dedee3);
|
|
124
|
+
.awsui_toggle-control-readonly_4yi2u_1yvqv_124:not(#\9) {
|
|
125
|
+
background: var(--awsui-internal-style-background-color, var(--color-background-control-disabled-m61b8s, #dedee3));
|
|
89
126
|
}
|
|
90
127
|
|
|
91
|
-
.awsui_toggle-
|
|
128
|
+
.awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9) {
|
|
92
129
|
display: block;
|
|
93
130
|
position: absolute;
|
|
94
131
|
border-start-start-radius: 6px;
|
|
95
132
|
border-start-end-radius: 6px;
|
|
96
133
|
border-end-start-radius: 6px;
|
|
97
134
|
border-end-end-radius: 6px;
|
|
98
|
-
background: var(--color-foreground-control-default-poakg0, #ffffff);
|
|
135
|
+
background: var(--awsui-internal-style-color, var(--color-foreground-control-default-poakg0, #ffffff));
|
|
99
136
|
box-shadow: 1px 1px var(--color-shadow-toggle-handle-h7hwyu, rgba(0, 0, 0, 0.25));
|
|
100
137
|
inline-size: 12px;
|
|
101
138
|
block-size: 12px;
|
|
@@ -104,29 +141,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
104
141
|
transition: transform var(--motion-duration-fast-yb0m8k, 90ms) var(--motion-easing-ease-out-quart-k5q7pi, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-yb0m8k, 90ms) var(--motion-easing-ease-out-quart-k5q7pi, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
105
142
|
}
|
|
106
143
|
@media (prefers-reduced-motion: reduce) {
|
|
107
|
-
.awsui_toggle-
|
|
144
|
+
.awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9) {
|
|
108
145
|
animation: none;
|
|
109
146
|
transition: none;
|
|
110
147
|
}
|
|
111
148
|
}
|
|
112
|
-
.awsui-motion-disabled .awsui_toggle-
|
|
149
|
+
.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1yvqv_128:not(#\9) {
|
|
113
150
|
animation: none;
|
|
114
151
|
transition: none;
|
|
115
152
|
}
|
|
116
|
-
.awsui_toggle-handle-
|
|
153
|
+
.awsui_toggle-handle-checked_4yi2u_1yvqv_153:not(#\9) {
|
|
117
154
|
transform: translateX(8px);
|
|
118
155
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
119
156
|
}
|
|
120
|
-
.awsui_toggle-handle-
|
|
157
|
+
.awsui_toggle-handle-checked_4yi2u_1yvqv_153:not(#\9):dir(rtl) {
|
|
121
158
|
transform: translateX(-8px);
|
|
122
159
|
}
|
|
123
|
-
.awsui_toggle-handle-
|
|
124
|
-
background: var(--color-foreground-control-disabled-bikivj, #ffffff);
|
|
160
|
+
.awsui_toggle-handle-disabled_4yi2u_1yvqv_160:not(#\9) {
|
|
161
|
+
background: var(--awsui-internal-style-color, var(--color-foreground-control-disabled-bikivj, #ffffff));
|
|
125
162
|
box-shadow: none;
|
|
126
163
|
}
|
|
127
|
-
.awsui_toggle-handle-
|
|
164
|
+
.awsui_toggle-handle-readonly_4yi2u_1yvqv_164:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1yvqv_160) {
|
|
128
165
|
box-shadow: none;
|
|
129
166
|
}
|
|
130
|
-
.awsui_toggle-handle-
|
|
131
|
-
background: var(--color-foreground-control-read-only-8sqxyy, #656871);
|
|
167
|
+
.awsui_toggle-handle-readonly_4yi2u_1yvqv_164:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1yvqv_160).awsui_toggle-handle-checked_4yi2u_1yvqv_153 {
|
|
168
|
+
background: var(--awsui-internal-style-color, var(--color-foreground-control-read-only-8sqxyy, #656871));
|
|
132
169
|
}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"outline": "
|
|
7
|
-
"toggle-control": "awsui_toggle-
|
|
8
|
-
"toggle-control-checked": "awsui_toggle-control-
|
|
9
|
-
"toggle-control-disabled": "awsui_toggle-control-
|
|
10
|
-
"toggle-control-readonly": "awsui_toggle-control-
|
|
11
|
-
"toggle-handle": "awsui_toggle-
|
|
12
|
-
"toggle-handle-checked": "awsui_toggle-handle-
|
|
13
|
-
"toggle-handle-disabled": "awsui_toggle-handle-
|
|
14
|
-
"toggle-handle-readonly": "awsui_toggle-handle-
|
|
5
|
+
"root": "awsui_root_4yi2u_1yvqv_40",
|
|
6
|
+
"outline": "awsui_outline_4yi2u_1yvqv_73",
|
|
7
|
+
"toggle-control": "awsui_toggle-control_4yi2u_1yvqv_95",
|
|
8
|
+
"toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1yvqv_115",
|
|
9
|
+
"toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1yvqv_118",
|
|
10
|
+
"toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1yvqv_124",
|
|
11
|
+
"toggle-handle": "awsui_toggle-handle_4yi2u_1yvqv_128",
|
|
12
|
+
"toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1yvqv_153",
|
|
13
|
+
"toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1yvqv_160",
|
|
14
|
+
"toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1yvqv_164"
|
|
15
15
|
};
|
|
16
16
|
|