feat: rename menuAlign prop in select picker

Author: arunjaindev

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

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

src/Shared/Components/SelectPicker/type.ts

@@ -123,5 +123,11 @@ export interface SelectPickerProps
      * @default false
      */
     disableDescriptionEllipsis?: boolean
-    menuAlignToRight?: boolean
+    /**
+     * 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
 }

src/Shared/Components/SelectPicker/utils.ts

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