feat: add support for count chip

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -1,4 +1,4 @@
-import ReactSelect, { ControlProps, MenuProps } from 'react-select'
+import ReactSelect, { ControlProps, MenuProps, ValueContainerProps } from 'react-select'
 import { ReactElement, useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
@@ -13,6 +13,7 @@ import {
     SelectPickerLoadingIndicator,
     SelectPickerMenu,
     SelectPickerOption,
+    SelectPickerValueContainer,
 } from './common'
 import { SelectPickerOptionType, SelectPickerProps } from './type'
 
@@ -26,6 +27,7 @@ const SelectPicker = ({
     showSelectedOptionIcon = true,
     size = ComponentSizeType.medium,
     disabledTippyContent,
+    showSelectedOptionsCount = false,
     ...props
 }: SelectPickerProps) => {
     const { inputId, required, isDisabled } = props
@@ -53,6 +55,13 @@ const SelectPicker = ({
         [],
     )
 
+    const renderValueContainer = useCallback(
+        (valueContainerProps: ValueContainerProps<SelectPickerOptionType>) => (
+            <SelectPickerValueContainer {...valueContainerProps} showSelectedOptionsCount={showSelectedOptionsCount} />
+        ),
+        [showSelectedOptionsCount],
+    )
+
     const renderDisabledTippy = (children: ReactElement) => (
         <Tippy content={disabledTippyContent} placement="top" className="default-tt" arrow={false}>
             {children}
@@ -92,6 +101,7 @@ const SelectPicker = ({
                                 Option: SelectPickerOption,
                                 Menu: renderMenu,
                                 ClearIndicator: SelectPickerClearIndicator,
+                                ValueContainer: renderValueContainer,
                             }}
                             styles={selectStyles}
                             menuPlacement="auto"

src/Shared/Components/SelectPicker/common.tsx

@@ -5,6 +5,7 @@ import {
     OptionProps,
     ClearIndicatorProps,
     MenuProps,
+    ValueContainerProps,
 } from 'react-select'
 import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
@@ -51,6 +52,27 @@ export const SelectPickerControl = ({
     )
 }
 
+export const SelectPickerValueContainer = ({
+    showSelectedOptionsCount,
+    ...props
+}: ValueContainerProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'showSelectedOptionsCount'>) => {
+    const { getValue } = props
+    const selectedOptionsLength = (getValue() ?? []).length
+
+    return (
+        <div className="flex left dc__gap-8 flex-grow-1">
+            <div className="flex left">
+                <components.ValueContainer {...props} />
+            </div>
+            {showSelectedOptionsCount && selectedOptionsLength > 0 && (
+                <div className="bcb-5 dc__border-radius-4-imp pl-5 pr-5 cn-0 fs-12 fw-6 lh-18 dc__truncate dc__no-shrink">
+                    {selectedOptionsLength}
+                </div>
+            )}
+        </div>
+    )
+}
+
 export const SelectPickerLoadingIndicator = () => <Progressing />
 
 export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) => {

src/Shared/Components/SelectPicker/type.ts

@@ -52,4 +52,10 @@ export interface SelectPickerProps
      * Content to be shown in a tippy when disabled
      */
     disabledTippyContent?: ReactNode
+    /**
+     * If true, the selected options count is shown in a chip inside ValueContainer
+     *
+     * @default 'false'
+     */
+    showSelectedOptionsCount?: boolean
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -33,6 +33,7 @@ export const getCommonSelectStyle = ({ error, size }: Pick<SelectPickerProps, 'e
         padding: '5px 8px',
         gap: '8px',
         opacity: state.isDisabled ? 0.5 : 1,
+        flexWrap: 'nowrap',
 
         '&:hover': {
             borderColor: state.isDisabled ? 'var(--N200)' : 'var(--N300)',
@@ -107,6 +108,7 @@ export const getCommonSelectStyle = ({ error, size }: Pick<SelectPickerProps, 'e
         size: '13px',
         fontWeight: 400,
         lineHeight: '20px',
+        overflow: 'hidden',
     }),
     placeholder: (base) => ({
         ...base,