Merge pull request #253 from devtron-labs/feat/select-menu-alignment

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

Author: arunjaindev

package-lock.json

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

package.json

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

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

@@ -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,11 @@ export interface SelectPickerProps
      * @default false
      */
     disableDescriptionEllipsis?: 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/type.ts

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

src/Shared/Components/SelectPicker/utils.ts

@@ -42,17 +42,17 @@ const useDownload = () => {
         downloadSuccessToastContent = 'Downloaded Successfully',
     }: HandleDownloadProps): Promise<Error | ServerErrors> => {
         setIsDownloading(true)
-        if (showFilePreparingToast) {
-            toast.info(
-                <ToastBody
-                    title="Preparing file for download"
-                    subtitle="File will be downloaded when it is available."
-                />,
-            )
-        }
         try {
             const response = await getDownloadResponse(downloadUrl)
             if (response.status === API_STATUS_CODES.OK) {
+                if (showFilePreparingToast) {
+                    toast.info(
+                        <ToastBody
+                            title="Preparing file for download"
+                            subtitle="File will be downloaded when it is available."
+                        />,
+                    )
+                }
                 const data = await (response as any).blob()
 
                 // Create a new URL object