SelectPanel2: Add story for "create new item"

[siddharthkp]

• Mockup: Figma
• Focus management question answered in [Do not merge] SelectPanel2: Add story for "create new item" + <dialog> refactor #4179 (comment)

create-new-item.mov

Key changes:

1. Move focus zone from "children container" to listbox (ActionList)
2. Add example that opens Dialog component (needs to be controlled because Dialog component doesn't use <dialog> yet)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 19a3cfa

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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.04 KB (-0.03% 🔽)
packages/react/dist/browser.umd.js	89.33 KB (+0.05% 🔺)

[siddharthkp]

Note for reviewer:

This is a bit unfortunate, you have to control the open state of SelectPanel because SelectPanel uses <dialog> (top layer) but Dialog uses portal not <dialog> so Dialog would render under the panel 🤦

This would change once we pick up #3840 again

[siddharthkp]

Note for reviewer: The code here isn't ideal, I tried to make it a little more accessible in the story but the underlying component needs work 😢

This isn't the focus of the PR/epic though, so I just added a Flash banner telling people not to copy this part of code 😅