@cloudscape-design/components-themeable 3.0.1073 → 3.0.1075

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/index.js

@@ -1,18 +1,11 @@
-import { defaultCoordinates } from '@dnd-kit/core';
+import { defaultCoordinates, KeyboardCode } from '@dnd-kit/core';
 import { getOwnerDocument, getWindow, isKeyboardEvent, subtract as getCoordinatesDelta, } from '@dnd-kit/utilities';
 import { scrollElementIntoView } from '../../../utils/scrollable-containers';
 import { defaultKeyboardCodes } from './defaults';
 import { EventName } from './utilities/events';
 import { Listeners } from './utilities/listeners';
 import { applyScroll } from './utilities/scroll';
-// Slightly modified version of @dnd-kit's KeyboardSensor:
-// https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/sensors/keyboard/KeyboardSensor.ts
-// The only difference is that here, reordering is deactivated on blur, as in
-// this PR: https://github.com/clauderic/dnd-kit/pull/1087.
-// If it is merged, then @dnd-kit's KeyboardSensor can be used instead
-// and all files under this directory (`keyboard-sensor`) can be removed.
-// Changes from mainstream are marked below as "Customization"
-export class KeyboardSensor {
+export class KeyboardAndUAPSensor {
     constructor(props) {
         this.props = props;
         this.autoScrollEnabled = false;
@@ -21,6 +14,8 @@ export class KeyboardSensor {
         this.listeners = new Listeners(getOwnerDocument(target));
         this.windowListeners = new Listeners(getWindow(target));
         this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleCustomDirectionEvent = this.handleCustomDirectionEvent.bind(this);
+        this.handleEnd = this.handleEnd.bind(this);
         this.handleCancel = this.handleCancel.bind(this);
         this.attach();
     }
@@ -29,9 +24,12 @@ export class KeyboardSensor {
         this.handleStart();
         this.windowListeners.add(EventName.Resize, this.handleCancel);
         this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
-        // Customization: deactivate reordering on blur event
-        (_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.addEventListener(EventName.Blur, this.handleCancel);
-        setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
+        (_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.addEventListener(EventName.Blur, this.handleEnd);
+        setTimeout(() => {
+            this.listeners.add(EventName.Keydown, this.handleKeyDown);
+            this.listeners.add(EventName.CustomDown, this.handleCustomDirectionEvent);
+            this.listeners.add(EventName.CustomUp, this.handleCustomDirectionEvent);
+        });
     }
     handleStart() {
         const { activeNode, onStart } = this.props;
@@ -43,8 +41,8 @@ export class KeyboardSensor {
     }
     handleKeyDown(event) {
         if (isKeyboardEvent(event)) {
-            const { active, context, options } = this.props;
-            const { keyboardCodes = defaultKeyboardCodes, coordinateGetter } = options;
+            const { options } = this.props;
+            const { keyboardCodes = defaultKeyboardCodes } = options;
             const { code } = event;
             if (keyboardCodes.end.indexOf(code) !== -1) {
                 this.handleEnd(event);
@@ -54,26 +52,44 @@ export class KeyboardSensor {
                 this.handleCancel(event);
                 return;
             }
-            const { collisionRect } = context.current;
-            const currentCoordinates = collisionRect ? { x: collisionRect.left, y: collisionRect.top } : defaultCoordinates;
-            if (!this.referenceCoordinates) {
-                this.referenceCoordinates = currentCoordinates;
+            switch (code) {
+                case KeyboardCode.Up:
+                    this.handleDirectionalMove(event, 'up');
+                    break;
+                case KeyboardCode.Down:
+                    this.handleDirectionalMove(event, 'down');
+                    break;
             }
-            if (!coordinateGetter) {
-                return;
-            }
-            const newCoordinates = coordinateGetter(event, {
-                active,
-                context: context.current,
-                currentCoordinates,
-            });
-            if (newCoordinates) {
-                const { scrollableAncestors } = context.current;
-                const direction = event.code;
-                const scrolled = applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors });
-                if (!scrolled) {
-                    this.handleMove(event, getCoordinatesDelta(newCoordinates, this.referenceCoordinates));
-                }
+        }
+    }
+    handleCustomDirectionEvent(event) {
+        switch (event.type) {
+            case EventName.CustomUp:
+                this.handleDirectionalMove(event, 'up');
+                break;
+            case EventName.CustomDown:
+                this.handleDirectionalMove(event, 'down');
+                break;
+        }
+    }
+    handleDirectionalMove(event, direction) {
+        const { active, context, options } = this.props;
+        const { coordinateGetter } = options;
+        const { collisionRect } = context.current;
+        const currentCoordinates = collisionRect ? { x: collisionRect.left, y: collisionRect.top } : defaultCoordinates;
+        if (!this.referenceCoordinates) {
+            this.referenceCoordinates = currentCoordinates;
+        }
+        const newCoordinates = coordinateGetter(event, {
+            active,
+            context: context.current,
+            currentCoordinates,
+        });
+        if (newCoordinates) {
+            const { scrollableAncestors } = context.current;
+            const scrolled = applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors });
+            if (!scrolled) {
+                this.handleMove(event, getCoordinatesDelta(newCoordinates, this.referenceCoordinates));
             }
         }
     }
@@ -90,7 +106,6 @@ export class KeyboardSensor {
     }
     handleCancel(event) {
         const { onCancel } = this.props;
-        // Customization: do not prevent browser from managing native focus
         if (event.type !== EventName.Blur) {
             event.preventDefault();
         }
@@ -99,13 +114,12 @@ export class KeyboardSensor {
     }
     detach() {
         var _a;
-        // Customization: clean up listener for blur event
         (_a = this.props.event.target) === null || _a === void 0 ? void 0 : _a.removeEventListener(EventName.Blur, this.handleCancel);
         this.listeners.removeAll();
         this.windowListeners.removeAll();
     }
 }
-KeyboardSensor.activators = [
+KeyboardAndUAPSensor.activators = [
     {
         eventName: 'onKeyDown',
         handler: (event, { keyboardCodes = defaultKeyboardCodes, onActivation }, { active }) => {
@@ -122,5 +136,15 @@ KeyboardSensor.activators = [
             return false;
         },
     },
+    {
+        eventName: 'onClick',
+        handler: ({ nativeEvent: event }, { onActivation }) => {
+            if (event.button !== 0) {
+                return false;
+            }
+            onActivation === null || onActivation === void 0 ? void 0 : onActivation({ event });
+            return true;
+        },
+    },
 ];
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/internal/components/sortable-area/keyboard-sensor/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAEL,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,QAAQ,IAAI,mBAAmB,GAChC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,0DAA0D;AAC1D,wGAAwG;AAExG,6EAA6E;AAC7E,2DAA2D;AAC3D,sEAAsE;AACtE,yEAAyE;AAEzE,8DAA8D;AAE9D,MAAM,OAAO,cAAc;IAMzB,YAAoB,KAA0B;QAA1B,UAAK,GAAL,KAAK,CAAqB;QALvC,sBAAiB,GAAG,KAAK,CAAC;QAM/B,MAAM,EACJ,KAAK,EAAE,EAAE,MAAM,EAAE,GAClB,GAAG,KAAK,CAAC;QAEV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;QACxD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,MAAM;;QACZ,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAExE,qDAAqD;QACrD,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,0CAAE,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAE7E,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEO,WAAW;QACjB,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3C,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;QAErC,IAAI,IAAI,EAAE;YACR,qBAAqB,CAAC,IAAI,CAAC,CAAC;SAC7B;QAED,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;IAEO,aAAa,CAAC,KAAY;QAChC,IAAI,eAAe,CAAC,KAAK,CAAC,EAAE;YAC1B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAChD,MAAM,EAAE,aAAa,GAAG,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,OAAO,CAAC;YAC3E,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YAEvB,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;gBAC1C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;gBACtB,OAAO;aACR;YAED,IAAI,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;gBAC7C,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACzB,OAAO;aACR;YAED,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;YAC1C,MAAM,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC;YAEhH,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;gBAC9B,IAAI,CAAC,oBAAoB,GAAG,kBAAkB,CAAC;aAChD;YAED,IAAI,CAAC,gBAAgB,EAAE;gBACrB,OAAO;aACR;YAED,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,EAAE;gBAC7C,MAAM;gBACN,OAAO,EAAE,OAAO,CAAC,OAAO;gBACxB,kBAAkB;aACnB,CAAC,CAAC;YAEH,IAAI,cAAc,EAAE;gBAClB,MAAM,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;gBAChD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC;gBAE7B,MAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBAErG,IAAI,CAAC,QAAQ,EAAE;oBACb,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;iBACxF;aACF;SACF;IACH,CAAC;IAEO,UAAU,CAAC,KAAY,EAAE,WAAwB;QACvD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,CAAC,WAAW,CAAC,CAAC;IACtB,CAAC;IAEO,SAAS,CAAC,KAAY;QAC5B,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,KAAK,EAAE,CAAC;IACV,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhC,mEAAmE;QACnE,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,EAAE;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,QAAQ,EAAE,CAAC;IACb,CAAC;IAEO,MAAM;;QACZ,kDAAkD;QAClD,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,0CAAE,mBAAmB,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAEhF,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC;QAC3B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,CAAC;IACnC,CAAC;;AAEM,yBAAU,GAAsC;IACrD;QACE,SAAS,EAAE,WAAoB;QAC/B,OAAO,EAAE,CAAC,KAA0B,EAAE,EAAE,aAAa,GAAG,oBAAoB,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YAC1G,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;YAEnC,IAAI,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;gBAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC;gBAE/C,IAAI,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE;oBAC3C,OAAO,KAAK,CAAC;iBACd;gBAED,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;gBAE7C,OAAO,IAAI,CAAC;aACb;YAED,OAAO,KAAK,CAAC;QACf,CAAC;KACF;CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport type { Activators, SensorInstance } from '@dnd-kit/core';\nimport { defaultCoordinates } from '@dnd-kit/core';\nimport { KeyboardSensorOptions, KeyboardSensorProps } from '@dnd-kit/core';\nimport {\n  Coordinates,\n  getOwnerDocument,\n  getWindow,\n  isKeyboardEvent,\n  subtract as getCoordinatesDelta,\n} from '@dnd-kit/utilities';\n\nimport { scrollElementIntoView } from '../../../utils/scrollable-containers';\nimport { defaultKeyboardCodes } from './defaults';\nimport { EventName } from './utilities/events';\nimport { Listeners } from './utilities/listeners';\nimport { applyScroll } from './utilities/scroll';\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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/internal/components/sortable-area/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 type { Activators, SensorContext, SensorInstance, SensorProps, UniqueIdentifier } from '@dnd-kit/core';\nimport { defaultCoordinates, KeyboardCode } from '@dnd-kit/core';\nimport { KeyboardSensorOptions } from '@dnd-kit/core';\nimport {\n  Coordinates,\n  getOwnerDocument,\n  getWindow,\n  isKeyboardEvent,\n  subtract as getCoordinatesDelta,\n} from '@dnd-kit/utilities';\n\nimport { scrollElementIntoView } from '../../../utils/scrollable-containers';\nimport { defaultKeyboardCodes } from './defaults';\nimport { EventName } from './utilities/events';\nimport { Listeners } from './utilities/listeners';\nimport { applyScroll } from './utilities/scroll';\n\n// Heavily modified version of @dnd-kit's KeyboardSensor, to add support for \"UAP\"-button pointer interactions.\n// https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/sensors/keyboard/KeyboardSensor.ts\n\nexport type KeyboardAndUAPCoordinateGetter = (\n  event: Event,\n  args: {\n    active: UniqueIdentifier;\n    currentCoordinates: Coordinates;\n    context: SensorContext;\n  }\n) => Coordinates | void;\n\ntype KeyboardAndUAPSensorOptions = KeyboardSensorOptions & {\n  coordinateGetter: KeyboardAndUAPCoordinateGetter;\n  onActivation?({ event }: { event: KeyboardEvent | MouseEvent }): void;\n};\n\nexport class KeyboardAndUAPSensor implements SensorInstance {\n  public autoScrollEnabled = false;\n  private referenceCoordinates: Coordinates | undefined;\n  private listeners: Listeners;\n  private windowListeners: Listeners;\n\n  constructor(private props: SensorProps<KeyboardAndUAPSensorOptions>) {\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.handleCustomDirectionEvent = this.handleCustomDirectionEvent.bind(this);\n    this.handleEnd = this.handleEnd.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    this.props.event.target?.addEventListener(EventName.Blur, this.handleEnd);\n\n    setTimeout(() => {\n      this.listeners.add(EventName.Keydown, this.handleKeyDown);\n      this.listeners.add(EventName.CustomDown, this.handleCustomDirectionEvent);\n      this.listeners.add(EventName.CustomUp, this.handleCustomDirectionEvent);\n    });\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 { options } = this.props;\n      const { keyboardCodes = defaultKeyboardCodes } = 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      switch (code) {\n        case KeyboardCode.Up:\n          this.handleDirectionalMove(event, 'up');\n          break;\n        case KeyboardCode.Down:\n          this.handleDirectionalMove(event, 'down');\n          break;\n      }\n    }\n  }\n\n  private handleCustomDirectionEvent(event: Event) {\n    switch (event.type) {\n      case EventName.CustomUp:\n        this.handleDirectionalMove(event, 'up');\n        break;\n      case EventName.CustomDown:\n        this.handleDirectionalMove(event, 'down');\n        break;\n    }\n  }\n\n  private handleDirectionalMove(event: Event, direction: 'up' | 'down') {\n    const { active, context, options } = this.props;\n    const { coordinateGetter } = options;\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    const newCoordinates = coordinateGetter(event, {\n      active,\n      context: context.current,\n      currentCoordinates,\n    });\n\n    if (newCoordinates) {\n      const { scrollableAncestors } = context.current;\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  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    if (event.type !== EventName.Blur) {\n      event.preventDefault();\n    }\n    this.detach();\n    onCancel();\n  }\n\n  private detach() {\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<KeyboardAndUAPSensorOptions> = [\n    {\n      eventName: 'onKeyDown',\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      eventName: 'onClick',\n      handler: ({ nativeEvent: event }: React.MouseEvent, { onActivation }) => {\n        if (event.button !== 0) {\n          return false;\n        }\n\n        onActivation?.({ event });\n\n        return true;\n      },\n    },\n  ];\n}\n"]}

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/events.d.ts

@@ -2,6 +2,8 @@ export declare enum EventName {
     Blur = "blur",
     Keydown = "keydown",
     Resize = "resize",
-    VisibilityChange = "visibilitychange"
+    VisibilityChange = "visibilitychange",
+    CustomDown = "custom-movedown",
+    CustomUp = "custom-moveup"
 }
 //# sourceMappingURL=events.d.ts.map

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/keyboard-sensor/utilities/events.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,gBAAgB,qBAAqB;CACtC"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/keyboard-sensor/utilities/events.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,gBAAgB,qBAAqB;IACrC,UAAU,oBAAoB;IAC9B,QAAQ,kBAAkB;CAC3B"}

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/events.js

@@ -6,5 +6,7 @@ export var EventName;
     EventName["Keydown"] = "keydown";
     EventName["Resize"] = "resize";
     EventName["VisibilityChange"] = "visibilitychange";
+    EventName["CustomDown"] = "custom-movedown";
+    EventName["CustomUp"] = "custom-moveup";
 })(EventName || (EventName = {}));
 //# sourceMappingURL=events.js.map

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/keyboard-sensor/utilities/events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,gCAAmB,CAAA;IACnB,8BAAiB,CAAA;IACjB,kDAAqC,CAAA;AACvC,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB","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  Keydown = 'keydown',\n  Resize = 'resize',\n  VisibilityChange = 'visibilitychange',\n}\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/keyboard-sensor/utilities/events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,CAAN,IAAY,SAOX;AAPD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,gCAAmB,CAAA;IACnB,8BAAiB,CAAA;IACjB,kDAAqC,CAAA;IACrC,2CAA8B,CAAA;IAC9B,uCAA0B,CAAA;AAC5B,CAAC,EAPW,SAAS,KAAT,SAAS,QAOpB","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  Keydown = 'keydown',\n  Resize = 'resize',\n  VisibilityChange = 'visibilitychange',\n  CustomDown = 'custom-movedown',\n  CustomUp = 'custom-moveup',\n}\n"]}

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/scroll.d.ts

@@ -1,7 +1,7 @@
 import { Coordinates } from '@dnd-kit/utilities';
 export declare function applyScroll({ currentCoordinates, direction, newCoordinates, scrollableAncestors, }: {
     currentCoordinates: Coordinates;
-    direction: string;
+    direction: 'up' | 'down';
     newCoordinates: Coordinates;
     scrollableAncestors: Element[];
 }): boolean;

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/keyboard-sensor/utilities/scroll.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,WAAW,EAAmC,MAAM,oBAAoB,CAAC;AAsE7F,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"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/keyboard-sensor/utilities/scroll.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,WAAW,EAAmC,MAAM,oBAAoB,CAAC;AAsE7F,wBAAgB,WAAW,CAAC,EAC1B,kBAAkB,EAClB,SAAS,EACT,cAAc,EACd,mBAAmB,GACpB,EAAE;IACD,kBAAkB,EAAE,WAAW,CAAC;IAChC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,cAAc,EAAE,WAAW,CAAC;IAC5B,mBAAmB,EAAE,OAAO,EAAE,CAAC;CAChC,WAsCA"}

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/scroll.js

@@ -1,6 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { KeyboardCode } from '@dnd-kit/core';
 import { canUseDOM, subtract as getCoordinatesDelta } from '@dnd-kit/utilities';
 function isDocumentScrollingElement(element) {
     if (!canUseDOM || !element) {
@@ -67,17 +66,13 @@ export function applyScroll({ currentCoordinates, direction, newCoordinates, scr
         const { isTop, isBottom, maxScroll, minScroll } = getScrollPosition(scrollContainer);
         const scrollElementRect = getScrollElementRect(scrollContainer);
         const clampedCoordinates = {
-            y: Math.min(direction === KeyboardCode.Down
-                ? scrollElementRect.bottom - scrollElementRect.height / 2
-                : scrollElementRect.bottom, Math.max(direction === KeyboardCode.Down
-                ? scrollElementRect.top
-                : scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y)),
+            y: Math.min(direction === 'down' ? scrollElementRect.bottom - scrollElementRect.height / 2 : scrollElementRect.bottom, Math.max(direction === 'down' ? scrollElementRect.top : scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y)),
         };
-        const canScrollY = (direction === KeyboardCode.Down && !isBottom) || (direction === KeyboardCode.Up && !isTop);
+        const canScrollY = (direction === 'down' && !isBottom) || (direction === 'up' && !isTop);
         if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
             const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
-            const canScrollToNewCoordinates = (direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y) ||
-                (direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y);
+            const canScrollToNewCoordinates = (direction === 'down' && newScrollCoordinates <= maxScroll.y) ||
+                (direction === 'up' && newScrollCoordinates >= minScroll.y);
             if (canScrollToNewCoordinates) {
                 // We don't need to update coordinates, the scroll adjustment alone will trigger
                 // logic to auto-detect the new container we are over

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/utilities/scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/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 { KeyboardCode } from '@dnd-kit/core';\nimport { canUseDOM, Coordinates, subtract as getCoordinatesDelta } from '@dnd-kit/utilities';\n\nfunction isDocumentScrollingElement(element: Element | null) {\n  if (!canUseDOM || !element) {\n    return false;\n  }\n\n  return element === document.scrollingElement;\n}\n\nfunction 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\nfunction 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"]}
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../../../../../src/internal/components/sortable-area/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';\n\nfunction isDocumentScrollingElement(element: Element | null) {\n  if (!canUseDOM || !element) {\n    return false;\n  }\n\n  return element === document.scrollingElement;\n}\n\nfunction 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\nfunction 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: 'up' | 'down';\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 === 'down' ? scrollElementRect.bottom - scrollElementRect.height / 2 : scrollElementRect.bottom,\n        Math.max(\n          direction === 'down' ? scrollElementRect.top : scrollElementRect.top + scrollElementRect.height / 2,\n          newCoordinates.y\n        )\n      ),\n    };\n\n    const canScrollY = (direction === 'down' && !isBottom) || (direction === 'up' && !isTop);\n\n    if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {\n      const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;\n      const canScrollToNewCoordinates =\n        (direction === 'down' && newScrollCoordinates <= maxScroll.y) ||\n        (direction === '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"]}

package/lib/internal/template/internal/components/sortable-area/styles.css.js

@@ -1,13 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "drag-overlay": "awsui_drag-overlay_1ksmw_l5zzy_145",
-  "drag-overlay-item": "awsui_drag-overlay-item_1ksmw_l5zzy_149",
-  "drag-overlay-container": "awsui_drag-overlay-container_1ksmw_l5zzy_176",
-  "active": "awsui_active_1ksmw_l5zzy_204",
-  "placeholder": "awsui_placeholder_1ksmw_l5zzy_214",
-  "placeholder-item": "awsui_placeholder-item_1ksmw_l5zzy_223",
-  "placeholder-container": "awsui_placeholder-container_1ksmw_l5zzy_229",
-  "sorting": "awsui_sorting_1ksmw_l5zzy_236"
+  "drag-overlay": "awsui_drag-overlay_1ksmw_190kb_145",
+  "drag-overlay-item": "awsui_drag-overlay-item_1ksmw_190kb_149",
+  "drag-overlay-container": "awsui_drag-overlay-container_1ksmw_190kb_174",
+  "active": "awsui_active_1ksmw_190kb_200",
+  "placeholder": "awsui_placeholder_1ksmw_190kb_210",
+  "placeholder-item": "awsui_placeholder-item_1ksmw_190kb_219",
+  "placeholder-container": "awsui_placeholder-container_1ksmw_190kb_225",
+  "sorting": "awsui_sorting_1ksmw_190kb_232"
 };
   

package/lib/internal/template/internal/components/sortable-area/styles.scoped.css

@@ -142,24 +142,22 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_drag-overlay_1ksmw_l5zzy_145:not(#\9) {
+.awsui_drag-overlay_1ksmw_190kb_145:not(#\9) {
   box-shadow: var(--shadow-container-active-hawm65, 0px 4px 8px rgba(0, 28, 36, 0.45));
   background-color: var(--color-background-container-content-aemn43, #ffffff);
 }
-.awsui_drag-overlay-item_1ksmw_l5zzy_149:not(#\9) {
+.awsui_drag-overlay-item_1ksmw_190kb_149:not(#\9) {
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay-item_1ksmw_l5zzy_149:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay-item_1ksmw_l5zzy_149:not(#\9) {
+.awsui_drag-overlay-item_1ksmw_190kb_149:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay-item_1ksmw_l5zzy_149:not(#\9)::before {
+.awsui_drag-overlay-item_1ksmw_190kb_149:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -173,20 +171,18 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay-item_1ksmw_l5zzy_149:not
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_drag-overlay-container_1ksmw_l5zzy_176:not(#\9) {
+.awsui_drag-overlay-container_1ksmw_190kb_174:not(#\9) {
   border-start-start-radius: var(--border-radius-container-l30zxy, 0px);
   border-start-end-radius: var(--border-radius-container-l30zxy, 0px);
   border-end-start-radius: var(--border-radius-container-l30zxy, 0px);
   border-end-end-radius: var(--border-radius-container-l30zxy, 0px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay-container_1ksmw_l5zzy_176:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay-container_1ksmw_l5zzy_176:not(#\9) {
+.awsui_drag-overlay-container_1ksmw_190kb_174:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay-container_1ksmw_l5zzy_176:not(#\9)::before {
+.awsui_drag-overlay-container_1ksmw_190kb_174:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -201,7 +197,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay-container_1ksmw_l5zzy_17
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_active_1ksmw_l5zzy_204:not(#\9) {
+.awsui_active_1ksmw_190kb_200:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   color: var(--color-text-body-default-5qid0u, #16191f);
@@ -211,38 +207,38 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay-container_1ksmw_l5zzy_17
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_placeholder_1ksmw_l5zzy_214:not(#\9) {
+.awsui_placeholder_1ksmw_190kb_210:not(#\9) {
   position: relative;
 }
-.awsui_placeholder_1ksmw_l5zzy_214:not(#\9):after {
+.awsui_placeholder_1ksmw_190kb_210:not(#\9):after {
   content: " ";
   position: absolute;
   inset: 0;
   background: var(--color-drag-placeholder-hover-owaghb, #99cbe4);
 }
-.awsui_placeholder-item_1ksmw_l5zzy_223:not(#\9):after {
+.awsui_placeholder-item_1ksmw_190kb_219:not(#\9):after {
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_placeholder-container_1ksmw_l5zzy_229:not(#\9):after {
+.awsui_placeholder-container_1ksmw_190kb_225:not(#\9):after {
   border-start-start-radius: var(--border-radius-container-l30zxy, 0px);
   border-start-end-radius: var(--border-radius-container-l30zxy, 0px);
   border-end-start-radius: var(--border-radius-container-l30zxy, 0px);
   border-end-end-radius: var(--border-radius-container-l30zxy, 0px);
 }
 
-.awsui_sorting_1ksmw_l5zzy_236:not(#\9) {
+.awsui_sorting_1ksmw_190kb_232:not(#\9) {
   transition: transform var(--motion-duration-transition-quick-ucajl5, 90ms) var(--motion-easing-transition-quick-034duw, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_sorting_1ksmw_l5zzy_236:not(#\9) {
+  .awsui_sorting_1ksmw_190kb_232:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_sorting_1ksmw_l5zzy_236:not(#\9), .awsui-mode-entering .awsui_sorting_1ksmw_l5zzy_236:not(#\9) {
+.awsui-motion-disabled .awsui_sorting_1ksmw_190kb_232:not(#\9), .awsui-mode-entering .awsui_sorting_1ksmw_190kb_232:not(#\9) {
   animation: none;
   transition: none;
 }

package/lib/internal/template/internal/components/sortable-area/styles.selectors.js

@@ -2,13 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drag-overlay": "awsui_drag-overlay_1ksmw_l5zzy_145",
-  "drag-overlay-item": "awsui_drag-overlay-item_1ksmw_l5zzy_149",
-  "drag-overlay-container": "awsui_drag-overlay-container_1ksmw_l5zzy_176",
-  "active": "awsui_active_1ksmw_l5zzy_204",
-  "placeholder": "awsui_placeholder_1ksmw_l5zzy_214",
-  "placeholder-item": "awsui_placeholder-item_1ksmw_l5zzy_223",
-  "placeholder-container": "awsui_placeholder-container_1ksmw_l5zzy_229",
-  "sorting": "awsui_sorting_1ksmw_l5zzy_236"
+  "drag-overlay": "awsui_drag-overlay_1ksmw_190kb_145",
+  "drag-overlay-item": "awsui_drag-overlay-item_1ksmw_190kb_149",
+  "drag-overlay-container": "awsui_drag-overlay-container_1ksmw_190kb_174",
+  "active": "awsui_active_1ksmw_190kb_200",
+  "placeholder": "awsui_placeholder_1ksmw_190kb_210",
+  "placeholder-item": "awsui_placeholder-item_1ksmw_190kb_219",
+  "placeholder-container": "awsui_placeholder-container_1ksmw_190kb_225",
+  "sorting": "awsui_sorting_1ksmw_190kb_232"
 };
   

package/lib/internal/template/internal/components/sortable-area/use-drag-and-drop-reorder.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { CollisionDetection, KeyboardCoordinateGetter, UniqueIdentifier } from '@dnd-kit/core';
+import { CollisionDetection, UniqueIdentifier } from '@dnd-kit/core';
 import { SortableAreaProps } from './interfaces';
+import { KeyboardAndUAPCoordinateGetter } from './keyboard-sensor';
 export default function useDragAndDropReorder<Item>({ items, itemDefinition, }: {
     items: readonly Item[];
     itemDefinition: SortableAreaProps.ItemDefinition<Item>;
@@ -8,8 +9,9 @@ export default function useDragAndDropReorder<Item>({ items, itemDefinition, }:
     activeItemId: UniqueIdentifier | null;
     setActiveItemId: (id: UniqueIdentifier | null) => void;
     collisionDetection: CollisionDetection;
-    coordinateGetter: KeyboardCoordinateGetter;
+    coordinateGetter: KeyboardAndUAPCoordinateGetter;
     handleKeyDown: (event: React.KeyboardEvent) => void;
     sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    isKeyboard: React.MutableRefObject<boolean>;
 };
 //# sourceMappingURL=use-drag-and-drop-reorder.d.ts.map

package/lib/internal/template/internal/components/sortable-area/use-drag-and-drop-reorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-drag-and-drop-reorder.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/use-drag-and-drop-reorder.ts"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,kBAAkB,EAElB,wBAAwB,EAExB,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AA8BjD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,IAAI,EAAE,EAClD,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;CACxD;;0BAK4B,gBAAgB,GAAG,IAAI;;;2BAQpB,mBAAmB;;EAwGlD"}
+{"version":3,"file":"use-drag-and-drop-reorder.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/use-drag-and-drop-reorder.ts"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,kBAAkB,EAGlB,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,8BAA8B,EAAwB,MAAM,mBAAmB,CAAC;AAoBzF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,IAAI,EAAE,EAClD,KAAK,EACL,cAAc,GACf,EAAE;IACD,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;CACxD;;0BAK4B,gBAAgB,GAAG,IAAI;;;2BAQpB,mBAAmB;;;EA6GlD"}

package/lib/internal/template/internal/components/sortable-area/use-drag-and-drop-reorder.js

@@ -3,17 +3,8 @@
 import { useRef, useState } from 'react';
 import { closestCenter, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { hasSortableData } from '@dnd-kit/sortable';
-import { KeyboardSensor } from './keyboard-sensor';
-var KeyboardCode;
-(function (KeyboardCode) {
-    KeyboardCode["Space"] = "Space";
-    KeyboardCode["Down"] = "ArrowDown";
-    KeyboardCode["Right"] = "ArrowRight";
-    KeyboardCode["Left"] = "ArrowLeft";
-    KeyboardCode["Up"] = "ArrowUp";
-    KeyboardCode["Esc"] = "Escape";
-    KeyboardCode["Enter"] = "Enter";
-})(KeyboardCode || (KeyboardCode = {}));
+import { KeyboardAndUAPSensor } from './keyboard-sensor';
+import { EventName } from './keyboard-sensor/utilities/events';
 // A custom collision detection algorithm is used when using a keyboard to
 // work around an unexpected behavior when reordering items of variable height
 // with the keyboard.
@@ -41,10 +32,10 @@ export default function useDragAndDropReorder({ items, itemDefinition, }) {
     const handleKeyDown = (event) => {
         if (isKeyboard.current && activeItemId) {
             const currentTargetIndex = items.findIndex(item => itemDefinition.id(item) === activeItemId) + positionDelta.current;
-            if (event.key === 'ArrowDown' && currentTargetIndex < items.length - 1) {
+            if ((event.key === 'ArrowDown' || event.type === EventName.CustomDown) && currentTargetIndex < items.length - 1) {
                 positionDelta.current += 1;
             }
-            else if (event.key === 'ArrowUp' && currentTargetIndex > 0) {
+            else if ((event.key === 'ArrowUp' || event.type === EventName.CustomUp) && currentTargetIndex > 0) {
                 positionDelta.current -= 1;
             }
         }
@@ -78,36 +69,40 @@ export default function useDragAndDropReorder({ items, itemDefinition, }) {
         }
     };
     const coordinateGetter = (event, { context: { active, collisionRect, droppableRects, droppableContainers } }) => {
-        if (event.code === KeyboardCode.Up || event.code === KeyboardCode.Down) {
-            event.preventDefault();
-            if (!active || !collisionRect) {
-                return;
-            }
-            const closestId = getClosestId(active);
-            if (closestId !== null) {
-                const activeDroppable = droppableContainers.get(active.id);
-                const newDroppable = droppableContainers.get(closestId);
-                const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
-                const newNode = newDroppable === null || newDroppable === void 0 ? void 0 : newDroppable.node.current;
-                if (newNode && newRect && activeDroppable && newDroppable) {
-                    const isAfterActive = isAfter(activeDroppable, newDroppable);
-                    const offset = {
-                        x: isAfterActive ? collisionRect.width - newRect.width : 0,
-                        y: isAfterActive ? collisionRect.height - newRect.height : 0,
-                    };
-                    const rectCoordinates = {
-                        x: newRect.left,
-                        y: newRect.top,
-                    };
-                    return {
-                        x: rectCoordinates.x - offset.x,
-                        y: rectCoordinates.y - offset.y,
-                    };
-                }
+        event.preventDefault();
+        if (!active || !collisionRect) {
+            return;
+        }
+        const closestId = getClosestId(active);
+        if (closestId !== null) {
+            const activeDroppable = droppableContainers.get(active.id);
+            const newDroppable = droppableContainers.get(closestId);
+            const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
+            const newNode = newDroppable === null || newDroppable === void 0 ? void 0 : newDroppable.node.current;
+            if (newNode && newRect && activeDroppable && newDroppable) {
+                const isAfterActive = isAfter(activeDroppable, newDroppable);
+                const offset = {
+                    x: isAfterActive ? collisionRect.width - newRect.width : 0,
+                    y: isAfterActive ? collisionRect.height - newRect.height : 0,
+                };
+                const rectCoordinates = {
+                    x: newRect.left,
+                    y: newRect.top,
+                };
+                return {
+                    x: rectCoordinates.x - offset.x,
+                    y: rectCoordinates.y - offset.y,
+                };
             }
         }
     };
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            // allow KeyboardSensor (click to display UAP) to take priority
+            // if handle is clicked without movement
+            distance: 1,
+        },
+    }), useSensor(KeyboardAndUAPSensor, {
         coordinateGetter,
         onActivation: () => {
             isKeyboard.current = true;
@@ -120,6 +115,7 @@ export default function useDragAndDropReorder({ items, itemDefinition, }) {
         coordinateGetter,
         handleKeyDown,
         sensors,
+        isKeyboard,
     };
 }
 function isAfter(a, b) {