[Feature request] useClipboard: Add information to getItems so that the receiving onPaste can tell whether the user has cut or copied

[lilbropeep]

Provide a general summary of the feature here

I am using useClipboard inside our app to manage copying/pasting of custom components. In order to move our components properly around the app, we need to know whether the user is copying or cutting in the destination component, rather than in the source.

Currently, when using useClipboard, the DragItem (I think) provided by getItems does not contain any information about whether the user has copied or cut. You can access onCopy and onCut through useClipboard, and modify some external variable like a context or other state change, but you cannot use those event handlers to modify the actual data that gets sent. I could onCut delete the component and its various states, but due to how our state system is built, that requires an even more complex system.

It would be a lot simpler if that information was available to the receiving onPaste directly.

🤔 Expected Behavior?

useClipboard should provide a simple way for the receiving component to know whether the user initiated a copy or a cut. That way developers would have a simple solution for when they can't or don't want to immediately delete the source component on cut.

😯 Current Behavior

useClipboard provides onCopy and onCut, but these do not allow you to modify getItems. As a result, in order for the receiving component to know what action the user took, you currently must implement an external system to store that action somewhere else.

💁 Possible Solution

I posted a question about this here, and a suggested solution from @reidbarber was:

We could probably support this by doing something like:

getItems?: (details: {type: 'cut' | 'copy'}) => DragItem[],

and passing the type for each when getItems is called.

🔦 Context

Our app has a bunch of custom components that can be moved around a board/map type interface. Copying and cutting each require independent functions, so we need to know which action the user took. onCopy and onCut inside useClipboard work, but I then have to store the result elsewhere.

To do this, I am simply accessing a context (copyContext in the example below) and storing it as a useRef value to prevent every component from rerendering when the user copies/cuts.

let copyContext = useContext(CopyContext);

let { clipboardProps } = useClipboard({
    getItems() {
        return [
          {
            "my-variable": "a random id string",
          },
        ];
    },
    onCopy() {
      if (copyContext) copyContext.current = "copy";
    },
    onCut() {
      if (copyContext) copyContext.current = "cut";
    }
  })

This is working fine but it is a band aid on an otherwise quite functional hook. A small change here would result in an improved developer experience.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

For whoever picks this up:

1. We'll want to update the getItems function type to pass in an object with type: 'cut' | 'copy'
2. In both onCopy and onCut, we'll want to pass the appropriate type into the respective options.getItems() call
3. We'll need new tests, or we can update existing tests to check this behavior