feat(pds-multiselect): add searchPlaceholder, closePanelOnSelect, dis…

[QuintonJason]

Description

Adds Sage SelectDropdown parity features to pds-multiselect to unblock migration from Sage to Pine in kajabi-products.

Fixes DSS-163

New features:

• searchPlaceholder prop — customize the search input placeholder text (defaults to "Find...")
• closePanelOnSelect prop — close the dropdown panel after each selection (defaults to false)
• pdsMultiselectDismiss event — fires when the panel is dismissed via Escape key or click-outside, enabling parent components to react (maps to Sage's onEscapeHook)
• clear() method — programmatic reset of all selections, search query, and form value (maps to Sage's resetToken pattern)

Note: Single-select use cases (Sage's allowMultiselect={false}) should use pds-combobox rather than pds-multiselect.

Type of change

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

How Has This Been Tested?

• unit tests
• tested manually

16 new unit tests covering:

• searchPlaceholder prop (custom text, default fallback)
• pdsMultiselectDismiss event (Escape key fires event, no-op when closed)
• closePanelOnSelect prop (default keeps panel open, true closes panel)
• clear() method (clears values, resets trigger text, emits change event)

Storybook stories added for CustomSearchPlaceholder and ClosePanelOnSelect. MDX docs updated with examples for all four features including live interactive demos.

Checklist:

• 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	e341390
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6995dccd938dc400087b1d44
😎 Deploy Preview	https://deploy-preview-674--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 right away.

✅ 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 extends the pds-multiselect component with four new public API features. A clear() method resets selections and search state. The searchPlaceholder prop customizes the search input placeholder, defaulting to 'Find...'. The closePanelOnSelect boolean prop controls whether the dropdown closes after each selection, defaulting to false. A pdsMultiselectDismiss event fires when the dropdown is dismissed via Escape key or outside click. Changes include component implementation, TypeScript declarations, documentation, story examples, and comprehensive test coverage across all files.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main features being added (searchPlaceholder, closePanelOnSelect, dismiss event) to the pds-multiselect component.
Description check	✅ Passed	The description comprehensively covers all required template sections: clear summary of changes with issue reference, feature list, type of change marked, testing approach detailed with specific test counts, and all relevant checklist items completed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/multiselect-select-dropdown-updates

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

libs/core/src/components/pds-multiselect/pds-multiselect.tsx (1)

948-978: ⚠️ Potential issue | 🟠 Major

Normalize value entries to strings before toggling.
With optionId stringification, numeric values (e.g., from JSON value='[1,2]' or programmatic usage) will no longer match and can create duplicates/incorrect counts on toggle. Normalize the current value array before includes/filter/add.

🛠️ Proposed fix

-    const optionId = String(option.id);
-    const isSelected = this.value.includes(optionId);
+    const optionId = String(option.id);
+    const normalizedValue = this.ensureValueArray().map(v => String(v));
+    const isSelected = normalizedValue.includes(optionId);

     if (isSelected) {
-      this.value = this.value.filter(v => v !== optionId);
+      this.value = normalizedValue.filter(v => v !== optionId);
     } else {
-      if (this.maxSelections && this.value.length >= this.maxSelections) {
+      if (this.maxSelections && normalizedValue.length >= this.maxSelections) {
         return;
       }

-      this.value = [...this.value, optionId];
+      this.value = [...normalizedValue, optionId];
     }

[pixelflips]

Code Review

Overall this is a well-executed PR. The features are well-scoped, documented, and tested. Solid work on the Sage parity additions. A few suggestions inline — the main concern is around potential focus-out timing with closePanelOnSelect. The rest are minor nits.

[pixelflips]

LGTM!