@cloudscape-design/components 3.0.262 → 3.0.264
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/autosuggest/options-controller.d.ts +1 -1
- package/autosuggest/options-controller.d.ts.map +1 -1
- package/autosuggest/options-controller.js +22 -23
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.d.ts.map +1 -1
- package/autosuggest/options-list.js +1 -2
- package/autosuggest/options-list.js.map +1 -1
- package/button/internal.d.ts +0 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +1 -3
- package/button/internal.js.map +1 -1
- package/button/styles.css.js +18 -20
- package/button/styles.scoped.css +136 -298
- package/button/styles.selectors.js +18 -20
- 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/expandable-section/expandable-section-header.js +1 -1
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/styles.css.js +24 -23
- package/expandable-section/styles.scoped.css +66 -44
- package/expandable-section/styles.selectors.js +24 -23
- package/file-upload/file-input/index.d.ts.map +1 -1
- package/file-upload/file-input/index.js +2 -1
- package/file-upload/file-input/index.js.map +1 -1
- package/file-upload/file-input/styles.css.js +4 -3
- package/file-upload/file-input/styles.scoped.css +107 -4
- package/file-upload/file-input/styles.selectors.js +4 -3
- package/internal/components/autosuggest-input/index.js +1 -1
- package/internal/components/autosuggest-input/index.js.map +1 -1
- package/internal/components/options-list/utils/test-indexes.d.ts +1 -1
- package/internal/components/options-list/utils/test-indexes.d.ts.map +1 -1
- package/internal/components/options-list/utils/test-indexes.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
|
@@ -2,25 +2,23 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"content": "
|
|
6
|
-
"button": "
|
|
7
|
-
"variant-normal": "awsui_variant-
|
|
8
|
-
"is-activated": "awsui_is-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"variant-icon": "awsui_variant-
|
|
12
|
-
"variant-
|
|
13
|
-
"
|
|
14
|
-
"variant-
|
|
15
|
-
"
|
|
16
|
-
"variant-
|
|
17
|
-
"variant-
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"icon
|
|
23
|
-
"icon-right": "awsui_icon-right_vjswe_uh9zb_1072",
|
|
24
|
-
"icon": "awsui_icon_vjswe_uh9zb_1067"
|
|
5
|
+
"content": "awsui_content_vjswe_12zyy_97",
|
|
6
|
+
"button": "awsui_button_vjswe_12zyy_101",
|
|
7
|
+
"variant-normal": "awsui_variant-normal_vjswe_12zyy_126",
|
|
8
|
+
"is-activated": "awsui_is-activated_vjswe_12zyy_139",
|
|
9
|
+
"variant-icon": "awsui_variant-icon_vjswe_12zyy_166",
|
|
10
|
+
"variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_12zyy_166",
|
|
11
|
+
"variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_12zyy_166",
|
|
12
|
+
"variant-inline-icon": "awsui_variant-inline-icon_vjswe_12zyy_184",
|
|
13
|
+
"disabled": "awsui_disabled_vjswe_12zyy_202",
|
|
14
|
+
"variant-primary": "awsui_variant-primary_vjswe_12zyy_210",
|
|
15
|
+
"variant-link": "awsui_variant-link_vjswe_12zyy_294",
|
|
16
|
+
"variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_12zyy_714",
|
|
17
|
+
"variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_12zyy_801",
|
|
18
|
+
"button-no-text": "awsui_button-no-text_vjswe_12zyy_885",
|
|
19
|
+
"button-no-wrap": "awsui_button-no-wrap_vjswe_12zyy_889",
|
|
20
|
+
"icon-left": "awsui_icon-left_vjswe_12zyy_905",
|
|
21
|
+
"icon-right": "awsui_icon-right_vjswe_12zyy_910",
|
|
22
|
+
"icon": "awsui_icon_vjswe_12zyy_905"
|
|
25
23
|
};
|
|
26
24
|
|
|
@@ -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"}
|