feat: SelectPickerTextArea - add component, DynamicDataTable - replace SelectTextArea with SelectPickerTextArea, remove SelectTextArea component, add modified react-select using patch-package

Author: RohitRaj011

package-lock.json

@@ -31,7 +31,8 @@
         "build-watch": "NODE_OPTIONS=--max_old_space_size=3072 vite build --sourcemap --watch",
         "build-lib": "vite build",
         "preview": "vite preview",
-        "lint-staged": "lint-staged"
+        "lint-staged": "lint-staged",
+        "postinstall": "patch-package"
     },
     "devDependencies": {
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
@@ -61,13 +62,14 @@
         "husky": "^7.0.4",
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
+        "monaco-editor": "0.44.0",
+        "monaco-yaml": "5.1.1",
+        "patch-package": "^8.0.0",
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-toastify": "9.1.3",
         "sharp": "^0.33.5",
         "svgo": "^3.3.2",
-        "monaco-editor": "0.44.0",
-        "monaco-yaml": "5.1.1",
         "typescript": "5.5.4",
         "vite": "5.4.11",
         "vite-plugin-dts": "4.0.3",
@@ -101,8 +103,8 @@
         "jsonpath-plus": "^10.0.0",
         "marked": "^13.0.3",
         "react-dates": "^21.8.0",
-        "react-monaco-editor": "^0.54.0",
         "react-diff-viewer-continued": "^3.4.0",
+        "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "2.7.0"
     },

package.json

@@ -1,4 +1,4 @@
-import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect, useRef } from 'react'
+import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect, useRef, useState } from 'react'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { followCursor } from 'tippy.js'
 
@@ -9,10 +9,10 @@ import { ResizableTagTextArea } from '@Common/CustomTagSelector'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
-import { SelectTextArea } from '../SelectTextArea'
 import {
     getSelectPickerOptionByValue,
     SelectPicker,
+    SelectPickerTextArea,
     SelectPickerOptionType,
     SelectPickerVariantType,
 } from '../SelectPicker'
@@ -46,6 +46,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     leadingCellIcon,
     trailingCellIcon,
     buttonCellWrapComponent,
+    focusableFieldKey,
 }: DynamicDataTableRowProps<K, CustomStateType>) => {
     // CONSTANTS
     const isFirstRowEmpty = headers.every(({ key }) => !rows[0]?.data[key].value)
@@ -59,6 +60,10 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
         isDeletionNotAllowed || readOnly,
     )
 
+    // STATES
+    const [isRowAdded, setIsRowAdded] = useState(false)
+
+    // CELL REFS
     const cellRef = useRef<Record<string | number, Record<K, RefObject<HTMLTextAreaElement>>>>()
     if (!cellRef.current) {
         cellRef.current = rows.reduce(
@@ -71,6 +76,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
     }
 
     useEffect(() => {
+        setIsRowAdded(rows.length && Object.keys(cellRef.current).length < rows.length)
         const rowIds = rows.map(({ id }) => id)
 
         const updatedCellRef = rowIds.reduce((acc, curr) => {
@@ -85,6 +91,15 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
         cellRef.current = updatedCellRef
     }, [rows.length])
 
+    useEffect(() => {
+        // Using the below logic to ensure the cell is focused after row addition.
+        const cell = cellRef.current[rows[0].id][focusableFieldKey || headers[0].key].current
+        if (isRowAdded && cell) {
+            cell.focus()
+            setIsRowAdded(false)
+        }
+    }, [isRowAdded])
+
     // METHODS
     const onChange =
         (row: DynamicDataTableRowType<K, CustomStateType>, key: K) =>
@@ -94,7 +109,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
             switch (row.data[key].type) {
                 case DynamicDataTableRowDataType.DROPDOWN:
                 case DynamicDataTableRowDataType.SELECT_TEXT:
-                    value = (e as SelectPickerOptionType<string>).value
+                    value = (e as SelectPickerOptionType<string>)?.value || ''
                     extraData.selectedValue = e
                     break
                 case DynamicDataTableRowDataType.FILE_UPLOAD:
@@ -138,31 +153,32 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                         />
                     </div>
                 )
-            case DynamicDataTableRowDataType.SELECT_TEXT:
+            case DynamicDataTableRowDataType.SELECT_TEXT: {
+                const { value, props } = row.data[key]
+                const { isCreatable = true } = props
+
                 return (
-                    <div className="dynamic-data-table__select-text-area w-100 h-100 flex top dc__align-self-start">
-                        <SelectTextArea
-                            {...row.data[key].props}
-                            value={row.data[key].value}
-                            onChange={onChange(row, key)}
+                    <div className="w-100 h-100 flex top dc__align-self-start">
+                        <SelectPickerTextArea
+                            isCreatable={isCreatable}
+                            isClearable
+                            {...props}
+                            variant={SelectPickerVariantType.BORDER_LESS}
+                            classNamePrefix="dynamic-data-table__cell__select-picker"
                             inputId={`data-table-${row.id}-${key}-cell`}
-                            disabled={isDisabled}
-                            refVar={cellRef?.current?.[row.id]?.[key]}
-                            dependentRefs={cellRef?.current?.[row.id]}
-                            selectPickerProps={{
-                                ...row.data[key].props?.selectPickerProps,
-                                classNamePrefix: 'dynamic-data-table__cell__select-picker',
-                            }}
-                            textAreaProps={{
-                                ...row.data[key].props?.textAreaProps,
-                                className: 'dynamic-data-table__cell-input placeholder-cn5 py-8 pr-32 cn-9 fs-13 lh-20',
-                                disableOnBlurResizeToMinHeight: true,
-                                minHeight: 20,
-                                maxHeight: 160,
-                            }}
+                            value={getSelectPickerOptionByValue(
+                                props?.options,
+                                value,
+                                isCreatable && value ? { label: value, value } : null,
+                            )}
+                            onChange={onChange(row, key)}
+                            isDisabled={isDisabled}
+                            formatCreateLabel={(input) => `Use ${input}`}
+                            fullWidth
                         />
                     </div>
                 )
+            }
             case DynamicDataTableRowDataType.BUTTON:
                 return (
                     <div className="w-100 h-100 flex top">
@@ -240,12 +256,17 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                 ? cellError[row.id][key]
                 : { isValid: true, errorMessages: [] }
 
+        const isSelectText = row.data[key].type === DynamicDataTableRowDataType.SELECT_TEXT
+
         if (isValid) {
             return null
         }
 
+        // Adding 'no-error' class to hide error when SelectPickerTextArea is focused.
         return (
-            <div className="dynamic-data-table__error bcn-0 dc__border br-4 py-7 px-8 flexbox-col dc__gap-4">
+            <div
+                className={`dynamic-data-table__error bcn-0 dc__border br-4 py-7 px-8 flexbox-col dc__gap-4 ${isSelectText ? 'no-error' : ''}`}
+            >
                 {errorMessages.map((error) => renderErrorMessage(error))}
             </div>
         )
@@ -264,7 +285,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                 plugins={[followCursor]}
             >
                 <div
-                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
+                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'dc__disabled no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
                 >
                     {renderCellIcon(row, key, true)}
                     {renderCellContent(row, key)}

patches/react-select+5.8.0.patch

@@ -83,14 +83,7 @@
         &__select-picker__control {
             gap: 6px !important;
             padding: 8px !important;
-        }
-
-        &__select-picker__menu-portal {
-            z-index: 3 !important;
-        }
-
-        &:has(.select-picker-hidden) .dynamic-data-table__select-text-area {
-            padding-left: 8px;
+            max-height: 160px !important;
         }
 
         &:hover:not(:focus-within):not(.no-hover) {
@@ -114,6 +107,10 @@
         display: none;
     }
 
+    &__cell:focus-within > &__error.no-error {
+        display: none;
+    }
+
     &__error {
         position: absolute;
         top: calc(100% + 4px);

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -20,8 +20,7 @@ import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
 import { UseStateFiltersReturnType } from '@Common/Hooks'
 
 import { TooltipProps } from '@Common/Tooltip/types'
-import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
-import { SelectTextAreaProps } from '../SelectTextArea'
+import { SelectPickerOptionType, SelectPickerProps, SelectPickerTextAreaProps } from '../SelectPicker'
 import { FileUploadProps } from '../FileUpload'
 
 /**
@@ -70,14 +69,9 @@ export type DynamicDataTableCellPropsMap = {
         'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled'
     >
     [DynamicDataTableRowDataType.SELECT_TEXT]: Omit<
-        SelectTextAreaProps,
-        'value' | 'onChange' | 'inputId' | 'isDisabled' | 'dependentRef' | 'refVar' | 'textAreaProps'
-    > & {
-        textAreaProps?: Omit<
-            SelectTextAreaProps['textAreaProps'],
-            'className' | 'disableOnBlurResizeToMinHeight' | 'minHeight' | 'maxHeight'
-        >
-    }
+        SelectPickerTextAreaProps,
+        'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled' | 'variant' | 'formatCreateLabel'
+    >
     [DynamicDataTableRowDataType.BUTTON]: Pick<
         DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
         'onClick'
@@ -214,6 +208,11 @@ export type DynamicDataTableProps<K extends string, CustomStateType = Record<str
      * Validation state for a specific cell in a dynamic data table.
      */
     cellError?: DynamicDataTableCellErrorType<K>
+    /**
+     * Header key to determine which cell should be focused after row addition.
+     * @default 'first column key'
+     */
+    focusableFieldKey?: K
 }
 
 export interface DynamicDataTableHeaderProps<K extends string, CustomStateType = Record<string, unknown>>
@@ -245,4 +244,5 @@ export interface DynamicDataTableRowProps<K extends string, CustomStateType = Re
         | 'leadingCellIcon'
         | 'trailingCellIcon'
         | 'buttonCellWrapComponent'
+        | 'focusableFieldKey'
     > {}

src/Shared/Components/DynamicDataTable/styles.scss

@@ -42,6 +42,8 @@ import {
     SelectPickerMenuList,
     SelectPickerOption,
     SelectPickerValueContainer,
+    SelectPickerInput,
+    SelectPickerIndicatorsContainer,
 } from './common'
 import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
@@ -215,6 +217,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     closeMenuOnSelect = false,
     shouldShowNoOptionsMessage = true,
     formatCreateLabel,
+    shouldRenderTextArea = false,
+    onKeyDown,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
@@ -312,11 +316,12 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     ): void => {
         const trimmedInputValue = _inputValue?.trim()
         if (trimmedInputValue) {
-            onCreateOption(trimmedInputValue)
+            onCreateOption?.(trimmedInputValue)
         }
     }
 
     const handleKeyDown: ReactSelectProps['onKeyDown'] = (e) => {
+        onKeyDown?.(e)
         // Prevent the option from being selected if meta or control key is pressed
         if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
             e.preventDefault()
@@ -391,12 +396,14 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                 Control: SelectPickerControl,
                                 Option: renderOption,
                                 MenuList: SelectPickerMenuList,
+                                IndicatorsContainer: SelectPickerIndicatorsContainer,
                                 ClearIndicator: SelectPickerClearIndicator,
                                 ValueContainer: renderValueContainer,
                                 MultiValueLabel: renderMultiValueLabel,
                                 MultiValueRemove: SelectPickerMultiValueRemove,
                                 GroupHeading: renderGroupHeading,
                                 NoOptionsMessage: renderNoOptionsMessage,
+                                Input: SelectPickerInput,
                             }}
                             closeMenuOnSelect={!isMulti || closeMenuOnSelect}
                             allowCreateWhileLoading={false}
@@ -410,6 +417,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
                             formatCreateLabel={formatCreateLabel}
                             onKeyDown={handleKeyDown}
+                            shouldRenderTextArea={shouldRenderTextArea}
                         />
                     </div>
                 </ConditionalWrap>