From bf6ceecefaf87f2bcbc5edc25877e1e20a8dad3e Mon Sep 17 00:00:00 2001
From: Powerplex <julien.bonnin.dev@gmail.com>
Date: Tue, 5 Dec 2023 14:54:29 +0100
Subject: [PATCH] feat(dropdown): display number of selected items in cta

---
 package-lock.json                                  | 1 +
 packages/components/dropdown/src/Dropdown.test.tsx | 6 ++++--
 packages/components/dropdown/src/DropdownValue.tsx | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bb673d270..770335127 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2402,6 +2402,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/packages/components/dropdown/src/Dropdown.test.tsx b/packages/components/dropdown/src/Dropdown.test.tsx
index 8ac3f46d1..f4ca1c806 100644
--- a/packages/components/dropdown/src/Dropdown.test.tsx
+++ b/packages/components/dropdown/src/Dropdown.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
@@ -367,8 +368,8 @@ describe('Dropdown', () => {
       await user.click(getItem('1984'))
       await user.click(getItem('Pride and Prejudice'))
 
-      // Then placeholder is replaced by the selected value
-      expect(getTrigger('Book')).toHaveTextContent('1984')
+      // Then placeholder is replaced by the selected value and suffix indicating remaining items
+      expect(getTrigger('Book')).toHaveTextContent('1984, +1')
 
       // Then the proper items are selected
       expect(getItem('War and Peace')).toHaveAttribute('aria-selected', 'false')
@@ -405,6 +406,7 @@ describe('Dropdown', () => {
       await user.keyboard('[ArrowDown][Enter]')
 
       // Then all items are selected
+      expect(getTrigger('Book')).toHaveTextContent('War and Peace, +2')
       expect(getItem('War and Peace')).toHaveAttribute('aria-selected', 'true')
       expect(getItem('1984')).toHaveAttribute('aria-selected', 'true')
       expect(getItem('Pride and Prejudice')).toHaveAttribute('aria-selected', 'true')
diff --git a/packages/components/dropdown/src/DropdownValue.tsx b/packages/components/dropdown/src/DropdownValue.tsx
index e27f71c69..10bd33401 100644
--- a/packages/components/dropdown/src/DropdownValue.tsx
+++ b/packages/components/dropdown/src/DropdownValue.tsx
@@ -13,12 +13,12 @@ export const Value = ({ children, className, placeholder }: ValueProps) => {
   const { selectedItem, multiple, selectedItems } = useDropdownContext()
 
   const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)
-
   const text = multiple ? selectedItems[0]?.text : selectedItem?.text
+  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''
 
   return (
     <span className={cx('text-neutral', className)}>
-      {!hasSelectedItems ? placeholder : children || text}
+      {!hasSelectedItems ? placeholder : children || text + suffix}
     </span>
   )
 }