feat: add support to align menu to right in select picker

Author: arunjaindev

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

@@ -127,6 +127,7 @@ const SelectPicker = ({
     showSelectedOptionsCount = false,
     menuSize,
     variant = SelectPickerVariantType.DEFAULT,
+    menuAlignToRight = false,
     ...props
 }: SelectPickerProps) => {
     const { inputId, required, isDisabled } = props
@@ -141,6 +142,7 @@ const SelectPicker = ({
                 size,
                 menuSize,
                 variant,
+                menuAlignToRight,
             }),
         [error, size, menuSize, variant],
     )

src/Shared/Components/SelectPicker/type.ts

@@ -41,7 +41,6 @@ export enum SelectPickerVariantType {
 
 type SelectProps = ReactSelectProps<SelectPickerOptionType>
 
-// TODO: Add support for border less
 export interface SelectPickerProps
     extends Pick<
             SelectProps,
@@ -124,4 +123,5 @@ export interface SelectPickerProps
      * @default false
      */
     disableDescriptionEllipsis?: boolean
+    menuAlignToRight?: boolean
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -58,7 +58,11 @@ export const getCommonSelectStyle = ({
     size,
     menuSize,
     variant,
-}: Pick<SelectPickerProps, 'error' | 'size' | 'menuSize' | 'variant'>): StylesConfig<SelectPickerOptionType> => ({
+    menuAlignToRight,
+}: Pick<
+    SelectPickerProps,
+    'error' | 'size' | 'menuSize' | 'variant' | 'menuAlignToRight'
+>): StylesConfig<SelectPickerOptionType> => ({
     container: (base, state) => ({
         ...base,
         ...(state.isDisabled && {
@@ -76,6 +80,7 @@ export const getCommonSelectStyle = ({
         width: getMenuWidthFromSize(menuSize),
         zIndex: 'var(--select-picker-menu-index)',
         ...(getVariantOverrides(variant)?.menu(base, state) || {}),
+        ...(menuAlignToRight ? { right: 0 } : {}),
     }),
     menuList: (base) => ({
         ...base,