chore: async select component

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.6",
+    "version": "1.9.6-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -18,5 +18,5 @@ export { default as ConfirmationModal, BaseConfirmationModal } from './Confirmat
 export { DeleteConfirmationModal } from './DeleteConfirmationModal'
 export { ForceDeleteConfirmationModal } from './ForceDeleteConfirmationModal'
 export { CannotDeleteModal } from './CannotDeleteModal'
-export { ConfirmationModalVariantType, type ConfirmationModalProps } from './types'
+export { ConfirmationModalVariantType, type ConfirmationModalProps, type DeleteConfirmationModalProps } from './types'
 export { ConfirmationModalProvider } from './ConfirmationModalContext'

src/Shared/Components/ConfirmationModal/index.tsx

@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { SelectInstance, ValueContainerProps } from 'react-select'
+import AsyncSelect from 'react-select/async'
+import {
+    SelectPickerClearIndicator,
+    SelectPickerControl,
+    SelectPickerDropdownIndicator,
+    SelectPickerInput,
+    SelectPickerLoadingIndicator,
+    SelectPickerMenuList,
+    SelectPickerMultiValueRemove,
+    SelectPickerOption,
+    SelectPickerValueContainer,
+} from './common'
+import { AsyncSelectProps, SelectPickerOptionType } from './type'
+import { FormFieldWrapper } from '../FormFieldWrapper'
+import { getCommonSelectStyle } from './utils'
+
+export const AsyncSelectPicker = ({
+    defaultOptions,
+    loadOptions,
+    noOptionsMessage,
+    onChange,
+    error,
+    size,
+    menuSize,
+    variant,
+    getIsOptionValid,
+    isGroupHeadingSelectable,
+    shouldMenuAlignRight,
+    inputId,
+    layout,
+    label,
+    helperText,
+    warningText,
+    required,
+    fullWidth,
+    ariaLabel,
+    borderConfig,
+    borderRadiusConfig,
+    labelTippyCustomizedConfig,
+    labelTooltipConfig,
+}: AsyncSelectProps) => {
+    const selectRef = useRef<SelectInstance>(null)
+
+    // Option disabled, group null state, checkbox hover, create option visibility (scroll reset on search)
+    const selectStyles = useMemo(
+        () =>
+            getCommonSelectStyle({
+                error,
+                size,
+                menuSize,
+                variant,
+                getIsOptionValid,
+                isGroupHeadingSelectable,
+                shouldMenuAlignRight,
+            }),
+        [error, size, menuSize, variant, isGroupHeadingSelectable, shouldMenuAlignRight],
+    )
+
+    const handleOnKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            selectRef.current?.inputRef.blur()
+        }
+    }
+    type OptionValue = string | number
+
+    const renderValueContainer = useCallback(
+        (valueContainerProps: ValueContainerProps<SelectPickerOptionType<OptionValue>>) => (
+            <SelectPickerValueContainer {...valueContainerProps} />
+        ),
+        [],
+    )
+
+    return (
+        <FormFieldWrapper
+            inputId={inputId}
+            layout={layout}
+            label={label}
+            error={error}
+            helperText={helperText}
+            warningText={warningText}
+            required={required}
+            fullWidth={fullWidth}
+            ariaLabel={ariaLabel}
+            borderConfig={borderConfig}
+            borderRadiusConfig={borderRadiusConfig}
+            labelTippyCustomizedConfig={labelTippyCustomizedConfig}
+            labelTooltipConfig={labelTooltipConfig}
+        >
+            <div className="w-100">
+                <AsyncSelect
+                    ref={selectRef}
+                    blurInputOnSelect
+                    onKeyDown={handleOnKeyDown}
+                    defaultOptions={defaultOptions}
+                    loadOptions={loadOptions}
+                    noOptionsMessage={noOptionsMessage}
+                    onChange={onChange}
+                    components={{
+                        IndicatorSeparator: null,
+                        LoadingIndicator: SelectPickerLoadingIndicator,
+                        DropdownIndicator: SelectPickerDropdownIndicator,
+                        Control: SelectPickerControl,
+                        Option: SelectPickerOption,
+                        MenuList: SelectPickerMenuList,
+                        ClearIndicator: SelectPickerClearIndicator,
+                        ValueContainer: renderValueContainer,
+                        // MultiValueLabel: renderMultiValueLabel,
+                        MultiValueRemove: SelectPickerMultiValueRemove,
+                        // GroupHeading: renderGroupHeading,
+                        // NoOptionsMessage: renderNoOptionsMessage,
+                        Input: SelectPickerInput,
+                    }}
+                    value={defaultOptions?.[0]}
+                    styles={selectStyles}
+                    // aria-describedby={getFormHelperTextElementId('app-selector')}
+                />
+            </div>
+        </FormFieldWrapper>
+    )
+}

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

@@ -19,3 +19,4 @@ export * from './SelectPickerTextArea.component'
 export { default as FilterSelectPicker } from './FilterSelectPicker'
 export * from './type'
 export { getSelectPickerOptionByValue } from './utils'
+export * from './AsyncSelectPicker.component'

src/Shared/Components/SelectPicker/index.ts

@@ -24,6 +24,7 @@ import { CreatableProps } from 'react-select/creatable'
 import type {} from 'react-select/base'
 import { TooltipProps } from '@Common/Tooltip/types'
 import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
+import { AsyncProps } from 'react-select/async'
 import { FormFieldWrapperProps } from '../FormFieldWrapper/types'
 
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
@@ -314,3 +315,30 @@ export type SelectPickerTextAreaProps = Omit<
     | 'shouldRenderTextArea'
 > &
     Pick<ResizableTagTextAreaProps, 'maxHeight' | 'minHeight' | 'refVar' | 'dependentRefs'>
+
+export interface AsyncSelectProps
+    extends Partial<
+            Pick<
+                FormFieldWrapperProps,
+                | 'error'
+                | 'layout'
+                | 'label'
+                | 'helperText'
+                | 'warningText'
+                | 'required'
+                | 'fullWidth'
+                | 'borderConfig'
+                | 'borderRadiusConfig'
+                | 'labelTippyCustomizedConfig'
+                | 'labelTooltipConfig'
+                | 'ariaLabel'
+                | 'inputId'
+            >
+        >,
+        AsyncProps<SelectPickerOptionType, boolean, GroupBase<SelectPickerOptionType>>,
+        Partial<Pick<SelectPickerProps, 'size' | 'menuSize' | 'variant' | 'shouldMenuAlignRight'>> {
+    getIsOptionValid?: (option: SelectPickerOptionType) => boolean
+    isGroupHeadingSelectable?: boolean
+    // defaultOptions?: SelectPickerOptionType[]
+    loadingOptions?: SelectPickerOptionType[]
+}