[@mantine/core] Remove hardcodded padding from Select, MultiSelect an…

…d Autocomplete dropdowns (mantinedev#2108)

src/mantine-core/src/Autocomplete/Autocomplete.tsx

@@ -265,6 +265,9 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>((pro
           maxHeight={maxDropdownHeight}
           direction={direction}
           id={inputProps.id}
+          __staticSelector="Autocomplete"
+          classNames={classNames}
+          styles={styles}
         >
           <SelectItems
             data={filteredData}

src/mantine-core/src/MultiSelect/MultiSelect.tsx

@@ -706,6 +706,9 @@ export const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>((props
           direction={direction}
           id={uuid}
           innerRef={scrollableRef}
+          __staticSelector="MultiSelect"
+          classNames={classNames}
+          styles={styles}
         >
           <SelectItems
             data={filteredData}

src/mantine-core/src/Select/Select.story.tsx

@@ -27,3 +27,20 @@ export function CreatableWithNoFilter() {
     </div>
   );
 }
+
+export function OverrideDropdownPadding() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Select
+        styles={{
+          itemsWrapper: {
+            padding: 40,
+          },
+        }}
+        data={Array(100)
+          .fill(0)
+          .map((_, index) => `Item ${index}`)}
+      />
+    </div>
+  );
+}

src/mantine-core/src/Select/Select.tsx

@@ -613,6 +613,9 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
           direction={direction}
           id={inputProps.id}
           innerRef={scrollableRef}
+          __staticSelector="Select"
+          classNames={classNames}
+          styles={styles}
         >
           <SelectItems
             data={filteredData}

src/mantine-core/src/Select/SelectPopover/SelectPopover.styles.ts

@@ -0,0 +1,11 @@
+import { createStyles } from '@mantine/styles';
+
+export default createStyles(() => ({
+  dropdown: {},
+
+  itemsWrapper: {
+    padding: 4,
+    display: 'flex',
+    width: '100%',
+  },
+}));

src/mantine-core/src/Select/SelectPopover/SelectPopover.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
-import { ClassNames, MantineShadow, Styles } from '@mantine/styles';
+import { ClassNames, MantineShadow, Styles, Selectors, DefaultProps } from '@mantine/styles';
 import { SelectScrollArea } from '../SelectScrollArea/SelectScrollArea';
 import { Popover } from '../../Popover';
 import { Box } from '../../Box';
 import { MantineTransition } from '../../Transition';
+import useStyles from './SelectPopover.styles';
 
-export type SelectPopoverStylesNames = 'dropdown';
+export type SelectPopoverStylesNames = Selectors<typeof useStyles>;
 
-interface SelectPopoverDropdownProps {
+interface SelectPopoverDropdownProps extends DefaultProps<SelectPopoverStylesNames> {
   children: React.ReactNode;
   id: string;
   component?: any;
   maxHeight?: number | string;
   direction?: React.CSSProperties['flexDirection'];
   innerRef?: React.MutableRefObject<HTMLDivElement>;
+  __staticSelector?: string;
 }
 
 function SelectPopoverDropdown({
@@ -23,8 +25,14 @@ function SelectPopoverDropdown({
   direction = 'column',
   id,
   innerRef,
+  __staticSelector,
+  styles,
+  classNames,
+  unstyled,
   ...others
 }: SelectPopoverDropdownProps) {
+  const { classes } = useStyles(null, { name: __staticSelector, styles, classNames, unstyled });
+
   return (
     <Popover.Dropdown p={0} onMouseDown={(event) => event.preventDefault()} {...others}>
       <div style={{ maxHeight, display: 'flex' }}>
@@ -38,7 +46,7 @@ function SelectPopoverDropdown({
           data-combobox-popover
           ref={innerRef}
         >
-          <div style={{ display: 'flex', flexDirection: direction, width: '100%', padding: 4 }}>
+          <div className={classes.itemsWrapper} style={{ flexDirection: direction }}>
             {children}
           </div>
         </Box>