@cloudscape-design/components 3.0.670 → 3.0.672
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/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/index.js +9 -2
- package/app-layout/visual-refresh-toolbar/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/interfaces.d.ts +2 -0
- package/app-layout/visual-refresh-toolbar/interfaces.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/interfaces.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.js +5 -2
- package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/breadcrumb-group/index.d.ts.map +1 -1
- package/breadcrumb-group/index.js +5 -0
- package/breadcrumb-group/index.js.map +1 -1
- package/checkbox/base-checkbox.d.ts +7 -0
- package/checkbox/base-checkbox.d.ts.map +1 -1
- package/checkbox/base-checkbox.js.map +1 -1
- package/checkbox/internal.d.ts.map +1 -1
- package/checkbox/internal.js +3 -3
- package/checkbox/internal.js.map +1 -1
- package/date-picker/interfaces.d.ts +1 -1
- package/date-picker/interfaces.js.map +1 -1
- package/date-range-picker/index.d.ts.map +1 -1
- package/date-range-picker/index.js +1 -3
- package/date-range-picker/index.js.map +1 -1
- package/input/interfaces.d.ts +1 -1
- package/input/interfaces.js.map +1 -1
- package/internal/base-component/styles.scoped.css +5 -0
- package/internal/components/abstract-switch/index.d.ts +2 -1
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +2 -2
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/button-trigger/index.d.ts.map +1 -1
- package/internal/components/button-trigger/index.js +5 -2
- package/internal/components/button-trigger/index.js.map +1 -1
- package/internal/components/button-trigger/styles.css.js +11 -11
- package/internal/components/button-trigger/styles.scoped.css +26 -26
- package/internal/components/button-trigger/styles.selectors.js +11 -11
- package/internal/components/checkbox-icon/index.d.ts +2 -1
- package/internal/components/checkbox-icon/index.d.ts.map +1 -1
- package/internal/components/checkbox-icon/index.js +6 -2
- package/internal/components/checkbox-icon/index.js.map +1 -1
- package/internal/components/checkbox-icon/styles.css.js +9 -7
- package/internal/components/checkbox-icon/styles.scoped.css +11 -8
- package/internal/components/checkbox-icon/styles.selectors.js +9 -7
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +1 -0
- package/internal/generated/styles/tokens.js +1 -0
- package/internal/generated/theming/index.cjs +33 -0
- package/internal/generated/theming/index.cjs.d.ts +8 -0
- package/internal/generated/theming/index.d.ts +8 -0
- package/internal/generated/theming/index.js +33 -0
- package/internal/manifest.json +1 -1
- package/internal/plugins/api.d.ts +4 -0
- package/internal/plugins/api.d.ts.map +1 -1
- package/internal/plugins/api.js +3 -0
- package/internal/plugins/api.js.map +1 -1
- package/internal/plugins/controllers/breadcrumbs.d.ts +31 -0
- package/internal/plugins/controllers/breadcrumbs.d.ts.map +1 -0
- package/internal/plugins/controllers/breadcrumbs.js +70 -0
- package/internal/plugins/controllers/breadcrumbs.js.map +1 -0
- package/internal/plugins/helpers/use-global-breadcrumbs.d.ts +4 -0
- package/internal/plugins/helpers/use-global-breadcrumbs.d.ts.map +1 -0
- package/internal/plugins/helpers/use-global-breadcrumbs.js +42 -0
- package/internal/plugins/helpers/use-global-breadcrumbs.js.map +1 -0
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +3 -3
- package/multiselect/internal.js.map +1 -1
- package/package.json +1 -1
- package/radio-group/interfaces.d.ts +6 -0
- package/radio-group/interfaces.d.ts.map +1 -1
- package/radio-group/interfaces.js.map +1 -1
- package/radio-group/internal.d.ts.map +1 -1
- package/radio-group/internal.js +3 -3
- package/radio-group/internal.js.map +1 -1
- package/radio-group/radio-button.d.ts +1 -0
- package/radio-group/radio-button.d.ts.map +1 -1
- package/radio-group/radio-button.js +7 -3
- package/radio-group/radio-button.js.map +1 -1
- package/radio-group/styles.css.js +10 -9
- package/radio-group/styles.scoped.css +19 -15
- package/radio-group/styles.selectors.js +10 -9
- package/select/interfaces.d.ts +5 -0
- package/select/interfaces.d.ts.map +1 -1
- package/select/interfaces.js.map +1 -1
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +2 -2
- package/select/internal.js.map +1 -1
- package/select/parts/trigger.d.ts +1 -0
- package/select/parts/trigger.d.ts.map +1 -1
- package/select/parts/trigger.js +2 -2
- package/select/parts/trigger.js.map +1 -1
- package/slider/interfaces.d.ts +6 -0
- package/slider/interfaces.d.ts.map +1 -1
- package/slider/interfaces.js.map +1 -1
- package/slider/internal.d.ts +1 -1
- package/slider/internal.d.ts.map +1 -1
- package/slider/internal.js +15 -6
- package/slider/internal.js.map +1 -1
- package/slider/styles.css.js +27 -25
- package/slider/styles.scoped.css +129 -62
- package/slider/styles.selectors.js +27 -25
- package/slider/tick-marks.d.ts +1 -0
- package/slider/tick-marks.d.ts.map +1 -1
- package/slider/tick-marks.js +2 -1
- package/slider/tick-marks.js.map +1 -1
- package/slider/utils.d.ts +1 -0
- package/slider/utils.d.ts.map +1 -1
- package/slider/utils.js +1 -0
- package/slider/utils.js.map +1 -1
- package/tiles/interfaces.d.ts +6 -0
- package/tiles/interfaces.d.ts.map +1 -1
- package/tiles/interfaces.js.map +1 -1
- package/tiles/internal.d.ts.map +1 -1
- package/tiles/internal.js +3 -3
- package/tiles/internal.js.map +1 -1
- package/tiles/styles.css.js +30 -29
- package/tiles/styles.scoped.css +75 -70
- package/tiles/styles.selectors.js +30 -29
- package/tiles/tile.d.ts +1 -0
- package/tiles/tile.d.ts.map +1 -1
- package/tiles/tile.js +4 -4
- package/tiles/tile.js.map +1 -1
- package/toggle/internal.d.ts.map +1 -1
- package/toggle/internal.js +4 -2
- package/toggle/internal.js.map +1 -1
- package/toggle/styles.css.js +10 -8
- package/toggle/styles.scoped.css +23 -14
- package/toggle/styles.selectors.js +10 -8
- package/token-group/dismiss-button.d.ts +1 -0
- package/token-group/dismiss-button.d.ts.map +1 -1
- package/token-group/dismiss-button.js +7 -2
- package/token-group/dismiss-button.js.map +1 -1
- package/token-group/interfaces.d.ts +5 -0
- package/token-group/interfaces.d.ts.map +1 -1
- package/token-group/interfaces.js.map +1 -1
- package/token-group/internal.d.ts +1 -1
- package/token-group/internal.d.ts.map +1 -1
- package/token-group/internal.js +2 -2
- package/token-group/internal.js.map +1 -1
- package/token-group/styles.css.js +10 -9
- package/token-group/styles.scoped.css +33 -19
- package/token-group/styles.selectors.js +10 -9
- package/token-group/token.d.ts +2 -1
- package/token-group/token.d.ts.map +1 -1
- package/token-group/token.js +3 -3
- package/token-group/token.js.map +1 -1
- package/top-navigation/1.0-beta/interfaces.d.ts +1 -1
- package/top-navigation/1.0-beta/interfaces.js.map +1 -1
- package/top-navigation/interfaces.d.ts +1 -1
- package/top-navigation/interfaces.js.map +1 -1
package/tiles/tile.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAWrE,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAa,EAAE,YAAyC,EAAE,EAAE;IACjH,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;gBAC7B,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,QAAQ,GAClB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n readOnly?: boolean;\n}\n\nexport const Tile = React.forwardRef(\n ({ item, selected, name, breakpoint, onChange, readOnly }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const isVisualRefresh = useVisualRefresh();\n\n const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description || item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n { [styles.readonly]: readOnly },\n { [styles.refresh]: isVisualRefresh },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled || readOnly) {\n return;\n }\n internalRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={mergedRef}\n name={name}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n controlId={item.controlId}\n readOnly={readOnly}\n />\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n }\n);\n"]}
|
package/toggle/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,uHA6EnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/toggle/internal.js
CHANGED
|
@@ -10,7 +10,7 @@ import { getBaseProps } from '../internal/base-component';
|
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
12
12
|
const InternalToggle = React.forwardRef((_a, ref) => {
|
|
13
|
-
var { controlId, checked, name, disabled, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
|
|
13
|
+
var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
|
|
14
14
|
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
|
|
15
15
|
const baseProps = getBaseProps(rest);
|
|
16
16
|
const checkboxRef = useRef(null);
|
|
@@ -18,7 +18,8 @@ const InternalToggle = React.forwardRef((_a, ref) => {
|
|
|
18
18
|
return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
|
|
19
19
|
[styles['toggle-control-checked']]: checked,
|
|
20
20
|
[styles['toggle-control-disabled']]: disabled,
|
|
21
|
-
|
|
21
|
+
[styles['toggle-control-readonly']]: readOnly,
|
|
22
|
+
}), 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("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
|
|
22
23
|
// empty handler to suppress React controllability warning
|
|
23
24
|
onChange: () => { } }))), onClick: () => {
|
|
24
25
|
var _a;
|
|
@@ -29,6 +30,7 @@ const InternalToggle = React.forwardRef((_a, ref) => {
|
|
|
29
30
|
React.createElement("span", { className: clsx(styles['toggle-handle'], {
|
|
30
31
|
[styles['toggle-handle-checked']]: checked,
|
|
31
32
|
[styles['toggle-handle-disabled']]: disabled,
|
|
33
|
+
[styles['toggle-handle-readonly']]: readOnly,
|
|
32
34
|
}) }), __internalRootRef: __internalRootRef })));
|
|
33
35
|
});
|
|
34
36
|
export default InternalToggle;
|
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,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAeC,EACD,GAAG,EACH,EAAE;QAjBF,EACE,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEzB,EADI,IAAI,cAdT,sKAeC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAElC,OAAO,CACL,oBAAC,cAAc,oBACT,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;YAC/C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,OAAO;YAC3C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;YAC7C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;SAC9C,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,IAAI,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,kBAAkB,CAAC,EAAE,CAAC,CACnC,+CACM,kBAAkB,IACtB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,mBACK,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC;YAC5C,0DAA0D;YAC1D,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,IAClB,CACH,EACD,OAAO,EAAE,GAAG,EAAE;;YACZ,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;QAC1D,CAAC,EACD,aAAa;QACX,yCAAyC;QACzC,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;gBACvC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,OAAO;gBAC1C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;gBAC5C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;aAC7C,CAAC,GACF,EAEJ,iBAAiB,EAAE,iBAAiB,IACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ToggleProps } from './interfaces';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\n\ntype InternalToggleProps = ToggleProps & InternalBaseComponentProps;\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 __internalRootRef = null,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(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 description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\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 />\n }\n __internalRootRef={__internalRootRef}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
|
package/toggle/styles.css.js
CHANGED
|
@@ -1,13 +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-
|
|
10
|
-
"toggle-handle
|
|
11
|
-
"toggle-handle-
|
|
4
|
+
"root": "awsui_root_4yi2u_1w171_97",
|
|
5
|
+
"outline": "awsui_outline_4yi2u_1w171_133",
|
|
6
|
+
"toggle-control": "awsui_toggle-control_4yi2u_1w171_155",
|
|
7
|
+
"toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1w171_168",
|
|
8
|
+
"toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1w171_171",
|
|
9
|
+
"toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1w171_177",
|
|
10
|
+
"toggle-handle": "awsui_toggle-handle_4yi2u_1w171_181",
|
|
11
|
+
"toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1w171_196",
|
|
12
|
+
"toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1w171_203",
|
|
13
|
+
"toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1w171_207"
|
|
12
14
|
};
|
|
13
15
|
|
package/toggle/styles.scoped.css
CHANGED
|
@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.
|
|
97
|
+
.awsui_root_4yi2u_1w171_97:not(#\9) {
|
|
98
98
|
border-collapse: separate;
|
|
99
99
|
border-spacing: 0;
|
|
100
100
|
box-sizing: border-box;
|
|
@@ -131,14 +131,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
131
131
|
display: flex;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.
|
|
134
|
+
.awsui_outline_4yi2u_1w171_133:not(#\9) {
|
|
135
135
|
position: relative;
|
|
136
136
|
}
|
|
137
|
-
.
|
|
137
|
+
.awsui_outline_4yi2u_1w171_133:not(#\9) {
|
|
138
138
|
outline: 2px dotted transparent;
|
|
139
139
|
outline-offset: calc(2px - 1px);
|
|
140
140
|
}
|
|
141
|
-
.
|
|
141
|
+
.awsui_outline_4yi2u_1w171_133:not(#\9)::before {
|
|
142
142
|
content: " ";
|
|
143
143
|
display: block;
|
|
144
144
|
position: absolute;
|
|
@@ -153,7 +153,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
153
153
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
154
154
|
}
|
|
155
155
|
|
|
156
|
-
.awsui_toggle-
|
|
156
|
+
.awsui_toggle-control_4yi2u_1w171_155:not(#\9) {
|
|
157
157
|
forced-color-adjust: none;
|
|
158
158
|
margin-block-start: calc((var(--line-height-body-m-30ar75, 20px) - 16px) / 2);
|
|
159
159
|
min-block-size: 16px;
|
|
@@ -166,17 +166,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
166
166
|
border-end-start-radius: 8px;
|
|
167
167
|
border-end-end-radius: 8px;
|
|
168
168
|
}
|
|
169
|
-
.awsui_toggle-control-
|
|
169
|
+
.awsui_toggle-control-checked_4yi2u_1w171_168:not(#\9) {
|
|
170
170
|
background: var(--color-background-control-checked-w517i0, #0972d3);
|
|
171
171
|
}
|
|
172
|
-
.awsui_toggle-control-
|
|
172
|
+
.awsui_toggle-control-disabled_4yi2u_1w171_171:not(#\9) {
|
|
173
173
|
background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
174
174
|
}
|
|
175
|
-
.awsui_toggle-control-
|
|
175
|
+
.awsui_toggle-control-disabled_4yi2u_1w171_171.awsui_toggle-control-checked_4yi2u_1w171_168:not(#\9) {
|
|
176
176
|
background: var(--color-background-toggle-checked-disabled-uqvx2z, #b5d6f4);
|
|
177
177
|
}
|
|
178
|
+
.awsui_toggle-control-readonly_4yi2u_1w171_177:not(#\9) {
|
|
179
|
+
background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
|
|
180
|
+
}
|
|
178
181
|
|
|
179
|
-
.awsui_toggle-
|
|
182
|
+
.awsui_toggle-handle_4yi2u_1w171_181:not(#\9) {
|
|
180
183
|
display: block;
|
|
181
184
|
position: absolute;
|
|
182
185
|
border-start-start-radius: 6px;
|
|
@@ -191,24 +194,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
191
194
|
inset-inline-start: 2px;
|
|
192
195
|
transition: transform var(--motion-duration-fast-sbm3r7, 90ms) var(--motion-easing-ease-out-quart-rrej5m, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-sbm3r7, 90ms) var(--motion-easing-ease-out-quart-rrej5m, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
193
196
|
}
|
|
194
|
-
.awsui_toggle-handle-
|
|
197
|
+
.awsui_toggle-handle-checked_4yi2u_1w171_196:not(#\9) {
|
|
195
198
|
transform: translateX(8px);
|
|
196
199
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
197
200
|
}
|
|
198
|
-
.awsui_toggle-handle-
|
|
201
|
+
.awsui_toggle-handle-checked_4yi2u_1w171_196:not(#\9):dir(rtl) {
|
|
199
202
|
transform: translateX(-8px);
|
|
200
203
|
}
|
|
201
|
-
.awsui_toggle-handle-
|
|
204
|
+
.awsui_toggle-handle-disabled_4yi2u_1w171_203:not(#\9) {
|
|
202
205
|
background: var(--color-foreground-control-disabled-zmz2k2, #ffffff);
|
|
203
206
|
box-shadow: none;
|
|
204
207
|
}
|
|
208
|
+
.awsui_toggle-handle-readonly_4yi2u_1w171_207:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1w171_203) {
|
|
209
|
+
box-shadow: none;
|
|
210
|
+
}
|
|
211
|
+
.awsui_toggle-handle-readonly_4yi2u_1w171_207:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1w171_203).awsui_toggle-handle-checked_4yi2u_1w171_196 {
|
|
212
|
+
background: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
|
|
213
|
+
}
|
|
205
214
|
@media (prefers-reduced-motion: reduce) {
|
|
206
|
-
.awsui_toggle-
|
|
215
|
+
.awsui_toggle-handle_4yi2u_1w171_181:not(#\9) {
|
|
207
216
|
animation: none;
|
|
208
217
|
transition: none;
|
|
209
218
|
}
|
|
210
219
|
}
|
|
211
|
-
.awsui-motion-disabled .awsui_toggle-
|
|
220
|
+
.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1w171_181:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1w171_181:not(#\9) {
|
|
212
221
|
animation: none;
|
|
213
222
|
transition: none;
|
|
214
223
|
}
|
|
@@ -2,13 +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-
|
|
11
|
-
"toggle-handle
|
|
12
|
-
"toggle-handle-
|
|
5
|
+
"root": "awsui_root_4yi2u_1w171_97",
|
|
6
|
+
"outline": "awsui_outline_4yi2u_1w171_133",
|
|
7
|
+
"toggle-control": "awsui_toggle-control_4yi2u_1w171_155",
|
|
8
|
+
"toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1w171_168",
|
|
9
|
+
"toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1w171_171",
|
|
10
|
+
"toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1w171_177",
|
|
11
|
+
"toggle-handle": "awsui_toggle-handle_4yi2u_1w171_181",
|
|
12
|
+
"toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1w171_196",
|
|
13
|
+
"toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1w171_203",
|
|
14
|
+
"toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1w171_207"
|
|
13
15
|
};
|
|
14
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}
|
|
1
|
+
{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}
|
|
@@ -4,8 +4,13 @@ import React, { forwardRef } from 'react';
|
|
|
4
4
|
import styles from './styles.css.js';
|
|
5
5
|
import InternalIcon from '../icon/internal';
|
|
6
6
|
export default forwardRef(DismissButton);
|
|
7
|
-
function DismissButton({ disabled, dismissLabel, onDismiss }, ref) {
|
|
8
|
-
return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled ? true : undefined, onClick:
|
|
7
|
+
function DismissButton({ disabled, dismissLabel, onDismiss, readOnly }, ref) {
|
|
8
|
+
return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled || readOnly ? true : undefined, onClick: () => {
|
|
9
|
+
if (disabled || readOnly || !onDismiss) {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
onDismiss();
|
|
13
|
+
}, "aria-label": dismissLabel },
|
|
9
14
|
React.createElement(InternalIcon, { name: "close" })));
|
|
10
15
|
}
|
|
11
16
|
//# sourceMappingURL=dismiss-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAS5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAsB,EACnE,GAA2B;IAE3B,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,mBACpB,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE;gBACtC,OAAO;aACR;YAED,SAAS,EAAE,CAAC;QACd,CAAC,gBACW,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n disabled?: boolean;\n readOnly?: boolean;\n onDismiss?: () => void;\n dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton(\n { disabled, dismissLabel, onDismiss, readOnly }: DismissButtonProps,\n ref: Ref<HTMLButtonElement>\n) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={styles['dismiss-button']}\n aria-disabled={disabled || readOnly ? true : undefined}\n onClick={() => {\n if (disabled || readOnly || !onDismiss) {\n return;\n }\n\n onDismiss();\n }}\n aria-label={dismissLabel}\n >\n <InternalIcon name=\"close\" />\n </button>\n );\n}\n"]}
|
|
@@ -52,6 +52,11 @@ export interface TokenGroupProps extends BaseComponentProps {
|
|
|
52
52
|
* Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.
|
|
53
53
|
*/
|
|
54
54
|
limitShowMoreAriaLabel?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Specifies if the control is read-only, which prevents the
|
|
57
|
+
* user from modifying the value. A read-only control is still focusable.
|
|
58
|
+
*/
|
|
59
|
+
readOnly?: boolean;
|
|
55
60
|
}
|
|
56
61
|
export declare namespace TokenGroupProps {
|
|
57
62
|
type Alignment = 'horizontal' | 'vertical';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACrE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/token-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACrE;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;IAClD,UAAiB,IAAI;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB;IAED,UAAiB,aAAa;QAC5B,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,WAAW;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token-group/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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface TokenGroupProps extends BaseComponentProps {\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TokenGroupProps.I18nStrings;\n\n /**\n * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n */\n limit?: number;\n\n /**\n * Specifies the direction in which tokens are aligned (`horizontal | vertical`).\n */\n alignment?: TokenGroupProps.Alignment;\n\n /**\n * Removes any outer padding from the component.\n * We recommend to always enable this property.\n */\n disableOuterPadding?: boolean;\n\n /**\n *\n * An array of objects representing token items. Each token has the following properties:\n *\n * - `label` (string) - Title text of the token.\n * - `description` (string) - (Optional) Further information about the token that appears below the label.\n * - `disabled` [boolean] - (Optional) Determines whether the token is disabled.\n * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.\n * - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.\n * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.\n * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n * - `iconUrl` (string) - (Optional) URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n */\n items?: ReadonlyArray<TokenGroupProps.Item>;\n /**\n * Called when the user clicks on the dismiss button. The token won't be automatically removed.\n * Make sure that you add a listener to this event to update your application state.\n */\n onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;\n /**\n * Adds an `aria-label` to the \"Show fewer\" button.\n * Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.\n */\n limitShowFewerAriaLabel?: string;\n /**\n * Adds an `aria-label` to the \"Show more\" button.\n * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.\n */\n limitShowMoreAriaLabel?: string;\n}\n\nexport namespace TokenGroupProps {\n export type Alignment = 'horizontal' | 'vertical';\n export interface Item {\n label?: string;\n disabled?: boolean;\n labelTag?: string;\n description?: string;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n tags?: ReadonlyArray<string>;\n dismissLabel?: string;\n }\n\n export interface DismissDetail {\n itemIndex: number;\n }\n\n export interface I18nStrings {\n limitShowFewer?: string;\n limitShowMore?: string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/token-group/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';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { IconProps } from '../icon/interfaces';\n\nexport interface TokenGroupProps extends BaseComponentProps {\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: TokenGroupProps.I18nStrings;\n\n /**\n * Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.\n */\n limit?: number;\n\n /**\n * Specifies the direction in which tokens are aligned (`horizontal | vertical`).\n */\n alignment?: TokenGroupProps.Alignment;\n\n /**\n * Removes any outer padding from the component.\n * We recommend to always enable this property.\n */\n disableOuterPadding?: boolean;\n\n /**\n *\n * An array of objects representing token items. Each token has the following properties:\n *\n * - `label` (string) - Title text of the token.\n * - `description` (string) - (Optional) Further information about the token that appears below the label.\n * - `disabled` [boolean] - (Optional) Determines whether the token is disabled.\n * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the token.\n * - `dismissLabel` (string) - (Optional) Adds an `aria-label` to the dismiss button.\n * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.\n * - `iconAlt` (string) - (Optional) Specifies alternate text for a custom icon, for use with `iconUrl`.\n * - `iconUrl` (string) - (Optional) URL of a custom icon.\n * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n */\n items?: ReadonlyArray<TokenGroupProps.Item>;\n /**\n * Called when the user clicks on the dismiss button. The token won't be automatically removed.\n * Make sure that you add a listener to this event to update your application state.\n */\n onDismiss?: NonCancelableEventHandler<TokenGroupProps.DismissDetail>;\n /**\n * Adds an `aria-label` to the \"Show fewer\" button.\n * Use to assign unique labels when there are multiple token groups with the same `limitShowFewer` label on one page.\n */\n limitShowFewerAriaLabel?: string;\n /**\n * Adds an `aria-label` to the \"Show more\" button.\n * Use to assign unique labels when there are multiple token groups with the same `limitShowMore` label on one page.\n */\n limitShowMoreAriaLabel?: string;\n /**\n * Specifies if the control is read-only, which prevents the\n * user from modifying the value. A read-only control is still focusable.\n */\n readOnly?: boolean;\n}\n\nexport namespace TokenGroupProps {\n export type Alignment = 'horizontal' | 'vertical';\n export interface Item {\n label?: string;\n disabled?: boolean;\n labelTag?: string;\n description?: string;\n iconAlt?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n tags?: ReadonlyArray<string>;\n dismissLabel?: string;\n }\n\n export interface DismissDetail {\n itemIndex: number;\n }\n\n export interface I18nStrings {\n limitShowFewer?: string;\n limitShowMore?: string;\n }\n}\n"]}
|
|
@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
|
|
|
3
3
|
import { TokenGroupProps } from './interfaces';
|
|
4
4
|
import { SomeRequired } from '../internal/types';
|
|
5
5
|
type InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;
|
|
6
|
-
export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, __internalRootRef, ...props }: InternalTokenGroupProps): JSX.Element;
|
|
6
|
+
export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef, ...props }: InternalTokenGroupProps): JSX.Element;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,KAAK,uBAAuB,GAAG,YAAY,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEjH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,uBAAuB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,KAAK,uBAAuB,GAAG,YAAY,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEjH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,uBAAuB,eAkDzB"}
|
package/token-group/internal.js
CHANGED
|
@@ -11,7 +11,7 @@ import styles from './styles.css.js';
|
|
|
11
11
|
import TokenList from '../internal/components/token-list';
|
|
12
12
|
import { Token } from './token';
|
|
13
13
|
export default function InternalTokenGroup(_a) {
|
|
14
|
-
var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "__internalRootRef"]);
|
|
14
|
+
var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "readOnly", "__internalRootRef"]);
|
|
15
15
|
checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);
|
|
16
16
|
const [removedItemIndex, setRemovedItemIndex] = useState(null);
|
|
17
17
|
const baseProps = getBaseProps(props);
|
|
@@ -20,7 +20,7 @@ export default function InternalTokenGroup(_a) {
|
|
|
20
20
|
React.createElement(TokenList, { alignment: alignment, items: items, limit: limit, renderItem: (item, itemIndex) => (React.createElement(Token, { ariaLabel: item.label, dismissLabel: item.dismissLabel, onDismiss: () => {
|
|
21
21
|
fireNonCancelableEvent(onDismiss, { itemIndex });
|
|
22
22
|
setRemovedItemIndex(itemIndex);
|
|
23
|
-
}, disabled: item.disabled },
|
|
23
|
+
}, disabled: item.disabled, readOnly: readOnly },
|
|
24
24
|
React.createElement(Option, { option: item, isGenericGroup: false }))), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, moveFocusNextToIndex: removedItemIndex, onExpandedClick: isExpanded => {
|
|
25
25
|
if (isExpanded && limit) {
|
|
26
26
|
setRemovedItemIndex(limit);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAKjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/token-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAKjE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAYjB;QAZiB,EACzC,SAAS,EACT,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,iBAAiB,OAEO,EADrB,KAAK,cAXiC,wKAY1C,CADS;IAER,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,WAAW,CAAC,EAC/B,mBAAmB,IAAI,MAAM,CAAC,YAAY,CAAC,CAC5C,EACD,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,KAAK,IACJ,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,GAAG,EAAE;oBACd,sBAAsB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;oBACjD,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBACjC,CAAC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,QAAQ;gBAElB,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,GAAI,CACzC,CACT,EACD,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,uBAAuB,EAChD,sBAAsB,EAAE,sBAAsB,EAC9C,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EAAE,UAAU,CAAC,EAAE;gBAC5B,IAAI,UAAU,IAAI,KAAK,EAAE;oBACvB,mBAAmB,CAAC,KAAK,CAAC,CAAC;iBAC5B;qBAAM;oBACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,GACD,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\n\nimport Option from '../internal/components/option';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { TokenGroupProps } from './interfaces';\nimport { SomeRequired } from '../internal/types';\nimport { getBaseProps } from '../internal/base-component';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from './token';\n\ntype InternalTokenGroupProps = SomeRequired<TokenGroupProps, 'items' | 'alignment'> & InternalBaseComponentProps;\n\nexport default function InternalTokenGroup({\n alignment,\n items,\n onDismiss,\n limit,\n i18nStrings,\n disableOuterPadding,\n limitShowFewerAriaLabel,\n limitShowMoreAriaLabel,\n readOnly,\n __internalRootRef,\n ...props\n}: InternalTokenGroupProps) {\n checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);\n\n const [removedItemIndex, setRemovedItemIndex] = useState<null | number>(null);\n\n const baseProps = getBaseProps(props);\n const hasItems = items.length > 0;\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.root,\n hasItems && styles['has-items'],\n disableOuterPadding && styles['no-padding']\n )}\n ref={__internalRootRef}\n >\n <TokenList\n alignment={alignment}\n items={items}\n limit={limit}\n renderItem={(item, itemIndex) => (\n <Token\n ariaLabel={item.label}\n dismissLabel={item.dismissLabel}\n onDismiss={() => {\n fireNonCancelableEvent(onDismiss, { itemIndex });\n setRemovedItemIndex(itemIndex);\n }}\n disabled={item.disabled}\n readOnly={readOnly}\n >\n <Option option={item} isGenericGroup={false} />\n </Token>\n )}\n i18nStrings={i18nStrings}\n limitShowFewerAriaLabel={limitShowFewerAriaLabel}\n limitShowMoreAriaLabel={limitShowMoreAriaLabel}\n moveFocusNextToIndex={removedItemIndex}\n onExpandedClick={isExpanded => {\n if (isExpanded && limit) {\n setRemovedItemIndex(limit);\n } else {\n setRemovedItemIndex(null);\n }\n }}\n />\n </div>\n );\n}\n"]}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"has-items": "awsui_has-
|
|
6
|
-
"no-padding": "awsui_no-
|
|
7
|
-
"dismiss-button": "awsui_dismiss-
|
|
8
|
-
"token": "
|
|
9
|
-
"token-box": "awsui_token-
|
|
10
|
-
"token-box-error": "awsui_token-box-
|
|
11
|
-
"token-box-warning": "awsui_token-box-
|
|
12
|
-
"token-box-
|
|
4
|
+
"root": "awsui_root_dm8gx_r6wxu_101",
|
|
5
|
+
"has-items": "awsui_has-items_dm8gx_r6wxu_135",
|
|
6
|
+
"no-padding": "awsui_no-padding_dm8gx_r6wxu_135",
|
|
7
|
+
"dismiss-button": "awsui_dismiss-button_dm8gx_r6wxu_139",
|
|
8
|
+
"token": "awsui_token_dm8gx_r6wxu_181",
|
|
9
|
+
"token-box": "awsui_token-box_dm8gx_r6wxu_188",
|
|
10
|
+
"token-box-error": "awsui_token-box-error_dm8gx_r6wxu_207",
|
|
11
|
+
"token-box-warning": "awsui_token-box-warning_dm8gx_r6wxu_218",
|
|
12
|
+
"token-box-readonly": "awsui_token-box-readonly_dm8gx_r6wxu_229",
|
|
13
|
+
"token-box-disabled": "awsui_token-box-disabled_dm8gx_r6wxu_243"
|
|
13
14
|
};
|
|
14
15
|
|
|
@@ -98,7 +98,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
98
98
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
99
|
SPDX-License-Identifier: Apache-2.0
|
|
100
100
|
*/
|
|
101
|
-
.
|
|
101
|
+
.awsui_root_dm8gx_r6wxu_101:not(#\9) {
|
|
102
102
|
border-collapse: separate;
|
|
103
103
|
border-spacing: 0;
|
|
104
104
|
box-sizing: border-box;
|
|
@@ -133,11 +133,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
133
133
|
-webkit-font-smoothing: auto;
|
|
134
134
|
-moz-osx-font-smoothing: auto;
|
|
135
135
|
}
|
|
136
|
-
.
|
|
136
|
+
.awsui_root_dm8gx_r6wxu_101.awsui_has-items_dm8gx_r6wxu_135:not(#\9):not(.awsui_no-padding_dm8gx_r6wxu_135) {
|
|
137
137
|
padding-block-start: var(--space-xs-zb16t3, 8px);
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
.awsui_dismiss-
|
|
140
|
+
.awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
|
|
141
141
|
margin-block-start: -1px;
|
|
142
142
|
margin-block-end: 0;
|
|
143
143
|
margin-inline-start: var(--space-xxs-p8yyaw, 4px);
|
|
@@ -149,14 +149,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
149
149
|
color: var(--color-text-button-inline-icon-default-s3yux9, #0972d3);
|
|
150
150
|
background-color: transparent;
|
|
151
151
|
}
|
|
152
|
-
body[data-awsui-focus-visible=true] .awsui_dismiss-
|
|
152
|
+
body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus {
|
|
153
153
|
position: relative;
|
|
154
154
|
}
|
|
155
|
-
body[data-awsui-focus-visible=true] .awsui_dismiss-
|
|
155
|
+
body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus {
|
|
156
156
|
outline: 2px dotted transparent;
|
|
157
157
|
outline-offset: calc(0px - 1px);
|
|
158
158
|
}
|
|
159
|
-
body[data-awsui-focus-visible=true] .awsui_dismiss-
|
|
159
|
+
body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus::before {
|
|
160
160
|
content: " ";
|
|
161
161
|
display: block;
|
|
162
162
|
position: absolute;
|
|
@@ -170,23 +170,23 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\
|
|
|
170
170
|
border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
171
171
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
172
172
|
}
|
|
173
|
-
.awsui_dismiss-
|
|
173
|
+
.awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):focus {
|
|
174
174
|
outline: none;
|
|
175
175
|
text-decoration: none;
|
|
176
176
|
}
|
|
177
|
-
.awsui_dismiss-
|
|
177
|
+
.awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
|
|
178
178
|
cursor: pointer;
|
|
179
179
|
color: var(--color-text-button-inline-icon-hover-my2daf, #033160);
|
|
180
180
|
}
|
|
181
181
|
|
|
182
|
-
.
|
|
182
|
+
.awsui_token_dm8gx_r6wxu_181:not(#\9) {
|
|
183
183
|
block-size: 100%;
|
|
184
184
|
display: flex;
|
|
185
185
|
flex-direction: column;
|
|
186
186
|
gap: var(--space-xxs-p8yyaw, 4px);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
-
.awsui_token-
|
|
189
|
+
.awsui_token-box_dm8gx_r6wxu_188:not(#\9) {
|
|
190
190
|
block-size: 100%;
|
|
191
191
|
border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
|
|
192
192
|
border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-border-item-selected-k00wlz, #0972d3);
|
|
@@ -205,38 +205,52 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_dm8gx_1tp36_139:not(#\
|
|
|
205
205
|
box-sizing: border-box;
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
-
.awsui_token-box-
|
|
208
|
+
.awsui_token-box-error_dm8gx_r6wxu_207:not(#\9) {
|
|
209
209
|
border-color: var(--color-border-status-error-dj6icm, #d91515);
|
|
210
210
|
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
211
211
|
}
|
|
212
|
-
.awsui_token-box-
|
|
212
|
+
.awsui_token-box-error_dm8gx_r6wxu_207 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
|
|
213
213
|
color: var(--color-text-interactive-default-lnx6lk, #414d5c);
|
|
214
214
|
}
|
|
215
|
-
.awsui_token-box-
|
|
215
|
+
.awsui_token-box-error_dm8gx_r6wxu_207 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
|
|
216
216
|
color: var(--color-text-interactive-hover-mj8add, #000716);
|
|
217
217
|
}
|
|
218
218
|
|
|
219
|
-
.awsui_token-box-
|
|
219
|
+
.awsui_token-box-warning_dm8gx_r6wxu_218:not(#\9) {
|
|
220
220
|
border-color: var(--color-border-status-warning-52glov, #8d6605);
|
|
221
221
|
border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
|
|
222
222
|
}
|
|
223
|
-
.awsui_token-box-
|
|
223
|
+
.awsui_token-box-warning_dm8gx_r6wxu_218 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
|
|
224
224
|
color: var(--color-text-interactive-default-lnx6lk, #414d5c);
|
|
225
225
|
}
|
|
226
|
-
.awsui_token-box-
|
|
226
|
+
.awsui_token-box-warning_dm8gx_r6wxu_218 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
|
|
227
227
|
color: var(--color-text-interactive-hover-mj8add, #000716);
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
.awsui_token-box-
|
|
230
|
+
.awsui_token-box-readonly_dm8gx_r6wxu_229:not(#\9) {
|
|
231
|
+
border-color: var(--color-border-input-disabled-rx2aau, #e9ebed);
|
|
232
|
+
background-color: var(--color-background-container-content-4un1ap, #ffffff);
|
|
233
|
+
pointer-events: none;
|
|
234
|
+
}
|
|
235
|
+
.awsui_token-box-readonly_dm8gx_r6wxu_229 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
|
|
236
|
+
color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
|
|
237
|
+
}
|
|
238
|
+
.awsui_token-box-readonly_dm8gx_r6wxu_229 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
|
|
239
|
+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
240
|
+
cursor: initial;
|
|
241
|
+
color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.awsui_token-box-disabled_dm8gx_r6wxu_243.awsui_token-box-disabled_dm8gx_r6wxu_243:not(#\9) {
|
|
231
245
|
border-color: var(--color-border-control-disabled-bv2kkn, #d1d5db);
|
|
232
246
|
background-color: var(--color-background-container-content-4un1ap, #ffffff);
|
|
233
247
|
color: var(--color-text-disabled-f4c52h, #9ba7b6);
|
|
234
248
|
pointer-events: none;
|
|
235
249
|
}
|
|
236
|
-
.awsui_token-box-
|
|
250
|
+
.awsui_token-box-disabled_dm8gx_r6wxu_243.awsui_token-box-disabled_dm8gx_r6wxu_243 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9) {
|
|
237
251
|
color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
|
|
238
252
|
}
|
|
239
|
-
.awsui_token-box-
|
|
253
|
+
.awsui_token-box-disabled_dm8gx_r6wxu_243.awsui_token-box-disabled_dm8gx_r6wxu_243 > .awsui_dismiss-button_dm8gx_r6wxu_139:not(#\9):hover {
|
|
240
254
|
cursor: initial;
|
|
241
255
|
color: var(--color-text-button-inline-icon-disabled-mz5gmn, #9ba7b6);
|
|
242
256
|
}
|
|
@@ -2,14 +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
|
-
"has-items": "awsui_has-
|
|
7
|
-
"no-padding": "awsui_no-
|
|
8
|
-
"dismiss-button": "awsui_dismiss-
|
|
9
|
-
"token": "
|
|
10
|
-
"token-box": "awsui_token-
|
|
11
|
-
"token-box-error": "awsui_token-box-
|
|
12
|
-
"token-box-warning": "awsui_token-box-
|
|
13
|
-
"token-box-
|
|
5
|
+
"root": "awsui_root_dm8gx_r6wxu_101",
|
|
6
|
+
"has-items": "awsui_has-items_dm8gx_r6wxu_135",
|
|
7
|
+
"no-padding": "awsui_no-padding_dm8gx_r6wxu_135",
|
|
8
|
+
"dismiss-button": "awsui_dismiss-button_dm8gx_r6wxu_139",
|
|
9
|
+
"token": "awsui_token_dm8gx_r6wxu_181",
|
|
10
|
+
"token-box": "awsui_token-box_dm8gx_r6wxu_188",
|
|
11
|
+
"token-box-error": "awsui_token-box-error_dm8gx_r6wxu_207",
|
|
12
|
+
"token-box-warning": "awsui_token-box-warning_dm8gx_r6wxu_218",
|
|
13
|
+
"token-box-readonly": "awsui_token-box-readonly_dm8gx_r6wxu_229",
|
|
14
|
+
"token-box-disabled": "awsui_token-box-disabled_dm8gx_r6wxu_243"
|
|
14
15
|
};
|
|
15
16
|
|
package/token-group/token.d.ts
CHANGED
|
@@ -5,12 +5,13 @@ interface TokenProps {
|
|
|
5
5
|
dismissLabel?: string;
|
|
6
6
|
onDismiss?: () => void;
|
|
7
7
|
disabled?: boolean;
|
|
8
|
+
readOnly?: boolean;
|
|
8
9
|
errorText?: React.ReactNode;
|
|
9
10
|
errorIconAriaLabel?: string;
|
|
10
11
|
warningText?: React.ReactNode;
|
|
11
12
|
warningIconAriaLabel?: string;
|
|
12
13
|
className?: string;
|
|
13
14
|
}
|
|
14
|
-
export declare function Token({ ariaLabel, disabled, dismissLabel, onDismiss, children, errorText, warningText, errorIconAriaLabel, warningIconAriaLabel, ...restProps }: TokenProps): JSX.Element;
|
|
15
|
+
export declare function Token({ ariaLabel, disabled, readOnly, dismissLabel, onDismiss, children, errorText, warningText, errorIconAriaLabel, warningIconAriaLabel, ...restProps }: TokenProps): JSX.Element;
|
|
15
16
|
export {};
|
|
16
17
|
//# sourceMappingURL=token.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../src/token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../src/token-group/token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,UAAU,eA0CZ"}
|