[@mantine/core] Fix incorrect callback arguments values types (#5067)

* [core] Synchronize .nvmrc and .tool-versions

* [core] Enable lint rule: @typescript-eslint/method-signature-style properties

* [core] Fix internal typing

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     'jsx-a11y/label-has-associated-control': 'off',
     'react/self-closing-comp': 'off',
     'react/jsx-closing-bracket-location': 'off',
+    '@typescript-eslint/method-signature-style': ['error', 'property'],
     '@typescript-eslint/no-loop-func': 'off',
     'no-restricted-syntax': 'off',
   },

.tool-versions

@@ -1 +1 @@
-nodejs 14.17.0
+nodejs 20.5.0

docs/yarn.lock

@@ -133,10 +133,10 @@
   version "0.0.0"
   uid ""
 
-"@mantine/store@7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.1.2.tgz#bbdf9b7e9f1f97978100868c1a705e4bc0ac7e74"
-  integrity sha512-Lf3FLymM0q92BuRC4tZxTxrb9EjVa+J8fqEV147u/Q3aUSNmkhJCqN2MXPbTHIBJ2PsbLtDhy/2edNyIK1KhKQ==
+"@mantine/store@7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.1.3.tgz#43002373de5c0aa0500656e0fc5ea90c3cd8524d"
+  integrity sha512-fjgZyW9TPk/rCewYaMygyUB6Bos0PspgYiSGCx3g81OzzdTjBhtq+xU2Lgb8YPaPhMsTDWZI+TOqceqQg12Cqw==
 
 "@mantine/store@link:../src/mantine-store":
   version "0.0.0"

src/mantine-carousel/src/Carousel.tsx

@@ -48,16 +48,16 @@ export interface CarouselProps
   children?: React.ReactNode;
 
   /** Called when next slide is shown */
-  onNextSlide?(): void;
+  onNextSlide?: () => void;
 
   /** Called when previous slider is shown */
-  onPreviousSlide?(): void;
+  onPreviousSlide?: () => void;
 
   /** Called with slide index when slide changes */
-  onSlideChange?(index: number): void;
+  onSlideChange?: (index: number) => void;
 
   /** Get embla API as ref */
-  getEmblaApi?(embla: EmblaCarouselType): void;
+  getEmblaApi?: (embla: EmblaCarouselType) => void;
 
   /** Props passed down to next control */
   nextControlProps?: React.ComponentPropsWithoutRef<'button'>;

src/mantine-code-highlight/src/CodeHighlightTabs.tsx

@@ -65,7 +65,7 @@ export interface CodeHighlightTabsProps
   activeTab?: number;
 
   /** Called when tab changes */
-  onTabChange?(tab: number): void;
+  onTabChange?: (tab: number) => void;
 
   /** Determines whether header with file names and copy button should be rendered, `true` by default */
   withHeader?: boolean;
@@ -77,7 +77,7 @@ export interface CodeHighlightTabsProps
   copiedLabel?: string;
 
   /** Function that returns icon based on file name */
-  getFileIcon?(fileName: string): React.ReactNode;
+  getFileIcon?: (fileName: string) => React.ReactNode;
 
   /** `max-height` of code in collapsed state */
   maxCollapsedHeight?: React.CSSProperties['maxHeight'];
@@ -89,7 +89,7 @@ export interface CodeHighlightTabsProps
   defaultExpanded?: boolean;
 
   /** Called when expanded state changes */
-  onExpandedChange?(expanded: boolean): void;
+  onExpandedChange?: (expanded: boolean) => void;
 
   /** Expand button label and tooltip, `'Expand code'` by default */
   expandCodeLabel?: string;

src/mantine-core/src/components/Accordion/Accordion.context.ts

@@ -9,10 +9,10 @@ interface AccordionContext {
   chevronPosition: AccordionChevronPosition | undefined;
   order: AccordionHeadingOrder | undefined;
   chevron: React.ReactNode;
-  onChange(value: string): void;
-  isItemActive(value: string): boolean;
-  getControlId(value: string): string;
-  getRegionId(value: string): string;
+  onChange: (value: string) => void;
+  isItemActive: (value: string) => boolean;
+  getControlId: (value: string) => string;
+  getRegionId: (value: string) => string;
   getStyles: GetStylesApi<AccordionFactory>;
   variant: string | undefined;
   unstyled: boolean | undefined;

src/mantine-core/src/components/Accordion/Accordion.tsx

@@ -54,7 +54,7 @@ export interface AccordionProps<Multiple extends boolean = false>
   defaultValue?: AccordionValue<Multiple>;
 
   /** Called when value changes */
-  onChange?(value: AccordionValue<Multiple>): void;
+  onChange?: (value: AccordionValue<Multiple>) => void;
 
   /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
   loop?: boolean;

src/mantine-core/src/components/Alert/Alert.tsx

@@ -51,7 +51,7 @@ export interface AlertProps
   withCloseButton?: boolean;
 
   /** Called when the close button is clicked */
-  onClose?(): void;
+  onClose?: () => void;
 
   /** Close button `aria-label` */
   closeButtonLabel?: string;

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

@@ -36,7 +36,7 @@ export interface AutocompleteProps
   defaultValue?: string;
 
   /** Called when value changes */
-  onChange?(value: string): void;
+  onChange?: (value: string) => void;
 }
 
 export type AutocompleteFactory = Factory<{

src/mantine-core/src/components/Checkbox/CheckboxGroup.context.ts

@@ -3,7 +3,7 @@ import { MantineSize } from '../../core';
 
 interface CheckboxGroupContextValue {
   value: string[];
-  onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   size: MantineSize | (string & {}) | undefined;
 }
 

src/mantine-core/src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx

@@ -18,7 +18,7 @@ export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'>
   defaultValue?: string[];
 
   /** Called when value changes */
-  onChange?(value: string[]): void;
+  onChange?: (value: string[]) => void;
 
   /** Props passed down to the `Input.Wrapper` */
   wrapperProps?: Record<string, any>;

src/mantine-core/src/components/Chip/Chip.tsx

@@ -63,7 +63,7 @@ export interface ChipProps
   defaultChecked?: boolean;
 
   /** Calls when checked state changes */
-  onChange?(checked: boolean): void;
+  onChange?: (checked: boolean) => void;
 
   /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` */
   color?: MantineColor;

src/mantine-core/src/components/Chip/ChipGroup.context.ts

@@ -1,8 +1,8 @@
 import { createOptionalContext } from '../../core';
 
 interface ChipGroupContextValue {
-  isChipSelected(value: string): boolean;
-  onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+  isChipSelected: (value: string) => boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   multiple: boolean;
 }
 

src/mantine-core/src/components/Chip/ChipGroup/ChipGroup.tsx

@@ -15,7 +15,7 @@ export interface ChipGroupProps<T extends boolean = false> {
   defaultValue?: T extends true ? string[] : string | null;
 
   /** Called when value changes */
-  onChange?(value: T extends true ? string[] : string): void;
+  onChange?: (value: T extends true ? string[] : string) => void;
 
   /** <Chip /> components */
   children?: React.ReactNode;

src/mantine-core/src/components/Collapse/Collapse.tsx

@@ -10,7 +10,7 @@ export interface CollapseProps
   in: boolean;
 
   /** Called each time transition ends */
-  onTransitionEnd?(): void;
+  onTransitionEnd?: () => void;
 
   /** Transition duration in ms, `200` by default */
   transitionDuration?: number;

src/mantine-core/src/components/ColorPicker/ColorPicker.tsx

@@ -57,10 +57,10 @@ export interface __ColorPickerProps {
   defaultValue?: string;
 
   /** Called when color changes */
-  onChange?(value: string): void;
+  onChange?: (value: string) => void;
 
   /** Called when user stops dragging or changes value with arrow keys */
-  onChangeEnd?(value: string): void;
+  onChangeEnd?: (value: string) => void;
 
   /** Color format, `'hex'` by default */
   format?: ColorFormat;
@@ -101,7 +101,7 @@ export interface ColorPickerProps
   alphaLabel?: string;
 
   /** Called when one of the color swatches is clicked */
-  onColorSwatchClick?(color: string): void;
+  onColorSwatchClick?: (color: string) => void;
 }
 
 export type ColorPickerFactory = Factory<{

src/mantine-core/src/components/ColorPicker/ColorSlider/ColorSlider.tsx

@@ -12,10 +12,10 @@ import { useColorPickerContext } from '../ColorPicker.context';
 
 export interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {
   value: number;
-  onChange?(value: number): void;
-  onChangeEnd?(value: number): void;
-  onScrubStart?(): void;
-  onScrubEnd?(): void;
+  onChange?: (value: number) => void;
+  onChangeEnd?: (value: number) => void;
+  onScrubStart?: () => void;
+  onScrubEnd?: () => void;
   size?: MantineSize | (string & {});
   focusable?: boolean;
 }

src/mantine-core/src/components/ColorPicker/Saturation/Saturation.tsx

@@ -8,10 +8,10 @@ import { useColorPickerContext } from '../ColorPicker.context';
 
 export interface SaturationProps extends ElementProps<'div', 'onChange'> {
   value: HsvaColor;
-  onChange(color: Partial<HsvaColor>): void;
-  onChangeEnd(color: Partial<HsvaColor>): void;
-  onScrubStart?(): void;
-  onScrubEnd?(): void;
+  onChange: (color: Partial<HsvaColor>) => void;
+  onChangeEnd: (color: Partial<HsvaColor>) => void;
+  onScrubStart?: () => void;
+  onScrubEnd?: () => void;
   saturationLabel?: string;
   size: MantineSize | (string & {});
   color: string;

src/mantine-core/src/components/ColorPicker/Swatches/Swatches.tsx

@@ -9,7 +9,7 @@ export interface SwatchesProps extends ElementProps<'div'> {
   swatchesPerRow?: number;
   focusable?: boolean;
   onChangeEnd?: (color: string) => void;
-  setValue(value: string): void;
+  setValue: (value: string) => void;
 }
 
 export const Swatches = forwardRef<HTMLDivElement, SwatchesProps>(

src/mantine-core/src/components/Combobox/Combobox.context.ts

@@ -6,7 +6,7 @@ import type { ComboboxStore } from './use-combobox/use-combobox';
 export interface ComboboxContextValue {
   getStyles: GetStylesApi<ComboboxFactory>;
   store: ComboboxStore;
-  onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
+  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;
   size: MantineSize | (string & {});
   resetSelectionOnOptionHover: boolean | undefined;
   readOnly: boolean | undefined;

src/mantine-core/src/components/Combobox/Combobox.tsx

@@ -56,7 +56,7 @@ export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFa
   store?: ComboboxStore;
 
   /** Called when item is selected with `Enter` key or by clicking it */
-  onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
+  onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;
 
   /** Controls items `font-size` and `padding`, `'sm'` by default */
   size?: MantineSize | (string & {});

src/mantine-core/src/components/Combobox/Combobox.types.ts

@@ -33,16 +33,16 @@ export interface ComboboxLikeProps {
   defaultDropdownOpened?: boolean;
 
   /** Called when dropdown opens */
-  onDropdownOpen?(): void;
+  onDropdownOpen?: () => void;
 
   /** Called when dropdown closes */
-  onDropdownClose?(): void;
+  onDropdownClose?: () => void;
 
   /** Determines whether the first option should be selected when value changes, `false` by default */
   selectFirstOptionOnChange?: boolean;
 
   /** Called when option is submitted from dropdown with mouse click or `Enter` key */
-  onOptionSubmit?(value: string): void;
+  onOptionSubmit?: (value: string) => void;
 
   /** Props passed down to `Combobox` component */
   comboboxProps?: ComboboxProps;

src/mantine-core/src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx

@@ -4,7 +4,7 @@ import { ElementProps, MantineSize } from '../../../core';
 
 export interface ComboboxClearButtonProps extends __CloseButtonProps, ElementProps<'button'> {
   size?: MantineSize | (string & {}) | number;
-  onClear(): void;
+  onClear: () => void;
 }
 
 export const ComboboxClearButton = forwardRef<HTMLButtonElement, ComboboxClearButtonProps>(

src/mantine-core/src/components/Combobox/use-combobox/use-combobox.ts

@@ -9,71 +9,71 @@ export interface ComboboxStore {
   dropdownOpened: boolean;
 
   /** Opens dropdown */
-  openDropdown(eventSource?: ComboboxDropdownEventSource): void;
+  openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
 
   /** Closes dropdown */
-  closeDropdown(eventSource?: ComboboxDropdownEventSource): void;
+  closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
 
   /** Toggles dropdown opened state */
-  toggleDropdown(eventSource?: ComboboxDropdownEventSource): void;
+  toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
 
   /** Selected option index */
   selectedOptionIndex: number;
 
   /** Selects `Combobox.Option` by index */
-  selectOption(index: number): void;
+  selectOption: (index: number) => void;
 
   /** Selects first `Combobox.Option` with `active` prop.
    *  If there are no such options, the function does nothing.
    */
-  selectActiveOption(): string | null;
+  selectActiveOption: () => string | null;
 
   /** Selects first `Combobox.Option` that is not disabled.
    *  If there are no such options, the function does nothing.
    * */
-  selectFirstOption(): string | null;
+  selectFirstOption: () => string | null;
 
   /** Selects next `Combobox.Option` that is not disabled.
    *  If the current option is the last one, the function selects first option, if `loop` is true.
    */
-  selectNextOption(): string | null;
+  selectNextOption: () => string | null;
 
   /** Selects previous `Combobox.Option` that is not disabled.
    *  If the current option is the first one, the function selects last option, if `loop` is true.
    * */
-  selectPreviousOption(): string | null;
+  selectPreviousOption: () => string | null;
 
   /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */
-  resetSelectedOption(): void;
+  resetSelectedOption: () => void;
 
   /** Triggers `onClick` event of selected option.
    *  If there is no selected option, the function does nothing.
    */
-  clickSelectedOption(): void;
+  clickSelectedOption: () => void;
 
   /** Updates selected option index to currently selected or active option.
    *  The function is required to be used with searchable components to update selected option index
    *  when options list changes based on search query.
    */
-  updateSelectedOptionIndex(target?: 'active' | 'selected'): void;
+  updateSelectedOptionIndex: (target?: 'active' | 'selected') => void;
 
   /** List id, used for `aria-*` attributes */
   listId: string | null;
 
   /** Sets list id */
-  setListId(id: string): void;
+  setListId: (id: string) => void;
 
   /** Ref of `Combobox.Search` input */
   searchRef: React.MutableRefObject<HTMLInputElement | null>;
 
   /** Moves focus to `Combobox.Search` input */
-  focusSearchInput(): void;
+  focusSearchInput: () => void;
 
   /** Ref of the target element */
   targetRef: React.MutableRefObject<HTMLElement | null>;
 
   /** Moves focus to the target element */
-  focusTarget(): void;
+  focusTarget: () => void;
 }
 
 export interface UseComboboxOptions {
@@ -84,13 +84,13 @@ export interface UseComboboxOptions {
   opened?: boolean;
 
   /** Called when `dropdownOpened` state changes */
-  onOpenedChange?(opened: boolean): void;
+  onOpenedChange?: (opened: boolean) => void;
 
   /** Called when dropdown closes with event source: keyboard, mouse or unknown */
-  onDropdownClose?(eventSource: ComboboxDropdownEventSource): void;
+  onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;
 
   /** Called when dropdown opens with event source: keyboard, mouse or unknown */
-  onDropdownOpen?(eventSource: ComboboxDropdownEventSource): void;
+  onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;
 
   /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
   loop?: boolean;