@campxdev/react-blueprint 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Assets/Icons/IconComponents/ArrowBackIcon.tsx

@@ -8,7 +8,7 @@ export const ArrowBackIcon = ({ size = 16 }) => {
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox="0 0 16 17"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Assets/Icons/IconComponents/CollapseIcon.tsx

@@ -8,7 +8,7 @@ export const CollapseIcon = ({ size = 16 }) => {
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Assets/Icons/IconComponents/ExpandIcon.tsx

@@ -8,7 +8,7 @@ export const ExpandIcon = ({ size = 16 }) => {
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Assets/Icons/IconComponents/RedoIcon.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "@mui/material";
+
+export const RedoIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 20 20`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.612 4.01719H5.94531C5.75303 4.01719 5.56862 4.09357 5.43266 4.22954C5.2967 4.3655 5.22031 4.54991 5.22031 4.74219C5.22031 4.93447 5.2967 5.11888 5.43266 5.25484C5.56862 5.3908 5.75303 5.46719 5.94531 5.46719H12.612C13.5248 5.46719 14.4002 5.82979 15.0456 6.47523C15.691 7.12067 16.0536 7.99607 16.0536 8.90885C16.0536 9.82164 15.691 10.697 15.0456 11.3425C14.4002 11.9879 13.5248 12.3505 12.612 12.3505H3.44531C3.25303 12.3505 3.06862 12.4269 2.93266 12.5629C2.7967 12.6988 2.72031 12.8832 2.72031 13.0755C2.72031 13.2678 2.7967 13.4522 2.93266 13.5882C3.06862 13.7241 3.25303 13.8005 3.44531 13.8005H12.612C13.9093 13.8005 15.1535 13.2851 16.0709 12.3678C16.9883 11.4504 17.5036 10.2062 17.5036 8.90885C17.5036 7.6115 16.9883 6.36729 16.0709 5.44992C15.1535 4.53256 13.9093 4.01719 12.612 4.01719Z"
+        fill={color}
+        stroke="#323167"
+        stroke-width="0.2"
+      />
+      <path
+        d="M5.35888 10.2672C5.26348 10.2668 5.16895 10.2854 5.08082 10.3219C4.99263 10.3584 4.91261 10.4122 4.84543 10.48C4.84537 10.4801 4.84531 10.4801 4.84524 10.4802L2.71227 12.6131L2.71185 12.6136C2.57712 12.7499 2.50156 12.9339 2.50156 13.1255C2.50156 13.3172 2.57712 13.5012 2.71185 13.6375L2.71227 13.6379L4.845 15.7706C4.91172 15.8396 4.99146 15.8946 5.07961 15.9325C5.16804 15.9706 5.26317 15.9906 5.35943 15.9915C5.4557 15.9924 5.55117 15.9741 5.64029 15.9377C5.7294 15.9013 5.81038 15.8475 5.87848 15.7794C5.94659 15.7114 6.00046 15.6305 6.03695 15.5414C6.07345 15.4523 6.09184 15.3569 6.09105 15.2606C6.09026 15.1643 6.0703 15.0692 6.03235 14.9807C5.99451 14.8925 5.93953 14.8127 5.87061 14.7459L4.25024 13.1255L5.87119 11.5046L5.87161 11.5042C6.00634 11.3678 6.0819 11.1839 6.0819 10.9922C6.0819 10.8005 6.00634 10.6166 5.87161 10.4802L5.87155 10.4802C5.80445 10.4124 5.72452 10.3586 5.63643 10.3221C5.54846 10.2856 5.45412 10.2669 5.35888 10.2672ZM5.35888 10.2672C5.35902 10.2672 5.35916 10.2672 5.35931 10.2672L5.35881 10.3672L5.35846 10.2672C5.3586 10.2672 5.35874 10.2672 5.35888 10.2672Z"
+        fill={color}
+        stroke="#323167"
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -40,6 +40,7 @@ import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
 import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
 import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
+import { RedoIcon } from "./IconComponents/RedoIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { SaveIcon } from "./IconComponents/SaveIcon";
 import { SearchIcon } from "./IconComponents/SearchIcon";
@@ -52,6 +53,7 @@ import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
 
 export const Icons = {
+  RedoIcon,
   ArrowBackIcon,
   CollapseIcon,
   ExpandIcon,

package/src/components/DataDisplay/Typography/Typography.tsx

@@ -5,6 +5,14 @@ import {
 
 export type TypographyProps = {} & MuiTypographyProps;
 
-export const Typography = ({ variant, children }: TypographyProps) => {
-  return <MuiTypography variant={variant}>{children}</MuiTypography>;
+export const Typography = ({
+  variant,
+  children,
+  ...props
+}: TypographyProps) => {
+  return (
+    <MuiTypography variant={variant} {...props}>
+      {children}
+    </MuiTypography>
+  );
 };

package/src/components/Navigation/Sidebar/DropdownItem.tsx

@@ -0,0 +1,34 @@
+import { useMatch, useResolvedPath } from "react-router-dom";
+import { Typography } from "../../export";
+import { DropdownMenuItem } from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const SidebarDropdownItem = ({
+  dropdownItem,
+  collapsed,
+  index,
+}: {
+  dropdownItem: DropdownMenuItem;
+  collapsed: boolean;
+  index: number;
+}) => {
+  const { name, path, permissionKey } = dropdownItem;
+
+  let resolved = useResolvedPath(path);
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  const { StyledListItem, StyledLinkButton, StyledListItemButton } =
+    createSidebarStyles(collapsed);
+
+  return (
+    <StyledListItem key={index} disablePadding className="listItem">
+      <StyledLinkButton to={path} match={match}>
+        {!collapsed && (
+          <StyledListItemButton collapsed={collapsed}>
+            <Typography variant="button1">{name}</Typography>
+          </StyledListItemButton>
+        )}
+      </StyledLinkButton>
+    </StyledListItem>
+  );
+};

package/src/components/Navigation/Sidebar/MenuItem.tsx

@@ -3,6 +3,7 @@ import { motion } from "framer-motion";
 import { useState } from "react";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { Icons, Tooltip, Typography } from "../../export";
+import { SidebarDropdownItem } from "./DropdownItem";
 import { MenuItemProps } from "./interfaces";
 import { createSidebarStyles } from "./styles";
 
@@ -10,13 +11,11 @@ export const SideBarMenuItem = ({
   menuItem,
   index,
   collapsed,
-  isDropdownMenuItem = false,
   newMenuClickHandler,
 }: {
   menuItem: MenuItemProps;
   index: number;
   collapsed: boolean;
-  isDropdownMenuItem?: boolean;
   newMenuClickHandler: (newMenu: MenuItemProps[], newMenuTitle: string) => void;
 }) => {
   const {
@@ -28,7 +27,8 @@ export const SideBarMenuItem = ({
     HoverIcon,
   } = createSidebarStyles(collapsed);
 
-  const { path, icon: Icon, name, menu: newMenu, dropdownMenu } = menuItem;
+  const { name, path, icon: Icon, menu: newMenu, dropdownMenu } = menuItem;
+
   let resolved = useResolvedPath(path);
   let match = useMatch({ path: resolved.pathname, end: false });
 
@@ -61,7 +61,7 @@ export const SideBarMenuItem = ({
             <Typography variant="button1">{name}</Typography>
           </Stack>
           <HoverIcon display={"flex"} className="hoverIcon">
-            <Icons.ClogWheelIcon />
+            <Icons.RedoIcon size={18} />
           </HoverIcon>
         </Stack>
       </StyledListItemButton>
@@ -94,9 +94,7 @@ export const SideBarMenuItem = ({
   const DefaultTile = () => {
     return (
       <StyledListItemButton collapsed={collapsed}>
-        {!isDropdownMenuItem && (
-          <StyledListItemIcon collapsed={collapsed}>{Icon}</StyledListItemIcon>
-        )}
+        <StyledListItemIcon collapsed={collapsed}>{Icon}</StyledListItemIcon>
         <Typography variant="button1">{name}</Typography>
       </StyledListItemButton>
     );
@@ -132,13 +130,10 @@ export const SideBarMenuItem = ({
       {expanded && dropdownMenu && dropdownMenu.length > 0 && (
         <Stack>
           {dropdownMenu?.map((item: any, index: number) => (
-            <SideBarMenuItem
-              menuItem={item}
-              index={index}
-              key={index}
+            <SidebarDropdownItem
+              dropdownItem={item}
               collapsed={collapsed}
-              isDropdownMenuItem={true}
-              newMenuClickHandler={newMenuClickHandler}
+              index={index}
             />
           ))}
         </Stack>

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -62,7 +62,7 @@ export const Sidebar = ({
     StyledMenuBar,
     StyledCollapsibleSection,
     StyledMenuHeaderButton,
-  } = useMemo(() => createSidebarStyles(collapsed), [collapsed, currentMenu]);
+  } = useMemo(() => createSidebarStyles(collapsed), [collapsed]);
 
   return (
     <motion.div

package/src/components/Navigation/Sidebar/interfaces.ts

@@ -6,7 +6,13 @@ export interface MenuItemProps {
   icon: ReactElement;
   permissionKey?: string;
   menu?: MenuItemProps[];
-  dropdownMenu?: MenuItemProps[];
+  dropdownMenu?: DropdownMenuItem[];
+}
+
+export interface DropdownMenuItem {
+  name: string;
+  path: string;
+  permissionKey?: string;
 }
 
 export interface MenuHistory {