chore(frontend): bump mantine

src/frontend/package.json

@@ -59,35 +59,36 @@
         "@fullcalendar/react": "^6.1.15",
         "@lingui/core": "^5.3.0",
         "@lingui/react": "^5.3.0",
-        "@mantine/carousel": "^7.16.0",
-        "@mantine/charts": "^7.16.0",
-        "@mantine/core": "^7.16.0",
-        "@mantine/dates": "^7.16.0",
-        "@mantine/dropzone": "^7.16.0",
-        "@mantine/form": "^7.16.0",
-        "@mantine/hooks": "^7.16.0",
-        "@mantine/modals": "^7.16.0",
-        "@mantine/notifications": "^7.16.0",
-        "@mantine/spotlight": "^7.16.0",
-        "@mantine/vanilla-extract": "^7.16.0",
+        "@mantine/carousel": "^8.0.1",
+        "@mantine/charts": "^8.0.1",
+        "@mantine/core": "^8.0.1",
+        "@mantine/dates": "^8.0.1",
+        "@mantine/dropzone": "^8.0.1",
+        "@mantine/form": "^8.0.1",
+        "@mantine/hooks": "^8.0.1",
+        "@mantine/modals": "^8.0.1",
+        "@mantine/notifications": "^8.0.1",
+        "@mantine/spotlight": "^8.0.1",
+        "@mantine/vanilla-extract": "^8.0.1",
         "@messageformat/date-skeleton": "^1.1.0",
         "@sentry/react": "^8.43.0",
         "@tabler/icons-react": "^3.17.0",
         "@tanstack/react-query": "^5.56.2",
         "@uiw/codemirror-theme-vscode": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
         "@uiw/react-split": "^5.9.3",
-        "@vanilla-extract/css": "^1.17.1",
+        "@vanilla-extract/css": "^1.17.2",
         "axios": "^1.8.4",
         "clsx": "^2.1.1",
         "codemirror": "6.0.1",
         "dayjs": "^1.11.13",
         "dompurify": "^3.2.4",
         "easymde": "^2.18.0",
-        "embla-carousel-react": "^8.5.2",
+        "embla-carousel": ">=8.0.0",
+        "embla-carousel-react": "^8.6.0",
         "fuse.js": "^7.0.0",
         "html5-qrcode": "^2.3.8",
-        "mantine-contextmenu": "^7.15.3",
+        "mantine-contextmenu": "^7.17.1",
         "mantine-datatable": "^7.17.1",
         "qrcode": "^1.5.4",
         "react": "^18.3.1",
@@ -99,8 +100,8 @@
         "react-select": "^5.9.0",
         "react-simplemde-editor": "^5.2.0",
         "react-window": "1.8.10",
-        "recharts": "^2.15.0",
-        "styled-components": "^6.1.14",
+        "recharts": "^2.15.3",
+        "styled-components": "^6.1.18",
         "zustand": "^5.0.3"
     },
     "devDependencies": {
@@ -120,7 +121,7 @@
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-window": "^1.8.8",
-        "@vanilla-extract/vite-plugin": "^5.0.1",
+        "@vanilla-extract/vite-plugin": "^5.0.2",
         "@vitejs/plugin-react": "^4.3.4",
         "babel-plugin-macros": "^3.1.0",
         "nyc": "^17.1.0",
@@ -132,5 +133,6 @@
         "vite-plugin-babel-macros": "^1.0.6",
         "vite-plugin-dts": "^4.5.3",
         "vite-plugin-istanbul": "^6.0.2"
-    }
+    },
+    "resolutions": { "@types/react": "^18", "@types/react-dom": "^18" }
 }

src/frontend/src/components/barcodes/BarcodeCameraInput.tsx

@@ -164,6 +164,7 @@ export default function BarcodeCameraInput({
         <Expand>
           <Select
             leftSection={<IconCamera />}
+            leftSectionPointerEvents={'inherit'}
             value={cameraValue}
             onChange={setCameraValue}
             data={cameras.map((device) => {

src/frontend/src/components/forms/fields/ChoiceField.tsx

@@ -79,6 +79,7 @@ export function ChoiceField({
       required={definition.required}
       disabled={definition.disabled}
       leftSection={definition.icon}
+      leftSectionPointerEvents={'inherit'}
       comboboxProps={{ withinPortal: true }}
       searchable
     />

src/frontend/src/components/items/GettingStartedCarousel.tsx

@@ -39,9 +39,11 @@ export function GettingStartedCarousel({
     <Carousel
       slideSize={{ base: '100%', sm: '50%', md: '33.333333%' }}
       slideGap={{ base: 0, sm: 'md' }}
-      slidesToScroll={3}
-      align='start'
-      loop
+      emblaOptions={{
+        slidesToScroll: 3,
+        align: 'start',
+        loop: true
+      }}
     >
       {slides}
     </Carousel>

src/frontend/src/components/panels/PanelGroup.css.ts

@@ -8,3 +8,7 @@ export const selectedPanelTab = style({
     }
   }
 });
+
+export const selectedPanelTabLabel = style({
+  textAlign: 'left'
+});

src/frontend/src/components/panels/PanelGroup.tsx

@@ -212,7 +212,10 @@ function BasePanelGroup({
           orientation='vertical'
           keepMounted={false}
           aria-label={`panel-group-${pageKey}`}
-          classNames={{ tab: classes.selectedPanelTab }}
+          classNames={{
+            tab: classes.selectedPanelTab,
+            tabLabel: classes.selectedPanelTabLabel
+          }}
         >
           <Tabs.List justify='left' aria-label={`panel-tabs-${pageKey}`}>
             {groupedPanels.map((group) => (

src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -180,6 +180,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
             <Table.Td>
               <Group justify='left'>
                 <Select
+                  searchable
                   aria-label='Loader Type Selector'
                   data={[
                     { value: 'bars', label: t`Bars` },

src/frontend/src/tables/FilterSelectDrawer.tsx

@@ -143,7 +143,7 @@ function FilterElement({
       return (
         <Select
           data={valueOptions}
-          searchable={filterProps.type == 'choice'}
+          searchable={true}
           label={t`Value`}
           placeholder={t`Select filter value`}
           onChange={(value: string | null) => onValueChange(value)}

src/frontend/src/tables/part/ParametricPartTableFilters.tsx

@@ -72,6 +72,7 @@ function BooleanParameterFilter(props: ParameterFilterProps) {
       onChange={(val) => props.setFilter(props.template.pk, val ?? '', '=')}
       placeholder={t`Select a choice`}
       rightSection={<ClearFilterButton props={props} />}
+      rightSectionPointerEvents={'inherit'}
     />
   );
 }
@@ -97,6 +98,7 @@ function ChoiceParameterFilter(props: ParameterFilterProps) {
       placeholder={t`Select a choice`}
       searchable
       rightSection={<ClearFilterButton props={props} />}
+      rightSectionPointerEvents={'inherit'}
     />
   );
 }
@@ -166,6 +168,7 @@ function GenericFilterRow({
         rightSection={
           readonly && <ClearFilterButton props={props} operator={op} />
         }
+        rightSectionPointerEvents={'inherit'}
       />
     </Group>
   );