diff --git a/src/internal/item-container/__tests__/item-container.test.tsx b/src/internal/item-container/__tests__/item-container.test.tsx index d6a726dc..b006b0ff 100644 --- a/src/internal/item-container/__tests__/item-container.test.tsx +++ b/src/internal/item-container/__tests__/item-container.test.tsx @@ -8,6 +8,8 @@ import { DragAndDropData } from "../../../../lib/components/internal/dnd-control import { ItemContainer, ItemContainerProps, useItemContext } from "../../../../lib/components/internal/item-container"; import { Coordinates } from "../../../../lib/components/internal/utils/coordinates"; +import styles from "../../../../lib/components/internal/item-container/styles.css.js"; + afterEach(cleanup); vi.mock("../../../../lib/components/internal/dnd-controller/controller"); @@ -121,6 +123,23 @@ describe("keyboard interaction", () => { expect(onKeyMoveMock).toBeCalledWith("up"); }); }); + + test("applies keyboardDragged class when keyboard drag transition is active", () => { + const { container } = render(); + + act(() => { + mockController.start({ + interactionType: "keyboard", + operation: "reorder", + draggableItem: defaultProps.item, + collisionRect: { top: 0, bottom: 0, left: 0, right: 0 }, + coordinates: new Coordinates({ x: 0, y: 0 }), + } as DragAndDropData); + }); + + const itemElement = container.querySelector('[data-item-id="ID"]'); + expect(itemElement).toHaveClass(styles.keyboardDragged); + }); }); test("does not renders in portal when item in reorder state by a pointer", () => { diff --git a/src/internal/item-container/index.tsx b/src/internal/item-container/index.tsx index 801ad803..8af6a1c4 100644 --- a/src/internal/item-container/index.tsx +++ b/src/internal/item-container/index.tsx @@ -440,14 +440,19 @@ function ItemContainerComponent( itemTransitionClassNames.push(styles.inTransition); } - if (transition && transition.interactionType === "pointer") { - // Adjust the dragged/resized item to the pointer's location. - itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged); - itemTransitionStyle.insetInlineStart = transition.positionTransform?.x; - itemTransitionStyle.insetBlockStart = transition.positionTransform?.y; - itemTransitionStyle.inlineSize = transition.sizeTransform?.width; - itemTransitionStyle.blockSize = transition.sizeTransform?.height; - itemTransitionStyle.pointerEvents = "none"; + if (transition) { + if (transition.interactionType === "pointer") { + // Adjust the dragged/resized item to the pointer's location. + itemTransitionClassNames.push(transition.operation === "resize" ? styles.resized : styles.dragged); + itemTransitionStyle.insetInlineStart = transition.positionTransform?.x; + itemTransitionStyle.insetBlockStart = transition.positionTransform?.y; + itemTransitionStyle.inlineSize = transition.sizeTransform?.width; + itemTransitionStyle.blockSize = transition.sizeTransform?.height; + itemTransitionStyle.pointerEvents = "none"; + } + if (transition.interactionType === "keyboard") { + itemTransitionClassNames.push(styles.keyboardDragged); + } } if (isHidden) { diff --git a/src/internal/item-container/styles.scss b/src/internal/item-container/styles.scss index 4c4bd438..f5ee68aa 100644 --- a/src/internal/item-container/styles.scss +++ b/src/internal/item-container/styles.scss @@ -25,6 +25,9 @@ z-index: 2000; position: fixed; } +.transformed.keyboardDragged { + z-index: 2000; +} .resized { z-index: 2000; position: absolute;