fix: menu overflow

Author: eshankvaish

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

@@ -172,6 +172,14 @@ import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } fr
  *      renderCustomOptions={() => <div />}
  * />
  * ```
+ *
+ * @example Align the menu at the right most end
+ * ```tsx
+ * <SelectPicker
+ *      ...
+ *      shouldMenuAlignRight
+ * />
+ * ```
  */
 const SelectPicker = <OptionValue, IsMulti extends boolean>({
     error,
@@ -196,6 +204,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     shouldRenderCustomOptions = false,
     isSearchable,
     selectRef,
+    shouldMenuAlignRight = false,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value } = props
@@ -223,8 +232,9 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                 variant,
                 getIsOptionValid,
                 isGroupHeadingSelectable,
+                shouldMenuAlignRight,
             }),
-        [error, selectSize, menuSize, variant, isGroupHeadingSelectable],
+        [error, selectSize, menuSize, variant, isGroupHeadingSelectable, shouldMenuAlignRight],
     )
 
     // Used to show the create new option for creatable select
@@ -283,7 +293,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         </Tippy>
     )
 
-    // TODO: fix the right overflow/left overflow issue for menu
     return (
         <div className="flex column left top dc__gap-4">
             {/* Note: Common out for fields */}

src/Shared/Components/SelectPicker/type.ts

@@ -143,6 +143,13 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
         selectRef?: IsMulti extends true
             ? MutableRefObject<SelectInstance<SelectPickerOptionType<OptionValue>, true>>
             : MutableRefObject<SelectInstance<SelectPickerOptionType<OptionValue>>>
+        /**
+         * If true, the menu is aligned at the right end to prevent going outside of viewport
+         * in case of menu being larger than the control
+         *
+         * @default false
+         */
+        shouldMenuAlignRight?: boolean
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean

src/Shared/Components/SelectPicker/utils.ts

@@ -79,7 +79,8 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     variant,
     getIsOptionValid,
     isGroupHeadingSelectable,
-}: Pick<SelectPickerProps<OptionValue, IsMulti>, 'error' | 'size' | 'menuSize' | 'variant'> &
+    shouldMenuAlignRight,
+}: Pick<SelectPickerProps<OptionValue, IsMulti>, 'error' | 'size' | 'menuSize' | 'variant' | 'shouldMenuAlignRight'> &
     Pick<
         SelectPickerProps<OptionValue, IsMulti>['multiSelectProps'],
         'getIsOptionValid' | 'isGroupHeadingSelectable'
@@ -101,6 +102,9 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         width: getMenuWidthFromSize(menuSize),
         minWidth: '200px',
         zIndex: 'var(--select-picker-menu-index)',
+        ...(shouldMenuAlignRight && {
+            right: 0,
+        }),
         ...(getVariantOverrides(variant)?.menu(base, state) || {}),
     }),
     menuList: (base) => ({
@@ -110,6 +114,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
     control: (base, state) => ({
         ...base,
         minHeight: size === ComponentSizeType.medium ? 'auto' : '36px',
+        minWidth: '56px',
         boxShadow: 'none',
         backgroundColor: 'var(--N50)',
         border: `1px solid ${error ? 'var(--R500)' : 'var(--N200)'}`,