Update the Sortable Multiselect component documentation

[codercodingthecode]

This PR address the documentation for the Sortable Multiselect Component example.
Due to the deprecation of the old Library react-sortable-hoc, recommended the use of the DnD-Kit library.

Included in this PR.

• Add and use DnD-Kit Library
• Update documentation for Sortable Multiselect
• Update the sample array to add an id property
• Remove the old library.

Address

this issue #5159

Sample using DnD

[changeset-bot]

⚠️ No Changeset found

Latest commit: 137c185

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 137c185:

Sandbox	Source
react-codesandboxer-example	Configuration

[Rall3n]

If dnd-kit is a replacement for react-sortable-hoc, then I would like the example to behave the same as with the latter.

It is currently very restrictive in comparison and cancels the drag if moving too far right.

[immasandwich]

Got this working to match the existing documentation with the following changes:

1. Use ValueContainer instead of MultiValueContainer as the droppable area, and ensure that you apply flex-grow: 1 styling to it so it consumes the maximum width of the React Select component.
2. Use closestCorners as the collision detection algorithm (on the DndContext component)

Thanks for doing most of the leg work!

[dacarmor]

Hello, how is this matter? Is there any forecast to integrate the changes?

[codercodingthecode]

I’m no longer using this feature at work. So, I’d like to know if there’s is any interest in moving this forward before I put more of my time into it.
To anyone wanting to contribute, open a pr against current branch and will update here.
I will resolve the current conflicts for now.

[codercodingthecode]

resolving conflicts after work today.

[codercodingthecode]

can someone look into the CI Pipeline?

[chrissysemens]

Hi, I have a few issues trying to use this example:

MultiValue is returning JSX and not components.MultiValue directly and so I receieve a type error:

Also, there's a distance prop being passed to Select which is not expected?

I understand this has not been merged yet but throught I'd leave the comment as I couldn't see any chance to add a distance prop to select and its not in master, and the typing issue will surface for others?

[NotDemonix]

I suggest to remove strategy={horizontalListSortingStrategy}, works the same and is better if the component goes into 2 lines.
Next thing to change is transform: CSS.Transform.toString(transform), into transform: CSS.Translate.toString(transform),, this fixes the issue of element width if we have 2 diffrent widths for options. Would open a pr but it doesn't let me.

[NotDemonix]

distance={4} doesn't seem to be doing anything

[KubaBir]

For anyone looking to use this. There is a problem with using it on mobile which can be resolved by adding
touchAction: 'none' to MultiValue styles

const MultiValue = (props: MultiValueProps<Item>) => {
  const onMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault()
    e.stopPropagation()
  }
  const innerProps = { ...props.innerProps, onMouseDown }
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
    id: props.data.value,
  })
  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    touchAction: 'none',
  }

  return (
    <div style={style} ref={setNodeRef} {...attributes} {...listeners}>
      <components.MultiValue {...props} innerProps={innerProps} />
    </div>
  )
}

https://docs.dndkit.com/api-documentation/sensors/pointer#touch-action