Merge pull request #82 from KasperskyLab/fix/filters-dropdown-scroll

fix: added prop dropdownMaxHeight, to limit filters height in table
KasperskyLab · Aug 13, 2024 · 90d7dc9 · 90d7dc9
2 parents 01e4da9 + a5bd010
commit 90d7dc9
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/packages/kaspersky-components/src/dropdown/Dropdown.tsx b/packages/kaspersky-components/src/dropdown/Dropdown.tsx
@@ -12,6 +12,7 @@ import { DividerProps } from '@src/divider/types'
 
 export const Dropdown: FC<DropdownProps> & DropdownVariants = (rawProps: DropdownProps) => {
   const props = useThemedDropdown(rawProps)
+  props.cssConfig.maxHeight = props.dropdownMaxHeight
   return <DropdownView {...props} />
 }
 

diff --git a/packages/kaspersky-components/src/dropdown/dropdownCss.ts b/packages/kaspersky-components/src/dropdown/dropdownCss.ts
@@ -120,10 +120,16 @@ const getDropdownItemCss = (cssConfig: DropdownColorConfig) => css`
   }
 `
 
-export const getDropdownCss = (cssConfig: DropdownColorConfig, rootHashClass: string) => css`
+export const getDropdownCss = (cssConfig: DropdownColorConfig, rootHashClass: string, maxHeight?: number) => css`
   .${rootHashClass} {
     padding: 0;
+
     .ant-dropdown-menu {
+      ${cssConfig.maxHeight
+        ? `max-height: ${cssConfig.maxHeight < 100 ? 100 : cssConfig.maxHeight}px;
+          overflow: auto;`
+        : ''
+      }
       border-radius: ${BORDER_RADIUS[4]}px;
       padding: ${SPACES[2]}px 0px;
       margin: 0;

diff --git a/packages/kaspersky-components/src/dropdown/types.ts b/packages/kaspersky-components/src/dropdown/types.ts
@@ -27,7 +27,8 @@ export type DropdownColorConfig = {
   disabled: StateProps,
   group: StateProps,
   boxShadow: string,
-  boxShadowLine: string
+  boxShadowLine: string,
+  maxHeight?: number
 }
 
 // Helpers
@@ -64,6 +65,8 @@ export type DropdownProps = PropsWithChildren<{
   overlayClassName?: string,
   /** Css class */
   className?: string,
+  /** Set max height for dropdownMenu in pixels */
+  dropdownMaxHeight?: number,
   /** To set the container of the dropdown menu */
   getPopupContainer?: AntdDropdownProps['getPopupContainer']
 } & DropdownThemeProps & TestingProps>

diff --git a/packages/kaspersky-components/src/table/modules/SortingAndFilters/DropdownColumnTitle.tsx b/packages/kaspersky-components/src/table/modules/SortingAndFilters/DropdownColumnTitle.tsx
@@ -302,6 +302,7 @@ export const DropdownColumnTitle: React.FC<IDropdownColumnTitleProps> = (
           }
         </StyledDropdown>
       }
+      dropdownMaxHeight={370}
     >
       <StyledColumn className={cn(classNames)} cssConfig={cssConfig} isPressed={dropdownOpened}>
         <TitleLine>