Skip to content

feat(useDraggable): add public facing hook #7356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

feat(useDraggable): add public facing hook #7356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1f51b0d
chore: add relevant pragmatic drag and drop dependencies
tomdavies73 Jun 6, 2025
f126ffa
chore: add drag event polyfill to properly unit test against drags wi…
tomdavies73 May 21, 2025
6a3fc0b
chore: amend playwright config to run over all src files
tomdavies73 May 21, 2025
e3c6b3a
chore: add isGuid util for checking if a string is generated via our …
tomdavies73 May 21, 2025
7cd8cdd
feat(draggable-utils): add draggable utils file
tomdavies73 May 21, 2025
b6d6054
feat(draggable-item, draggable-container): add internal foundation co…
tomdavies73 May 22, 2025
70a836a
feat(useDraggable): add public facing hook
tomdavies73 May 23, 2025
f23e894
refactor(draggable-container, draggable-item): re-build using the use…
tomdavies73 May 27, 2025
7acdcdf
refactor(flat-table): re-build using internal foundation components
tomdavies73 May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@
"vite-plugin-static-copy": "^2.2.0"
},
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.7.2",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
"@atlaskit/pragmatic-drag-and-drop-unit-testing": "^1.1.0",
"@floating-ui/dom": "~1.2.9",
"@floating-ui/react-dom": "~1.3.0",
"@lexical/headless": "^0.21.0",
Expand Down
2 changes: 1 addition & 1 deletion playwright-ct.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const playwrightDir = resolve(__dirname, "./playwright");
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: resolve(__dirname, "./src/components"),
testDir: resolve(__dirname, "./src/"),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question(non-blocking): Why has this been changed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So playwright can run on the .pw.tsx file added to the useDraggable hook, previously it would only run over components which would mean this test wouldn't be included.


snapshotDir: resolve(playwrightDir, "./__snapshots__"),

Expand Down
63 changes: 63 additions & 0 deletions src/__internal__/draggable/components.test-pw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from "react";
import DraggableItem from "./draggable-item";
import DraggableContainer, {
DraggableContainerProps,
} from "./draggable-container";

export const BasicConfiguration = (props: Partial<DraggableContainerProps>) => (
<DraggableContainer
containerProps={{ "data-role": "draggable-container" }}
{...props}
>
<DraggableItem id="1">Item 1</DraggableItem>
<DraggableItem id="2">Item 2</DraggableItem>
<DraggableItem id="3">Item 3</DraggableItem>
<DraggableItem id="4">Item 4</DraggableItem>
<DraggableItem id="5">Item 5</DraggableItem>
</DraggableContainer>
);

export const OutOfBoundsConfiguration = (
props: Partial<DraggableContainerProps>,
) => (
<>
<DraggableContainer
containerProps={{ "data-role": "draggable-container" }}
{...props}
>
<DraggableItem id="1">Item 1</DraggableItem>
<DraggableItem id="2">Item 2</DraggableItem>
<DraggableItem id="3">Item 3</DraggableItem>
<DraggableItem id="4">Item 4</DraggableItem>
<DraggableItem id="5">Item 5</DraggableItem>
</DraggableContainer>
<div>Out of bounds</div>
</>
);

export const MultipleContainersConfiguration = (
props: Partial<DraggableContainerProps>,
) => (
<>
<DraggableContainer
containerProps={{ "data-role": "draggable-container-1" }}
{...props}
>
<DraggableItem id="1">Item 1</DraggableItem>
<DraggableItem id="2">Item 2</DraggableItem>
<DraggableItem id="3">Item 3</DraggableItem>
<DraggableItem id="4">Item 4</DraggableItem>
<DraggableItem id="5">Item 5</DraggableItem>
</DraggableContainer>
<DraggableContainer
containerProps={{ "data-role": "draggable-container-2" }}
{...props}
>
<DraggableItem id="6">Item 6</DraggableItem>
<DraggableItem id="7">Item 7</DraggableItem>
<DraggableItem id="8">Item 8</DraggableItem>
<DraggableItem id="9">Item 9</DraggableItem>
<DraggableItem id="10">Item 10</DraggableItem>
</DraggableContainer>
</>
);
13 changes: 13 additions & 0 deletions src/__internal__/draggable/draggable-container-context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { createContext } from "react";

interface DraggableContainerContextType {
columnId: string | number;
dragType?: "continuous" | "onDrop";
}

const DraggableContainerContext = createContext<DraggableContainerContextType>({
columnId: "",
dragType: undefined,
});

export default DraggableContainerContext;
Loading
Loading