@cloudscape-design/components 3.0.274 → 3.0.275
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/collection-preferences/content-display/content-display-option.d.ts +13 -0
- package/collection-preferences/content-display/content-display-option.d.ts.map +1 -0
- package/collection-preferences/content-display/content-display-option.js +23 -0
- package/collection-preferences/content-display/content-display-option.js.map +1 -0
- package/collection-preferences/content-display/{sortable-item.d.ts → draggable-option.d.ts} +2 -2
- package/collection-preferences/content-display/draggable-option.d.ts.map +1 -0
- package/collection-preferences/content-display/draggable-option.js +27 -0
- package/collection-preferences/content-display/draggable-option.js.map +1 -0
- package/collection-preferences/content-display/index.d.ts.map +1 -1
- package/collection-preferences/content-display/index.js +10 -3
- package/collection-preferences/content-display/index.js.map +1 -1
- package/collection-preferences/content-display/styles.css.js +11 -15
- package/collection-preferences/content-display/styles.scoped.css +80 -62
- package/collection-preferences/content-display/styles.selectors.js +11 -15
- package/collection-preferences/styles.css.js +32 -36
- package/collection-preferences/styles.scoped.css +102 -84
- package/collection-preferences/styles.selectors.js +32 -36
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/test-utils/dom/collection-preferences/content-display-preference.js +2 -2
- package/test-utils/dom/collection-preferences/content-display-preference.js.map +1 -1
- package/test-utils/selectors/collection-preferences/content-display-preference.js +2 -2
- package/test-utils/selectors/collection-preferences/content-display-preference.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/collection-preferences/content-display/sortable-item.d.ts.map +0 -1
- package/collection-preferences/content-display/sortable-item.js +0 -52
- package/collection-preferences/content-display/sortable-item.js.map +0 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
|
|
3
|
+
import { OptionWithVisibility } from './utils';
|
|
4
|
+
export declare const getClassName: (suffix?: string) => string;
|
|
5
|
+
export interface ContentDisplayOptionProps {
|
|
6
|
+
dragHandleAriaLabel?: string;
|
|
7
|
+
listeners?: SyntheticListenerMap;
|
|
8
|
+
onToggle?: (option: OptionWithVisibility) => void;
|
|
9
|
+
option: OptionWithVisibility;
|
|
10
|
+
}
|
|
11
|
+
declare const ContentDisplayOption: React.ForwardRefExoticComponent<ContentDisplayOptionProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export default ContentDisplayOption;
|
|
13
|
+
//# sourceMappingURL=content-display-option.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content-display-option.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,QAAA,MAAM,oBAAoB,kGA8BzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import styles from '../styles.css.js';
|
|
4
|
+
import DragHandle from '../../internal/drag-handle';
|
|
5
|
+
import InternalToggle from '../../toggle/internal';
|
|
6
|
+
import React, { forwardRef } from 'react';
|
|
7
|
+
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
8
|
+
const componentPrefix = 'content-display-option';
|
|
9
|
+
export const getClassName = (suffix) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];
|
|
10
|
+
const ContentDisplayOption = forwardRef(({ dragHandleAriaLabel, listeners, onToggle, option }, ref) => {
|
|
11
|
+
const idPrefix = useUniqueId(componentPrefix);
|
|
12
|
+
const controlId = `${idPrefix}-control-${option.id}`;
|
|
13
|
+
const dragHandleAttributes = {
|
|
14
|
+
['aria-label']: [dragHandleAriaLabel, option.label].join(', '),
|
|
15
|
+
};
|
|
16
|
+
return (React.createElement("div", { ref: ref, className: getClassName('content') },
|
|
17
|
+
React.createElement(DragHandle, { attributes: dragHandleAttributes, listeners: listeners }),
|
|
18
|
+
React.createElement("label", { className: getClassName('label'), htmlFor: controlId }, option.label),
|
|
19
|
+
React.createElement("div", { className: getClassName('toggle') },
|
|
20
|
+
React.createElement(InternalToggle, { checked: !!option.visible, onChange: () => onToggle && onToggle(option), disabled: option.alwaysVisible === true, controlId: controlId }))));
|
|
21
|
+
});
|
|
22
|
+
export default ContentDisplayOption;
|
|
23
|
+
//# sourceMappingURL=content-display-option.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"content-display-option.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAS7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAC/E,GAAiC,EACjC,EAAE;IACF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IAErD,MAAM,oBAAoB,GAAG;QAC3B,CAAC,YAAY,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;KAC/D,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,oBAAC,UAAU,IAAC,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,GAAI;QAEtE,+BAAO,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,IACxD,MAAM,CAAC,KAAK,CACP;QACR,6BAAK,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC;YACpC,oBAAC,cAAc,IACb,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAC5C,QAAQ,EAAE,MAAM,CAAC,aAAa,KAAK,IAAI,EACvC,SAAS,EAAE,SAAS,GACpB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport styles from '../styles.css.js';\nimport DragHandle from '../../internal/drag-handle';\nimport InternalToggle from '../../toggle/internal';\nimport React, { ForwardedRef, forwardRef } from 'react';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\nimport { OptionWithVisibility } from './utils';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nconst componentPrefix = 'content-display-option';\nexport const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];\n\nexport interface ContentDisplayOptionProps {\n dragHandleAriaLabel?: string;\n listeners?: SyntheticListenerMap;\n onToggle?: (option: OptionWithVisibility) => void;\n option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n (\n { dragHandleAriaLabel, listeners, onToggle, option }: ContentDisplayOptionProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const idPrefix = useUniqueId(componentPrefix);\n const controlId = `${idPrefix}-control-${option.id}`;\n\n const dragHandleAttributes = {\n ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),\n };\n\n return (\n <div ref={ref} className={getClassName('content')}>\n <DragHandle attributes={dragHandleAttributes} listeners={listeners} />\n\n <label className={getClassName('label')} htmlFor={controlId}>\n {option.label}\n </label>\n <div className={getClassName('toggle')}>\n <InternalToggle\n checked={!!option.visible}\n onChange={() => onToggle && onToggle(option)}\n disabled={option.alwaysVisible === true}\n controlId={controlId}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default ContentDisplayOption;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OptionWithVisibility } from './utils';
|
|
3
|
-
export
|
|
3
|
+
export default function DraggableOption({ dragHandleAriaLabel, onKeyDown, onToggle, option, }: {
|
|
4
4
|
dragHandleAriaLabel?: string;
|
|
5
5
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
6
6
|
onToggle: (option: OptionWithVisibility) => void;
|
|
7
7
|
option: OptionWithVisibility;
|
|
8
8
|
}): JSX.Element;
|
|
9
|
-
//# sourceMappingURL=
|
|
9
|
+
//# sourceMappingURL=draggable-option.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"draggable-option.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/draggable-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,MAAM,GACP,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjD,MAAM,EAAE,oBAAoB,CAAC;CAC9B,eA+BA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { useSortable } from '@dnd-kit/sortable';
|
|
5
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
6
|
+
import ContentDisplayOption, { getClassName } from './content-display-option';
|
|
7
|
+
import clsx from 'clsx';
|
|
8
|
+
import styles from '../styles.css.js';
|
|
9
|
+
export default function DraggableOption({ dragHandleAriaLabel, onKeyDown, onToggle, option, }) {
|
|
10
|
+
const { isDragging, isSorting, listeners, setNodeRef, transform } = useSortable({
|
|
11
|
+
id: option.id,
|
|
12
|
+
});
|
|
13
|
+
const style = {
|
|
14
|
+
transform: CSS.Translate.toString(transform),
|
|
15
|
+
};
|
|
16
|
+
const combinedListeners = Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
|
|
17
|
+
if (onKeyDown) {
|
|
18
|
+
onKeyDown(event);
|
|
19
|
+
}
|
|
20
|
+
if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
|
|
21
|
+
listeners.onKeyDown(event);
|
|
22
|
+
}
|
|
23
|
+
} });
|
|
24
|
+
return (React.createElement("li", { className: clsx(getClassName(), isDragging && styles.placeholder, isSorting && styles.sorting), style: style },
|
|
25
|
+
React.createElement(ContentDisplayOption, { ref: setNodeRef, listeners: combinedListeners, dragHandleAriaLabel: dragHandleAriaLabel, onToggle: onToggle, option: option })));
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=draggable-option.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"draggable-option.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/draggable-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,OAAO,oBAAoB,EAAE,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,MAAM,GAMP;IACC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QAC9E,EAAE,EAAE,MAAM,CAAC,EAAE;KACd,CAAC,CAAC;IACH,MAAM,KAAK,GAAG;QACZ,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;KAC7C,CAAC;IAEF,MAAM,iBAAiB,mCAClB,SAAS,KACZ,SAAS,EAAE,CAAC,KAA0B,EAAE,EAAE;YACxC,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,CAAC;aAClB;YACD,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,EAAE;gBACxB,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;aAC5B;QACH,CAAC,GACF,CAAC;IAEF,OAAO,CACL,4BAAI,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK;QAC9G,oBAAC,oBAAoB,IACnB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAiB,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,CACC,CACN,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { OptionWithVisibility } from './utils';\nimport ContentDisplayOption, { getClassName } from './content-display-option';\nimport clsx from 'clsx';\nimport styles from '../styles.css.js';\n\nexport default function DraggableOption({\n dragHandleAriaLabel,\n onKeyDown,\n onToggle,\n option,\n}: {\n dragHandleAriaLabel?: string;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n onToggle: (option: OptionWithVisibility) => void;\n option: OptionWithVisibility;\n}) {\n const { isDragging, isSorting, listeners, setNodeRef, transform } = useSortable({\n id: option.id,\n });\n const style = {\n transform: CSS.Translate.toString(transform),\n };\n\n const combinedListeners = {\n ...listeners,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(event);\n }\n if (listeners?.onKeyDown) {\n listeners.onKeyDown(event);\n }\n },\n };\n\n return (\n <li className={clsx(getClassName(), isDragging && styles.placeholder, isSorting && styles.sorting)} style={style}>\n <ContentDisplayOption\n ref={setNodeRef}\n listeners={combinedListeners}\n dragHandleAriaLabel={dragHandleAriaLabel}\n onToggle={onToggle}\n option={option}\n />\n </li>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAe3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,GACpB,EAAE,6BAA6B,eAmG/B"}
|
|
@@ -4,11 +4,13 @@ import React from 'react';
|
|
|
4
4
|
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
5
5
|
import styles from '../styles.css.js';
|
|
6
6
|
import { getSortedOptions } from './utils';
|
|
7
|
-
import { DndContext } from '@dnd-kit/core';
|
|
7
|
+
import { DndContext, DragOverlay } from '@dnd-kit/core';
|
|
8
8
|
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
9
|
-
import
|
|
9
|
+
import DraggableOption from './draggable-option';
|
|
10
10
|
import useDragAndDropReorder from './use-drag-and-drop-reorder';
|
|
11
11
|
import useLiveAnnouncements from './use-live-announcements';
|
|
12
|
+
import Portal from '../../internal/components/portal';
|
|
13
|
+
import ContentDisplayOption from './content-display-option';
|
|
12
14
|
const componentPrefix = 'content-display';
|
|
13
15
|
const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
|
|
14
16
|
export default function ContentDisplayPreference({ title, description, options, value = options.map(({ id }) => ({
|
|
@@ -25,6 +27,7 @@ export default function ContentDisplayPreference({ title, description, options,
|
|
|
25
27
|
const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
|
|
26
28
|
sortedOptions,
|
|
27
29
|
});
|
|
30
|
+
const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;
|
|
28
31
|
const announcements = useLiveAnnouncements({
|
|
29
32
|
isDragging: activeItem !== null,
|
|
30
33
|
liveAnnouncementDndStarted,
|
|
@@ -50,6 +53,10 @@ export default function ContentDisplayPreference({ title, description, options,
|
|
|
50
53
|
}
|
|
51
54
|
}, onDragCancel: () => setActiveItem(null) },
|
|
52
55
|
React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
|
|
53
|
-
React.createElement(SortableContext, { items: sortedOptions.map(({ id }) => id), strategy: verticalListSortingStrategy }, sortedOptions.map(option =>
|
|
56
|
+
React.createElement(SortableContext, { items: sortedOptions.map(({ id }) => id), strategy: verticalListSortingStrategy }, sortedOptions.map(option => {
|
|
57
|
+
return (React.createElement(DraggableOption, { dragHandleAriaLabel: dragHandleAriaLabel, key: option.id, onKeyDown: handleKeyDown, onToggle: onToggle, option: option }));
|
|
58
|
+
}))),
|
|
59
|
+
React.createElement(Portal, null,
|
|
60
|
+
React.createElement(DragOverlay, { className: styles['drag-overlay'], dropAnimation: null, style: { zIndex: 5000 } }, activeOption && (React.createElement(ContentDisplayOption, { listeners: { onKeyDown: handleKeyDown }, dragHandleAriaLabel: dragHandleAriaLabel, onToggle: onToggle, option: activeOption })))))));
|
|
54
61
|
}
|
|
55
62
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAwB,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from '../interfaces';\nimport styles from '../styles.css.js';\nimport { getSortedOptions, OptionWithVisibility } from './utils';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport Portal from '../../internal/components/portal';\nimport ContentDisplayOption from './content-display-option';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n title,\n description,\n options,\n value = options.map(({ id }) => ({\n id,\n visible: true,\n })),\n onChange,\n liveAnnouncementDndStarted,\n liveAnnouncementDndItemReordered,\n liveAnnouncementDndItemCommitted,\n liveAnnouncementDndDiscarded,\n dragHandleAriaDescription,\n dragHandleAriaLabel,\n}: ContentDisplayPreferenceProps) {\n const idPrefix = useUniqueId(componentPrefix);\n\n const onToggle = (option: OptionWithVisibility) => {\n onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n };\n\n const titleId = `${idPrefix}-title`;\n const descriptionId = `${idPrefix}-description`;\n\n const sortedOptions = getSortedOptions({ options, contentDisplay: value });\n\n const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n sortedOptions,\n });\n\n const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;\n\n const announcements = useLiveAnnouncements({\n isDragging: activeItem !== null,\n liveAnnouncementDndStarted,\n liveAnnouncementDndItemReordered,\n liveAnnouncementDndItemCommitted,\n liveAnnouncementDndDiscarded,\n sortedOptions: value,\n });\n\n return (\n <div className={styles[componentPrefix]}>\n <h3 className={getClassName('title')} id={titleId}>\n {title}\n </h3>\n <p className={getClassName('description')} id={descriptionId}>\n {description}\n </p>\n <DndContext\n sensors={sensors}\n collisionDetection={collisionDetection}\n accessibility={{\n announcements,\n restoreFocus: false,\n screenReaderInstructions: dragHandleAriaDescription ? { draggable: dragHandleAriaDescription } : undefined,\n }}\n onDragStart={({ active }) => setActiveItem(active.id)}\n onDragEnd={event => {\n setActiveItem(null);\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const oldIndex = value.findIndex(({ id }) => id === active.id);\n const newIndex = value.findIndex(({ id }) => id === over.id);\n onChange(arrayMove([...value], oldIndex, newIndex));\n }\n }}\n onDragCancel={() => setActiveItem(null)}\n >\n {/* Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n <ul\n className={getClassName('option-list')}\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n role=\"list\"\n >\n <SortableContext items={sortedOptions.map(({ id }) => id)} strategy={verticalListSortingStrategy}>\n {sortedOptions.map(option => {\n return (\n <DraggableOption\n dragHandleAriaLabel={dragHandleAriaLabel}\n key={option.id}\n onKeyDown={handleKeyDown}\n onToggle={onToggle}\n option={option}\n />\n );\n })}\n </SortableContext>\n </ul>\n <Portal>\n {/* Make sure that the drag overlay is above the modal\n by assigning the z-index as inline style\n so that it prevails over dnd-kit's inline z-index of 999 */}\n {/* className is a documented prop of the DragOverlay component:\n https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n /* eslint-disable-next-line react/forbid-component-props */}\n <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n {activeOption && (\n <ContentDisplayOption\n listeners={{ onKeyDown: handleKeyDown }}\n dragHandleAriaLabel={dragHandleAriaLabel}\n onToggle={onToggle}\n option={activeOption}\n />\n )}\n </DragOverlay>\n </Portal>\n </DndContext>\n </div>\n );\n}\n"]}
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"content-display": "awsui_content-
|
|
13
|
-
"content-display-
|
|
14
|
-
"content-display-
|
|
15
|
-
"content-display-option": "awsui_content-display-option_1f3h0_1bra9_279",
|
|
16
|
-
"content-display-title": "awsui_content-display-title_1f3h0_1bra9_283",
|
|
17
|
-
"content-display-description": "awsui_content-display-description_1f3h0_1bra9_291",
|
|
18
|
-
"content-display-option-list": "awsui_content-display-option-list_1f3h0_1bra9_299"
|
|
4
|
+
"content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_e9tk2_185",
|
|
5
|
+
"content-display-option-content": "awsui_content-display-option-content_1f3h0_e9tk2_189",
|
|
6
|
+
"content-display-option": "awsui_content-display-option_1f3h0_e9tk2_185",
|
|
7
|
+
"placeholder": "awsui_placeholder_1f3h0_e9tk2_212",
|
|
8
|
+
"sorting": "awsui_sorting_1f3h0_e9tk2_212",
|
|
9
|
+
"content-display-option-label": "awsui_content-display-option-label_1f3h0_e9tk2_240",
|
|
10
|
+
"drag-overlay": "awsui_drag-overlay_1f3h0_e9tk2_248",
|
|
11
|
+
"content-display": "awsui_content-display_1f3h0_e9tk2_185",
|
|
12
|
+
"content-display-title": "awsui_content-display-title_1f3h0_e9tk2_275",
|
|
13
|
+
"content-display-description": "awsui_content-display-description_1f3h0_e9tk2_283",
|
|
14
|
+
"content-display-option-list": "awsui_content-display-option-list_1f3h0_e9tk2_291"
|
|
19
15
|
};
|
|
20
16
|
|
|
@@ -182,81 +182,107 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
182
182
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
183
183
|
SPDX-License-Identifier: Apache-2.0
|
|
184
184
|
*/
|
|
185
|
-
.
|
|
185
|
+
.awsui_content-display-option-toggle_1f3h0_e9tk2_185:not(#\9) {
|
|
186
186
|
/* used in test-utils */
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
-
.
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
189
|
+
.awsui_content-display-option-content_1f3h0_e9tk2_189:not(#\9) {
|
|
190
|
+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
191
|
+
border-collapse: separate;
|
|
192
|
+
border-spacing: 0;
|
|
193
|
+
caption-side: top;
|
|
194
|
+
cursor: auto;
|
|
195
|
+
direction: ltr;
|
|
196
|
+
empty-cells: show;
|
|
197
|
+
font-family: serif;
|
|
198
|
+
font-size: medium;
|
|
199
|
+
font-style: normal;
|
|
200
|
+
font-variant: normal;
|
|
201
|
+
font-weight: normal;
|
|
202
|
+
font-stretch: normal;
|
|
203
|
+
line-height: normal;
|
|
204
|
+
-webkit-hyphens: none;
|
|
205
|
+
hyphens: none;
|
|
206
|
+
letter-spacing: normal;
|
|
207
|
+
list-style: disc outside none;
|
|
208
|
+
tab-size: 8;
|
|
209
|
+
text-align: left;
|
|
210
|
+
text-align-last: auto;
|
|
211
|
+
text-indent: 0;
|
|
212
|
+
text-shadow: none;
|
|
213
|
+
text-transform: none;
|
|
214
|
+
visibility: visible;
|
|
215
|
+
white-space: normal;
|
|
216
|
+
widows: 2;
|
|
217
|
+
word-spacing: normal;
|
|
218
|
+
box-sizing: border-box;
|
|
219
|
+
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
220
|
+
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
221
|
+
color: var(--color-text-body-default-ajf1h5, #000716);
|
|
222
|
+
font-weight: 400;
|
|
223
|
+
font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
|
|
224
|
+
-webkit-font-smoothing: auto;
|
|
225
|
+
-moz-osx-font-smoothing: auto;
|
|
205
226
|
display: flex;
|
|
206
|
-
flex-wrap: nowrap;
|
|
207
|
-
justify-content: space-between;
|
|
208
227
|
align-items: flex-start;
|
|
209
|
-
padding
|
|
210
|
-
padding-bottom: var(--space-xs-rsr2qu, 8px);
|
|
211
|
-
padding-right: 0;
|
|
212
|
-
}
|
|
213
|
-
.awsui_sortable-item-content_1f3h0_1bra9_203:not(#\9):not(.awsui_draggable_1f3h0_1bra9_213) {
|
|
214
|
-
padding-left: var(--space-scaled-l-t03y3z, 20px);
|
|
215
|
-
}
|
|
216
|
-
.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9) {
|
|
217
|
-
padding-left: 0;
|
|
218
|
-
padding-right: var(--space-scaled-xs-6859qs, 8px);
|
|
228
|
+
padding: var(--space-xs-rsr2qu, 8px) var(--space-scaled-xs-6859qs, 8px) var(--space-xs-rsr2qu, 8px) 0;
|
|
219
229
|
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
220
|
-
|
|
230
|
+
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
221
231
|
}
|
|
222
|
-
|
|
232
|
+
|
|
233
|
+
.awsui_content-display-option_1f3h0_e9tk2_185:not(#\9) {
|
|
234
|
+
list-style: none;
|
|
223
235
|
position: relative;
|
|
224
|
-
|
|
225
|
-
box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
|
|
226
|
-
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
236
|
+
border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
227
237
|
}
|
|
228
|
-
.
|
|
238
|
+
.awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212 {
|
|
229
239
|
transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
|
|
240
|
+
z-index: 1;
|
|
230
241
|
}
|
|
231
242
|
@media (prefers-reduced-motion: reduce) {
|
|
232
|
-
.
|
|
243
|
+
.awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212 {
|
|
233
244
|
animation: none;
|
|
234
245
|
transition: none;
|
|
235
246
|
}
|
|
236
247
|
}
|
|
237
|
-
.awsui-motion-disabled .
|
|
248
|
+
.awsui-motion-disabled .awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212, .awsui-mode-entering .awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212 {
|
|
238
249
|
animation: none;
|
|
239
250
|
transition: none;
|
|
240
251
|
}
|
|
241
|
-
|
|
242
|
-
transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
|
|
252
|
+
.awsui_content-display-option_1f3h0_e9tk2_185.awsui_placeholder_1f3h0_e9tk2_212 > .awsui_content-display-option-content_1f3h0_e9tk2_189:not(#\9) {
|
|
243
253
|
position: relative;
|
|
244
254
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
255
|
+
.awsui_content-display-option_1f3h0_e9tk2_185.awsui_placeholder_1f3h0_e9tk2_212 > .awsui_content-display-option-content_1f3h0_e9tk2_189:not(#\9):after {
|
|
256
|
+
content: " ";
|
|
257
|
+
position: absolute;
|
|
258
|
+
top: 0;
|
|
259
|
+
bottom: 0;
|
|
260
|
+
left: 0;
|
|
261
|
+
right: 0;
|
|
262
|
+
background: var(--color-drag-placeholder-hover-3ohnz1, #d3e7f9);
|
|
263
|
+
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
250
264
|
}
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
265
|
+
|
|
266
|
+
.awsui_content-display-option-label_1f3h0_e9tk2_240:not(#\9) {
|
|
267
|
+
flex-grow: 1;
|
|
268
|
+
min-width: 0;
|
|
269
|
+
-ms-word-break: break-all;
|
|
270
|
+
word-break: break-word;
|
|
271
|
+
padding-right: var(--space-l-4vl6xu, 20px);
|
|
254
272
|
}
|
|
255
|
-
|
|
273
|
+
|
|
274
|
+
.awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9) {
|
|
275
|
+
box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
|
|
276
|
+
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
277
|
+
}
|
|
278
|
+
body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9) {
|
|
279
|
+
position: relative;
|
|
280
|
+
}
|
|
281
|
+
body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9) {
|
|
256
282
|
outline: 2px dotted transparent;
|
|
257
283
|
outline-offset: calc(0px - 1px);
|
|
258
284
|
}
|
|
259
|
-
body[data-awsui-focus-visible=true] .
|
|
285
|
+
body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9)::before {
|
|
260
286
|
content: " ";
|
|
261
287
|
display: block;
|
|
262
288
|
position: absolute;
|
|
@@ -264,23 +290,15 @@ body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203
|
|
|
264
290
|
top: calc(-1 * 0px);
|
|
265
291
|
width: calc(100% + 2 * 0px);
|
|
266
292
|
height: calc(100% + 2 * 0px);
|
|
267
|
-
border-radius: var(--border-radius-
|
|
293
|
+
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
268
294
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
269
295
|
}
|
|
270
296
|
|
|
271
|
-
.
|
|
272
|
-
padding-right: var(--space-l-4vl6xu, 20px);
|
|
273
|
-
flex-grow: 1;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.awsui_content-display_1f3h0_1bra9_276:not(#\9),
|
|
277
|
-
.awsui_content-display-groups_1f3h0_1bra9_277:not(#\9),
|
|
278
|
-
.awsui_content-display-group_1f3h0_1bra9_277:not(#\9),
|
|
279
|
-
.awsui_content-display-option_1f3h0_1bra9_279:not(#\9) {
|
|
297
|
+
.awsui_content-display_1f3h0_e9tk2_185:not(#\9) {
|
|
280
298
|
/* used in test-utils */
|
|
281
299
|
}
|
|
282
300
|
|
|
283
|
-
.awsui_content-display-
|
|
301
|
+
.awsui_content-display-title_1f3h0_e9tk2_275:not(#\9) {
|
|
284
302
|
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
285
303
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
286
304
|
font-weight: var(--font-display-label-weight-m18hjh, 700);
|
|
@@ -288,7 +306,7 @@ body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203
|
|
|
288
306
|
margin: 0;
|
|
289
307
|
}
|
|
290
308
|
|
|
291
|
-
.awsui_content-display-
|
|
309
|
+
.awsui_content-display-description_1f3h0_e9tk2_283:not(#\9) {
|
|
292
310
|
color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
|
|
293
311
|
font-size: var(--font-body-s-size-ukw2p9, 12px);
|
|
294
312
|
line-height: var(--font-body-s-line-height-kdsbrl, 16px);
|
|
@@ -296,7 +314,7 @@ body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203
|
|
|
296
314
|
margin-top: var(--space-scaled-xxxs-lo883m, 2px);
|
|
297
315
|
}
|
|
298
316
|
|
|
299
|
-
.awsui_content-display-option-
|
|
317
|
+
.awsui_content-display-option-list_1f3h0_e9tk2_291:not(#\9) {
|
|
300
318
|
position: relative;
|
|
301
319
|
list-style: none;
|
|
302
320
|
padding: 0;
|
|
@@ -2,20 +2,16 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"content-display": "awsui_content-
|
|
14
|
-
"content-display-
|
|
15
|
-
"content-display-
|
|
16
|
-
"content-display-option": "awsui_content-display-option_1f3h0_1bra9_279",
|
|
17
|
-
"content-display-title": "awsui_content-display-title_1f3h0_1bra9_283",
|
|
18
|
-
"content-display-description": "awsui_content-display-description_1f3h0_1bra9_291",
|
|
19
|
-
"content-display-option-list": "awsui_content-display-option-list_1f3h0_1bra9_299"
|
|
5
|
+
"content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_e9tk2_185",
|
|
6
|
+
"content-display-option-content": "awsui_content-display-option-content_1f3h0_e9tk2_189",
|
|
7
|
+
"content-display-option": "awsui_content-display-option_1f3h0_e9tk2_185",
|
|
8
|
+
"placeholder": "awsui_placeholder_1f3h0_e9tk2_212",
|
|
9
|
+
"sorting": "awsui_sorting_1f3h0_e9tk2_212",
|
|
10
|
+
"content-display-option-label": "awsui_content-display-option-label_1f3h0_e9tk2_240",
|
|
11
|
+
"drag-overlay": "awsui_drag-overlay_1f3h0_e9tk2_248",
|
|
12
|
+
"content-display": "awsui_content-display_1f3h0_e9tk2_185",
|
|
13
|
+
"content-display-title": "awsui_content-display-title_1f3h0_e9tk2_275",
|
|
14
|
+
"content-display-description": "awsui_content-display-description_1f3h0_e9tk2_283",
|
|
15
|
+
"content-display-option-list": "awsui_content-display-option-list_1f3h0_e9tk2_291"
|
|
20
16
|
};
|
|
21
17
|
|
|
@@ -1,41 +1,37 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"visible-content": "awsui_visible-
|
|
5
|
-
"visible-content-toggle": "awsui_visible-content-
|
|
6
|
-
"visible-content-groups": "awsui_visible-content-
|
|
7
|
-
"visible-content-group": "awsui_visible-content-
|
|
8
|
-
"visible-content-title": "awsui_visible-content-
|
|
9
|
-
"visible-content-group-label": "awsui_visible-content-group-
|
|
10
|
-
"visible-content-option": "awsui_visible-content-
|
|
11
|
-
"visible-content-option-label": "awsui_visible-content-option-
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"content-display": "awsui_content-
|
|
21
|
-
"content-display-
|
|
22
|
-
"content-display-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"content-density": "awsui_content-density_tc96w_1m6re_544",
|
|
37
|
-
"page-size": "awsui_page-size_tc96w_1m6re_545",
|
|
38
|
-
"page-size-form-field": "awsui_page-size-form-field_tc96w_1m6re_546",
|
|
39
|
-
"page-size-radio-group": "awsui_page-size-radio-group_tc96w_1m6re_547"
|
|
4
|
+
"visible-content": "awsui_visible-content_tc96w_rxrhz_185",
|
|
5
|
+
"visible-content-toggle": "awsui_visible-content-toggle_tc96w_rxrhz_186",
|
|
6
|
+
"visible-content-groups": "awsui_visible-content-groups_tc96w_rxrhz_187",
|
|
7
|
+
"visible-content-group": "awsui_visible-content-group_tc96w_rxrhz_187",
|
|
8
|
+
"visible-content-title": "awsui_visible-content-title_tc96w_rxrhz_192",
|
|
9
|
+
"visible-content-group-label": "awsui_visible-content-group-label_tc96w_rxrhz_201",
|
|
10
|
+
"visible-content-option": "awsui_visible-content-option_tc96w_rxrhz_207",
|
|
11
|
+
"visible-content-option-label": "awsui_visible-content-option-label_tc96w_rxrhz_218",
|
|
12
|
+
"content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_rxrhz_409",
|
|
13
|
+
"content-display-option-content": "awsui_content-display-option-content_tc96w_rxrhz_413",
|
|
14
|
+
"content-display-option": "awsui_content-display-option_tc96w_rxrhz_409",
|
|
15
|
+
"placeholder": "awsui_placeholder_tc96w_rxrhz_436",
|
|
16
|
+
"sorting": "awsui_sorting_tc96w_rxrhz_436",
|
|
17
|
+
"content-display-option-label": "awsui_content-display-option-label_tc96w_rxrhz_464",
|
|
18
|
+
"drag-overlay": "awsui_drag-overlay_tc96w_rxrhz_472",
|
|
19
|
+
"content-display": "awsui_content-display_tc96w_rxrhz_409",
|
|
20
|
+
"content-display-title": "awsui_content-display-title_tc96w_rxrhz_499",
|
|
21
|
+
"content-display-description": "awsui_content-display-description_tc96w_rxrhz_507",
|
|
22
|
+
"content-display-option-list": "awsui_content-display-option-list_tc96w_rxrhz_515",
|
|
23
|
+
"root": "awsui_root_tc96w_rxrhz_521",
|
|
24
|
+
"modal-root": "awsui_modal-root_tc96w_rxrhz_522",
|
|
25
|
+
"trigger-button": "awsui_trigger-button_tc96w_rxrhz_523",
|
|
26
|
+
"cancel-button": "awsui_cancel-button_tc96w_rxrhz_524",
|
|
27
|
+
"confirm-button": "awsui_confirm-button_tc96w_rxrhz_525",
|
|
28
|
+
"custom": "awsui_custom_tc96w_rxrhz_526",
|
|
29
|
+
"second-column-small": "awsui_second-column-small_tc96w_rxrhz_530",
|
|
30
|
+
"wrap-lines": "awsui_wrap-lines_tc96w_rxrhz_534",
|
|
31
|
+
"striped-rows": "awsui_striped-rows_tc96w_rxrhz_535",
|
|
32
|
+
"content-density": "awsui_content-density_tc96w_rxrhz_536",
|
|
33
|
+
"page-size": "awsui_page-size_tc96w_rxrhz_537",
|
|
34
|
+
"page-size-form-field": "awsui_page-size-form-field_tc96w_rxrhz_538",
|
|
35
|
+
"page-size-radio-group": "awsui_page-size-radio-group_tc96w_rxrhz_539"
|
|
40
36
|
};
|
|
41
37
|
|