feat(pds-multiselect): add create tag functionality to pds-multiselect

[QuintonJason]

Description

This PR adds the ability for users to create new tags/options directly within the pds-multiselect component. When the create-url prop is set and a user types a search query that doesn't match any existing options, they'll see an "Add '[query]'" option. Clicking it POSTs to the specified endpoint, creates the tag, and automatically selects it.

This resolves the need for heroes to manage tags on media library assets without leaving the multiselect interface.

Fixes DSS-107

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

How Has This Been Tested?

• unit tests - Added 13 comprehensive tests covering all create functionality
• tested manually - Verified in Storybook with create-url example
• e2e tests
• accessibility tests - Proper ARIA labels added for screen readers
• other:

Test Configuration:

• Pine versions:
• OS:
• Browsers:
• Screen readers:
• Misc:

Checklist:

If not applicable, leave options unchecked.

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	5585128
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/697bd1fdb150230008569767
😎 Deploy Preview	https://deploy-preview-652--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[QuintonJason]

@coderabbitai review this pr

[coderabbitai]

@QuintonJason, I'll review the changes in this PR that adds create tag functionality to the pds-multiselect component.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds a create option feature to the PdsMultiselect component. When a createUrl property is provided, a synthetic "create option" appears in the dropdown when a search query produces no matches. Selecting this option sends a POST request to the specified URL with the query text, and upon success, appends the newly created option to the component's list, emits a pdsMultiselectCreate event, and updates the selection. The changes include component logic, type definitions, styling, documentation, stories, and test coverage for the new functionality.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description covers the required sections: a clear summary of changes, the issue being fixed (DSS-107), type of change marked, and testing approach documented with unit tests and manual verification.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main feature addition: create tag functionality for the pds-multiselect component, which is the central change across all modified files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 6

🤖 Fix all issues with AI agents

In `@libs/core/src/components/pds-multiselect/docs/pds-multiselect.mdx`:
- Around line 372-380: The live example for the pds-multiselect component
(component-id="tags-create") is missing the create-url attribute so the "Add"
option doesn't appear; update the <pds-multiselect> instance in the docs to
include a create-url (e.g., create-url="...") on the component so creation is
enabled and the Add option renders for that example.

In `@libs/core/src/components/pds-multiselect/pds-multiselect.tsx`:
- Around line 741-745: The current check treats any option with id ===
"__create__" as a create option which can collide with real data; update the
branch in the selection handler to rely solely on the isCreateOption flag (i.e.,
use option.isCreateOption) and remove the id equality check (option.id ===
'__create__'); keep calling this.createOption(this.searchQuery) as before and
ensure only option.isCreateOption triggers creation—look for the block around
createOption, this.createOption, option.isCreateOption, and option.id in
pds-multiselect.tsx to make the change.
- Around line 495-557: Add an early reentrancy guard in createOption to avoid
sending duplicate POSTs when a create is already in-flight: at the start of the
createOption function check if this.creating and return immediately if true,
leaving the existing this.creating = true / finally block intact so the flag is
set before any awaits and cleared after completion; also ensure any UI create
button or Enter handler is bound to this.creating (disabled while true) so the
user cannot trigger additional calls while createOption is running.

In `@libs/core/src/components/pds-multiselect/readme.md`:
- Line 27: Update the prop description for `disabled` in the pds-multiselect
README to replace the phrase "whether or not the multiselect is disabled" with
the tighter wording "whether the multiselect is disabled"; locate the table row
for the `disabled` prop (column header `disabled`) and edit the Description cell
accordingly to keep the meaning but improve readability.

In `@libs/core/src/components/pds-multiselect/stories/pds-multiselect.stories.js`:
- Around line 402-409: Update the Storybook copy in pds-multiselect.stories.js
so it no longer implies that create events will fire in Storybook: edit the
explanatory paragraph(s) that currently read "Type a search query that doesn't
match any options to see the 'Add' option. Open console to see create and change
events." and the note about POST requests failing to clearly state that the
"Add" option appears but create POST requests will fail in Storybook and create
events will not be emitted; keep the guidance about the behavior in production
with a real API. Locate these strings in the story markup and replace them with
the clarified wording.

In `@libs/core/src/components/pds-multiselect/test/pds-multiselect.spec.tsx`:
- Around line 705-1007: The tests leak mocked fetch implementations; capture the
original global.fetch at top of the spec and restore it after each test (e.g.,
const originalFetch = global.fetch; add an afterEach that sets global.fetch =
originalFetch and calls jest.restoreAllMocks()); ensure this cleanup wraps tests
that call page.rootInstance['createOption'] and any mocks created with jest.fn()
so subsequent tests (including ones asserting creating, error handling, and
accessibility) do not see a leftover mock.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Avoid magic-id collisions for create options.
If a real option has id "__create__", it will mistakenly trigger creation. Rely only on the flag you set.

🛠️ Proposed fix

-  if (option.isCreateOption || option.id === '__create__') {
+  if (option.isCreateOption) {

🤖 Prompt for AI Agents

In `@libs/core/src/components/pds-multiselect/pds-multiselect.tsx` around lines
741 - 745, The current check treats any option with id === "__create__" as a
create option which can collide with real data; update the branch in the
selection handler to rely solely on the isCreateOption flag (i.e., use
option.isCreateOption) and remove the id equality check (option.id ===
'__create__'); keep calling this.createOption(this.searchQuery) as before and
ensure only option.isCreateOption triggers creation—look for the block around
createOption, this.createOption, option.isCreateOption, and option.id in
pds-multiselect.tsx to make the change.

[pixelflips]

The add option styling is off just a bit. The alignment is slightly off. Also, when you hover and then hover off, the hover state remains.

[pixelflips]

also just a note for the changelog, format the pr title feat(pds-multiselect): ...