@j2inn/fin5-ui-utils 3.0.7-beta.0 → 4.0.0

package/dist_es/react/components/navigation/BasicLayout.jsx

@@ -4,7 +4,7 @@
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { Button, Layout, Menu } from '@j2inn/ui';
 import classNames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { ErrorDisplayer } from '../ErrorDisplayer';
 import { findPageByName } from './MenuPage';
@@ -53,38 +53,11 @@ const useStyles = createUseStyles((theme) => {
 const Header = Layout.Header;
 const Sider = Layout.Sider;
 const Content = Layout.Content;
-/**
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
- * @param pages
- * @returns
- */
-const getMenuPages = (pages) => {
-    const menuPages = [];
-    pages.forEach((page) => {
-        const show = page.showInMenu == null || page.showInMenu;
-        if (show) {
-            const copiedPage = Object.assign({}, page);
-            if (copiedPage.children) {
-                const filteredChildren = getMenuPages(copiedPage.children);
-                copiedPage.children = filteredChildren.length
-                    ? filteredChildren
-                    : undefined;
-            }
-            menuPages.push(copiedPage);
-        }
-    });
-    return menuPages;
-};
 /**
  * Basic layout that combines menu and routing into one.
  */
-export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, page, }) => {
-    const [currentPage, setCurrentPage] = useState(page ?? defaultPage);
-    useEffect(() => {
-        if (page) {
-            setCurrentPage(page);
-        }
-    }, [page]);
+export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', onPageChange, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, }) => {
+    const [currentPage, setCurrentPage] = useState(defaultPage);
     // Fire onChange
     useEffect(() => {
         onPageChange?.(currentPage);
@@ -94,9 +67,8 @@ export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', on
     const [hiddenSider, setHiddenSider] = useState(false);
     const siderWidth = siderProps?.width;
     const classes = useStyles({ isMobile, compactSider, siderWidth });
-    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
     return (<Layout hasSider {...layoutProps}>
-			{isMobile && (<Header {...mobileHeaderProps} className={classNames(classes.header, mobileHeaderProps?.className)}>
+			{isMobile && (<Header className={classes.header} {...mobileHeaderProps}>
 					{hiddenSider ? (<MenuUnfoldOutlined className={classes.menuTrigger} onClick={() => {
                     setHiddenSider(!hiddenSider);
                 }}/>) : (<MenuFoldOutlined className={classes.menuTrigger} onClick={() => {
@@ -111,7 +83,7 @@ export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', on
             : compactSider
                 ? HEADER_HEIGHT
                 : 0} trigger={null}>
-				<Menu {...menuProps} items={menuPages} selectedKeys={[currentPage]} onSelect={({ key }) => {
+				<Menu {...menuProps} items={pages} selectedKeys={[currentPage]} onSelect={({ key }) => {
             if (!hiddenSider) {
                 setHiddenSider(true);
             }
@@ -121,8 +93,8 @@ export const BasicLayout = ({ pages = [], defaultPage = pages?.[0].key ?? '', on
             }
         }}/>
 			</Sider>
-			<Content {...contentProps} className={classNames(classes.content, contentProps?.className)}>
-				<Router pages={pages} currentPage={currentPage} fallbackComponent={<ErrorDisplayer error={new Error('Page Not Found')} extra={[
+			<Content className={classes.content} {...contentProps}>
+				<Router pages={pages} currentPage={currentPage ?? defaultPage} fallbackComponent={<ErrorDisplayer error={new Error('Page Not Found')} extra={[
                 <Button type='primary' key='refresh' onClick={() => setCurrentPage(defaultPage)}>
 									Go Home
 								</Button>,

package/dist_es/react/components/navigation/BasicLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"BasicLayout.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BasicLayout.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/BasicLayout.tsx"],"names":[],"mappings":"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"}

package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts

@@ -1,13 +1,13 @@
-import { LayoutProps } from 'antd';
-import React, { ReactElement } from 'react';
-import { BasicLayoutProps } from './BasicLayout';
-import { MenuPage } from './MenuPage';
-export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayoutProps<T>, 'mobileHeaderProps'> & {
-    header?: React.ReactNode;
-    headerProps?: LayoutProps;
-};
-/**
- * Layout with header and sider. Sider is collapsed on mobile.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
- */
-export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: HeaderSiderLayoutProps<T>): ReactElement;
+import { LayoutProps } from 'antd';
+import React, { ReactElement } from 'react';
+import { BasicLayoutProps } from './BasicLayout';
+import { MenuPage } from './MenuPage';
+export declare type HeaderSiderLayoutProps<T extends MenuPage> = Omit<BasicLayoutProps<T>, 'mobileHeaderProps'> & {
+    header?: React.ReactNode;
+    headerProps?: LayoutProps;
+};
+/**
+ * Layout with header and sider. Sider is collapsed on mobile.
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ */
+export declare function HeaderSiderLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: HeaderSiderLayoutProps<T>): ReactElement;

package/dist_es/react/components/navigation/HeaderSiderLayout.js

@@ -1,81 +1,81 @@
-/*
- * Copyright (c) 2024, J2 Innovations. All Rights Reserved
- */
-import { Container, Layout, Menu } from '@j2inn/ui';
-import classNames from 'classnames';
-import React, { useMemo, useState } from 'react';
-import { createUseStyles } from 'react-jss';
-import { DEFAULT_HEADER_HEIGHT, getMenuPages, } from './BasicLayout';
-import MenuTrigger from './MenuTrigger';
-const useStyles = createUseStyles({
-    header: ({ headerHeight }) => ({
-        position: 'fixed',
-        width: '100%',
-        zIndex: 1000,
-        padding: 0,
-        height: headerHeight,
-        lineHeight: `${headerHeight}px`,
-    }),
-    headerContent: {
-        height: '100%',
-    },
-    sider: ({ headerHeight }) => ({
-        overflow: 'auto',
-        height: '100vh',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        zIndex: 999,
-        paddingTop: headerHeight,
-    }),
-    content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
-        paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
-        paddingTop: headerHeight,
-    }),
-});
-// Workaround j2inn/ui exporting problem
-const Header = Layout.Header;
-const Sider = Layout.Sider;
-const Content = Layout.Content;
-/**
- * Layout with header and sider. Sider is collapsed on mobile.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
- */
-export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
-    const [isMobile, setIsMobile] = useState(false);
-    const [hiddenSider, setHiddenSider] = useState(false);
-    const siderWidth = siderProps?.width;
-    const classes = useStyles({
-        isMobile,
-        compactSider: compactSider?.isCompact,
-        siderWidth,
-        headerHeight,
-    });
-    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
-    return (React.createElement(Layout, { hasSider: true, ...layoutProps },
-        React.createElement(Header, { ...headerProps, className: classNames(classes.header, headerProps?.className) },
-            React.createElement(Container, { horizontal: true, middle: true, className: classes.headerContent },
-                isMobile && (React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
-                        setHiddenSider(!hiddenSider);
-                    } })),
-                header)),
-        React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
-                setIsMobile(broken);
-                setHiddenSider(true);
-            }, collapsed: (isMobile && hiddenSider) || compactSider?.isCompact, collapsedWidth: isMobile && hiddenSider
-                ? 0
-                : compactSider
-                    ? headerHeight
-                    : 0, trigger: null },
-            menuBefore,
-            React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
-                    if (!hiddenSider) {
-                        setHiddenSider(true);
-                    }
-                    onSelect?.(key);
-                } }),
-            menuAfter),
-        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
-}
+/*
+ * Copyright (c) 2024, J2 Innovations. All Rights Reserved
+ */
+import { Container, Layout, Menu } from '@j2inn/ui';
+import classNames from 'classnames';
+import React, { useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { DEFAULT_HEADER_HEIGHT, getMenuPages, } from './BasicLayout';
+import MenuTrigger from './MenuTrigger';
+const useStyles = createUseStyles({
+    header: ({ headerHeight }) => ({
+        position: 'fixed',
+        width: '100%',
+        zIndex: 1000,
+        padding: 0,
+        height: headerHeight,
+        lineHeight: `${headerHeight}px`,
+    }),
+    headerContent: {
+        height: '100%',
+    },
+    sider: ({ headerHeight }) => ({
+        overflow: 'auto',
+        height: '100vh',
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 999,
+        paddingTop: headerHeight,
+    }),
+    content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
+        paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
+        paddingTop: headerHeight,
+    }),
+});
+// Workaround j2inn/ui exporting problem
+const Header = Layout.Header;
+const Sider = Layout.Sider;
+const Content = Layout.Content;
+/**
+ * Layout with header and sider. Sider is collapsed on mobile.
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ */
+export function HeaderSiderLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, header, headerProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
+    const [isMobile, setIsMobile] = useState(false);
+    const [hiddenSider, setHiddenSider] = useState(false);
+    const siderWidth = siderProps?.width;
+    const classes = useStyles({
+        isMobile,
+        compactSider: compactSider?.isCompact,
+        siderWidth,
+        headerHeight,
+    });
+    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
+    return (React.createElement(Layout, { hasSider: true, ...layoutProps },
+        React.createElement(Header, { ...headerProps, className: classNames(classes.header, headerProps?.className) },
+            React.createElement(Container, { horizontal: true, middle: true, className: classes.headerContent },
+                isMobile && (React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
+                        setHiddenSider(!hiddenSider);
+                    } })),
+                header)),
+        React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
+                setIsMobile(broken);
+                setHiddenSider(true);
+            }, collapsed: (isMobile && hiddenSider) || compactSider?.isCompact, collapsedWidth: isMobile && hiddenSider
+                ? 0
+                : compactSider
+                    ? headerHeight
+                    : 0, trigger: null },
+            menuBefore,
+            React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
+                    if (!hiddenSider) {
+                        setHiddenSider(true);
+                    }
+                    onSelect?.(key);
+                } }),
+            menuAfter),
+        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
+}
 //# sourceMappingURL=HeaderSiderLayout.js.map

package/dist_es/react/components/navigation/MenuPage.d.ts

@@ -1,37 +1,37 @@
-import { ItemType } from 'antd/lib/menu/hooks/useItems';
-import React, { PropsWithChildren } from 'react';
-/**
- * Menu page has both the data required by the menu and the data required to actually render the page.
- */
-export declare type MenuPage<T = Record<string, unknown>> = ItemType & Page<T>;
-/**
- * Menu Item that represents an application page
- */
-interface Page<T = Record<string, unknown>> {
-    key: string;
-    component?: React.LazyExoticComponent<React.FC<T>>;
-    props?: PropsWithChildren<T>;
-    children?: MenuPage<T>[];
-    disabled?: boolean;
-    /**
-     * Set it to false to avoid showing the page in the menu. It is just used for routing purposes.
-     */
-    showInMenu?: boolean;
-}
-/**
- * Retrieve a specific page or subPage from a root page list
- * @param name the name of the searched page
- * @param pages the list of root pages
- */
-export declare function findPageByName<T extends MenuPage>(pages: T[], name?: string): T | undefined;
-/**
- * Expands the list of pages to include all the subpages
- */
-export declare function pageTreeToPageList<T extends MenuPage>(pages: T[]): T[];
-/**
- * Recursively get all the subPages of a root page
- * @param page root page
- * @returns the whole tree of subPages as a list
- */
-export declare function getAllSubPages<T extends MenuPage>(page: T): T[];
-export {};
+import { ItemType } from 'antd/lib/menu/hooks/useItems';
+import React, { PropsWithChildren } from 'react';
+/**
+ * Menu page has both the data required by the menu and the data required to actually render the page.
+ */
+export declare type MenuPage<T = Record<string, unknown>> = ItemType & Page<T>;
+/**
+ * Menu Item that represents an application page
+ */
+interface Page<T = Record<string, unknown>> {
+    key: string;
+    component?: React.LazyExoticComponent<React.FC<T>>;
+    props?: PropsWithChildren<T>;
+    children?: MenuPage<T>[];
+    disabled?: boolean;
+    /**
+     * Set it to false to avoid showing the page in the menu. It is just used for routing purposes.
+     */
+    showInMenu?: boolean;
+}
+/**
+ * Retrieve a specific page or subPage from a root page list
+ * @param name the name of the searched page
+ * @param pages the list of root pages
+ */
+export declare function findPageByName<T extends MenuPage>(pages: T[], name?: string): T | undefined;
+/**
+ * Expands the list of pages to include all the subpages
+ */
+export declare function pageTreeToPageList<T extends MenuPage>(pages: T[]): T[];
+/**
+ * Recursively get all the subPages of a root page
+ * @param page root page
+ * @returns the whole tree of subPages as a list
+ */
+export declare function getAllSubPages<T extends MenuPage>(page: T): T[];
+export {};

package/dist_es/react/components/navigation/MenuPage.js

@@ -1,31 +1,31 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-/**
- * Retrieve a specific page or subPage from a root page list
- * @param name the name of the searched page
- * @param pages the list of root pages
- */
-export function findPageByName(pages, name) {
-    return pageTreeToPageList(pages).find((page) => page.key === name && !page.disabled);
-}
-/**
- * Expands the list of pages to include all the subpages
- */
-export function pageTreeToPageList(pages) {
-    return pages.flatMap((page) => getAllSubPages(page));
-}
-/**
- * Recursively get all the subPages of a root page
- * @param page root page
- * @returns the whole tree of subPages as a list
- */
-export function getAllSubPages(page) {
-    if (page.children) {
-        return [page].concat(...page.children.map((subPage) => getAllSubPages(subPage)));
-    }
-    else {
-        return [page];
-    }
-}
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+/**
+ * Retrieve a specific page or subPage from a root page list
+ * @param name the name of the searched page
+ * @param pages the list of root pages
+ */
+export function findPageByName(pages, name) {
+    return pageTreeToPageList(pages).find((page) => page.key === name && !page.disabled);
+}
+/**
+ * Expands the list of pages to include all the subpages
+ */
+export function pageTreeToPageList(pages) {
+    return pages.flatMap((page) => getAllSubPages(page));
+}
+/**
+ * Recursively get all the subPages of a root page
+ * @param page root page
+ * @returns the whole tree of subPages as a list
+ */
+export function getAllSubPages(page) {
+    if (page.children) {
+        return [page].concat(...page.children.map((subPage) => getAllSubPages(subPage)));
+    }
+    else {
+        return [page];
+    }
+}
 //# sourceMappingURL=MenuPage.js.map

package/dist_es/react/components/navigation/MenuPage.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPage.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/MenuPage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAyBH;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC7B,KAAU,EACV,IAAa;IAEb,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC,IAAI,CACpC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAC7C,CAAA;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAqB,KAAU;IAChE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAS,CAAC,CAAC,CAAA;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAqB,IAAO;IACzD,IAAI,IAAI,CAAC,QAAQ,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CACnB,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,OAAY,CAAC,CAAC,CAC/D,CAAA;KACD;SAAM;QACN,OAAO,CAAC,IAAI,CAAC,CAAA;KACb;AACF,CAAC"}
+{"version":3,"file":"MenuPage.jsx","sourceRoot":"","sources":["../../../../src/react/components/navigation/MenuPage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAqBH;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC7B,KAAU,EACV,IAAa;IAEb,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC,IAAI,CACpC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAC7C,CAAA;AACF,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAqB,KAAU;IAChE,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,IAAS,CAAC,CAAC,CAAA;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAqB,IAAO;IACzD,IAAI,IAAI,CAAC,QAAQ,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CACnB,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,OAAY,CAAC,CAAC,CAC/D,CAAA;KACD;SAAM;QACN,OAAO,CAAC,IAAI,CAAC,CAAA;KACb;AACF,CAAC"}

package/dist_es/react/components/navigation/MenuTrigger.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-interface MenuTriggerProps {
-    hiddenSider: boolean;
-    headerHeight?: number;
-    className?: string;
-    onClick: () => void;
-}
-declare const MenuTrigger: React.FC<MenuTriggerProps>;
-export default MenuTrigger;
+import React from 'react';
+interface MenuTriggerProps {
+    hiddenSider: boolean;
+    headerHeight?: number;
+    className?: string;
+    onClick: () => void;
+}
+declare const MenuTrigger: React.FC<MenuTriggerProps>;
+export default MenuTrigger;

package/dist_es/react/components/navigation/MenuTrigger.js

@@ -1,29 +1,29 @@
-/*
- * Copyright (c) 2024, J2 Innovations. All Rights Reserved
- */
-import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
-import React from 'react';
-import { createUseStyles } from 'react-jss';
-const useStyles = createUseStyles((theme) => ({
-    menuTrigger: ({ headerHeight }) => ({
-        width: headerHeight,
-        height: '100%',
-        textAlign: 'center',
-        fontSize: 18,
-        cursor: 'pointer',
-        transition: 'color 0.3s ease-in-out',
-        backgroundColor: 'transparent',
-        color: theme.linkColor,
-        padding: '0 0.5rem',
-        '&:hover': {
-            color: theme.linkActiveColor,
-        },
-    }),
-}));
-const MenuTrigger = ({ hiddenSider, headerHeight = 45, onClick, className, }) => {
-    const classes = useStyles({ headerHeight });
-    return hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick })) : (React.createElement(MenuFoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick }));
-};
-export default MenuTrigger;
+/*
+ * Copyright (c) 2024, J2 Innovations. All Rights Reserved
+ */
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles((theme) => ({
+    menuTrigger: ({ headerHeight }) => ({
+        width: headerHeight,
+        height: '100%',
+        textAlign: 'center',
+        fontSize: 18,
+        cursor: 'pointer',
+        transition: 'color 0.3s ease-in-out',
+        backgroundColor: 'transparent',
+        color: theme.linkColor,
+        padding: '0 0.5rem',
+        '&:hover': {
+            color: theme.linkActiveColor,
+        },
+    }),
+}));
+const MenuTrigger = ({ hiddenSider, headerHeight = 45, onClick, className, }) => {
+    const classes = useStyles({ headerHeight });
+    return hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick })) : (React.createElement(MenuFoldOutlined, { className: classNames(classes.menuTrigger, className), onClick: onClick }));
+};
+export default MenuTrigger;
 //# sourceMappingURL=MenuTrigger.js.map

package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts

@@ -1,11 +1,11 @@
-import type { Location } from '@remix-run/router';
-import React from 'react';
-import { HeaderSiderLayoutProps } from './HeaderSiderLayout';
-import { ReactRouterMenuPage } from './ReactRouterLayout';
-export interface ReactRouterHeaderSiderLayoutProps extends HeaderSiderLayoutProps<ReactRouterMenuPage> {
-    isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean;
-}
-/**
- * Header/Sider layout that uses React Router.
- */
-export declare const ReactRouterHeaderSiderLayout: React.FC<ReactRouterHeaderSiderLayoutProps>;
+import type { Location } from '@remix-run/router';
+import React from 'react';
+import { HeaderSiderLayoutProps } from './HeaderSiderLayout';
+import { ReactRouterMenuPage } from './ReactRouterLayout';
+export interface ReactRouterHeaderSiderLayoutProps extends HeaderSiderLayoutProps<ReactRouterMenuPage> {
+    isSelectedRoute?: (page: ReactRouterMenuPage, location: Location) => boolean;
+}
+/**
+ * Header/Sider layout that uses React Router.
+ */
+export declare const ReactRouterHeaderSiderLayout: React.FC<ReactRouterHeaderSiderLayoutProps>;

package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js

@@ -1,19 +1,19 @@
-/*
- * Copyright (c) 2024, J2 Innovations. All Rights Reserved
- */
-import React from 'react';
-import { Outlet, useNavigate } from 'react-router';
-import { HeaderSiderLayout } from './HeaderSiderLayout';
-import { useDefaultOnSelect, useGetPageKeyRouteMap, useSelectedRoutes, } from './ReactRouterLayout';
-/**
- * Header/Sider layout that uses React Router.
- */
-export const ReactRouterHeaderSiderLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
-    const navigate = useNavigate();
-    const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
-    const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
-    const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
-    return (React.createElement(HeaderSiderLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
-        React.createElement(Outlet, null)));
-};
+/*
+ * Copyright (c) 2024, J2 Innovations. All Rights Reserved
+ */
+import React from 'react';
+import { Outlet, useNavigate } from 'react-router';
+import { HeaderSiderLayout } from './HeaderSiderLayout';
+import { useDefaultOnSelect, useGetPageKeyRouteMap, useSelectedRoutes, } from './ReactRouterLayout';
+/**
+ * Header/Sider layout that uses React Router.
+ */
+export const ReactRouterHeaderSiderLayout = ({ isSelectedRoute, pages = [], onSelect, ...otherProps }) => {
+    const navigate = useNavigate();
+    const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
+    const pageKeyRouteMap = useGetPageKeyRouteMap(pages);
+    const defaultOnSelect = useDefaultOnSelect(navigate, pageKeyRouteMap, pages);
+    return (React.createElement(HeaderSiderLayout, { ...otherProps, pages: pages, onSelect: onSelect ?? defaultOnSelect, selectedPages: selectedRoutes },
+        React.createElement(Outlet, null)));
+};
 //# sourceMappingURL=ReactRouterHeaderSiderLayout.js.map