[@mantine/core] Autocomplete: Fix outdated styles api selectors (#2269)

src/mantine-core/src/Autocomplete/Autocomplete.styles.ts

@@ -1,35 +1,7 @@
-import { createStyles, MantineSize } from '@mantine/styles';
+import { createStyles } from '@mantine/styles';
 
-export interface AutocompleteStylesParams {
-  size: MantineSize;
-}
-
-export default createStyles((theme, { size }: AutocompleteStylesParams) => {
-  const spacing = theme.fn.size({ size, sizes: theme.spacing });
-
-  return {
-    wrapper: {
-      position: 'relative',
-    },
-
-    item: {
-      textAlign: 'left',
-      width: '100%',
-      padding: `${spacing / 1.5}px ${spacing}`,
-      fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-    },
-
-    hovered: {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],
-    },
-
-    nothingFound: {
-      boxSizing: 'border-box',
-      color: theme.colors.gray[6],
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2,
-      textAlign: 'center',
-    },
-  };
-});
+export default createStyles(() => ({
+  wrapper: {
+    position: 'relative',
+  },
+}));

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

@@ -1,27 +1,17 @@
 import React, { useState, forwardRef, useRef } from 'react';
 import { useUncontrolled, useDidUpdate, useMergedRef } from '@mantine/hooks';
-import { DefaultProps, Selectors, getDefaultZIndex } from '@mantine/styles';
-import {
-  Input,
-  InputWrapperBaseProps,
-  InputWrapperStylesNames,
-  InputSharedProps,
-  InputStylesNames,
-  useInputProps,
-} from '../Input';
+import { DefaultProps, getDefaultZIndex } from '@mantine/styles';
+import { Input, InputWrapperBaseProps, InputSharedProps, useInputProps } from '../Input';
+import { SelectStylesNames } from '../Select';
 import { SelectItems } from '../Select/SelectItems/SelectItems';
 import { DefaultItem } from '../Select/DefaultItem/DefaultItem';
-import { SelectPopover, SelectPopoverStylesNames } from '../Select/SelectPopover/SelectPopover';
+import { SelectPopover } from '../Select/SelectPopover/SelectPopover';
 import { SelectScrollArea } from '../Select/SelectScrollArea/SelectScrollArea';
 import { filterData } from './filter-data/filter-data';
 import useStyles from './Autocomplete.styles';
 import { SelectSharedProps } from '../Select/Select';
 
-export type AutocompleteStylesNames =
-  | InputStylesNames
-  | InputWrapperStylesNames
-  | SelectPopoverStylesNames
-  | Selectors<typeof useStyles>;
+export type AutocompleteStylesNames = SelectStylesNames;
 
 export interface AutocompleteItem {
   value: string;
@@ -101,10 +91,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>((pro
     positionDependencies,
     ...others
   } = useInputProps('Autocomplete', defaultProps, props);
-  const { classes } = useStyles(
-    { size: inputProps.size },
-    { classNames, styles, name: 'Autocomplete', unstyled }
-  );
+  const { classes } = useStyles(null, { classNames, styles, name: 'Autocomplete', unstyled });
   const [dropdownOpened, _setDropdownOpened] = useState(initiallyOpened);
   const [hovered, setHovered] = useState(-1);
   const [direction, setDirection] = useState<React.CSSProperties['flexDirection']>('column');

src/mantine-core/src/Autocomplete/index.ts

@@ -1,3 +1,2 @@
 export { Autocomplete } from './Autocomplete';
 export type { AutocompleteItem, AutocompleteProps, AutocompleteStylesNames } from './Autocomplete';
-export type { AutocompleteStylesParams } from './Autocomplete.styles';

src/mantine-styles-api/src/styles-api/Autocomplete.styles-api.ts

@@ -3,11 +3,11 @@ import { Input } from './Input.styles-api';
 import { InputWrapper } from './InputWrapper.styles-api';
 
 export const Autocomplete: Record<AutocompleteStylesNames, string> = {
-  wrapper: 'Wrapper around input and dropdown',
   dropdown: 'Dropdown element',
   item: 'Item element, rendered inside dropdown',
-  hovered: 'Hovered item modifier, added to item when it is selected with arrows or hovered',
   nothingFound: 'Nothing found label',
+  separator: 'Divider wrapper',
+  separatorLabel: 'Separator Label',
   itemsWrapper: 'Wraps all items in dropdown',
   ...Input,
   ...InputWrapper,