fix(mantine): cleared up some changes in v7 and fix them (#3601)

* chore(mantine): bump to mantine v7, first commit
rebasing

* chore(mantine): lots of css modules, preparing theme and components
rebasing

* chore(mantine)!: more breaking stuff

* chore(mantine)!: more module, less v6, build working

* chore(mantine)!: trying to style my branch so it looks 1:1 with master

* chore(mantine)!: apply some visual fixes to look like prod

* chore(mantine)!: fixed table style and rows

* chore(mantine)!: fixed all the rest style expect table gutter grid

* chore(mantine)!: fix interfaces and remove comments

packages/mantine/src/components/code-editor/CodeEditor.tsx

@@ -230,7 +230,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         <Stack
             justify="flex-start"
             gap={0}
-            style={{height: Math.max(parentHeight, minHeight), maxHeight}} // wat
+            style={{height: Math.max(parentHeight, minHeight), maxHeight}}
             ref={ref}
             {...others}
         >

packages/mantine/src/components/collection/Collection.tsx

@@ -2,7 +2,17 @@ import {AddSize16Px} from '@coveord/plasma-react-icons';
 import {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
 import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
 import {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';
-import {Box, Group, Input, InputWrapperProps, MantineSpacing, Stack, Tooltip, useProps} from '@mantine/core';
+import {
+    Box,
+    Group,
+    GroupProps,
+    Input,
+    InputWrapperProps,
+    MantineSpacing,
+    Stack,
+    Tooltip,
+    useProps,
+} from '@mantine/core';
 import {ReorderPayload} from '@mantine/form/lib/types';
 import {useDidUpdate} from '@mantine/hooks';
 import {ReactNode} from 'react';
@@ -13,7 +23,11 @@ import CollectionClasses from './Collection.module.css';
 import {CollectionItem} from './CollectionItem';
 
 interface CollectionProps<T>
-    extends Omit<InputWrapperProps, 'children' | 'inputContainer' | 'inputWrapperOrder' | 'onChange'> {
+    extends Omit<
+            InputWrapperProps,
+            'children' | 'inputContainer' | 'inputWrapperOrder' | 'onChange' | 'classNames' | 'vars' | 'styles'
+        >,
+        Omit<GroupProps, 'children' | 'onChange'> {
     /**
      * The default value each new item should have
      */
@@ -66,7 +80,7 @@ interface CollectionProps<T>
     /**
      * Function that gets called when a new item needs to be added to the collection
      *
-     * @param value The the value of the item to insert
+     * @param value The value of the item to insert
      * @param index The index of the new item to insert
      */
     onInsertItem?: (value: T, index: number) => void;
@@ -200,7 +214,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
             disabled={disabled}
             draggable={draggable}
             onRemove={() => onRemoveItem?.(index)}
-            // classNames={classNames} what
+            classNames={classNames}
             removable={!(required && hasOnlyOneItem)}
         >
             {children(item.data, index)}

packages/mantine/src/components/collection/CollectionItem.tsx

@@ -70,7 +70,7 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
                               transition,
                           },
                       }
-                    : undefined // what
+                    : undefined
             }
         >
             <div ref={setActivatorNodeRef} {...listeners} {...attributes} className={CollectionClasses.dragHandle}>

packages/mantine/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -74,7 +74,11 @@ export const DateRangePickerInlineCalendar = ({
                 {presets ? (
                     <>
                         <Space w="sm" />
-                        <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />
+                        <DateRangePickerPresetSelect
+                            presets={presets}
+                            {...calendarInputProps}
+                            selectProps={{comboboxProps: {withinPortal: false}}}
+                        />
                     </>
                 ) : null}
             </Group>

packages/mantine/src/components/date-range-picker/DateRangePickerPresetSelect.tsx

@@ -1,4 +1,4 @@
-import {Select, SelectProps} from '@mantine/core';
+import {ComboboxItem, Select, SelectProps} from '@mantine/core';
 import dayjs from 'dayjs';
 import {useEffect, useState} from 'react';
 import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
@@ -21,7 +21,7 @@ export const DateRangePickerPresetSelect = <T extends unknown>({
     onChange,
     selectProps = {},
 }: DateRangePickerPresetsSelectProps<T>) => {
-    const selectData: any[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label})); // what
+    const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));
 
     const getSelectedPreset = () => {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {

packages/mantine/src/components/table/table-predicate/TablePredicate.tsx

@@ -31,7 +31,7 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data
             <Group gap="xs" classNames={{root: TablePredicateClasses.wrapper}}>
                 {label ? <Text classNames={{root: TablePredicateClasses.label}}>{label}:</Text> : null}
                 <Select
-                    // withinPortal what
+                    comboboxProps={{withinPortal: true}}
                     value={form.values.predicates[id]}
                     onChange={handleChange}
                     data={data}