@trackunit/react-components 0.1.274 → 0.1.276

package/index.cjs.js

@@ -18,7 +18,7 @@ var locale = require('date-fns/locale');
 var react = require('@floating-ui/react');
 var lodash = require('lodash');
 var usePortal = require('react-useportal');
-var reactRouterDom = require('react-router-dom');
+var reactRouter = require('@tanstack/react-router');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
 var dateFns = require('date-fns');
@@ -2048,7 +2048,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }), renderAs: reactRouterDom.Link, size: "small", to: backTo, variant: "ghost-neutral" })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouterDom.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft" }), renderAs: reactRouter.Link, size: "small", to: backTo, variant: "ghost-neutral" })) : undefined, jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsxRuntime.jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", params: prev => prev, target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsxRuntime.jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
@@ -2103,22 +2103,7 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
 };
 
 function useConfirmExit(confirmExit, when = true) {
-    const { navigator } = React.useContext(reactRouterDom.UNSAFE_NavigationContext);
-    React.useEffect(() => {
-        if (!when) {
-            return;
-        }
-        const push = navigator.push;
-        navigator.push = (...args) => {
-            const result = confirmExit();
-            if (result !== false) {
-                push(...args);
-            }
-        };
-        return () => {
-            navigator.push = push;
-        };
-    }, [navigator, confirmExit, when]);
+    reactRouter.useBlocker(confirmExit, when);
 }
 /**
  * The usePrompt hook.
@@ -2386,7 +2371,7 @@ const TabList = (_a) => {
  * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
  */
 const Tabs = (_a) => {
-    var { children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth", "onSelectedTabChanged"]);
+    var { children, forceRender, className, dataTestId, fullWidth } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth"]);
     return (jsxRuntime.jsx(reactTabs.Root, Object.assign({ className: cvaTabsRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
 

package/index.esm.js

@@ -15,7 +15,7 @@ import { enGB, enUS, da, de, cs, nl, fr, fi, hu, it, nb, pl, pt, ru, ro, es, sv,
 import { useFloating, FloatingFocusManager, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import { omit } from 'lodash';
 import usePortal from 'react-useportal';
-import { Link, UNSAFE_NavigationContext } from 'react-router-dom';
+import { Link, useBlocker } from '@tanstack/react-router';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
 import { format, formatDistance } from 'date-fns';
@@ -2017,7 +2017,7 @@ const PageHeader = ({ className, dataTestId, action, showLoading, description, l
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
-        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { icon: jsx(Icon, { name: "ArrowLeft" }), renderAs: Link, size: "small", to: backTo, variant: "ghost-neutral" })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+        }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(IconButton, { icon: jsx(Icon, { name: "ArrowLeft" }), renderAs: Link, size: "small", to: backTo, variant: "ghost-neutral" })) : undefined, jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxs("div", { className: cvaPageHeaderDescriptionAndLinkContainer(), children: [jsx(Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", params: prev => prev, target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] })) : undefined] }), tag && !showLoading ? (jsx(Tag, { color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined, showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null, action] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
@@ -2072,22 +2072,7 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
 };
 
 function useConfirmExit(confirmExit, when = true) {
-    const { navigator } = useContext(UNSAFE_NavigationContext);
-    useEffect(() => {
-        if (!when) {
-            return;
-        }
-        const push = navigator.push;
-        navigator.push = (...args) => {
-            const result = confirmExit();
-            if (result !== false) {
-                push(...args);
-            }
-        };
-        return () => {
-            navigator.push = push;
-        };
-    }, [navigator, confirmExit, when]);
+    useBlocker(confirmExit, when);
 }
 /**
  * The usePrompt hook.
@@ -2355,7 +2340,7 @@ const TabList = (_a) => {
  * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
  */
 const Tabs = (_a) => {
-    var { children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth", "onSelectedTabChanged"]);
+    var { children, forceRender, className, dataTestId, fullWidth } = _a, rest = __rest(_a, ["children", "forceRender", "className", "dataTestId", "fullWidth"]);
     return (jsx(Root, Object.assign({ className: cvaTabsRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.274",
+  "version": "0.1.276",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,13 +17,13 @@
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
     "react-useportal": "1.0.18",
-    "react-router-dom": "6.18.0",
     "react-helmet-async": "^1.3.0",
     "zod": "3.22.4",
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "14.0.0",
     "@floating-ui/react": "^0.26.6",
+    "@tanstack/react-router": "1.19.1",
     "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",

package/src/components/Tabs/Tabs.d.ts

@@ -21,14 +21,8 @@ export interface TabsProps extends TabsRootProps {
      * An ID that can be used in tests to locate the component.
      */
     dataTestId?: string;
-    /**
-     * A callback function invoked when the selected tab changes.
-     *
-     * @param id - ID of the selected tab.
-     */
-    onSelectedTabChanged?: (id: string | number) => void;
 }
 /**
  * Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals or tables.
  */
-export declare const Tabs: ({ children, forceRender, className, dataTestId, fullWidth, onSelectedTabChanged, ...rest }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ children, forceRender, className, dataTestId, fullWidth, ...rest }: TabsProps) => JSX.Element;