List component

[mslizh]

🚀 Feature request

Please describe your request in one or two sentences.

Add a component for a list that allows keyboard navigating, adding, deleting, selecting (one or more) and dragging and dropping items. Some of the functionality should be similar to the way lists work in Combobox, Select, Menu, etc.

🧱 Problem Statement / Justification

Please provide valid reason(s) why this should added.

If this feaure is related to a problem you've noticed. Mention it as well

Because it's a popular functionality in many applications that has to be constantly re-implemented. Keyboard functionality are often forgotten.

✅ Proposed solution or API

Please provide code snippets, gists, or links to the ideal design or API

Sorry, I'm a beginner so I don't have any.

↩️ Alternatives

What alternative solutions have you considered before making this request?

React Aria List Box

📝 Additional Information

What resources (links, screenshots, etc.) do you have to assist this effort?

[anubra266]

@mslizh If you need a list, you can use the select machine.

const [state, send] = useMachine(
  select.machine({
    // ...
    open: true,
    "open.controlled": true,
  })
);

const api = select.connect(state, send, normalizeProps);

return (
  <div {...api.rootProps}>
    <ul {...api.contentProps} style={{ height: "300px" }}>
      {selectData.map((item) => (
        <li key={item.value} {...api.getItemProps({ item })}>
          <span {...api.getItemTextProps({ item })}>{item.label}</span>
          <span {...api.getItemIndicatorProps({ item })}>✓</span>
        </li>
      ))}
    </ul>
  </div>
);

CleanShot.2024-05-15.at.10.44.50.mp4

cc @segunadebayo