Bump @tabler/icons-react from 2.47.0 to 3.1.0 in /src/frontend (#6824)

* Bump @tabler/icons-react from 2.47.0 to 3.1.0 in /src/frontend

Bumps [@tabler/icons-react](https://github.com/tabler/tabler-icons/tree/HEAD/packages/icons-react) from 2.47.0 to 3.1.0.
- [Release notes](https://github.com/tabler/tabler-icons/releases)
- [Commits](https://github.com/tabler/tabler-icons/commits/v3.1.0/packages/icons-react)

---
updated-dependencies:
- dependency-name: "@tabler/icons-react"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update icon props type

TablerIconProps -> IconProps

* add changes proposed by https://github.com/LavissaWoW

* more fixes proposed by @LavissaWoW

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Oliver Walters <oliver.henry.walters@gmail.com>
Co-authored-by: Matthias Mair <code@mjmair.com>

src/frontend/package.json

@@ -29,7 +29,7 @@
         "@mantine/notifications": "<7",
         "@naisutech/react-tree": "^3.1.0",
         "@sentry/react": "^7.108.0",
-        "@tabler/icons-react": "^2.47.0",
+        "@tabler/icons-react": "^3.1.0",
         "@tanstack/react-query": "^5.24.1",
         "@uiw/codemirror-theme-vscode": "^4.21.22",
         "@uiw/react-codemirror": "^4.21.22",

src/frontend/src/components/buttons/SplitButton.tsx

@@ -8,14 +8,16 @@ import {
   createStyles,
   useMantineTheme
 } from '@mantine/core';
-import { IconChevronDown, TablerIconsProps } from '@tabler/icons-react';
+import { IconChevronDown } from '@tabler/icons-react';
 import { useEffect, useMemo, useState } from 'react';
 
+import { TablerIconType } from '../../functions/icons';
+
 interface SplitButtonOption {
   key: string;
   name: string;
   onClick: () => void;
-  icon: (props: TablerIconsProps) => JSX.Element;
+  icon: TablerIconType;
   disabled?: boolean;
   tooltip?: string;
 }

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -14,8 +14,8 @@ import {
   IconAlertTriangle,
   IconDeviceFloppy,
   IconExclamationCircle,
-  IconRefresh,
+  IconProps,
-  TablerIconsProps
+  IconRefresh
 } from '@tabler/icons-react';
 import Split from '@uiw/react-split';
 import React, {
@@ -28,6 +28,7 @@ import React, {
 
 import { api } from '../../../App';
 import { ModelType } from '../../../enums/ModelType';
+import { TablerIconType } from '../../../functions/icons';
 import { apiUrl } from '../../../states/ApiState';
 import { TemplateI } from '../../../tables/settings/TemplateTable';
 import { SplitButton } from '../../buttons/SplitButton';
@@ -47,7 +48,7 @@ export type EditorComponent = React.ForwardRefExoticComponent<
 export type Editor = {
   key: string;
   name: string;
-  icon: (props: TablerIconsProps) => React.JSX.Element;
+  icon: TablerIconType;
   component: EditorComponent;
 };
 
@@ -66,7 +67,7 @@ export type PreviewAreaComponent = React.ForwardRefExoticComponent<
 export type PreviewArea = {
   key: string;
   name: string;
-  icon: (props: TablerIconsProps) => React.JSX.Element;
+  icon: TablerIconType;
   component: PreviewAreaComponent;
 };
 

src/frontend/src/functions/icons.tsx

@@ -77,7 +77,7 @@ import { IconArrowBigDownLineFilled } from '@tabler/icons-react';
 import { IconTruckReturn } from '@tabler/icons-react';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { IconCalendarTime } from '@tabler/icons-react';
-import { TablerIconsProps } from '@tabler/icons-react';
+import { Icon, IconProps } from '@tabler/icons-react';
 import React from 'react';
 
 const icons = {
@@ -184,6 +184,9 @@ const icons = {
 };
 
 export type InvenTreeIconType = keyof typeof icons;
+export type TablerIconType = React.ForwardRefExoticComponent<
+  Omit<IconProps, 'ref'> & React.RefAttributes<Icon>
+>;
 
 /**
  * Returns a Tabler Icon for the model field name supplied
@@ -193,13 +196,16 @@ export function GetIcon(field: InvenTreeIconType) {
   return icons[field];
 }
 
-type IconProps = {
+// Aliasing the new type name to make it distinct
+type TablerIconProps = IconProps;
+
+type InvenTreeIconProps = {
   icon: InvenTreeIconType;
-  iconProps?: TablerIconsProps;
+  iconProps?: TablerIconProps;
 };
 
-export function InvenTreeIcon(props: IconProps) {
+export function InvenTreeIcon(props: InvenTreeIconProps) {
-  let Icon: (props: TablerIconsProps) => React.JSX.Element;
+  let Icon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 
   if (props.icon in icons) {
     Icon = GetIcon(props.icon);
@@ -212,6 +218,6 @@ export function InvenTreeIcon(props: IconProps) {
 
   return <Icon {...props.iconProps} />;
 }
-function IconShapes(props: TablerIconsProps): Element {
+function IconShapes(props: TablerIconProps): Element {
   throw new Error('Function not implemented.');
 }

src/frontend/yarn.lock

@@ -1423,18 +1423,17 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
-"@tabler/icons-react@^2.47.0":
+"@tabler/icons-react@^3.1.0":
-  version "2.47.0"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-2.47.0.tgz#b704e7ae98f95be8bd6e938b4b2e84cd20b0cf31"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-3.1.0.tgz#5202b5cc7c6e57dde75c41981b618dcfebd69b50"
-  integrity sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g==
+  integrity sha512-k/WTlax2vbj/LpxvaJ+BmaLAAhVUgyLj4Ftgaczz66tUSNzqrAZXCFdOU7cRMYPNVBqyqE2IdQd2rzzhDEJvkw==
   dependencies:
-    "@tabler/icons" "2.47.0"
+    "@tabler/icons" "3.1.0"
-    prop-types "^15.7.2"
 
-"@tabler/icons@2.47.0":
+"@tabler/icons@3.1.0":
-  version "2.47.0"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.47.0.tgz#c41c680d1947e3ab2d60af3febc4132287c60596"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.1.0.tgz#d69d184eae572db6adb452b511562442133cc26d"
-  integrity sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==
+  integrity sha512-CpZGyS1IVJKFcv88yZ2sYZIpWWhQ6oy76BQKQ5SF0fGgOqgyqKdBGG/YGyyMW632on37MX7VqQIMTzN/uQqmFg==
 
 "@tanstack/query-core@5.28.6":
   version "5.28.6"
@@ -2816,7 +2815,7 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.x, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==