orcs-design-system 3.2.39 → 3.2.40

package/es/components/SideNav/SideNav.stories.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import SideNav from "./index";
-import { BrowserRouter as Router, Route, Link, Routes, useParams, useMatch, Navigate } from "react-router-dom";
+import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -59,46 +59,59 @@ const PageCard = _ref2 => {
   });
 };
 const SideBarWithConfig = () => {
-  const isHome = useMatch("/");
-  const isProfile = useMatch("/profile");
-  const isSearch = useMatch("/search");
+  const location = useLocation();
   const items = [{
     iconName: "building",
     name: "Home",
     component: makeLinkComponent("/"),
     actionType: "link",
-    isActive: !!isHome
+    isActive: matchPath(location.pathname, {
+      path: "/",
+      exact: true
+    })
   }, {
     iconName: "user",
     name: "My profile",
     component: makeLinkComponent("/profile"),
     actionType: "link",
-    isActive: !!isProfile
+    isActive: matchPath(location.pathname, {
+      path: "/profile"
+    })
   }, {
     iconName: "id-card",
     name: "Search Page",
     component: makeLinkComponent("/search"),
     actionType: "link",
-    isActive: isSearch
+    isActive: matchPath(location.pathname, {
+      path: "/search"
+    })
   }, {
     iconName: "snowflake",
     name: "Filter",
-    hide: !isSearch,
+    hide: !matchPath(location.pathname, {
+      path: "/search"
+    }),
     // Specify hide if you want to hide this item
     component: makePanelComponent("Filter"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: isSearch,
+    pageSpecific: matchPath(location.pathname, {
+      path: "/search"
+    }),
     isExpandedByDefault: true
   }, {
     iconName: "sun",
     name: "People",
-    hide: !isProfile,
+    hide: !matchPath(location.pathname, {
+      path: "/profile"
+    }),
     // Specify hide if you want to hide this item
     component: makePanelComponent("People"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: isProfile,
+    pageSpecific: matchPath(location.pathname, {
+      path: "/profile"
+    }),
     isExpandedByDefault: true
   }, {
     iconName: "bell",
@@ -159,32 +172,30 @@ const SideBarWithConfig = () => {
     children: [/*#__PURE__*/_jsx(SideNav, {
       items: items,
       sideNavHeight: "500px"
-    }), /*#__PURE__*/_jsxs(Routes, {
+    }), /*#__PURE__*/_jsxs(Switch, {
       children: [/*#__PURE__*/_jsx(Route, {
+        exact: true,
         path: "/",
-        element: /*#__PURE__*/_jsx(PageCard, {
+        children: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Home"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/profile",
-        element: /*#__PURE__*/_jsx(PageCard, {
+        children: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Profile route"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/teams/:teamId",
-        element: /*#__PURE__*/_jsx(PageCard, {
+        children: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx(Teams, {})
         })
-      }), /*#__PURE__*/_jsx(Route, {
-        path: "/iframe.html",
-        element: /*#__PURE__*/_jsx(Navigate, {
-          to: "/",
-          replace: true
-        })
+      }), /*#__PURE__*/_jsx(Redirect, {
+        from: "/iframe.html",
+        to: "/"
       })]
     })]
   });

package/es/components/StyledLink/StyledLink.stories.js

@@ -3,7 +3,7 @@ import StyledLink from ".";
 import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/StyledLink",
@@ -72,10 +72,11 @@ export const reactLink = () => /*#__PURE__*/_jsxs(BrowserRouter, {
   children: [routes.map(route => /*#__PURE__*/_jsx(StyledLink, {
     to: route.path,
     children: route.label
-  }, route.path)), /*#__PURE__*/_jsx(Routes, {
+  }, route.path)), /*#__PURE__*/_jsx(Switch, {
     children: routes.map(route => /*#__PURE__*/_jsx(Route, {
       path: route.path,
-      element: /*#__PURE__*/_jsxs("div", {
+      exact: route.exact,
+      children: /*#__PURE__*/_jsxs("div", {
         style: {
           padding: "100px"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "engines": {
     "node": "20.12.2"
   },
@@ -66,7 +66,7 @@
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
     "react-number-format": "^5.3.0",
-    "react-router-dom": "^6.26.2",
+    "react-router-dom": "^5.3.4",
     "react-select": "^5.7.4",
     "styled-system": "^5.1.5"
   },