feat(multi-select): add collapsedSelection prop

When enabled, displays "X selected" text instead of individual
selection chips, providing a more compact representation.

Author: eirikhaugstulen

components/select/src/multi-select/input.js

@@ -3,6 +3,7 @@ import { colors } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 import {
     InputClearButton,
     InputPlaceholder,
@@ -22,6 +23,7 @@ const Input = ({
     className,
     disabled,
     inputMaxHeight = '100px',
+    collapsedSelection,
 }) => {
     const hasSelection = selected.length > 0
     const onClear = (e) => {
@@ -40,7 +42,15 @@ const Input = ({
                     dataTest={`${dataTest}-placeholder`}
                 />
             )}
-            {hasSelection && (
+            {hasSelection && collapsedSelection && (
+                <span
+                    className="collapsed-selection-text"
+                    data-test={`${dataTest}-selection-count`}
+                >
+                    {i18n.t('{{count}} selected', { count: selected.length })}
+                </span>
+            )}
+            {hasSelection && !collapsedSelection && (
                 <div className="root-input">
                     {/* the wrapper div above is necessary to enforce wrapping on overflow */}
                     <SelectionList
@@ -81,6 +91,11 @@ const Input = ({
                 .root-right {
                     margin-inline-start: auto;
                 }
+
+                .collapsed-selection-text {
+                    flex: 1;
+                    user-select: none;
+                }
             `}</style>
 
             <style jsx>{`
@@ -97,6 +112,7 @@ Input.propTypes = {
     className: PropTypes.string,
     clearText: requiredIf((props) => props.clearable, PropTypes.string),
     clearable: PropTypes.bool,
+    collapsedSelection: PropTypes.bool,
     disabled: PropTypes.bool,
     inputMaxHeight: PropTypes.string,
     options: PropTypes.node,

components/select/src/multi-select/multi-select.js

@@ -37,6 +37,7 @@ const MultiSelect = ({
     noMatchText,
     initialFocus,
     dense,
+    collapsedSelection,
     dataTest = 'dhis2-uicore-multiselect',
 }) => {
     // If the select is filterable, use a filterable menu
@@ -65,6 +66,7 @@ const MultiSelect = ({
                             placeholder={placeholder}
                             prefix={prefix}
                             inputMaxHeight={inputMaxHeight}
+                            collapsedSelection={collapsedSelection}
                         />
                     }
                     menu={menu}
@@ -114,6 +116,8 @@ MultiSelect.propTypes = {
     clearText: requiredIf((props) => props.clearable, PropTypes.string),
     /** Adds a 'clear' option to the menu */
     clearable: PropTypes.bool,
+    /** When true, shows "X selected" text instead of individual chips */
+    collapsedSelection: PropTypes.bool,
     dataTest: PropTypes.string,
     dense: PropTypes.bool,
     disabled: PropTypes.bool,

components/select/src/multi-select/multi-select.prod.stories.js

@@ -367,6 +367,31 @@ export const ShiftedIntoView = (args) => (
     </>
 )
 
+export const CollapsedSelection = () => {
+    const [selected, setSelected] = React.useState(['1', '3', '5'])
+    return (
+        <div style={{ maxWidth: 400 }}>
+            <MultiSelect
+                className="select"
+                selected={selected}
+                onChange={({ selected }) => setSelected(selected)}
+                collapsedSelection
+                prefix="Prefix text"
+                clearable
+                clearText="Clear all"
+            >
+                <MultiSelectOption value="1" label="option one" />
+                <MultiSelectOption value="2" label="option two" />
+                <MultiSelectOption value="3" label="option three" />
+                <MultiSelectOption value="4" label="option four" />
+                <MultiSelectOption value="5" label="option five" />
+                <MultiSelectOption value="6" label="option six" />
+            </MultiSelect>
+        </div>
+    )
+}
+CollapsedSelection.storyName = 'Collapsed selection'
+
 export const RTL = (args) => {
     useEffect(() => {
         document.body.dir = 'rtl'