@cloudscape-design/components 3.0.849 → 3.0.851

package/internal/components/dnd-container/index.js

@@ -1,67 +1,97 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { joinStrings } from '../../utils/strings';
 import Portal from '../portal';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
 import styles from './styles.css.js';
-export function DndContainer({ getId, sortedOptions, onChange, disabled, renderOption, renderActiveOption, i18nStrings, dragOverlayClassName = styles['drag-overlay'], children = content => content, }) {
-    const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
-        sortedOptions,
-        getId,
+export function DndContainer({ items, renderItem, onItemsChange, disableReorder, i18nStrings, dragOverlayClassName = styles['drag-overlay'], }) {
+    const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({
+        items,
     });
-    const activeOption = activeItem ? sortedOptions.find(option => getId(option) === activeItem) : null;
-    const isDragging = activeItem !== null;
-    const announcements = useLiveAnnouncements(Object.assign({ sortedOptions, getId, isDragging }, i18nStrings));
+    const activeItem = activeItemId ? items.find(item => item.id === activeItemId) : null;
+    const isDragging = activeItemId !== null;
+    const announcements = useLiveAnnouncements(Object.assign({ items, isDragging }, i18nStrings));
+    const portalContainer = usePortalContainer();
     return (React.createElement(DndContext, { sensors: sensors, collisionDetection: collisionDetection, accessibility: {
             announcements,
             restoreFocus: false,
             screenReaderInstructions: i18nStrings.dragHandleAriaDescription
                 ? { draggable: i18nStrings.dragHandleAriaDescription }
                 : undefined,
-        }, onDragStart: ({ active }) => setActiveItem(active.id), onDragEnd: event => {
-            setActiveItem(null);
+            container: portalContainer,
+        }, onDragStart: ({ active }) => setActiveItemId(active.id), onDragEnd: event => {
+            setActiveItemId(null);
             const { active, over } = event;
             if (over && active.id !== over.id) {
-                const oldIndex = sortedOptions.findIndex(option => getId(option) === active.id);
-                const newIndex = sortedOptions.findIndex(option => getId(option) === over.id);
-                onChange(arrayMove([...sortedOptions], oldIndex, newIndex));
+                const oldIndex = items.findIndex(item => item.id === active.id);
+                const newIndex = items.findIndex(item => item.id === over.id);
+                onItemsChange(arrayMove([...items], oldIndex, newIndex));
             }
-        }, onDragCancel: () => setActiveItem(null) },
-        children(React.createElement(SortableContext, { disabled: disabled, items: sortedOptions.map(option => getId(option)), strategy: verticalListSortingStrategy }, sortedOptions.map(option => (React.createElement(DraggableOption, { key: getId(option), option: option, getId: getId, renderOption: renderOption, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings.dragHandleAriaLabel }))))),
-        React.createElement(Portal, null,
-            React.createElement(DragOverlay, { className: dragOverlayClassName, dropAnimation: null, style: { zIndex: 5000 } }, activeOption &&
-                renderActiveOption({
-                    option: activeOption,
-                    dragHandleAriaLabel: i18nStrings.dragHandleAriaLabel,
-                    listeners: { onKeyDown: handleKeyDown },
+        }, onDragCancel: () => setActiveItemId(null) },
+        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => item.id), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: item.id, item: item, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings.dragHandleAriaLabel })))),
+        React.createElement(Portal, { container: portalContainer },
+            React.createElement(DragOverlay, { className: dragOverlayClassName, dropAnimation: null, style: { zIndex: 5000 } }, activeItem &&
+                renderItem({
+                    item: activeItem,
+                    style: {},
+                    isDragging: true,
+                    isSorting: false,
+                    isActive: true,
+                    dragHandleAttributes: {
+                        ['aria-label']: joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label),
+                    },
+                    dragHandleListeners: {
+                        onKeyDown: handleKeyDown,
+                    },
                 })))));
 }
-function DraggableOption({ option, getId, dragHandleAriaLabel, onKeyDown, renderOption, }) {
-    const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: getId(option) });
-    const style = {
-        transform: CSS.Translate.toString(transform),
-    };
-    const combinedListeners = Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
-            if (onKeyDown) {
-                onKeyDown(event);
-            }
-            if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
-                listeners.onKeyDown(event);
+function usePortalContainer() {
+    const portalContainerRef = useRef(document.createElement('div'));
+    useEffect(() => {
+        const container = portalContainerRef.current;
+        if (!container.isConnected) {
+            document.body.appendChild(container);
+        }
+        return () => {
+            if (container.isConnected) {
+                document.body.removeChild(container);
             }
-        } });
-    return (React.createElement(React.Fragment, null, renderOption({
-        option,
-        dragHandleAriaLabel,
+        };
+    }, []);
+    return portalContainerRef.current;
+}
+function DraggableItem({ item, dragHandleAriaLabel, onKeyDown, renderItem, }) {
+    const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: item.id });
+    const style = { transform: CSS.Translate.toString(transform) };
+    const dragHandleListeners = attributes['aria-disabled']
+        ? {}
+        : Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
+                if (onKeyDown) {
+                    onKeyDown(event);
+                }
+                if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
+                    listeners.onKeyDown(event);
+                }
+            } });
+    const dragHandleAttributes = {
+        ['aria-label']: joinStrings(dragHandleAriaLabel, item.label),
+        ['aria-describedby']: attributes['aria-describedby'],
+        ['aria-disabled']: attributes['aria-disabled'],
+    };
+    return (React.createElement(React.Fragment, null, renderItem({
+        item,
         ref: setNodeRef,
         style,
         isDragging,
         isSorting,
-        listeners: combinedListeners,
-        attributes,
+        isActive: false,
+        dragHandleListeners,
+        dragHandleAttributes,
     })));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/dnd-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/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\n\nimport React from 'react';\nimport { DndContext, DraggableAttributes, DragOverlay } from '@dnd-kit/core';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport Portal from '../portal';\nimport { ReorderAnnouncements, ReorderOptions } from './interfaces';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport interface DndContainerProps<Option> extends ReorderOptions<Option> {\n  onChange: (sortedOption: readonly Option[]) => void;\n  disabled?: boolean;\n  renderOption: (props: RenderOptionProps<Option>) => React.ReactNode;\n  renderActiveOption: (props: RenderActiveOptionProps<Option>) => React.ReactNode;\n  i18nStrings: ReorderAnnouncements;\n  dragOverlayClassName?: string;\n  children?: (optionsContent: React.ReactNode) => React.ReactNode;\n}\n\ninterface RenderOptionProps<Option> extends RenderActiveOptionProps<Option> {\n  ref: React.RefCallback<HTMLElement>;\n  style: React.CSSProperties;\n  isDragging: boolean;\n  isSorting: boolean;\n  attributes: DraggableAttributes;\n}\n\ninterface RenderActiveOptionProps<Option> {\n  option: Option;\n  dragHandleAriaLabel?: string;\n  listeners?: SyntheticListenerMap;\n}\n\nexport function DndContainer<Option>({\n  getId,\n  sortedOptions,\n  onChange,\n  disabled,\n  renderOption,\n  renderActiveOption,\n  i18nStrings,\n  dragOverlayClassName = styles['drag-overlay'],\n  children = content => content,\n}: DndContainerProps<Option>) {\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions,\n    getId,\n  });\n  const activeOption = activeItem ? sortedOptions.find(option => getId(option) === activeItem) : null;\n  const isDragging = activeItem !== null;\n  const announcements = useLiveAnnouncements({ sortedOptions, getId, isDragging, ...i18nStrings });\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={collisionDetection}\n      accessibility={{\n        announcements,\n        restoreFocus: false,\n        screenReaderInstructions: i18nStrings.dragHandleAriaDescription\n          ? { draggable: i18nStrings.dragHandleAriaDescription }\n          : 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 = sortedOptions.findIndex(option => getId(option) === active.id);\n          const newIndex = sortedOptions.findIndex(option => getId(option) === over.id);\n          onChange(arrayMove([...sortedOptions], oldIndex, newIndex));\n        }\n      }}\n      onDragCancel={() => setActiveItem(null)}\n    >\n      {children(\n        <SortableContext\n          disabled={disabled}\n          items={sortedOptions.map(option => getId(option))}\n          strategy={verticalListSortingStrategy}\n        >\n          {sortedOptions.map(option => (\n            <DraggableOption\n              key={getId(option)}\n              option={option}\n              getId={getId}\n              renderOption={renderOption}\n              onKeyDown={handleKeyDown}\n              dragHandleAriaLabel={i18nStrings.dragHandleAriaLabel}\n            />\n          ))}\n        </SortableContext>\n      )}\n\n      <Portal>\n        {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n        {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n        /* eslint-disable-next-line react/forbid-component-props */}\n        <DragOverlay className={dragOverlayClassName} dropAnimation={null} style={{ zIndex: 5000 }}>\n          {activeOption &&\n            renderActiveOption({\n              option: activeOption,\n              dragHandleAriaLabel: i18nStrings.dragHandleAriaLabel,\n              listeners: { onKeyDown: handleKeyDown },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction DraggableOption<Option>({\n  option,\n  getId,\n  dragHandleAriaLabel,\n  onKeyDown,\n  renderOption,\n}: {\n  option: Option;\n  getId: (option: Option) => string;\n  dragHandleAriaLabel?: string;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderOption: (props: RenderOptionProps<Option>) => React.ReactNode;\n}) {\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: getId(option) });\n  const style = {\n    transform: CSS.Translate.toString(transform),\n  };\n  const combinedListeners = {\n    ...listeners,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n      if (listeners?.onKeyDown) {\n        listeners.onKeyDown(event);\n      }\n    },\n  };\n  return (\n    <>\n      {renderOption({\n        option,\n        dragHandleAriaLabel,\n        ref: setNodeRef,\n        style,\n        isDragging,\n        isSorting,\n        listeners: combinedListeners,\n        attributes,\n      })}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/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\n\nimport React, { useEffect, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { joinStrings } from '../../utils/strings';\nimport Portal from '../portal';\nimport { DndContainerItem, DndContainerProps, RenderItemProps } from './interfaces';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport function DndContainer<Data>({\n  items,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n  dragOverlayClassName = styles['drag-overlay'],\n}: DndContainerProps<Data>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({\n    items,\n  });\n  const activeItem = activeItemId ? items.find(item => item.id === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, isDragging, ...i18nStrings });\n  const portalContainer = usePortalContainer();\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={collisionDetection}\n      accessibility={{\n        announcements,\n        restoreFocus: false,\n        screenReaderInstructions: i18nStrings.dragHandleAriaDescription\n          ? { draggable: i18nStrings.dragHandleAriaDescription }\n          : undefined,\n        container: portalContainer,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n\n        if (over && active.id !== over.id) {\n          const oldIndex = items.findIndex(item => item.id === active.id);\n          const newIndex = items.findIndex(item => item.id === over.id);\n          onItemsChange(arrayMove([...items], oldIndex, newIndex));\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => item.id)}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={item.id}\n            item={item}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings.dragHandleAriaLabel}\n          />\n        ))}\n      </SortableContext>\n\n      <Portal container={portalContainer}>\n        {/* Make sure that the drag overlay is above the modal  by assigning the z-index as inline style\n            so that it prevails over dnd-kit's inline z-index of 999 */}\n        <DragOverlay className={dragOverlayClassName} dropAnimation={null} style={{ zIndex: 5000 }}>\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              style: {},\n              isDragging: true,\n              isSorting: false,\n              isActive: true,\n              dragHandleAttributes: {\n                ['aria-label']: joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label),\n              },\n              dragHandleListeners: {\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(document.createElement('div'));\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (!container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Data>({\n  item,\n  dragHandleAriaLabel,\n  onKeyDown,\n  renderItem,\n}: {\n  item: DndContainerItem<Data>;\n  dragHandleAriaLabel?: string;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: RenderItemProps<Data>) => React.ReactNode;\n}) {\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: item.id });\n  const style = { transform: CSS.Translate.toString(transform) };\n  const dragHandleListeners = attributes['aria-disabled']\n    ? {}\n    : {\n        ...listeners,\n        onKeyDown: (event: React.KeyboardEvent) => {\n          if (onKeyDown) {\n            onKeyDown(event);\n          }\n          if (listeners?.onKeyDown) {\n            listeners.onKeyDown(event);\n          }\n        },\n      };\n  const dragHandleAttributes = {\n    ['aria-label']: joinStrings(dragHandleAriaLabel, item.label),\n    ['aria-describedby']: attributes['aria-describedby'],\n    ['aria-disabled']: attributes['aria-disabled'],\n  };\n  return (\n    <>\n      {renderItem({\n        item,\n        ref: setNodeRef,\n        style,\n        isDragging,\n        isSorting,\n        isActive: false,\n        dragHandleListeners,\n        dragHandleAttributes,\n      })}\n    </>\n  );\n}\n"]}

package/internal/components/dnd-container/interfaces.d.ts

@@ -1,8 +1,35 @@
-export interface ReorderOptions<Option> {
-    sortedOptions: readonly Option[];
-    getId(option: Option): string;
+/// <reference types="react" />
+export interface DndContainerProps<Data> {
+    items: readonly DndContainerItem<Data>[];
+    renderItem: (props: RenderItemProps<Data>) => React.ReactNode;
+    onItemsChange: (sortedOptions: readonly DndContainerItem<Data>[]) => void;
+    i18nStrings: DndContainerI18nStrings;
+    disableReorder?: boolean;
+    dragOverlayClassName?: string;
 }
-export interface ReorderAnnouncements {
+export interface DndContainerItem<Data> {
+    id: string;
+    label: string;
+    data: Data;
+}
+export interface RenderItemProps<Data> {
+    ref?: React.RefCallback<HTMLElement>;
+    item: DndContainerItem<Data>;
+    style: React.CSSProperties;
+    isDragging: boolean;
+    isSorting: boolean;
+    isActive: boolean;
+    dragHandleAttributes: {
+        'aria-label'?: string;
+        'aria-describedby'?: string;
+        'aria-disabled'?: boolean;
+    };
+    dragHandleListeners?: {
+        onPointerDown?: React.PointerEventHandler;
+        onKeyDown?: React.KeyboardEventHandler;
+    };
+}
+export interface DndContainerI18nStrings {
     liveAnnouncementDndStarted?: (position: number, total: number) => string;
     liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;
     liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;

package/internal/components/dnd-container/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,cAAc,CAAC,MAAM;IACpC,aAAa,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,0BAA0B,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzE,gCAAgC,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/G,gCAAgC,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7G,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACrC,KAAK,EAAE,SAAS,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;IACzC,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,aAAa,EAAE,CAAC,aAAa,EAAE,SAAS,gBAAgB,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1E,WAAW,EAAE,uBAAuB,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB,CAAC,IAAI;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,MAAM,WAAW,eAAe,CAAC,IAAI;IACnC,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB,EAAE;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,mBAAmB,CAAC,EAAE;QACpB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;QAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;KACxC,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,0BAA0B,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzE,gCAAgC,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/G,gCAAgC,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7G,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC"}

package/internal/components/dnd-container/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ReorderOptions<Option> {\n  sortedOptions: readonly Option[];\n  getId(option: Option): string;\n}\n\nexport interface ReorderAnnouncements {\n  liveAnnouncementDndStarted?: (position: number, total: number) => string;\n  liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;\n  liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;\n  liveAnnouncementDndDiscarded?: string;\n  dragHandleAriaLabel?: string;\n  dragHandleAriaDescription?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface DndContainerProps<Data> {\n  items: readonly DndContainerItem<Data>[];\n  renderItem: (props: RenderItemProps<Data>) => React.ReactNode;\n  onItemsChange: (sortedOptions: readonly DndContainerItem<Data>[]) => void;\n  i18nStrings: DndContainerI18nStrings;\n  disableReorder?: boolean;\n  dragOverlayClassName?: string;\n}\n\nexport interface DndContainerItem<Data> {\n  id: string;\n  label: string;\n  data: Data;\n}\n\nexport interface RenderItemProps<Data> {\n  ref?: React.RefCallback<HTMLElement>;\n  item: DndContainerItem<Data>;\n  style: React.CSSProperties;\n  isDragging: boolean;\n  isSorting: boolean;\n  isActive: boolean;\n  dragHandleAttributes: {\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'aria-disabled'?: boolean;\n  };\n  dragHandleListeners?: {\n    onPointerDown?: React.PointerEventHandler;\n    onKeyDown?: React.KeyboardEventHandler;\n  };\n}\n\nexport interface DndContainerI18nStrings {\n  liveAnnouncementDndStarted?: (position: number, total: number) => string;\n  liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;\n  liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;\n  liveAnnouncementDndDiscarded?: string;\n  dragHandleAriaLabel?: string;\n  dragHandleAriaDescription?: string;\n}\n"]}

package/internal/components/dnd-container/use-drag-and-drop-reorder.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 import { CollisionDetection, KeyboardCoordinateGetter, UniqueIdentifier } from '@dnd-kit/core';
-import { ReorderOptions } from './interfaces';
-export default function useDragAndDropReorder<Option>({ sortedOptions, getId }: ReorderOptions<Option>): {
-    activeItem: UniqueIdentifier | null;
+import { DndContainerItem } from './interfaces';
+export default function useDragAndDropReorder<Data>({ items }: {
+    items: readonly DndContainerItem<Data>[];
+}): {
+    activeItemId: UniqueIdentifier | null;
+    setActiveItemId: (id: UniqueIdentifier | null) => void;
     collisionDetection: CollisionDetection;
     coordinateGetter: KeyboardCoordinateGetter;
     handleKeyDown: (event: React.KeyboardEvent) => void;
     sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
-    setActiveItem: (id: UniqueIdentifier | null) => void;
 };
 //# sourceMappingURL=use-drag-and-drop-reorder.d.ts.map

package/internal/components/dnd-container/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/dnd-container/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,cAAc,EAAE,MAAM,cAAc,CAAC;AA8B9C,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC;;;;2BAatE,mBAAmB;;wBARtB,gBAAgB,GAAG,IAAI;EAgHnD"}
+{"version":3,"file":"use-drag-and-drop-reorder.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/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,gBAAgB,EAAE,MAAM,cAAc,CAAC;AA8BhD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAA;CAAE;;0BAK9E,gBAAgB,GAAG,IAAI;;;2BAQpB,mBAAmB;;EAuGlD"}

package/internal/components/dnd-container/use-drag-and-drop-reorder.js

@@ -27,7 +27,7 @@ var KeyboardCode;
 // We let our collisionDetection and customCoordinateGetter use the same
 // getClosestId function which takes its value from the current component
 // state, to make sure they are always in sync.
-export default function useDragAndDropReorder({ sortedOptions, getId }) {
+export default function useDragAndDropReorder({ items }) {
     const isKeyboard = useRef(false);
     const positionDelta = useRef(0);
     const [activeItemId, setActiveItemId] = useState(null);
@@ -40,8 +40,8 @@ export default function useDragAndDropReorder({ sortedOptions, getId }) {
     };
     const handleKeyDown = (event) => {
         if (isKeyboard.current && activeItemId) {
-            const currentTargetIndex = sortedOptions.findIndex(option => getId(option) === activeItemId) + positionDelta.current;
-            if (event.key === 'ArrowDown' && currentTargetIndex < sortedOptions.length - 1) {
+            const currentTargetIndex = items.findIndex(item => item.id === activeItemId) + positionDelta.current;
+            if (event.key === 'ArrowDown' && currentTargetIndex < items.length - 1) {
                 positionDelta.current += 1;
             }
             else if (event.key === 'ArrowUp' && currentTargetIndex > 0) {
@@ -57,9 +57,9 @@ export default function useDragAndDropReorder({ sortedOptions, getId }) {
         if (positionDelta.current === 0) {
             return active.id;
         }
-        const currentIndex = sortedOptions.findIndex(option => getId(option) === active.id);
-        const newIndex = Math.max(0, Math.min(sortedOptions.length - 1, currentIndex + positionDelta.current));
-        return getId(sortedOptions[newIndex]);
+        const currentIndex = items.findIndex(item => item.id === active.id);
+        const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + positionDelta.current));
+        return items[newIndex].id;
     };
     const collisionDetection = ({ active, collisionRect, droppableContainers, droppableRects, pointerCoordinates, }) => {
         if (isKeyboard.current) {
@@ -114,12 +114,12 @@ export default function useDragAndDropReorder({ sortedOptions, getId }) {
         },
     }));
     return {
-        activeItem: activeItemId,
+        activeItemId,
+        setActiveItemId: setActiveItem,
         collisionDetection,
         coordinateGetter,
         handleKeyDown,
         sensors,
-        setActiveItem,
     };
 }
 function isAfter(a, b) {

package/internal/components/dnd-container/use-drag-and-drop-reorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-drag-and-drop-reorder.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/use-drag-and-drop-reorder.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, { useRef, useState } from 'react';\nimport {\n  Active,\n  closestCenter,\n  CollisionDetection,\n  DroppableContainer,\n  KeyboardCoordinateGetter,\n  PointerSensor,\n  UniqueIdentifier,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { hasSortableData } from '@dnd-kit/sortable';\n\nimport { ReorderOptions } from './interfaces';\nimport { KeyboardSensor } from './keyboard-sensor';\n\nenum KeyboardCode {\n  Space = 'Space',\n  Down = 'ArrowDown',\n  Right = 'ArrowRight',\n  Left = 'ArrowLeft',\n  Up = 'ArrowUp',\n  Esc = 'Escape',\n  Enter = 'Enter',\n}\n\n// A custom collision detection algorithm is used when using a keyboard to\n// work around an unexpected behavior when reordering items of variable height\n// with the keyboard.\n\n// Neither closestCenter nor closestCorners work really well for this case,\n// because the center (or corners) of a tall rectangle might be so low that it\n// is detected as being closest to the rectangle below of the one it should\n// actually swap with.\n\n// Instead of relying on coordinates, the expected results are achieved by\n// moving X positions up or down in the initially sorted array, depending on\n// the desired direction.\n\n// We let our collisionDetection and customCoordinateGetter use the same\n// getClosestId function which takes its value from the current component\n// state, to make sure they are always in sync.\n\nexport default function useDragAndDropReorder<Option>({ sortedOptions, getId }: ReorderOptions<Option>) {\n  const isKeyboard = useRef(false);\n  const positionDelta = useRef(0);\n  const [activeItemId, setActiveItemId] = useState<UniqueIdentifier | null>(null);\n\n  const setActiveItem = (id: UniqueIdentifier | null) => {\n    setActiveItemId(id);\n    if (!id) {\n      isKeyboard.current = false;\n      positionDelta.current = 0;\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (isKeyboard.current && activeItemId) {\n      const currentTargetIndex =\n        sortedOptions.findIndex(option => getId(option) === activeItemId) + positionDelta.current;\n      if (event.key === 'ArrowDown' && currentTargetIndex < sortedOptions.length - 1) {\n        positionDelta.current += 1;\n      } else if (event.key === 'ArrowUp' && currentTargetIndex > 0) {\n        positionDelta.current -= 1;\n      }\n    }\n    if (activeItemId && isEscape(event.key)) {\n      // Prevent modal from closing when pressing Esc to cancel the dragging action\n      event.stopPropagation();\n    }\n  };\n\n  const getClosestId = (active: Active) => {\n    if (positionDelta.current === 0) {\n      return active.id;\n    }\n    const currentIndex = sortedOptions.findIndex(option => getId(option) === active.id);\n    const newIndex = Math.max(0, Math.min(sortedOptions.length - 1, currentIndex + positionDelta.current));\n    return getId(sortedOptions[newIndex]);\n  };\n\n  const collisionDetection: CollisionDetection = ({\n    active,\n    collisionRect,\n    droppableContainers,\n    droppableRects,\n    pointerCoordinates,\n  }) => {\n    if (isKeyboard.current) {\n      // For keyboard interaction, determine the colliding container based on the movements made by the arrow keys,\n      // via getClosestId\n      const collidingContainer = getCollidingContainer({\n        activeId: active.id,\n        closestId: getClosestId(active),\n        droppableContainers,\n      });\n      return collidingContainer ? [collidingContainer] : [];\n    } else {\n      // For mouse interaction, use the closest center algorithm\n      return closestCenter({ active, collisionRect, droppableRects, droppableContainers, pointerCoordinates });\n    }\n  };\n\n  const coordinateGetter: KeyboardCoordinateGetter = (\n    event,\n    { context: { active, collisionRect, droppableRects, droppableContainers } }\n  ) => {\n    if (event.code === KeyboardCode.Up || event.code === KeyboardCode.Down) {\n      event.preventDefault();\n\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      const closestId = getClosestId(active);\n\n      if (closestId !== null) {\n        const activeDroppable = droppableContainers.get(active.id);\n        const newDroppable = droppableContainers.get(closestId);\n        const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;\n        const newNode = newDroppable?.node.current;\n\n        if (newNode && newRect && activeDroppable && newDroppable) {\n          const isAfterActive = isAfter(activeDroppable, newDroppable);\n          const offset = {\n            x: isAfterActive ? collisionRect.width - newRect.width : 0,\n            y: isAfterActive ? collisionRect.height - newRect.height : 0,\n          };\n          const rectCoordinates = {\n            x: newRect.left,\n            y: newRect.top,\n          };\n\n          return {\n            x: rectCoordinates.x - offset.x,\n            y: rectCoordinates.y - offset.y,\n          };\n        }\n      }\n    }\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter,\n      onActivation: () => {\n        isKeyboard.current = true;\n      },\n    })\n  );\n\n  return {\n    activeItem: activeItemId,\n    collisionDetection,\n    coordinateGetter,\n    handleKeyDown,\n    sensors,\n    setActiveItem,\n  };\n}\n\nfunction isAfter(a: DroppableContainer, b: DroppableContainer) {\n  return hasSortableData(a) && hasSortableData(b) && a.data.current.sortable.index < b.data.current.sortable.index;\n}\n\nfunction getCollidingContainer({\n  activeId,\n  closestId,\n  droppableContainers,\n}: {\n  activeId: UniqueIdentifier;\n  closestId: UniqueIdentifier;\n  droppableContainers: DroppableContainer[];\n}) {\n  if (closestId === activeId) {\n    return;\n  }\n  const collidingContainer = droppableContainers.find(({ id }) => id === closestId);\n  if (collidingContainer) {\n    return {\n      id: collidingContainer.id,\n      data: {\n        droppableContainer: collidingContainer,\n        value: 0,\n      },\n    };\n  }\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n"]}
+{"version":3,"file":"use-drag-and-drop-reorder.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/use-drag-and-drop-reorder.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAEL,aAAa,EAIb,aAAa,EAEb,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,IAAK,YAQJ;AARD,WAAK,YAAY;IACf,+BAAe,CAAA;IACf,kCAAkB,CAAA;IAClB,oCAAoB,CAAA;IACpB,kCAAkB,CAAA;IAClB,8BAAc,CAAA;IACd,8BAAc,CAAA;IACd,+BAAe,CAAA;AACjB,CAAC,EARI,YAAY,KAAZ,YAAY,QAQhB;AAED,0EAA0E;AAC1E,8EAA8E;AAC9E,qBAAqB;AAErB,2EAA2E;AAC3E,8EAA8E;AAC9E,2EAA2E;AAC3E,sBAAsB;AAEtB,0EAA0E;AAC1E,4EAA4E;AAC5E,yBAAyB;AAEzB,wEAAwE;AACxE,yEAAyE;AACzE,+CAA+C;AAE/C,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAO,EAAE,KAAK,EAAgD;IACzG,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IAEhF,MAAM,aAAa,GAAG,CAAC,EAA2B,EAAE,EAAE;QACpD,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,IAAI,CAAC,EAAE,EAAE;YACP,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;YAC3B,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,EAAE;QACnD,IAAI,UAAU,CAAC,OAAO,IAAI,YAAY,EAAE;YACtC,MAAM,kBAAkB,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,GAAG,aAAa,CAAC,OAAO,CAAC;YACrG,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,kBAAkB,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtE,aAAa,CAAC,OAAO,IAAI,CAAC,CAAC;aAC5B;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,kBAAkB,GAAG,CAAC,EAAE;gBAC5D,aAAa,CAAC,OAAO,IAAI,CAAC,CAAC;aAC5B;SACF;QACD,IAAI,YAAY,IAAI,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACvC,6EAA6E;YAC7E,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,IAAI,aAAa,CAAC,OAAO,KAAK,CAAC,EAAE;YAC/B,OAAO,MAAM,CAAC,EAAE,CAAC;SAClB;QACD,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;QACpE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/F,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAuB,CAAC,EAC9C,MAAM,EACN,aAAa,EACb,mBAAmB,EACnB,cAAc,EACd,kBAAkB,GACnB,EAAE,EAAE;QACH,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,6GAA6G;YAC7G,mBAAmB;YACnB,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;gBAC/C,QAAQ,EAAE,MAAM,CAAC,EAAE;gBACnB,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC;gBAC/B,mBAAmB;aACpB,CAAC,CAAC;YACH,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;SACvD;aAAM;YACL,0DAA0D;YAC1D,OAAO,aAAa,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC,CAAC;SAC1G;IACH,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAA6B,CACjD,KAAK,EACL,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,mBAAmB,EAAE,EAAE,EAC3E,EAAE;QACF,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,CAAC,IAAI,EAAE;YACtE,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE;gBAC7B,OAAO;aACR;YAED,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;YAEvC,IAAI,SAAS,KAAK,IAAI,EAAE;gBACtB,MAAM,eAAe,GAAG,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC3D,MAAM,YAAY,GAAG,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACxD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;gBAC1E,MAAM,OAAO,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,CAAC,OAAO,CAAC;gBAE3C,IAAI,OAAO,IAAI,OAAO,IAAI,eAAe,IAAI,YAAY,EAAE;oBACzD,MAAM,aAAa,GAAG,OAAO,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;oBAC7D,MAAM,MAAM,GAAG;wBACb,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;wBAC1D,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;qBAC7D,CAAC;oBACF,MAAM,eAAe,GAAG;wBACtB,CAAC,EAAE,OAAO,CAAC,IAAI;wBACf,CAAC,EAAE,OAAO,CAAC,GAAG;qBACf,CAAC;oBAEF,OAAO;wBACL,CAAC,EAAE,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;wBAC/B,CAAC,EAAE,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;qBAChC,CAAC;iBACH;aACF;SACF;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CAAC,cAAc,EAAE;QACxB,gBAAgB;QAChB,YAAY,EAAE,GAAG,EAAE;YACjB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,CAAC;KACF,CAAC,CACH,CAAC;IAEF,OAAO;QACL,YAAY;QACZ,eAAe,EAAE,aAAa;QAC9B,kBAAkB;QAClB,gBAAgB;QAChB,aAAa;QACb,OAAO;KACR,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,CAAqB,EAAE,CAAqB;IAC3D,OAAO,eAAe,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;AACnH,CAAC;AAED,SAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,mBAAmB,GAKpB;IACC,IAAI,SAAS,KAAK,QAAQ,EAAE;QAC1B,OAAO;KACR;IACD,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;IAClF,IAAI,kBAAkB,EAAE;QACtB,OAAO;YACL,EAAE,EAAE,kBAAkB,CAAC,EAAE;YACzB,IAAI,EAAE;gBACJ,kBAAkB,EAAE,kBAAkB;gBACtC,KAAK,EAAE,CAAC;aACT;SACF,CAAC;KACH;AACH,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState } from 'react';\nimport {\n  Active,\n  closestCenter,\n  CollisionDetection,\n  DroppableContainer,\n  KeyboardCoordinateGetter,\n  PointerSensor,\n  UniqueIdentifier,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { hasSortableData } from '@dnd-kit/sortable';\n\nimport { DndContainerItem } from './interfaces';\nimport { KeyboardSensor } from './keyboard-sensor';\n\nenum KeyboardCode {\n  Space = 'Space',\n  Down = 'ArrowDown',\n  Right = 'ArrowRight',\n  Left = 'ArrowLeft',\n  Up = 'ArrowUp',\n  Esc = 'Escape',\n  Enter = 'Enter',\n}\n\n// A custom collision detection algorithm is used when using a keyboard to\n// work around an unexpected behavior when reordering items of variable height\n// with the keyboard.\n\n// Neither closestCenter nor closestCorners work really well for this case,\n// because the center (or corners) of a tall rectangle might be so low that it\n// is detected as being closest to the rectangle below of the one it should\n// actually swap with.\n\n// Instead of relying on coordinates, the expected results are achieved by\n// moving X positions up or down in the initially sorted array, depending on\n// the desired direction.\n\n// We let our collisionDetection and customCoordinateGetter use the same\n// getClosestId function which takes its value from the current component\n// state, to make sure they are always in sync.\n\nexport default function useDragAndDropReorder<Data>({ items }: { items: readonly DndContainerItem<Data>[] }) {\n  const isKeyboard = useRef(false);\n  const positionDelta = useRef(0);\n  const [activeItemId, setActiveItemId] = useState<UniqueIdentifier | null>(null);\n\n  const setActiveItem = (id: UniqueIdentifier | null) => {\n    setActiveItemId(id);\n    if (!id) {\n      isKeyboard.current = false;\n      positionDelta.current = 0;\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (isKeyboard.current && activeItemId) {\n      const currentTargetIndex = items.findIndex(item => item.id === activeItemId) + positionDelta.current;\n      if (event.key === 'ArrowDown' && currentTargetIndex < items.length - 1) {\n        positionDelta.current += 1;\n      } else if (event.key === 'ArrowUp' && currentTargetIndex > 0) {\n        positionDelta.current -= 1;\n      }\n    }\n    if (activeItemId && isEscape(event.key)) {\n      // Prevent modal from closing when pressing Esc to cancel the dragging action\n      event.stopPropagation();\n    }\n  };\n\n  const getClosestId = (active: Active) => {\n    if (positionDelta.current === 0) {\n      return active.id;\n    }\n    const currentIndex = items.findIndex(item => item.id === active.id);\n    const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + positionDelta.current));\n    return items[newIndex].id;\n  };\n\n  const collisionDetection: CollisionDetection = ({\n    active,\n    collisionRect,\n    droppableContainers,\n    droppableRects,\n    pointerCoordinates,\n  }) => {\n    if (isKeyboard.current) {\n      // For keyboard interaction, determine the colliding container based on the movements made by the arrow keys,\n      // via getClosestId\n      const collidingContainer = getCollidingContainer({\n        activeId: active.id,\n        closestId: getClosestId(active),\n        droppableContainers,\n      });\n      return collidingContainer ? [collidingContainer] : [];\n    } else {\n      // For mouse interaction, use the closest center algorithm\n      return closestCenter({ active, collisionRect, droppableRects, droppableContainers, pointerCoordinates });\n    }\n  };\n\n  const coordinateGetter: KeyboardCoordinateGetter = (\n    event,\n    { context: { active, collisionRect, droppableRects, droppableContainers } }\n  ) => {\n    if (event.code === KeyboardCode.Up || event.code === KeyboardCode.Down) {\n      event.preventDefault();\n\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      const closestId = getClosestId(active);\n\n      if (closestId !== null) {\n        const activeDroppable = droppableContainers.get(active.id);\n        const newDroppable = droppableContainers.get(closestId);\n        const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;\n        const newNode = newDroppable?.node.current;\n\n        if (newNode && newRect && activeDroppable && newDroppable) {\n          const isAfterActive = isAfter(activeDroppable, newDroppable);\n          const offset = {\n            x: isAfterActive ? collisionRect.width - newRect.width : 0,\n            y: isAfterActive ? collisionRect.height - newRect.height : 0,\n          };\n          const rectCoordinates = {\n            x: newRect.left,\n            y: newRect.top,\n          };\n\n          return {\n            x: rectCoordinates.x - offset.x,\n            y: rectCoordinates.y - offset.y,\n          };\n        }\n      }\n    }\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter,\n      onActivation: () => {\n        isKeyboard.current = true;\n      },\n    })\n  );\n\n  return {\n    activeItemId,\n    setActiveItemId: setActiveItem,\n    collisionDetection,\n    coordinateGetter,\n    handleKeyDown,\n    sensors,\n  };\n}\n\nfunction isAfter(a: DroppableContainer, b: DroppableContainer) {\n  return hasSortableData(a) && hasSortableData(b) && a.data.current.sortable.index < b.data.current.sortable.index;\n}\n\nfunction getCollidingContainer({\n  activeId,\n  closestId,\n  droppableContainers,\n}: {\n  activeId: UniqueIdentifier;\n  closestId: UniqueIdentifier;\n  droppableContainers: DroppableContainer[];\n}) {\n  if (closestId === activeId) {\n    return;\n  }\n  const collidingContainer = droppableContainers.find(({ id }) => id === closestId);\n  if (collidingContainer) {\n    return {\n      id: collidingContainer.id,\n      data: {\n        droppableContainer: collidingContainer,\n        value: 0,\n      },\n    };\n  }\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n"]}

package/internal/components/dnd-container/use-live-announcements.d.ts

@@ -1,8 +1,9 @@
 import { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
-import { ReorderAnnouncements, ReorderOptions } from './interfaces';
-export default function useLiveAnnouncements<Option>({ isDragging, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, sortedOptions, getId, }: ReorderOptions<Option> & ReorderAnnouncements & {
+import { DndContainerI18nStrings, DndContainerItem } from './interfaces';
+export default function useLiveAnnouncements<Data>({ items, isDragging, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, }: {
+    items: readonly DndContainerItem<Data>[];
     isDragging: boolean;
-}): {
+} & DndContainerI18nStrings): {
     onDragStart({ active }: DragStartEvent): string | undefined;
     onDragOver({ active, over }: DragOverEvent): string | undefined;
     onDragEnd({ active, over }: DragEndEvent): string | undefined;

package/internal/components/dnd-container/use-live-announcements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-live-announcements.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/use-live-announcements.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE5E,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,MAAM,EAAE,EACnD,UAAU,EACV,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,aAAa,EACb,KAAK,GACN,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,oBAAoB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE;4BAO9C,cAAc;iCAMT,aAAa;gCAcd,YAAY;;EAW3C"}
+{"version":3,"file":"use-live-announcements.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/use-live-announcements.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE5E,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,IAAI,EAAE,EACjD,KAAK,EACL,UAAU,EACV,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,GAC7B,EAAE;IAAE,KAAK,EAAE,SAAS,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,GAAG,uBAAuB;4BAOlE,cAAc;iCAMT,aAAa;gCAcd,YAAY;;EAW3C"}

package/internal/components/dnd-container/use-live-announcements.js

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useRef } from 'react';
-export default function useLiveAnnouncements({ isDragging, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, sortedOptions, getId, }) {
+export default function useLiveAnnouncements({ items, isDragging, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, }) {
     const isFirstAnnouncement = useRef(true);
     if (!isDragging) {
         isFirstAnnouncement.current = true;
@@ -9,8 +9,8 @@ export default function useLiveAnnouncements({ isDragging, liveAnnouncementDndSt
     return {
         onDragStart({ active }) {
             if (active && liveAnnouncementDndStarted) {
-                const index = sortedOptions.findIndex(option => getId(option) === active.id);
-                return liveAnnouncementDndStarted(index + 1, sortedOptions.length);
+                const index = items.findIndex(item => item.id === active.id);
+                return liveAnnouncementDndStarted(index + 1, items.length);
             }
         },
         onDragOver({ active, over }) {
@@ -22,16 +22,16 @@ export default function useLiveAnnouncements({ isDragging, liveAnnouncementDndSt
                         return;
                     }
                 }
-                const initialIndex = sortedOptions.findIndex(option => getId(option) === active.id);
-                const currentIdex = over ? sortedOptions.findIndex(option => getId(option) === over.id) : initialIndex;
-                return liveAnnouncementDndItemReordered(initialIndex + 1, currentIdex + 1, sortedOptions.length);
+                const initialIndex = items.findIndex(item => item.id === active.id);
+                const currentIdex = over ? items.findIndex(item => item.id === over.id) : initialIndex;
+                return liveAnnouncementDndItemReordered(initialIndex + 1, currentIdex + 1, items.length);
             }
         },
         onDragEnd({ active, over }) {
             if (liveAnnouncementDndItemCommitted) {
-                const initialIndex = sortedOptions.findIndex(option => getId(option) === active.id);
-                const finalIndex = over ? sortedOptions.findIndex(option => getId(option) === over.id) : initialIndex;
-                return liveAnnouncementDndItemCommitted(initialIndex + 1, finalIndex + 1, sortedOptions.length);
+                const initialIndex = items.findIndex(item => item.id === active.id);
+                const finalIndex = over ? items.findIndex(item => item.id === over.id) : initialIndex;
+                return liveAnnouncementDndItemCommitted(initialIndex + 1, finalIndex + 1, items.length);
             }
         },
         onDragCancel() {

package/internal/components/dnd-container/use-live-announcements.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-live-announcements.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/use-live-announcements.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAK/B,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAS,EACnD,UAAU,EACV,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,aAAa,EACb,KAAK,GACmE;IACxE,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,UAAU,EAAE;QACf,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;KACpC;IAED,OAAO;QACL,WAAW,CAAC,EAAE,MAAM,EAAkB;YACpC,IAAI,MAAM,IAAI,0BAA0B,EAAE;gBACxC,MAAM,KAAK,GAAG,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC7E,OAAO,0BAA0B,CAAC,KAAK,GAAG,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;aACpE;QACH,CAAC;QACD,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAiB;YACxC,IAAI,gCAAgC,EAAE;gBACpC,gFAAgF;gBAChF,IAAI,mBAAmB,CAAC,OAAO,EAAE;oBAC/B,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;oBACpC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,EAAE;wBAClC,OAAO;qBACR;iBACF;gBACD,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBACpF,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;gBACvG,OAAO,gCAAgC,CAAC,YAAY,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;aAClG;QACH,CAAC;QACD,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAgB;YACtC,IAAI,gCAAgC,EAAE;gBACpC,MAAM,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBACpF,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;gBACtG,OAAO,gCAAgC,CAAC,YAAY,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;aACjG;QACH,CAAC;QACD,YAAY;YACV,OAAO,4BAA4B,CAAC;QACtC,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef } from 'react';\nimport { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';\n\nimport { ReorderAnnouncements, ReorderOptions } from './interfaces';\n\nexport default function useLiveAnnouncements<Option>({\n  isDragging,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n  sortedOptions,\n  getId,\n}: ReorderOptions<Option> & ReorderAnnouncements & { isDragging: boolean }) {\n  const isFirstAnnouncement = useRef(true);\n  if (!isDragging) {\n    isFirstAnnouncement.current = true;\n  }\n\n  return {\n    onDragStart({ active }: DragStartEvent) {\n      if (active && liveAnnouncementDndStarted) {\n        const index = sortedOptions.findIndex(option => getId(option) === active.id);\n        return liveAnnouncementDndStarted(index + 1, sortedOptions.length);\n      }\n    },\n    onDragOver({ active, over }: DragOverEvent) {\n      if (liveAnnouncementDndItemReordered) {\n        // Don't announce on the first dragOver because it's redundant with onDragStart.\n        if (isFirstAnnouncement.current) {\n          isFirstAnnouncement.current = false;\n          if (!over || over.id === active.id) {\n            return;\n          }\n        }\n        const initialIndex = sortedOptions.findIndex(option => getId(option) === active.id);\n        const currentIdex = over ? sortedOptions.findIndex(option => getId(option) === over.id) : initialIndex;\n        return liveAnnouncementDndItemReordered(initialIndex + 1, currentIdex + 1, sortedOptions.length);\n      }\n    },\n    onDragEnd({ active, over }: DragEndEvent) {\n      if (liveAnnouncementDndItemCommitted) {\n        const initialIndex = sortedOptions.findIndex(option => getId(option) === active.id);\n        const finalIndex = over ? sortedOptions.findIndex(option => getId(option) === over.id) : initialIndex;\n        return liveAnnouncementDndItemCommitted(initialIndex + 1, finalIndex + 1, sortedOptions.length);\n      }\n    },\n    onDragCancel() {\n      return liveAnnouncementDndDiscarded;\n    },\n  };\n}\n"]}
+{"version":3,"file":"use-live-announcements.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-container/use-live-announcements.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAK/B,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAO,EACjD,KAAK,EACL,UAAU,EACV,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,GACgE;IAC5F,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,UAAU,EAAE;QACf,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;KACpC;IAED,OAAO;QACL,WAAW,CAAC,EAAE,MAAM,EAAkB;YACpC,IAAI,MAAM,IAAI,0BAA0B,EAAE;gBACxC,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAC7D,OAAO,0BAA0B,CAAC,KAAK,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC5D;QACH,CAAC;QACD,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAiB;YACxC,IAAI,gCAAgC,EAAE;gBACpC,gFAAgF;gBAChF,IAAI,mBAAmB,CAAC,OAAO,EAAE;oBAC/B,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC;oBACpC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,EAAE;wBAClC,OAAO;qBACR;iBACF;gBACD,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBACpE,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;gBACvF,OAAO,gCAAgC,CAAC,YAAY,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC1F;QACH,CAAC;QACD,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAgB;YACtC,IAAI,gCAAgC,EAAE;gBACpC,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBACpE,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;gBACtF,OAAO,gCAAgC,CAAC,YAAY,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aACzF;QACH,CAAC;QACD,YAAY;YACV,OAAO,4BAA4B,CAAC;QACtC,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useRef } from 'react';\nimport { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';\n\nimport { DndContainerI18nStrings, DndContainerItem } from './interfaces';\n\nexport default function useLiveAnnouncements<Data>({\n  items,\n  isDragging,\n  liveAnnouncementDndStarted,\n  liveAnnouncementDndItemReordered,\n  liveAnnouncementDndItemCommitted,\n  liveAnnouncementDndDiscarded,\n}: { items: readonly DndContainerItem<Data>[]; isDragging: boolean } & DndContainerI18nStrings) {\n  const isFirstAnnouncement = useRef(true);\n  if (!isDragging) {\n    isFirstAnnouncement.current = true;\n  }\n\n  return {\n    onDragStart({ active }: DragStartEvent) {\n      if (active && liveAnnouncementDndStarted) {\n        const index = items.findIndex(item => item.id === active.id);\n        return liveAnnouncementDndStarted(index + 1, items.length);\n      }\n    },\n    onDragOver({ active, over }: DragOverEvent) {\n      if (liveAnnouncementDndItemReordered) {\n        // Don't announce on the first dragOver because it's redundant with onDragStart.\n        if (isFirstAnnouncement.current) {\n          isFirstAnnouncement.current = false;\n          if (!over || over.id === active.id) {\n            return;\n          }\n        }\n        const initialIndex = items.findIndex(item => item.id === active.id);\n        const currentIdex = over ? items.findIndex(item => item.id === over.id) : initialIndex;\n        return liveAnnouncementDndItemReordered(initialIndex + 1, currentIdex + 1, items.length);\n      }\n    },\n    onDragEnd({ active, over }: DragEndEvent) {\n      if (liveAnnouncementDndItemCommitted) {\n        const initialIndex = items.findIndex(item => item.id === active.id);\n        const finalIndex = over ? items.findIndex(item => item.id === over.id) : initialIndex;\n        return liveAnnouncementDndItemCommitted(initialIndex + 1, finalIndex + 1, items.length);\n      }\n    },\n    onDragCancel() {\n      return liveAnnouncementDndDiscarded;\n    },\n  };\n}\n"]}

package/internal/components/drag-handle/index.d.ts

@@ -3,7 +3,6 @@ export interface DragHandleProps {
     attributes: ButtonHTMLAttributes<HTMLDivElement>;
     hideFocus?: boolean;
     listeners: Record<string, Function> | undefined;
-    disabled?: boolean;
 }
-export default function DragHandle({ attributes, hideFocus, listeners, disabled }: DragHandleProps): JSX.Element;
+export default function DragHandle({ attributes, hideFocus, listeners }: DragHandleProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/drag-handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AASpD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,eAWjG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;CACjD;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,eAAe,eAkBvF"}

package/internal/components/drag-handle/index.js

@@ -3,11 +3,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import InternalIcon from '../../../icon/internal';
-import Handle from '../handle';
-import handleStyles from '../handle/styles.css.js';
 import styles from './styles.css.js';
-export default function DragHandle({ attributes, hideFocus, listeners, disabled }) {
-    return (React.createElement(Handle, Object.assign({ "aria-disabled": disabled, className: clsx(styles.handle, hideFocus && handleStyles['hide-focus'], disabled && styles['handle-disabled']) }, attributes, listeners),
+export default function DragHandle({ attributes, hideFocus, listeners }) {
+    const disabled = attributes['aria-disabled'];
+    return (
+    // We need to use a div with button role instead of a button
+    // so that Safari will focus on it when clicking it.
+    // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
+    // Otherwise, we can't reliably catch keyboard events coming from the handle
+    // when it is being dragged.
+    React.createElement("div", Object.assign({ role: "button", tabIndex: 0, className: clsx(styles.handle, hideFocus && styles['hide-focus'], disabled && styles['handle-disabled']) }, attributes, listeners),
         React.createElement(InternalIcon, { variant: disabled ? 'disabled' : undefined, name: "drag-indicator" })));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/drag-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAmB;IAChG,OAAO,CACL,oBAAC,MAAM,mCACU,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,YAAY,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,IAC1G,UAAU,EACV,SAAS;QAEb,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3E,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../../icon/internal';\nimport Handle from '../handle';\n\nimport handleStyles from '../handle/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface DragHandleProps {\n  attributes: ButtonHTMLAttributes<HTMLDivElement>;\n  hideFocus?: boolean;\n  // @dnd-kit uses this type\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  listeners: Record<string, Function> | undefined;\n  disabled?: boolean;\n}\n\nexport default function DragHandle({ attributes, hideFocus, listeners, disabled }: DragHandleProps) {\n  return (\n    <Handle\n      aria-disabled={disabled}\n      className={clsx(styles.handle, hideFocus && handleStyles['hide-focus'], disabled && styles['handle-disabled'])}\n      {...attributes}\n      {...listeners}\n    >\n      <InternalIcon variant={disabled ? 'disabled' : undefined} name=\"drag-indicator\" />\n    </Handle>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAmB;IACtF,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC7C,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,2CACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,IACpG,UAAU,EACV,SAAS;QAEb,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC9E,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport interface DragHandleProps {\n  attributes: ButtonHTMLAttributes<HTMLDivElement>;\n  hideFocus?: boolean;\n  // @dnd-kit uses this type\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  listeners: Record<string, Function> | undefined;\n}\n\nexport default function DragHandle({ attributes, hideFocus, listeners }: DragHandleProps) {\n  const disabled = attributes['aria-disabled'];\n  return (\n    // We need to use a div with button role instead of a button\n    // so that Safari will focus on it when clicking it.\n    // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n    // Otherwise, we can't reliably catch keyboard events coming from the handle\n    // when it is being dragged.\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={clsx(styles.handle, hideFocus && styles['hide-focus'], disabled && styles['handle-disabled'])}\n      {...attributes}\n      {...listeners}\n    >\n      <InternalIcon variant={disabled ? 'disabled' : undefined} name=\"drag-indicator\" />\n    </div>\n  );\n}\n"]}

package/internal/components/drag-handle/styles.css.js

@@ -1,7 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_sdha6_1s3u7_5",
-  "handle-disabled": "awsui_handle-disabled_sdha6_1s3u7_15"
+  "handle": "awsui_handle_sdha6_yy78y_145",
+  "hide-focus": "awsui_hide-focus_sdha6_yy78y_162",
+  "handle-disabled": "awsui_handle-disabled_sdha6_yy78y_191"
 };