Merge branch 'develop' into feat/async-select-recent-option

Author: shivani170

package-lock.json

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

package.json

@@ -83,7 +83,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
                     value={selectedChartType ?? chartTypeOptions[0]}
                     options={chartTypeOptions}
                     onChange={handleChartTypeChange}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                 />
             </div>
             <div className="chart-version-options flex" data-testid="chart-version-options">
@@ -93,7 +93,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
                     value={selectedChartVersion ?? chartVersionOptions[0]}
                     options={chartVersionOptions}
                     onChange={handleChartVersionChange}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                 />
             </div>
         </div>

src/Common/ChartVersionAndTypeSelector.tsx

@@ -147,7 +147,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
                           name: 'deployment-config-diff-deployment-selector',
                           inputId: 'deployment-config-diff-deployment-selector',
                           classNamePrefix: 'deployment-config-diff-deployment-selector',
-                          variant: SelectPickerVariantType.BORDER_LESS,
+                          variant: SelectPickerVariantType.COMPACT,
                           options: pipelineDeploymentsOptions,
                           placeholder: 'Select Deployment',
                           value: getSelectPickerOptionByValue(pipelineDeploymentsOptions, compareWfrId, null),

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx

@@ -169,7 +169,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             {...row.data[key].props}
                             inputId={`data-table-${row.id}-${key}-cell`}
                             classNamePrefix="dynamic-data-table__cell__select-picker"
-                            variant={SelectPickerVariantType.BORDER_LESS}
+                            variant={SelectPickerVariantType.COMPACT}
                             value={getSelectPickerOptionByValue(
                                 row.data[key].props?.options,
                                 row.data[key].value,
@@ -191,7 +191,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             isCreatable={isCreatable}
                             isClearable
                             {...props}
-                            variant={SelectPickerVariantType.BORDER_LESS}
+                            variant={SelectPickerVariantType.COMPACT}
                             classNamePrefix="dynamic-data-table__cell__select-picker-text-area"
                             inputId={`data-table-${row.id}-${key}-cell`}
                             minHeight={20}

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -34,7 +34,7 @@ export const DropdownNode = ({ id, data, isConnectable }: NodeProps<DropdownNode
             <SelectPicker<string | number, false>
                 {...restData}
                 classNamePrefix="graph-visualizer-dropdown-node"
-                variant={SelectPickerVariantType.BORDER_LESS}
+                variant={SelectPickerVariantType.COMPACT}
                 menuPortalTarget={document.querySelector('.graph-visualizer')}
                 menuSize={ComponentSizeType.xs}
                 fullWidth

src/Shared/Components/GraphVisualizer/components/DropdownNode.tsx

@@ -361,8 +361,12 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             e.preventDefault()
         }
 
-        if (e.key === 'Escape' && !selectRef.current.props.menuIsOpen) {
-            selectRef.current.blur()
+        if (e.key === 'Escape') {
+            e.stopPropagation()
+
+            if (!selectRef.current.props.menuIsOpen) {
+                selectRef.current.blur()
+            }
         }
 
         onKeyDown?.(e)

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

@@ -127,6 +127,7 @@ declare module 'react-select/base' {
 export enum SelectPickerVariantType {
     DEFAULT = 'default',
     BORDER_LESS = 'border-less',
+    COMPACT = 'compact',
 }
 
 export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<