@dartech/arsenal-ui 1.4.28 → 1.4.29

package/index.js

@@ -6810,10 +6810,14 @@ const SidebarContextProvider = ({
       }
     }));
   }, [collapsed]);
+  const toggleRootElementLink = useCallback((name, isCollapsed) => {
+    localStorage.setItem(`${name.toLowerCase()}_collapsed`, `${!isCollapsed}`);
+  }, []);
   return jsx(SidebarContext.Provider, Object.assign({
     value: {
       collapsed,
-      toggleCollapse
+      toggleCollapse,
+      toggleRootElementLink
     }
   }, {
     children: children
@@ -7327,12 +7331,16 @@ const ListItemIcon = styled(MuiListItemIcon)(({
 const ListSubheader = styled(MuiListSubheader)(({
   theme
 }) => ({
+  textTransform: 'uppercase',
+  borderRadius: theme.spacing(2.5),
   backgroundColor: theme.palette.secondary.main,
   color: '#fff',
   paddingLeft: 0,
-  textTransform: 'uppercase',
+  paddingRight: 0,
   position: 'relative',
-  // paddingTop: theme.spacing(3),
+  '&:hover': {
+    backgroundColor: 'rgba(255, 255, 255, 0.08)'
+  },
   '&.collapsed': {
     fontSize: 24,
     textAlign: 'center',
@@ -7361,7 +7369,7 @@ const ChildrenList = styled(MuiList)(props => ({
   margin: 0,
   padding: 0,
   '& .MuiListItemText-root:not(.main)': {
-    paddingLeft: props.theme.spacing(7)
+    paddingLeft: props.theme.spacing(8.5)
   }
 }));
 const CollapseButton = styled(MuiButtonBase)(props => ({
@@ -7519,6 +7527,50 @@ var SidebarLinkItem$1 = SidebarLinkItem;
 var img$1 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='0.6'%3e%3cpath d='M10.3533 2.81334C10.447 2.90709 10.4996 3.03417 10.4996 3.16667C10.4996 3.29917 10.447 3.42626 10.3533 3.52001L5.87334 8.00001L10.3533 12.48C10.4025 12.5258 10.4419 12.581 10.4692 12.6423C10.4965 12.7036 10.5112 12.7699 10.5124 12.837C10.5136 12.9041 10.5012 12.9708 10.4761 13.0331C10.4509 13.0953 10.4135 13.1519 10.366 13.1994C10.3186 13.2468 10.262 13.2843 10.1997 13.3094C10.1375 13.3346 10.0708 13.3469 10.0037 13.3457C9.93652 13.3446 9.87032 13.3299 9.80898 13.3025C9.74765 13.2752 9.69245 13.2358 9.64667 13.1867L4.81334 8.35334C4.71971 8.25959 4.66711 8.13251 4.66711 8.00001C4.66711 7.86751 4.71971 7.74042 4.81334 7.64667L9.64667 2.81334C9.74042 2.71971 9.86751 2.66711 10 2.66711C10.1325 2.66711 10.2596 2.71971 10.3533 2.81334Z' fill='white'/%3e%3c/g%3e%3c/svg%3e";
   var ArrowIcon$1 = img$1;
 
+const SidebarRootItem = ({
+  route,
+  isActive,
+  isListOpen,
+  handleClick,
+  isSubmenu
+}) => {
+  return jsx(ListSubheader, {
+    children: jsx(ListItem, Object.assign({
+      disablePadding: true,
+      onClick: handleClick
+    }, {
+      children: jsxs(ListItemButton, Object.assign({
+        className: classnames({
+          active: isActive,
+          main: route.main
+        }),
+        sx: {
+          justifyContent: 'space-between'
+        }
+      }, {
+        children: [jsx(ListItemText, {
+          primary: route.name,
+          className: classnames({
+            main: route.main
+          }),
+          sx: !isSubmenu ? {
+            display: 'none'
+          } : {}
+        }), route.name, jsx(Box, {
+          component: "img",
+          src: ArrowIcon$1,
+          mr: 3,
+          sx: {
+            transition: 'transform .3s',
+            transform: `rotate(${isListOpen ? 0 : '-90deg'})`
+          }
+        })]
+      }))
+    }))
+  });
+};
+var SidebarRootItem$1 = SidebarRootItem;
+
 function SidebarNestedItem({
   route,
   isActive,
@@ -7560,12 +7612,15 @@ function SidebarNestedItem({
         mr: 3,
         sx: {
           transition: 'transform .3s',
-          transform: `rotate(${isListOpen ? '-90deg' : 0})`,
-          opacity: collapsed ? 0 : 1
+          transform: `rotate(${isListOpen ? '-90deg' : 0})`
         }
       })]
     }))
-  })) : jsx(ListSubheader, {
+  })) : (route === null || route === void 0 ? void 0 : route.rootLink) ? jsx(SidebarRootItem$1, {
+    route: route,
+    handleClick: handleClick,
+    isListOpen: isListOpen
+  }) : jsx(ListSubheader, {
     children: route.name
   });
 }
@@ -7574,20 +7629,46 @@ const SidebarLink = ({
   route,
   isSubmenu
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const location = useLocation();
   const {
-    collapsed
+    collapsed,
+    toggleRootElementLink
   } = useSidebarContext();
   const [open, setOpen] = useState(false);
+  const [rootLinkCollapsed, setRootLinkCollapsed] = useState(localStorage.getItem(`${route.name.toLowerCase()}_collapsed`) === 'true');
   const isActive = useMemo(() => !!(route.link || route.rootLink) && location.pathname.startsWith(route.link || route.rootLink), [location.pathname, route]);
   const handleClick = () => {
     setOpen(!open);
   };
+  const handleRootClick = useCallback(() => {
+    if (route && route.rootLink) {
+      toggleRootElementLink(route.name, rootLinkCollapsed);
+      setRootLinkCollapsed(!rootLinkCollapsed);
+    }
+  }, [rootLinkCollapsed, route, toggleRootElementLink]);
   useEffect(() => {
     setOpen(isActive);
   }, [isActive]);
-  return ((_a = route.children) === null || _a === void 0 ? void 0 : _a.length) && (!collapsed || collapsed && isSubmenu) ? jsxs(Fragment, {
+  return (route === null || route === void 0 ? void 0 : route.rootLink) && ((_a = route.children) === null || _a === void 0 ? void 0 : _a.length) && (!collapsed || collapsed && isSubmenu) ? jsxs(Fragment, {
+    children: [jsx(SidebarNestedItem, {
+      route: route,
+      isActive: isActive,
+      handleClick: handleRootClick,
+      isListOpen: rootLinkCollapsed,
+      isSubmenu: isSubmenu
+    }), jsx(Collapse, Object.assign({
+      in: !rootLinkCollapsed,
+      timeout: "auto"
+    }, {
+      children: jsx(ChildrenList, {
+        children: route.children.map(childRoute => jsx(SidebarLink, {
+          route: childRoute,
+          isSubmenu: isSubmenu
+        }, childRoute.name))
+      })
+    }))]
+  }) : ((_b = route.children) === null || _b === void 0 ? void 0 : _b.length) && (!collapsed || collapsed && isSubmenu) ? jsxs(Fragment, {
     children: [jsx(SidebarNestedItem, {
       route: route,
       isActive: isActive,
@@ -7599,7 +7680,7 @@ const SidebarLink = ({
       timeout: "auto"
     }, {
       children: jsx(ChildrenList, {
-        children: (_b = route.children) === null || _b === void 0 ? void 0 : _b.map((childRoute, index) => jsx(SidebarLink, {
+        children: (_c = route.children) === null || _c === void 0 ? void 0 : _c.map((childRoute, index) => jsx(SidebarLink, {
           route: childRoute,
           isSubmenu: isSubmenu
         }, childRoute.name))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.4.28",
+  "version": "1.4.29",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/lib/Property/UpsertProperty/PropertyValueField/BooleanValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Control } from 'react-hook-form';
 type Props = {
     control: Control<any>;

package/src/lib/Property/UpsertProperty/PropertyValueField/DateTimeValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/DateValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     format: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/JsonValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/UpsertProperty/PropertyValueField/TimeValueField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     name: string;
     label?: string;

package/src/lib/Property/ViewProperty/PropertyItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropertyUnion } from '../../../interfaces';
 type PropertyItemProps = {
     property: PropertyUnion;

package/src/lib/Sidebar/SidebarContext.d.ts

@@ -2,6 +2,7 @@
 type SidebarContextProps = {
     collapsed: boolean;
     toggleCollapse: () => void;
+    toggleRootElementLink?: (name: string, isCollapsed: boolean) => void;
 };
 export declare const SidebarContext: import("react").Context<SidebarContextProps>;
 export declare const useSidebarContext: () => SidebarContextProps;

package/src/lib/Sidebar/SidebarLink/SidebarNestedItem.d.ts

@@ -7,5 +7,5 @@ type Props = {
     isSubmenu?: boolean;
     handleClick: () => void;
 };
-declare function SidebarNestedItem({ route, isActive, isListOpen, handleClick, isSubmenu }: Props): JSX.Element;
+declare function SidebarNestedItem({ route, isActive, isListOpen, handleClick, isSubmenu, }: Props): JSX.Element;
 export default SidebarNestedItem;

package/src/lib/Sidebar/SidebarLink/SidebarRootItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Route } from '../../../interfaces';
+type Props = {
+    route: Route;
+    isActive?: boolean;
+    isListOpen?: boolean;
+    isSubmenu?: boolean;
+    handleClick?: () => void;
+};
+declare const SidebarRootItem: ({ route, isActive, isListOpen, handleClick, isSubmenu, }: Props) => JSX.Element;
+export default SidebarRootItem;