@cloudscape-design/components 3.0.262 → 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/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 -23
- package/table/body-cell/styles.scoped.css +59 -59
- package/table/body-cell/styles.selectors.js +23 -23
- 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 +7 -5
- package/table/internal.js.map +1 -1
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +3 -6
- package/table/thead.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/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/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/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/THIRD-PARTY-LICENSES
CHANGED
|
@@ -246,3 +246,34 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
|
|
|
246
246
|
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
|
|
247
247
|
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
|
|
248
248
|
THIS SOFTWARE.
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
Name: dnd-kit/core
|
|
253
|
+
Version: 6.0.8
|
|
254
|
+
License: MIT
|
|
255
|
+
Private: false
|
|
256
|
+
Description: A lightweight React library for building performant and accessible drag and drop experiences.
|
|
257
|
+
Repository: git+https://github.com/clauderic/dnd-kit.git
|
|
258
|
+
|
|
259
|
+
MIT License
|
|
260
|
+
|
|
261
|
+
Copyright (c) 2021, Claudéric Demers
|
|
262
|
+
|
|
263
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
264
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
265
|
+
in the Software without restriction, including without limitation the rights
|
|
266
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
267
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
268
|
+
furnished to do so, subject to the following conditions:
|
|
269
|
+
|
|
270
|
+
The above copyright notice and this permission notice shall be included in all
|
|
271
|
+
copies or substantial portions of the Software.
|
|
272
|
+
|
|
273
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
274
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
275
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
276
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
277
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
278
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
279
|
+
SOFTWARE.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CollectionPreferencesProps } from '../interfaces';
|
|
3
|
+
interface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {
|
|
4
|
+
onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;
|
|
5
|
+
value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
|
|
6
|
+
}
|
|
7
|
+
export default function ContentDisplayPreference({ title, description, options, value, onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, }: ContentDisplayPreferenceProps): JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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;AAa3D,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,eA6E/B"}
|
|
@@ -0,0 +1,55 @@
|
|
|
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 { useUniqueId } from '../../internal/hooks/use-unique-id';
|
|
5
|
+
import styles from '../styles.css.js';
|
|
6
|
+
import { getSortedOptions } from './utils';
|
|
7
|
+
import { DndContext } from '@dnd-kit/core';
|
|
8
|
+
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
9
|
+
import { SortableItem } from './sortable-item';
|
|
10
|
+
import useDragAndDropReorder from './use-drag-and-drop-reorder';
|
|
11
|
+
import useLiveAnnouncements from './use-live-announcements';
|
|
12
|
+
const componentPrefix = 'content-display';
|
|
13
|
+
const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
|
|
14
|
+
export default function ContentDisplayPreference({ title, description, options, value = options.map(({ id }) => ({
|
|
15
|
+
id,
|
|
16
|
+
visible: true,
|
|
17
|
+
})), onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, }) {
|
|
18
|
+
const idPrefix = useUniqueId(componentPrefix);
|
|
19
|
+
const onToggle = (option) => {
|
|
20
|
+
onChange(value.map(item => (item.id === option.id ? Object.assign(Object.assign({}, item), { visible: !option.visible }) : item)));
|
|
21
|
+
};
|
|
22
|
+
const titleId = `${idPrefix}-title`;
|
|
23
|
+
const descriptionId = `${idPrefix}-description`;
|
|
24
|
+
const sortedOptions = getSortedOptions({ options, contentDisplay: value });
|
|
25
|
+
const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
|
|
26
|
+
sortedOptions,
|
|
27
|
+
});
|
|
28
|
+
const announcements = useLiveAnnouncements({
|
|
29
|
+
isDragging: activeItem !== null,
|
|
30
|
+
liveAnnouncementDndStarted,
|
|
31
|
+
liveAnnouncementDndItemReordered,
|
|
32
|
+
liveAnnouncementDndItemCommitted,
|
|
33
|
+
liveAnnouncementDndDiscarded,
|
|
34
|
+
sortedOptions: value,
|
|
35
|
+
});
|
|
36
|
+
return (React.createElement("div", { className: styles[componentPrefix] },
|
|
37
|
+
React.createElement("h3", { className: getClassName('title'), id: titleId }, title),
|
|
38
|
+
React.createElement("p", { className: getClassName('description'), id: descriptionId }, description),
|
|
39
|
+
React.createElement(DndContext, { sensors: sensors, collisionDetection: collisionDetection, accessibility: {
|
|
40
|
+
announcements,
|
|
41
|
+
restoreFocus: false,
|
|
42
|
+
screenReaderInstructions: dragHandleAriaDescription ? { draggable: dragHandleAriaDescription } : undefined,
|
|
43
|
+
}, onDragStart: ({ active }) => setActiveItem(active.id), onDragEnd: event => {
|
|
44
|
+
setActiveItem(null);
|
|
45
|
+
const { active, over } = event;
|
|
46
|
+
if (over && active.id !== over.id) {
|
|
47
|
+
const oldIndex = value.findIndex(({ id }) => id === active.id);
|
|
48
|
+
const newIndex = value.findIndex(({ id }) => id === over.id);
|
|
49
|
+
onChange(arrayMove([...value], oldIndex, newIndex));
|
|
50
|
+
}
|
|
51
|
+
}, onDragCancel: () => setActiveItem(null) },
|
|
52
|
+
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 => (React.createElement(SortableItem, { dragHandleAriaLabel: dragHandleAriaLabel, key: option.id, onKeyDown: handleKeyDown, onToggle: onToggle, option: option }))))))));
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { SortableItem } from './sortable-item';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\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 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 <SortableItem\n dragHandleAriaLabel={dragHandleAriaLabel}\n key={option.id}\n onKeyDown={handleKeyDown}\n onToggle={onToggle}\n option={option}\n />\n ))}\n </SortableContext>\n </ul>\n </DndContext>\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/defaults.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,aAAa,EAAE,MAAM,eAAe,CAAC;AAE5D,eAAO,MAAM,oBAAoB,EAAE,aAIlC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { KeyboardCode } from '@dnd-kit/core';
|
|
4
|
+
export const defaultKeyboardCodes = {
|
|
5
|
+
start: [KeyboardCode.Space, KeyboardCode.Enter],
|
|
6
|
+
cancel: [KeyboardCode.Esc],
|
|
7
|
+
end: [KeyboardCode.Space, KeyboardCode.Enter],
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=defaults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/defaults.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,YAAY,EAAiB,MAAM,eAAe,CAAC;AAE5D,MAAM,CAAC,MAAM,oBAAoB,GAAkB;IACjD,KAAK,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC/C,MAAM,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC;IAC1B,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;CAC9C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { KeyboardCode, KeyboardCodes } from '@dnd-kit/core';\n\nexport const defaultKeyboardCodes: KeyboardCodes = {\n start: [KeyboardCode.Space, KeyboardCode.Enter],\n cancel: [KeyboardCode.Esc],\n end: [KeyboardCode.Space, KeyboardCode.Enter],\n};\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { Activators, SensorInstance } from '@dnd-kit/core';
|
|
2
|
+
import { KeyboardSensorOptions, KeyboardSensorProps } from '@dnd-kit/core';
|
|
3
|
+
export declare class KeyboardSensor implements SensorInstance {
|
|
4
|
+
private props;
|
|
5
|
+
autoScrollEnabled: boolean;
|
|
6
|
+
private referenceCoordinates;
|
|
7
|
+
private listeners;
|
|
8
|
+
private windowListeners;
|
|
9
|
+
constructor(props: KeyboardSensorProps);
|
|
10
|
+
private attach;
|
|
11
|
+
private handleStart;
|
|
12
|
+
private handleKeyDown;
|
|
13
|
+
private handleMove;
|
|
14
|
+
private handleEnd;
|
|
15
|
+
private handleCancel;
|
|
16
|
+
private detach;
|
|
17
|
+
static activators: Activators<KeyboardSensorOptions>;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/index.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAe3E,qBAAa,cAAe,YAAW,cAAc;IAMvC,OAAO,CAAC,KAAK;IALlB,iBAAiB,UAAS;IACjC,OAAO,CAAC,oBAAoB,CAA0B;IACtD,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,eAAe,CAAY;gBAEf,KAAK,EAAE,mBAAmB;IAc9C,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,MAAM;IAQd,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,qBAAqB,CAAC,CAuBlD;CACH"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { subtract as getCoordinatesDelta, getOwnerDocument, getWindow, isKeyboardEvent, } from '@dnd-kit/utilities';
|
|
2
|
+
import { defaultCoordinates } from '@dnd-kit/core';
|
|
3
|
+
import { applyScroll } from './utilities/scroll';
|
|
4
|
+
import { EventName } from './utilities/events';
|
|
5
|
+
import { Listeners } from './utilities/listeners';
|
|
6
|
+
import { defaultKeyboardCodes } from './defaults';
|
|
7
|
+
import { scrollElementIntoView } from '../../../internal/utils/scrollable-containers';
|
|
8
|
+
// Slightly modified version of @dnd-kit's KeyboardSensor:
|
|
9
|
+
// https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/sensors/keyboard/KeyboardSensor.ts
|
|
10
|
+
// The only difference is that here, reordering is deactivated on blur, as in
|
|
11
|
+
// this PR: https://github.com/clauderic/dnd-kit/pull/1087.
|
|
12
|
+
// If it is merged, then @dnd-kit's KeyboardSensor can be used instead
|
|
13
|
+
// and all files under this directory (`keyboard-sensor`) can be removed.
|
|
14
|
+
// Changes from mainstream are marked below as "Customization"
|
|
15
|
+
export class KeyboardSensor {
|
|
16
|
+
constructor(props) {
|
|
17
|
+
this.props = props;
|
|
18
|
+
this.autoScrollEnabled = false;
|
|
19
|
+
const { event: { target }, } = props;
|
|
20
|
+
this.props = props;
|
|
21
|
+
this.listeners = new Listeners(getOwnerDocument(target));
|
|
22
|
+
this.windowListeners = new Listeners(getWindow(target));
|
|
23
|
+
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
24
|
+
this.handleCancel = this.handleCancel.bind(this);
|
|
25
|
+
this.attach();
|
|
26
|
+
}
|
|
27
|
+
attach() {
|
|
28
|
+
var _a;
|
|
29
|
+
this.handleStart();
|
|
30
|
+
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
|
31
|
+
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
|
32
|
+
// Customization: deactivate reordering on blur event
|
|
33
|
+
(_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.addEventListener(EventName.Blur, this.handleCancel);
|
|
34
|
+
setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
|
|
35
|
+
}
|
|
36
|
+
handleStart() {
|
|
37
|
+
const { activeNode, onStart } = this.props;
|
|
38
|
+
const node = activeNode.node.current;
|
|
39
|
+
if (node) {
|
|
40
|
+
scrollElementIntoView(node);
|
|
41
|
+
}
|
|
42
|
+
onStart(defaultCoordinates);
|
|
43
|
+
}
|
|
44
|
+
handleKeyDown(event) {
|
|
45
|
+
if (isKeyboardEvent(event)) {
|
|
46
|
+
const { active, context, options } = this.props;
|
|
47
|
+
const { keyboardCodes = defaultKeyboardCodes, coordinateGetter } = options;
|
|
48
|
+
const { code } = event;
|
|
49
|
+
if (keyboardCodes.end.indexOf(code) !== -1) {
|
|
50
|
+
this.handleEnd(event);
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (keyboardCodes.cancel.indexOf(code) !== -1) {
|
|
54
|
+
this.handleCancel(event);
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const { collisionRect } = context.current;
|
|
58
|
+
const currentCoordinates = collisionRect ? { x: collisionRect.left, y: collisionRect.top } : defaultCoordinates;
|
|
59
|
+
if (!this.referenceCoordinates) {
|
|
60
|
+
this.referenceCoordinates = currentCoordinates;
|
|
61
|
+
}
|
|
62
|
+
if (!coordinateGetter) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
const newCoordinates = coordinateGetter(event, {
|
|
66
|
+
active,
|
|
67
|
+
context: context.current,
|
|
68
|
+
currentCoordinates,
|
|
69
|
+
});
|
|
70
|
+
if (newCoordinates) {
|
|
71
|
+
const { scrollableAncestors } = context.current;
|
|
72
|
+
const direction = event.code;
|
|
73
|
+
const scrolled = applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors });
|
|
74
|
+
if (!scrolled) {
|
|
75
|
+
this.handleMove(event, getCoordinatesDelta(newCoordinates, this.referenceCoordinates));
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
handleMove(event, coordinates) {
|
|
81
|
+
const { onMove } = this.props;
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
onMove(coordinates);
|
|
84
|
+
}
|
|
85
|
+
handleEnd(event) {
|
|
86
|
+
const { onEnd } = this.props;
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
this.detach();
|
|
89
|
+
onEnd();
|
|
90
|
+
}
|
|
91
|
+
handleCancel(event) {
|
|
92
|
+
const { onCancel } = this.props;
|
|
93
|
+
// Customization: do not prevent browser from managing native focus
|
|
94
|
+
if (event.type !== EventName.Blur) {
|
|
95
|
+
event.preventDefault();
|
|
96
|
+
}
|
|
97
|
+
this.detach();
|
|
98
|
+
onCancel();
|
|
99
|
+
}
|
|
100
|
+
detach() {
|
|
101
|
+
var _a;
|
|
102
|
+
// Customization: clean up listener for blur event
|
|
103
|
+
(_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.removeEventListener(EventName.Blur, this.handleCancel);
|
|
104
|
+
this.listeners.removeAll();
|
|
105
|
+
this.windowListeners.removeAll();
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
KeyboardSensor.activators = [
|
|
109
|
+
{
|
|
110
|
+
eventName: 'onKeyDown',
|
|
111
|
+
handler: (event, { keyboardCodes = defaultKeyboardCodes, onActivation }, { active }) => {
|
|
112
|
+
const { code } = event.nativeEvent;
|
|
113
|
+
if (keyboardCodes.start.indexOf(code) !== -1) {
|
|
114
|
+
const activator = active.activatorNode.current;
|
|
115
|
+
if (activator && event.target !== activator) {
|
|
116
|
+
return false;
|
|
117
|
+
}
|
|
118
|
+
event.preventDefault();
|
|
119
|
+
onActivation === null || onActivation === void 0 ? void 0 : onActivation({ event: event.nativeEvent });
|
|
120
|
+
return true;
|
|
121
|
+
}
|
|
122
|
+
return false;
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
];
|
|
126
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/index.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 React from 'react';\nimport {\n subtract as getCoordinatesDelta,\n getOwnerDocument,\n getWindow,\n isKeyboardEvent,\n Coordinates,\n} from '@dnd-kit/utilities';\n\nimport { defaultCoordinates } from '@dnd-kit/core';\nimport { applyScroll } from './utilities/scroll';\nimport { EventName } from './utilities/events';\nimport { Listeners } from './utilities/listeners';\nimport type { Activators, SensorInstance } from '@dnd-kit/core';\nimport { KeyboardSensorOptions, KeyboardSensorProps } from '@dnd-kit/core';\n\nimport { defaultKeyboardCodes } from './defaults';\nimport { scrollElementIntoView } from '../../../internal/utils/scrollable-containers';\n\n// Slightly modified version of @dnd-kit's KeyboardSensor:\n// https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/sensors/keyboard/KeyboardSensor.ts\n\n// The only difference is that here, reordering is deactivated on blur, as in\n// this PR: https://github.com/clauderic/dnd-kit/pull/1087.\n// If it is merged, then @dnd-kit's KeyboardSensor can be used instead\n// and all files under this directory (`keyboard-sensor`) can be removed.\n\n// Changes from mainstream are marked below as \"Customization\"\n\nexport class KeyboardSensor implements SensorInstance {\n public autoScrollEnabled = false;\n private referenceCoordinates: Coordinates | undefined;\n private listeners: Listeners;\n private windowListeners: Listeners;\n\n constructor(private props: KeyboardSensorProps) {\n const {\n event: { target },\n } = props;\n\n this.props = props;\n this.listeners = new Listeners(getOwnerDocument(target));\n this.windowListeners = new Listeners(getWindow(target));\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n\n this.attach();\n }\n\n private attach() {\n this.handleStart();\n\n this.windowListeners.add(EventName.Resize, this.handleCancel);\n this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);\n\n // Customization: deactivate reordering on blur event\n this.props.event.target?.addEventListener(EventName.Blur, this.handleCancel);\n\n setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));\n }\n\n private handleStart() {\n const { activeNode, onStart } = this.props;\n const node = activeNode.node.current;\n\n if (node) {\n scrollElementIntoView(node);\n }\n\n onStart(defaultCoordinates);\n }\n\n private handleKeyDown(event: Event) {\n if (isKeyboardEvent(event)) {\n const { active, context, options } = this.props;\n const { keyboardCodes = defaultKeyboardCodes, coordinateGetter } = options;\n const { code } = event;\n\n if (keyboardCodes.end.indexOf(code) !== -1) {\n this.handleEnd(event);\n return;\n }\n\n if (keyboardCodes.cancel.indexOf(code) !== -1) {\n this.handleCancel(event);\n return;\n }\n\n const { collisionRect } = context.current;\n const currentCoordinates = collisionRect ? { x: collisionRect.left, y: collisionRect.top } : defaultCoordinates;\n\n if (!this.referenceCoordinates) {\n this.referenceCoordinates = currentCoordinates;\n }\n\n if (!coordinateGetter) {\n return;\n }\n\n const newCoordinates = coordinateGetter(event, {\n active,\n context: context.current,\n currentCoordinates,\n });\n\n if (newCoordinates) {\n const { scrollableAncestors } = context.current;\n const direction = event.code;\n\n const scrolled = applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors });\n\n if (!scrolled) {\n this.handleMove(event, getCoordinatesDelta(newCoordinates, this.referenceCoordinates));\n }\n }\n }\n }\n\n private handleMove(event: Event, coordinates: Coordinates) {\n const { onMove } = this.props;\n\n event.preventDefault();\n onMove(coordinates);\n }\n\n private handleEnd(event: Event) {\n const { onEnd } = this.props;\n\n event.preventDefault();\n this.detach();\n onEnd();\n }\n\n private handleCancel(event: Event) {\n const { onCancel } = this.props;\n\n // Customization: do not prevent browser from managing native focus\n if (event.type !== EventName.Blur) {\n event.preventDefault();\n }\n this.detach();\n onCancel();\n }\n\n private detach() {\n // Customization: clean up listener for blur event\n this.props.event.target?.removeEventListener(EventName.Blur, this.handleCancel);\n\n this.listeners.removeAll();\n this.windowListeners.removeAll();\n }\n\n static activators: Activators<KeyboardSensorOptions> = [\n {\n eventName: 'onKeyDown' as const,\n handler: (event: React.KeyboardEvent, { keyboardCodes = defaultKeyboardCodes, onActivation }, { active }) => {\n const { code } = event.nativeEvent;\n\n if (keyboardCodes.start.indexOf(code) !== -1) {\n const activator = active.activatorNode.current;\n\n if (activator && event.target !== activator) {\n return false;\n }\n\n event.preventDefault();\n\n onActivation?.({ event: event.nativeEvent });\n\n return true;\n }\n\n return false;\n },\n },\n ];\n}\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare enum EventName {
|
|
2
|
+
Blur = "blur",
|
|
3
|
+
Click = "click",
|
|
4
|
+
DragStart = "dragstart",
|
|
5
|
+
Keydown = "keydown",
|
|
6
|
+
ContextMenu = "contextmenu",
|
|
7
|
+
Resize = "resize",
|
|
8
|
+
SelectionChange = "selectionchange",
|
|
9
|
+
VisibilityChange = "visibilitychange"
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=events.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"events.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/utilities/events.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,eAAe,oBAAoB;IACnC,gBAAgB,qBAAqB;CACtC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
export var EventName;
|
|
4
|
+
(function (EventName) {
|
|
5
|
+
EventName["Blur"] = "blur";
|
|
6
|
+
EventName["Click"] = "click";
|
|
7
|
+
EventName["DragStart"] = "dragstart";
|
|
8
|
+
EventName["Keydown"] = "keydown";
|
|
9
|
+
EventName["ContextMenu"] = "contextmenu";
|
|
10
|
+
EventName["Resize"] = "resize";
|
|
11
|
+
EventName["SelectionChange"] = "selectionchange";
|
|
12
|
+
EventName["VisibilityChange"] = "visibilitychange";
|
|
13
|
+
})(EventName || (EventName = {}));
|
|
14
|
+
//# sourceMappingURL=events.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"events.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/utilities/events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAN,IAAY,SASX;AATD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,4BAAe,CAAA;IACf,oCAAuB,CAAA;IACvB,gCAAmB,CAAA;IACnB,wCAA2B,CAAA;IAC3B,8BAAiB,CAAA;IACjB,gDAAmC,CAAA;IACnC,kDAAqC,CAAA;AACvC,CAAC,EATW,SAAS,KAAT,SAAS,QASpB","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport enum EventName {\n Blur = 'blur',\n Click = 'click',\n DragStart = 'dragstart',\n Keydown = 'keydown',\n ContextMenu = 'contextmenu',\n Resize = 'resize',\n SelectionChange = 'selectionchange',\n VisibilityChange = 'visibilitychange',\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare class Listeners {
|
|
2
|
+
private target;
|
|
3
|
+
private listeners;
|
|
4
|
+
constructor(target: EventTarget | null);
|
|
5
|
+
add<T extends Event>(eventName: string, handler: (event: T) => void, options?: AddEventListenerOptions | boolean): void;
|
|
6
|
+
removeAll: () => void;
|
|
7
|
+
}
|
|
8
|
+
//# sourceMappingURL=listeners.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listeners.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/utilities/listeners.ts"],"names":[],"mappings":"AAEA,qBAAa,SAAS;IAGR,OAAO,CAAC,MAAM;IAF1B,OAAO,CAAC,SAAS,CAAqG;gBAElG,MAAM,EAAE,WAAW,GAAG,IAAI;IAEvC,GAAG,CAAC,CAAC,SAAS,KAAK,EACxB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAC3B,OAAO,CAAC,EAAE,uBAAuB,GAAG,OAAO;IAMtC,SAAS,aAEd;CACH"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
export class Listeners {
|
|
4
|
+
constructor(target) {
|
|
5
|
+
this.target = target;
|
|
6
|
+
this.listeners = [];
|
|
7
|
+
this.removeAll = () => {
|
|
8
|
+
this.listeners.forEach(listener => { var _a; return (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener(...listener); });
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
add(eventName, handler, options) {
|
|
12
|
+
var _a;
|
|
13
|
+
(_a = this.target) === null || _a === void 0 ? void 0 : _a.addEventListener(eventName, handler, options);
|
|
14
|
+
this.listeners.push([eventName, handler, options]);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=listeners.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listeners.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/utilities/listeners.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,OAAO,SAAS;IAGpB,YAAoB,MAA0B;QAA1B,WAAM,GAAN,MAAM,CAAoB;QAFtC,cAAS,GAAkG,EAAE,CAAC;QAa/G,cAAS,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAA,EAAA,CAAC,CAAC;QACpF,CAAC,CAAC;IAb+C,CAAC;IAE3C,GAAG,CACR,SAAiB,EACjB,OAA2B,EAC3B,OAA2C;;QAE3C,MAAA,IAAI,CAAC,MAAM,0CAAE,gBAAgB,CAAC,SAAS,EAAE,OAAwB,EAAE,OAAO,CAAC,CAAC;QAC5E,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,OAAwB,EAAE,OAAO,CAAC,CAAC,CAAC;IACtE,CAAC;CAKF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport class Listeners {\n private listeners: [string, EventListenerOrEventListenerObject, AddEventListenerOptions | boolean | undefined][] = [];\n\n constructor(private target: EventTarget | null) {}\n\n public add<T extends Event>(\n eventName: string,\n handler: (event: T) => void,\n options?: AddEventListenerOptions | boolean\n ) {\n this.target?.addEventListener(eventName, handler as EventListener, options);\n this.listeners.push([eventName, handler as EventListener, options]);\n }\n\n public removeAll = () => {\n this.listeners.forEach(listener => this.target?.removeEventListener(...listener));\n };\n}\n"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Coordinates } from '@dnd-kit/utilities';
|
|
2
|
+
export declare function getScrollPosition(scrollingContainer: Element): {
|
|
3
|
+
isTop: boolean;
|
|
4
|
+
isLeft: boolean;
|
|
5
|
+
isBottom: boolean;
|
|
6
|
+
isRight: boolean;
|
|
7
|
+
maxScroll: {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
};
|
|
11
|
+
minScroll: {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare function getScrollElementRect(element: Element): {
|
|
17
|
+
top: number;
|
|
18
|
+
left: number;
|
|
19
|
+
right: number;
|
|
20
|
+
bottom: number;
|
|
21
|
+
width: number;
|
|
22
|
+
height: number;
|
|
23
|
+
};
|
|
24
|
+
export declare function applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors, }: {
|
|
25
|
+
currentCoordinates: Coordinates;
|
|
26
|
+
direction: string;
|
|
27
|
+
newCoordinates: Coordinates;
|
|
28
|
+
scrollableAncestors: Element[];
|
|
29
|
+
}): boolean;
|
|
30
|
+
//# sourceMappingURL=scroll.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/keyboard-sensor/utilities/scroll.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,WAAW,EAAmC,MAAM,oBAAoB,CAAC;AAW7F,wBAAgB,iBAAiB,CAAC,kBAAkB,EAAE,OAAO;;;;;;;;;;;;;EAgC5D;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO;;;;;;;EAwBpD;AAED,wBAAgB,WAAW,CAAC,EAC1B,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,mBAAmB,GACpB,EAAE;IACD,kBAAkB,EAAE,WAAW,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,mBAAmB,EAAE,OAAO,EAAE,CAAC;CAChC,WA0CA"}
|
|
@@ -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
|