@cloudscape-design/components 3.0.261 → 3.0.263
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/THIRD-PARTY-LICENSES +31 -0
- package/app-layout/drawer/index.d.ts +1 -1
- package/app-layout/drawer/index.d.ts.map +1 -1
- package/app-layout/drawer/index.js +3 -3
- package/app-layout/drawer/index.js.map +1 -1
- package/app-layout/drawer/interfaces.d.ts +17 -3
- package/app-layout/drawer/interfaces.d.ts.map +1 -1
- package/app-layout/drawer/interfaces.js.map +1 -1
- package/app-layout/drawer/resizable-drawer.d.ts.map +1 -1
- package/app-layout/drawer/resizable-drawer.js +6 -4
- package/app-layout/drawer/resizable-drawer.js.map +1 -1
- package/app-layout/index.d.ts.map +1 -1
- package/app-layout/index.js +47 -31
- package/app-layout/index.js.map +1 -1
- package/app-layout/mobile-toolbar/index.d.ts.map +1 -1
- package/app-layout/mobile-toolbar/index.js +4 -1
- package/app-layout/mobile-toolbar/index.js.map +1 -1
- package/app-layout/test-classes/styles.css.js +19 -18
- package/app-layout/test-classes/styles.scoped.css +22 -18
- package/app-layout/test-classes/styles.selectors.js +19 -18
- package/app-layout/visual-refresh/drawers.d.ts +1 -0
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/app-layout/visual-refresh/drawers.js +2 -2
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/attribute-editor/row.d.ts.map +1 -1
- package/attribute-editor/row.js +1 -3
- package/attribute-editor/row.js.map +1 -1
- package/collection-preferences/content-display/index.d.ts +9 -0
- package/collection-preferences/content-display/index.d.ts.map +1 -0
- package/collection-preferences/content-display/index.js +55 -0
- package/collection-preferences/content-display/index.js.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/defaults.d.ts +3 -0
- package/collection-preferences/content-display/keyboard-sensor/defaults.d.ts.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/defaults.js +9 -0
- package/collection-preferences/content-display/keyboard-sensor/defaults.js.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/index.d.ts +19 -0
- package/collection-preferences/content-display/keyboard-sensor/index.d.ts.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/index.js +126 -0
- package/collection-preferences/content-display/keyboard-sensor/index.js.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/events.d.ts +11 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/events.d.ts.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/events.js +14 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/events.js.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/listeners.d.ts +8 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/listeners.d.ts.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/listeners.js +17 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/listeners.js.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/scroll.d.ts +30 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/scroll.d.ts.map +1 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/scroll.js +95 -0
- package/collection-preferences/content-display/keyboard-sensor/utilities/scroll.js.map +1 -0
- package/collection-preferences/content-display/sortable-item.d.ts +9 -0
- package/collection-preferences/content-display/sortable-item.d.ts.map +1 -0
- package/collection-preferences/content-display/sortable-item.js +52 -0
- package/collection-preferences/content-display/sortable-item.js.map +1 -0
- package/collection-preferences/content-display/styles.css.js +20 -0
- package/collection-preferences/content-display/styles.scoped.css +303 -0
- package/collection-preferences/content-display/styles.selectors.js +21 -0
- package/collection-preferences/content-display/use-drag-and-drop-reorder.d.ts +14 -0
- package/collection-preferences/content-display/use-drag-and-drop-reorder.d.ts.map +1 -0
- package/collection-preferences/content-display/use-drag-and-drop-reorder.js +144 -0
- package/collection-preferences/content-display/use-drag-and-drop-reorder.js.map +1 -0
- package/collection-preferences/content-display/use-live-announcements.d.ts +12 -0
- package/collection-preferences/content-display/use-live-announcements.d.ts.map +1 -0
- package/collection-preferences/content-display/use-live-announcements.js +40 -0
- package/collection-preferences/content-display/use-live-announcements.js.map +1 -0
- package/collection-preferences/content-display/utils.d.ts +9 -0
- package/collection-preferences/content-display/utils.d.ts.map +1 -0
- package/collection-preferences/content-display/utils.js +7 -0
- package/collection-preferences/content-display/utils.js.map +1 -0
- package/collection-preferences/index.d.ts +1 -1
- package/collection-preferences/index.d.ts.map +1 -1
- package/collection-preferences/index.js +15 -9
- package/collection-preferences/index.js.map +1 -1
- package/collection-preferences/interfaces.d.ts +47 -1
- package/collection-preferences/interfaces.d.ts.map +1 -1
- package/collection-preferences/interfaces.js.map +1 -1
- package/collection-preferences/styles.css.js +36 -21
- package/collection-preferences/styles.scoped.css +326 -22
- package/collection-preferences/styles.selectors.js +36 -21
- package/collection-preferences/utils.d.ts +1 -1
- package/collection-preferences/utils.d.ts.map +1 -1
- package/collection-preferences/utils.js +20 -9
- package/collection-preferences/utils.js.map +1 -1
- package/internal/components/token-list/styles.css.js +9 -9
- package/internal/components/token-list/styles.scoped.css +22 -21
- package/internal/components/token-list/styles.selectors.js +9 -9
- package/internal/drag-handle/index.d.ts +9 -0
- package/internal/drag-handle/index.d.ts.map +1 -0
- package/internal/drag-handle/index.js +13 -0
- package/internal/drag-handle/index.js.map +1 -0
- package/internal/drag-handle/styles.css.js +6 -0
- package/internal/drag-handle/styles.scoped.css +13 -0
- package/internal/drag-handle/styles.selectors.js +7 -0
- package/internal/environment.js +1 -1
- package/internal/handle/index.d.ts +3 -0
- package/internal/handle/index.d.ts.map +1 -0
- package/internal/handle/index.js +14 -0
- package/internal/handle/index.js.map +1 -0
- package/internal/handle/styles.css.js +7 -0
- package/internal/handle/styles.scoped.css +125 -0
- package/internal/handle/styles.selectors.js +8 -0
- package/internal/manifest.json +1 -1
- package/package.json +4 -1
- package/table/body-cell/styles.css.js +23 -40
- package/table/body-cell/styles.scoped.css +59 -220
- package/table/body-cell/styles.selectors.js +23 -40
- package/table/header-cell/index.js +1 -1
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/styles.css.js +24 -0
- package/table/header-cell/styles.scoped.css +252 -0
- package/table/header-cell/styles.selectors.js +25 -0
- package/table/interfaces.d.ts +16 -3
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +17 -9
- package/table/internal.js.map +1 -1
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +4 -7
- package/table/thead.js.map +1 -1
- package/table/use-column-widths.js +1 -1
- package/table/use-column-widths.js.map +1 -1
- package/table/utils.d.ts +5 -0
- package/table/utils.d.ts.map +1 -1
- package/table/utils.js +23 -0
- package/table/utils.js.map +1 -1
- package/test-utils/dom/app-layout/index.d.ts +6 -0
- package/test-utils/dom/app-layout/index.js +18 -0
- package/test-utils/dom/app-layout/index.js.map +1 -1
- package/test-utils/dom/collection-preferences/content-display-preference.d.ts +37 -0
- package/test-utils/dom/collection-preferences/content-display-preference.js +62 -0
- package/test-utils/dom/collection-preferences/content-display-preference.js.map +1 -0
- package/test-utils/dom/collection-preferences/index.d.ts +2 -0
- package/test-utils/dom/collection-preferences/index.js +4 -0
- package/test-utils/dom/collection-preferences/index.js.map +1 -1
- package/test-utils/dom/table/index.js +10 -9
- package/test-utils/dom/table/index.js.map +1 -1
- package/test-utils/selectors/app-layout/index.d.ts +6 -0
- package/test-utils/selectors/app-layout/index.js +18 -0
- package/test-utils/selectors/app-layout/index.js.map +1 -1
- package/test-utils/selectors/collection-preferences/content-display-preference.d.ts +37 -0
- package/test-utils/selectors/collection-preferences/content-display-preference.js +62 -0
- package/test-utils/selectors/collection-preferences/content-display-preference.js.map +1 -0
- package/test-utils/selectors/collection-preferences/index.d.ts +2 -0
- package/test-utils/selectors/collection-preferences/index.js +4 -0
- package/test-utils/selectors/collection-preferences/index.js.map +1 -1
- package/test-utils/selectors/table/index.js +10 -9
- package/test-utils/selectors/table/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.d.ts.map +1 -1
- package/top-navigation/parts/overflow-menu/menu-item.js +5 -4
- package/top-navigation/parts/overflow-menu/menu-item.js.map +1 -1
- package/top-navigation/parts/utility.js +1 -1
- package/top-navigation/parts/utility.js.map +1 -1
- package/table/table-wrapper.d.ts +0 -13
- package/table/table-wrapper.d.ts.map +0 -1
- package/table/table-wrapper.js +0 -15
- package/table/table-wrapper.js.map +0 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { canUseDOM, subtract as getCoordinatesDelta } from '@dnd-kit/utilities';
|
|
4
|
+
import { KeyboardCode } from '@dnd-kit/core';
|
|
5
|
+
function isDocumentScrollingElement(element) {
|
|
6
|
+
if (!canUseDOM || !element) {
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
9
|
+
return element === document.scrollingElement;
|
|
10
|
+
}
|
|
11
|
+
export function getScrollPosition(scrollingContainer) {
|
|
12
|
+
const minScroll = {
|
|
13
|
+
x: 0,
|
|
14
|
+
y: 0,
|
|
15
|
+
};
|
|
16
|
+
const dimensions = isDocumentScrollingElement(scrollingContainer)
|
|
17
|
+
? {
|
|
18
|
+
height: window.innerHeight,
|
|
19
|
+
width: window.innerWidth,
|
|
20
|
+
}
|
|
21
|
+
: {
|
|
22
|
+
height: scrollingContainer.clientHeight,
|
|
23
|
+
width: scrollingContainer.clientWidth,
|
|
24
|
+
};
|
|
25
|
+
const maxScroll = {
|
|
26
|
+
x: scrollingContainer.scrollWidth - dimensions.width,
|
|
27
|
+
y: scrollingContainer.scrollHeight - dimensions.height,
|
|
28
|
+
};
|
|
29
|
+
const isTop = scrollingContainer.scrollTop <= minScroll.y;
|
|
30
|
+
const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
|
|
31
|
+
const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
|
|
32
|
+
const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
|
|
33
|
+
return {
|
|
34
|
+
isTop,
|
|
35
|
+
isLeft,
|
|
36
|
+
isBottom,
|
|
37
|
+
isRight,
|
|
38
|
+
maxScroll,
|
|
39
|
+
minScroll,
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
export function getScrollElementRect(element) {
|
|
43
|
+
if (element === document.scrollingElement) {
|
|
44
|
+
const { innerWidth, innerHeight } = window;
|
|
45
|
+
return {
|
|
46
|
+
top: 0,
|
|
47
|
+
left: 0,
|
|
48
|
+
right: innerWidth,
|
|
49
|
+
bottom: innerHeight,
|
|
50
|
+
width: innerWidth,
|
|
51
|
+
height: innerHeight,
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
const { top, left, right, bottom } = element.getBoundingClientRect();
|
|
55
|
+
return {
|
|
56
|
+
top,
|
|
57
|
+
left,
|
|
58
|
+
right,
|
|
59
|
+
bottom,
|
|
60
|
+
width: element.clientWidth,
|
|
61
|
+
height: element.clientHeight,
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
export function applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors, }) {
|
|
65
|
+
for (const scrollContainer of scrollableAncestors) {
|
|
66
|
+
const coordinatesDelta = getCoordinatesDelta(newCoordinates, currentCoordinates);
|
|
67
|
+
const { isTop, isBottom, maxScroll, minScroll } = getScrollPosition(scrollContainer);
|
|
68
|
+
const scrollElementRect = getScrollElementRect(scrollContainer);
|
|
69
|
+
const clampedCoordinates = {
|
|
70
|
+
y: Math.min(direction === KeyboardCode.Down
|
|
71
|
+
? scrollElementRect.bottom - scrollElementRect.height / 2
|
|
72
|
+
: scrollElementRect.bottom, Math.max(direction === KeyboardCode.Down
|
|
73
|
+
? scrollElementRect.top
|
|
74
|
+
: scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y)),
|
|
75
|
+
};
|
|
76
|
+
const canScrollY = (direction === KeyboardCode.Down && !isBottom) || (direction === KeyboardCode.Up && !isTop);
|
|
77
|
+
if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
|
|
78
|
+
const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
|
|
79
|
+
const canScrollToNewCoordinates = (direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y) ||
|
|
80
|
+
(direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y);
|
|
81
|
+
if (canScrollToNewCoordinates) {
|
|
82
|
+
// We don't need to update coordinates, the scroll adjustment alone will trigger
|
|
83
|
+
// logic to auto-detect the new container we are over
|
|
84
|
+
scrollContainer.scrollTo({
|
|
85
|
+
top: newScrollCoordinates,
|
|
86
|
+
behavior: 'smooth',
|
|
87
|
+
});
|
|
88
|
+
return true;
|
|
89
|
+
}
|
|
90
|
+
break;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=scroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/utilities/scroll.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { canUseDOM, Coordinates, subtract as getCoordinatesDelta } from '@dnd-kit/utilities';\nimport { KeyboardCode } from '@dnd-kit/core';\n\nfunction isDocumentScrollingElement(element: Element | null) {\n if (!canUseDOM || !element) {\n return false;\n }\n\n return element === document.scrollingElement;\n}\n\nexport function getScrollPosition(scrollingContainer: Element) {\n const minScroll = {\n x: 0,\n y: 0,\n };\n const dimensions = isDocumentScrollingElement(scrollingContainer)\n ? {\n height: window.innerHeight,\n width: window.innerWidth,\n }\n : {\n height: scrollingContainer.clientHeight,\n width: scrollingContainer.clientWidth,\n };\n const maxScroll = {\n x: scrollingContainer.scrollWidth - dimensions.width,\n y: scrollingContainer.scrollHeight - dimensions.height,\n };\n\n const isTop = scrollingContainer.scrollTop <= minScroll.y;\n const isLeft = scrollingContainer.scrollLeft <= minScroll.x;\n const isBottom = scrollingContainer.scrollTop >= maxScroll.y;\n const isRight = scrollingContainer.scrollLeft >= maxScroll.x;\n\n return {\n isTop,\n isLeft,\n isBottom,\n isRight,\n maxScroll,\n minScroll,\n };\n}\n\nexport function getScrollElementRect(element: Element) {\n if (element === document.scrollingElement) {\n const { innerWidth, innerHeight } = window;\n\n return {\n top: 0,\n left: 0,\n right: innerWidth,\n bottom: innerHeight,\n width: innerWidth,\n height: innerHeight,\n };\n }\n\n const { top, left, right, bottom } = element.getBoundingClientRect();\n\n return {\n top,\n left,\n right,\n bottom,\n width: element.clientWidth,\n height: element.clientHeight,\n };\n}\n\nexport function applyScroll({\n currentCoordinates,\n direction,\n newCoordinates,\n scrollableAncestors,\n}: {\n currentCoordinates: Coordinates;\n direction: string;\n newCoordinates: Coordinates;\n scrollableAncestors: Element[];\n}) {\n for (const scrollContainer of scrollableAncestors) {\n const coordinatesDelta = getCoordinatesDelta(newCoordinates, currentCoordinates);\n const { isTop, isBottom, maxScroll, minScroll } = getScrollPosition(scrollContainer);\n const scrollElementRect = getScrollElementRect(scrollContainer);\n\n const clampedCoordinates = {\n y: Math.min(\n direction === KeyboardCode.Down\n ? scrollElementRect.bottom - scrollElementRect.height / 2\n : scrollElementRect.bottom,\n Math.max(\n direction === KeyboardCode.Down\n ? scrollElementRect.top\n : scrollElementRect.top + scrollElementRect.height / 2,\n newCoordinates.y\n )\n ),\n };\n\n const canScrollY = (direction === KeyboardCode.Down && !isBottom) || (direction === KeyboardCode.Up && !isTop);\n\n if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {\n const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;\n const canScrollToNewCoordinates =\n (direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y) ||\n (direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y);\n\n if (canScrollToNewCoordinates) {\n // We don't need to update coordinates, the scroll adjustment alone will trigger\n // logic to auto-detect the new container we are over\n scrollContainer.scrollTo({\n top: newScrollCoordinates,\n behavior: 'smooth',\n });\n return true;\n }\n\n break;\n }\n }\n return false;\n}\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { OptionWithVisibility } from './utils';
|
|
3
|
+
export declare function SortableItem({ dragHandleAriaLabel, onKeyDown, onToggle, option, }: {
|
|
4
|
+
dragHandleAriaLabel?: string;
|
|
5
|
+
onKeyDown?: (event: React.KeyboardEvent) => void;
|
|
6
|
+
onToggle: (option: OptionWithVisibility) => void;
|
|
7
|
+
option: OptionWithVisibility;
|
|
8
|
+
}): JSX.Element;
|
|
9
|
+
//# sourceMappingURL=sortable-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sortable-item.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/sortable-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,wBAAgB,YAAY,CAAC,EAC3B,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,eAqEA"}
|
|
@@ -0,0 +1,52 @@
|
|
|
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 clsx from 'clsx';
|
|
7
|
+
import styles from '../styles.css.js';
|
|
8
|
+
import DragHandle from '../../internal/drag-handle';
|
|
9
|
+
import InternalToggle from '../../toggle/internal';
|
|
10
|
+
import { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
11
|
+
const componentPrefix = 'sortable-item';
|
|
12
|
+
const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
|
|
13
|
+
export function SortableItem({ dragHandleAriaLabel, onKeyDown, onToggle, option, }) {
|
|
14
|
+
var _a, _b, _c, _d, _e;
|
|
15
|
+
const { isDragging, isSorting, listeners, over, rect, setNodeRef, transform } = useSortable({
|
|
16
|
+
id: option.id,
|
|
17
|
+
});
|
|
18
|
+
const style = {
|
|
19
|
+
transform: CSS.Translate.toString(transform),
|
|
20
|
+
};
|
|
21
|
+
const idPrefix = useUniqueId(componentPrefix);
|
|
22
|
+
const controlId = `${idPrefix}-control-${option.id}`;
|
|
23
|
+
const dragHandleAttributes = {
|
|
24
|
+
['aria-label']: [dragHandleAriaLabel, option.label].join(', '),
|
|
25
|
+
};
|
|
26
|
+
const combinedListeners = Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
|
|
27
|
+
if (onKeyDown) {
|
|
28
|
+
onKeyDown(event);
|
|
29
|
+
}
|
|
30
|
+
if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
|
|
31
|
+
listeners.onKeyDown(event);
|
|
32
|
+
}
|
|
33
|
+
} });
|
|
34
|
+
// The placeholder is rendered from within the dragged item, but is shown at the position of the displaced item.
|
|
35
|
+
// Therefore, we need to translate it by the right amount.
|
|
36
|
+
// Unfortunately we can't use dnd-kit's recommended approach of using a drag overlay
|
|
37
|
+
// because it renders out of place when drag and drop is used in our modal.
|
|
38
|
+
const placeholderOffsetY = isDragging && ((_a = over === null || over === void 0 ? void 0 : over.rect) === null || _a === void 0 ? void 0 : _a.top) !== undefined && ((_b = rect.current) === null || _b === void 0 ? void 0 : _b.top) !== undefined
|
|
39
|
+
? over.rect.top > ((_c = rect.current) === null || _c === void 0 ? void 0 : _c.top)
|
|
40
|
+
? over.rect.bottom - ((_d = rect.current) === null || _d === void 0 ? void 0 : _d.bottom)
|
|
41
|
+
: over.rect.top - ((_e = rect.current) === null || _e === void 0 ? void 0 : _e.top)
|
|
42
|
+
: undefined;
|
|
43
|
+
const placeholderStyle = placeholderOffsetY ? { transform: `translateY(${placeholderOffsetY}px)` } : undefined;
|
|
44
|
+
return (React.createElement("li", { className: clsx(styles['content-display-option'], styles['sortable-item']) },
|
|
45
|
+
isDragging && React.createElement("div", { className: getClassName('placeholder'), style: placeholderStyle }),
|
|
46
|
+
React.createElement("div", { ref: setNodeRef, className: clsx(getClassName('content'), styles.draggable, isDragging && styles.active, isSorting && styles.sorting), style: style },
|
|
47
|
+
React.createElement(DragHandle, { attributes: dragHandleAttributes, hideFocus: isDragging, listeners: combinedListeners }),
|
|
48
|
+
React.createElement("label", { className: getClassName('label'), htmlFor: controlId }, option.label),
|
|
49
|
+
React.createElement("div", { className: getClassName('toggle') },
|
|
50
|
+
React.createElement(InternalToggle, { checked: !!option.visible, onChange: () => onToggle(option), disabled: option.alwaysVisible === true, controlId: controlId })))));
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=sortable-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sortable-item.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/sortable-item.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 { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\nimport styles from '../styles.css.js';\nimport DragHandle from '../../internal/drag-handle';\nimport InternalToggle from '../../toggle/internal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { OptionWithVisibility } from './utils';\n\nconst componentPrefix = 'sortable-item';\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\nexport function SortableItem({\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, over, rect, setNodeRef, transform } = useSortable({\n id: option.id,\n });\n const style = {\n transform: CSS.Translate.toString(transform),\n };\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 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 // The placeholder is rendered from within the dragged item, but is shown at the position of the displaced item.\n // Therefore, we need to translate it by the right amount.\n // Unfortunately we can't use dnd-kit's recommended approach of using a drag overlay\n // because it renders out of place when drag and drop is used in our modal.\n const placeholderOffsetY =\n isDragging && over?.rect?.top !== undefined && rect.current?.top !== undefined\n ? over.rect.top > rect.current?.top\n ? over.rect.bottom - rect.current?.bottom\n : over.rect.top - rect.current?.top\n : undefined;\n\n const placeholderStyle = placeholderOffsetY ? { transform: `translateY(${placeholderOffsetY}px)` } : undefined;\n\n return (\n <li className={clsx(styles['content-display-option'], styles['sortable-item'])}>\n {isDragging && <div className={getClassName('placeholder')} style={placeholderStyle} />}\n <div\n ref={setNodeRef}\n className={clsx(\n getClassName('content'),\n styles.draggable,\n isDragging && styles.active,\n isSorting && styles.sorting\n )}\n style={style}\n >\n <DragHandle attributes={dragHandleAttributes} hideFocus={isDragging} listeners={combinedListeners} />\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(option)}\n disabled={option.alwaysVisible === true}\n controlId={controlId}\n />\n </div>\n </div>\n </li>\n );\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
import './styles.scoped.css';
|
|
3
|
+
export default {
|
|
4
|
+
"sortable-item-toggle": "awsui_sortable-item-toggle_1f3h0_beb9k_185",
|
|
5
|
+
"sortable-item": "awsui_sortable-item_1f3h0_beb9k_185",
|
|
6
|
+
"sortable-item-placeholder": "awsui_sortable-item-placeholder_1f3h0_beb9k_193",
|
|
7
|
+
"sortable-item-content": "awsui_sortable-item-content_1f3h0_beb9k_203",
|
|
8
|
+
"draggable": "awsui_draggable_1f3h0_beb9k_213",
|
|
9
|
+
"active": "awsui_active_1f3h0_beb9k_222",
|
|
10
|
+
"sorting": "awsui_sorting_1f3h0_beb9k_228",
|
|
11
|
+
"sortable-item-label": "awsui_sortable-item-label_1f3h0_beb9k_271",
|
|
12
|
+
"content-display": "awsui_content-display_1f3h0_beb9k_276",
|
|
13
|
+
"content-display-groups": "awsui_content-display-groups_1f3h0_beb9k_277",
|
|
14
|
+
"content-display-group": "awsui_content-display-group_1f3h0_beb9k_277",
|
|
15
|
+
"content-display-option": "awsui_content-display-option_1f3h0_beb9k_279",
|
|
16
|
+
"content-display-title": "awsui_content-display-title_1f3h0_beb9k_283",
|
|
17
|
+
"content-display-description": "awsui_content-display-description_1f3h0_beb9k_291",
|
|
18
|
+
"content-display-option-list": "awsui_content-display-option-list_1f3h0_beb9k_299"
|
|
19
|
+
};
|
|
20
|
+
|
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
/*
|
|
6
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
7
|
+
SPDX-License-Identifier: Apache-2.0
|
|
8
|
+
*/
|
|
9
|
+
/*
|
|
10
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
11
|
+
SPDX-License-Identifier: Apache-2.0
|
|
12
|
+
*/
|
|
13
|
+
/*
|
|
14
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
15
|
+
SPDX-License-Identifier: Apache-2.0
|
|
16
|
+
*/
|
|
17
|
+
/*
|
|
18
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
19
|
+
SPDX-License-Identifier: Apache-2.0
|
|
20
|
+
*/
|
|
21
|
+
/*
|
|
22
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
23
|
+
SPDX-License-Identifier: Apache-2.0
|
|
24
|
+
*/
|
|
25
|
+
/*
|
|
26
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
27
|
+
SPDX-License-Identifier: Apache-2.0
|
|
28
|
+
*/
|
|
29
|
+
/*
|
|
30
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
31
|
+
SPDX-License-Identifier: Apache-2.0
|
|
32
|
+
*/
|
|
33
|
+
/*
|
|
34
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
35
|
+
SPDX-License-Identifier: Apache-2.0
|
|
36
|
+
*/
|
|
37
|
+
/*
|
|
38
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
39
|
+
SPDX-License-Identifier: Apache-2.0
|
|
40
|
+
*/
|
|
41
|
+
/*
|
|
42
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
43
|
+
SPDX-License-Identifier: Apache-2.0
|
|
44
|
+
*/
|
|
45
|
+
/*
|
|
46
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
47
|
+
SPDX-License-Identifier: Apache-2.0
|
|
48
|
+
*/
|
|
49
|
+
/*
|
|
50
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
51
|
+
SPDX-License-Identifier: Apache-2.0
|
|
52
|
+
*/
|
|
53
|
+
/*
|
|
54
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
55
|
+
SPDX-License-Identifier: Apache-2.0
|
|
56
|
+
*/
|
|
57
|
+
/*
|
|
58
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
59
|
+
SPDX-License-Identifier: Apache-2.0
|
|
60
|
+
*/
|
|
61
|
+
/*
|
|
62
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
63
|
+
SPDX-License-Identifier: Apache-2.0
|
|
64
|
+
*/
|
|
65
|
+
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
66
|
+
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
67
|
+
/*
|
|
68
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
69
|
+
SPDX-License-Identifier: Apache-2.0
|
|
70
|
+
*/
|
|
71
|
+
/*
|
|
72
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
73
|
+
SPDX-License-Identifier: Apache-2.0
|
|
74
|
+
*/
|
|
75
|
+
/*
|
|
76
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
77
|
+
SPDX-License-Identifier: Apache-2.0
|
|
78
|
+
*/
|
|
79
|
+
/*
|
|
80
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
81
|
+
SPDX-License-Identifier: Apache-2.0
|
|
82
|
+
*/
|
|
83
|
+
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
84
|
+
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
85
|
+
/*
|
|
86
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
87
|
+
SPDX-License-Identifier: Apache-2.0
|
|
88
|
+
*/
|
|
89
|
+
/*
|
|
90
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
|
+
SPDX-License-Identifier: Apache-2.0
|
|
92
|
+
*/
|
|
93
|
+
/*
|
|
94
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
|
+
SPDX-License-Identifier: Apache-2.0
|
|
96
|
+
*/
|
|
97
|
+
/*
|
|
98
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
99
|
+
SPDX-License-Identifier: Apache-2.0
|
|
100
|
+
*/
|
|
101
|
+
/*
|
|
102
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
103
|
+
SPDX-License-Identifier: Apache-2.0
|
|
104
|
+
*/
|
|
105
|
+
/*
|
|
106
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
107
|
+
SPDX-License-Identifier: Apache-2.0
|
|
108
|
+
*/
|
|
109
|
+
/*
|
|
110
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
111
|
+
SPDX-License-Identifier: Apache-2.0
|
|
112
|
+
*/
|
|
113
|
+
/*
|
|
114
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
115
|
+
SPDX-License-Identifier: Apache-2.0
|
|
116
|
+
*/
|
|
117
|
+
/*
|
|
118
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
119
|
+
SPDX-License-Identifier: Apache-2.0
|
|
120
|
+
*/
|
|
121
|
+
/*
|
|
122
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
123
|
+
SPDX-License-Identifier: Apache-2.0
|
|
124
|
+
*/
|
|
125
|
+
/*
|
|
126
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
127
|
+
SPDX-License-Identifier: Apache-2.0
|
|
128
|
+
*/
|
|
129
|
+
/*
|
|
130
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
131
|
+
SPDX-License-Identifier: Apache-2.0
|
|
132
|
+
*/
|
|
133
|
+
/*
|
|
134
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
135
|
+
SPDX-License-Identifier: Apache-2.0
|
|
136
|
+
*/
|
|
137
|
+
/*
|
|
138
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
139
|
+
SPDX-License-Identifier: Apache-2.0
|
|
140
|
+
*/
|
|
141
|
+
/*
|
|
142
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
143
|
+
SPDX-License-Identifier: Apache-2.0
|
|
144
|
+
*/
|
|
145
|
+
/*
|
|
146
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
147
|
+
SPDX-License-Identifier: Apache-2.0
|
|
148
|
+
*/
|
|
149
|
+
/*
|
|
150
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
151
|
+
SPDX-License-Identifier: Apache-2.0
|
|
152
|
+
*/
|
|
153
|
+
/*
|
|
154
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
155
|
+
SPDX-License-Identifier: Apache-2.0
|
|
156
|
+
*/
|
|
157
|
+
/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
158
|
+
/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
|
|
159
|
+
/*
|
|
160
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
161
|
+
SPDX-License-Identifier: Apache-2.0
|
|
162
|
+
*/
|
|
163
|
+
/*
|
|
164
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
165
|
+
SPDX-License-Identifier: Apache-2.0
|
|
166
|
+
*/
|
|
167
|
+
/*
|
|
168
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
169
|
+
SPDX-License-Identifier: Apache-2.0
|
|
170
|
+
*/
|
|
171
|
+
/*
|
|
172
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
173
|
+
SPDX-License-Identifier: Apache-2.0
|
|
174
|
+
*/
|
|
175
|
+
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
176
|
+
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
177
|
+
/*
|
|
178
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
179
|
+
SPDX-License-Identifier: Apache-2.0
|
|
180
|
+
*/
|
|
181
|
+
/*
|
|
182
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
183
|
+
SPDX-License-Identifier: Apache-2.0
|
|
184
|
+
*/
|
|
185
|
+
.awsui_sortable-item-toggle_1f3h0_beb9k_185:not(#\9) {
|
|
186
|
+
/* used in test-utils */
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.awsui_sortable-item_1f3h0_beb9k_185:not(#\9) {
|
|
190
|
+
position: relative;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.awsui_sortable-item-placeholder_1f3h0_beb9k_193:not(#\9) {
|
|
194
|
+
position: absolute;
|
|
195
|
+
top: 0;
|
|
196
|
+
bottom: 0;
|
|
197
|
+
left: 0;
|
|
198
|
+
right: 0;
|
|
199
|
+
background: var(--color-drag-placeholder-hover-3ohnz1, #d3e7f9);
|
|
200
|
+
border-radius: var(--border-radius-item-u2ibpi, 8px);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.awsui_sortable-item-content_1f3h0_beb9k_203:not(#\9) {
|
|
204
|
+
border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
205
|
+
display: flex;
|
|
206
|
+
flex-wrap: nowrap;
|
|
207
|
+
justify-content: space-between;
|
|
208
|
+
align-items: start;
|
|
209
|
+
padding-top: var(--space-xs-rsr2qu, 8px);
|
|
210
|
+
padding-bottom: var(--space-xs-rsr2qu, 8px);
|
|
211
|
+
padding-right: 0;
|
|
212
|
+
}
|
|
213
|
+
.awsui_sortable-item-content_1f3h0_beb9k_203:not(#\9):not(.awsui_draggable_1f3h0_beb9k_213) {
|
|
214
|
+
padding-left: var(--space-scaled-l-t03y3z, 20px);
|
|
215
|
+
}
|
|
216
|
+
.awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213:not(#\9) {
|
|
217
|
+
padding-left: 0;
|
|
218
|
+
padding-right: var(--space-scaled-xs-6859qs, 8px);
|
|
219
|
+
background-color: var(--color-background-container-content-i8i4a0, #ffffff);
|
|
220
|
+
z-index: 1;
|
|
221
|
+
}
|
|
222
|
+
.awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9) {
|
|
223
|
+
position: relative;
|
|
224
|
+
z-index: 2;
|
|
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);
|
|
227
|
+
}
|
|
228
|
+
.awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213:not(#\9):not(.awsui_active_1f3h0_beb9k_222).awsui_sorting_1f3h0_beb9k_228 {
|
|
229
|
+
transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
|
|
230
|
+
}
|
|
231
|
+
@media (prefers-reduced-motion: reduce) {
|
|
232
|
+
.awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213:not(#\9):not(.awsui_active_1f3h0_beb9k_222).awsui_sorting_1f3h0_beb9k_228 {
|
|
233
|
+
animation: none;
|
|
234
|
+
transition: none;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
.awsui-motion-disabled .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213:not(#\9):not(.awsui_active_1f3h0_beb9k_222).awsui_sorting_1f3h0_beb9k_228, .awsui-mode-entering .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213:not(#\9):not(.awsui_active_1f3h0_beb9k_222).awsui_sorting_1f3h0_beb9k_228 {
|
|
238
|
+
animation: none;
|
|
239
|
+
transition: none;
|
|
240
|
+
}
|
|
241
|
+
body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9) {
|
|
242
|
+
transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
|
|
243
|
+
position: relative;
|
|
244
|
+
}
|
|
245
|
+
@media (prefers-reduced-motion: reduce) {
|
|
246
|
+
body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9) {
|
|
247
|
+
animation: none;
|
|
248
|
+
transition: none;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
.awsui-motion-disabled body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9), .awsui-mode-entering body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9) {
|
|
252
|
+
animation: none;
|
|
253
|
+
transition: none;
|
|
254
|
+
}
|
|
255
|
+
body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9) {
|
|
256
|
+
outline: 2px dotted transparent;
|
|
257
|
+
outline-offset: calc(0px - 1px);
|
|
258
|
+
}
|
|
259
|
+
body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_beb9k_203.awsui_draggable_1f3h0_beb9k_213.awsui_active_1f3h0_beb9k_222:not(#\9)::before {
|
|
260
|
+
content: " ";
|
|
261
|
+
display: block;
|
|
262
|
+
position: absolute;
|
|
263
|
+
left: calc(-1 * 0px);
|
|
264
|
+
top: calc(-1 * 0px);
|
|
265
|
+
width: calc(100% + 2 * 0px);
|
|
266
|
+
height: calc(100% + 2 * 0px);
|
|
267
|
+
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
268
|
+
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.awsui_sortable-item-label_1f3h0_beb9k_271:not(#\9) {
|
|
272
|
+
padding-right: var(--space-l-4vl6xu, 20px);
|
|
273
|
+
flex-grow: 1;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.awsui_content-display_1f3h0_beb9k_276:not(#\9),
|
|
277
|
+
.awsui_content-display-groups_1f3h0_beb9k_277:not(#\9),
|
|
278
|
+
.awsui_content-display-group_1f3h0_beb9k_277:not(#\9),
|
|
279
|
+
.awsui_content-display-option_1f3h0_beb9k_279:not(#\9) {
|
|
280
|
+
/* used in test-utils */
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.awsui_content-display-title_1f3h0_beb9k_283:not(#\9) {
|
|
284
|
+
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
285
|
+
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
286
|
+
font-weight: var(--font-display-label-weight-m18hjh, 700);
|
|
287
|
+
color: var(--color-text-form-label-k3j0b4, #000716);
|
|
288
|
+
margin: 0;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.awsui_content-display-description_1f3h0_beb9k_291:not(#\9) {
|
|
292
|
+
color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
|
|
293
|
+
font-size: var(--font-body-s-size-ukw2p9, 12px);
|
|
294
|
+
line-height: var(--font-body-s-line-height-kdsbrl, 16px);
|
|
295
|
+
letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
|
|
296
|
+
margin-top: var(--space-scaled-xxxs-lo883m, 2px);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.awsui_content-display-option-list_1f3h0_beb9k_299:not(#\9) {
|
|
300
|
+
position: relative;
|
|
301
|
+
list-style: none;
|
|
302
|
+
padding: 0;
|
|
303
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
// es-module interop with Babel and Typescript
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
module.exports.default = {
|
|
5
|
+
"sortable-item-toggle": "awsui_sortable-item-toggle_1f3h0_beb9k_185",
|
|
6
|
+
"sortable-item": "awsui_sortable-item_1f3h0_beb9k_185",
|
|
7
|
+
"sortable-item-placeholder": "awsui_sortable-item-placeholder_1f3h0_beb9k_193",
|
|
8
|
+
"sortable-item-content": "awsui_sortable-item-content_1f3h0_beb9k_203",
|
|
9
|
+
"draggable": "awsui_draggable_1f3h0_beb9k_213",
|
|
10
|
+
"active": "awsui_active_1f3h0_beb9k_222",
|
|
11
|
+
"sorting": "awsui_sorting_1f3h0_beb9k_228",
|
|
12
|
+
"sortable-item-label": "awsui_sortable-item-label_1f3h0_beb9k_271",
|
|
13
|
+
"content-display": "awsui_content-display_1f3h0_beb9k_276",
|
|
14
|
+
"content-display-groups": "awsui_content-display-groups_1f3h0_beb9k_277",
|
|
15
|
+
"content-display-group": "awsui_content-display-group_1f3h0_beb9k_277",
|
|
16
|
+
"content-display-option": "awsui_content-display-option_1f3h0_beb9k_279",
|
|
17
|
+
"content-display-title": "awsui_content-display-title_1f3h0_beb9k_283",
|
|
18
|
+
"content-display-description": "awsui_content-display-description_1f3h0_beb9k_291",
|
|
19
|
+
"content-display-option-list": "awsui_content-display-option-list_1f3h0_beb9k_299"
|
|
20
|
+
};
|
|
21
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CollisionDetection, KeyboardCoordinateGetter, UniqueIdentifier } from '@dnd-kit/core';
|
|
3
|
+
import { CollectionPreferencesProps } from '../interfaces';
|
|
4
|
+
export default function useDragAndDropReorder({ sortedOptions, }: {
|
|
5
|
+
sortedOptions: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;
|
|
6
|
+
}): {
|
|
7
|
+
activeItem: UniqueIdentifier | null;
|
|
8
|
+
collisionDetection: CollisionDetection;
|
|
9
|
+
coordinateGetter: KeyboardCoordinateGetter;
|
|
10
|
+
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
11
|
+
sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
|
|
12
|
+
setActiveItem: (id: UniqueIdentifier | null) => void;
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=use-drag-and-drop-reorder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-drag-and-drop-reorder.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/use-drag-and-drop-reorder.ts"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,kBAAkB,EAElB,wBAAwB,EAExB,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AA+B3D,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,aAAa,GACd,EAAE;IACD,aAAa,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;CAC/E;;;;2BAa+B,mBAAmB;;wBARtB,gBAAgB,GAAG,IAAI;EA+GnD"}
|