@j2inn/fin5-ui-utils 5.2.2-beta.8 → 6.0.0

package/dist_es/react/components/graphics/GraphicsTabViewer.js

@@ -1,61 +1,61 @@
-/*
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
- */
-import { ant_prefix, Tabs } from '@j2inn/ui';
-import cn from 'classnames';
-import { useClient } from 'haystack-react';
-import React, { useEffect, useMemo, useState } from 'react';
-import { createUseStyles } from 'react-jss';
-import { fin5Top } from '../../../fin5Top/fin5Top';
-import { LoadingSpinner } from '../LoadingSpinner';
-import { GraphicViewer } from './GraphicViewer';
-const useStyles = createUseStyles({
-    tabs: {
-        height: '100%',
-        [`& .${ant_prefix}-tabs-content-holder`]: {
-            height: '100%',
-            [`& .${ant_prefix}-tabs-content`]: {
-                height: '100%',
-                [`& .${ant_prefix}-tabs-tabpane`]: {
-                    height: '100%',
-                },
-            },
-        },
-    },
-    fallback: {
-        height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: '1.1em',
-    },
-});
-export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
-    const client = useClient();
-    const classes = useStyles();
-    const [loading, setLoading] = useState(true);
-    const [graphicsList, setGraphicsList] = useState([]);
-    useEffect(() => {
-        if (targetRef) {
-            client.ext
-                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
-                .then((grid) => {
-                setGraphicsList(grid.getRows());
-            })
-                .finally(() => setLoading(false));
-        }
-    }, [targetRef]);
-    const tabs = useMemo(() => {
-        return graphicsList
-            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
-            .map((graphic) => {
-            return {
-                label: graphic.toDis(),
-                key: graphic.id.toAxon(),
-                children: (React.createElement(GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
-            };
-        });
-    }, [graphicsList]);
-    return loading ? (React.createElement(LoadingSpinner, null)) : tabs.length > 0 ? (React.createElement(Tabs, { className: cn(classes.tabs, className), items: tabs })) : (React.createElement("div", { className: cn(classes.fallback, fallbackClassName) }, fallbackText));
-};
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import { ant_prefix, Tabs } from '@j2inn/ui';
+import cn from 'classnames';
+import { useClient } from 'haystack-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { fin5Top } from '../../../fin5Top/fin5Top';
+import { LoadingSpinner } from '../LoadingSpinner';
+import { GraphicViewer } from './GraphicViewer';
+const useStyles = createUseStyles({
+    tabs: {
+        height: '100%',
+        [`& .${ant_prefix}-tabs-content-holder`]: {
+            height: '100%',
+            [`& .${ant_prefix}-tabs-content`]: {
+                height: '100%',
+                [`& .${ant_prefix}-tabs-tabpane`]: {
+                    height: '100%',
+                },
+            },
+        },
+    },
+    fallback: {
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '1.1em',
+    },
+});
+export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
+    const client = useClient();
+    const classes = useStyles();
+    const [loading, setLoading] = useState(true);
+    const [graphicsList, setGraphicsList] = useState([]);
+    useEffect(() => {
+        if (targetRef) {
+            client.ext
+                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
+                .then((grid) => {
+                setGraphicsList(grid.getRows());
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [targetRef]);
+    const tabs = useMemo(() => {
+        return graphicsList
+            .sort((g1, g2) => g1.toDis().localeCompare(g2.toDis()))
+            .map((graphic) => {
+            return {
+                label: graphic.toDis(),
+                key: graphic.id.toAxon(),
+                children: (React.createElement(GraphicViewer, { projectName: projectName ?? '', targetRef: targetRef, graphicId: graphic.id })),
+            };
+        });
+    }, [graphicsList]);
+    return loading ? (React.createElement(LoadingSpinner, null)) : tabs.length > 0 ? (React.createElement(Tabs, { className: cn(classes.tabs, className), items: tabs })) : (React.createElement("div", { className: cn(classes.fallback, fallbackClassName) }, fallbackText));
+};
 //# sourceMappingURL=GraphicsTabViewer.js.map

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

@@ -1,41 +1,41 @@
-import { LayoutProps, MenuProps, SiderProps } from 'antd';
-import React, { PropsWithChildren, ReactElement } from 'react';
-import { MenuPage } from './MenuPage';
-export interface BasicLayoutStyleVariables {
-    isMobile?: boolean;
-    compactSider?: boolean;
-    siderWidth?: number | string;
-    headerHeight: number;
-}
-export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
-    pages?: T[];
-    defaultPage?: string;
-    selectedPages?: string[];
-    onSelect?: (key: string) => void;
-    compactSider?: {
-        isCompact?: boolean;
-        showButton?: boolean;
-        buttonClassName?: string;
-    };
-    layoutProps?: LayoutProps;
-    mobileHeaderProps?: LayoutProps;
-    siderProps?: SiderProps;
-    contentProps?: LayoutProps;
-    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
-    menuBefore?: React.ReactNode;
-    menuAfter?: React.ReactNode;
-    menuTriggerClassName?: string;
-    headerHeight?: number;
-}
-/**
- * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
- * @param pages
- * @returns
- */
-export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
-export declare const DEFAULT_HEADER_HEIGHT = 45;
-/**
- * Basic layout with sider and mobile navigation management.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
- */
-export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;
+import { LayoutProps, MenuProps, SiderProps } from 'antd';
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { MenuPage } from './MenuPage';
+export interface BasicLayoutStyleVariables {
+    isMobile?: boolean;
+    compactSider?: boolean;
+    siderWidth?: number | string;
+    headerHeight: number;
+}
+export interface BasicLayoutProps<T extends MenuPage> extends PropsWithChildren {
+    pages?: T[];
+    defaultPage?: string;
+    selectedPages?: string[];
+    onSelect?: (key: string) => void;
+    compactSider?: {
+        isCompact?: boolean;
+        showButton?: boolean;
+        buttonClassName?: string;
+    };
+    layoutProps?: LayoutProps;
+    mobileHeaderProps?: LayoutProps;
+    siderProps?: SiderProps;
+    contentProps?: LayoutProps;
+    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
+    menuBefore?: React.ReactNode;
+    menuAfter?: React.ReactNode;
+    menuTriggerClassName?: string;
+    headerHeight?: number;
+}
+/**
+ * Copy the array and recursively remove pages having the `showInMenu` flag set to false.
+ * @param pages
+ * @returns
+ */
+export declare const getMenuPages: (pages: MenuPage[]) => MenuPage<Record<string, unknown>>[];
+export declare const DEFAULT_HEADER_HEIGHT = 45;
+/**
+ * Basic layout with sider and mobile navigation management.
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ */
+export declare function BasicLayout<T extends MenuPage>({ pages, defaultPage, selectedPages, onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight, children, }: BasicLayoutProps<T>): ReactElement;

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

@@ -1,125 +1,125 @@
-/*
- * Copyright (c) 2023, J2 Innovations. All Rights Reserved
- */
-import { LeftOutlined } from '@ant-design/icons';
-import { ant_prefix, Layout, Menu } from '@j2inn/ui';
-import classNames from 'classnames';
-import React, { useMemo, useState, } from 'react';
-import { createUseStyles } from 'react-jss';
-import MenuTrigger from './MenuTrigger';
-const useStyles = createUseStyles({
-    header: ({ headerHeight }) => ({
-        position: 'fixed',
-        width: '100%',
-        zIndex: 1000,
-        padding: 0,
-        height: headerHeight,
-        lineHeight: `${headerHeight}px`,
-    }),
-    sider: {
-        overflow: 'auto',
-        height: '100vh',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        zIndex: 999,
-        paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
-        [`& .${ant_prefix}-layout-sider-children`]: {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    },
-    compactSiderButton: {
-        position: 'sticky',
-        bottom: 0,
-        width: '100%',
-        textAlign: 'center',
-        fontSize: '1.3rem',
-        padding: '0.5rem',
-        cursor: 'pointer',
-        transition: '0.3s',
-    },
-    compactSiderButtonItem: {
-        transition: '0.3s',
-    },
-    compactSiderButtonItemCollapsed: {
-        transform: ' rotate(180deg)',
-    },
-    content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
-        paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
-        paddingTop: isMobile ? headerHeight : 0,
-    }),
-});
-// Workaround j2inn/ui exporting problem
-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
- */
-export 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;
-};
-export const DEFAULT_HEADER_HEIGHT = 45;
-/**
- * Basic layout with sider and mobile navigation management.
- * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
- */
-export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
-    // manage mobile navigation
-    const [isMobile, setIsMobile] = useState(false);
-    const [isSiderCompact, setIsSiderCompact] = useState(compactSider?.isCompact ?? false);
-    const [hiddenSider, setHiddenSider] = useState(false);
-    const siderWidth = siderProps?.width;
-    const classes = useStyles({
-        isMobile,
-        compactSider: isSiderCompact,
-        siderWidth,
-        headerHeight,
-    });
-    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
-    return (React.createElement(Layout, { hasSider: true, ...layoutProps },
-        isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) },
-            React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
-                    setHiddenSider(!hiddenSider);
-                } }))),
-        React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
-                setIsMobile(broken);
-                setHiddenSider(true);
-            }, collapsed: (isMobile && hiddenSider) || isSiderCompact, collapsedWidth: isMobile && hiddenSider
-                ? 0
-                : isSiderCompact
-                    ? headerHeight
-                    : 0, trigger: null },
-            menuBefore,
-            React.createElement(Menu, { style: { flex: 1 }, ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
-                    if (!hiddenSider) {
-                        setHiddenSider(true);
-                    }
-                    onSelect?.(key);
-                } }),
-            menuAfter,
-            compactSider?.showButton && !isMobile && (React.createElement("div", { className: classNames(classes.compactSiderButton, compactSider.buttonClassName), onClick: () => setIsSiderCompact(!isSiderCompact) },
-                React.createElement(LeftOutlined, { className: classNames(classes.compactSiderButtonItem, {
-                        [classes.compactSiderButtonItemCollapsed]: isSiderCompact,
-                    }) })))),
-        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
-}
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import { LeftOutlined } from '@ant-design/icons';
+import { ant_prefix, Layout, Menu } from '@j2inn/ui';
+import classNames from 'classnames';
+import React, { useMemo, useState, } from 'react';
+import { createUseStyles } from 'react-jss';
+import MenuTrigger from './MenuTrigger';
+const useStyles = createUseStyles({
+    header: ({ headerHeight }) => ({
+        position: 'fixed',
+        width: '100%',
+        zIndex: 1000,
+        padding: 0,
+        height: headerHeight,
+        lineHeight: `${headerHeight}px`,
+    }),
+    sider: {
+        overflow: 'auto',
+        height: '100vh',
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 999,
+        paddingTop: ({ isMobile, headerHeight }) => isMobile ? headerHeight : 0,
+        [`& .${ant_prefix}-layout-sider-children`]: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    },
+    compactSiderButton: {
+        position: 'sticky',
+        bottom: 0,
+        width: '100%',
+        textAlign: 'center',
+        fontSize: '1.3rem',
+        padding: '0.5rem',
+        cursor: 'pointer',
+        transition: '0.3s',
+    },
+    compactSiderButtonItem: {
+        transition: '0.3s',
+    },
+    compactSiderButtonItemCollapsed: {
+        transform: ' rotate(180deg)',
+    },
+    content: ({ isMobile, compactSider, siderWidth = 200, headerHeight, }) => ({
+        paddingLeft: isMobile ? 0 : compactSider ? 45 : siderWidth,
+        paddingTop: isMobile ? headerHeight : 0,
+    }),
+});
+// Workaround j2inn/ui exporting problem
+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
+ */
+export 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;
+};
+export const DEFAULT_HEADER_HEIGHT = 45;
+/**
+ * Basic layout with sider and mobile navigation management.
+ * Routing management can be plugged in, for examples @see ReactRouterLayout @see RouterLayout
+ */
+export function BasicLayout({ pages = [], defaultPage, selectedPages = [], onSelect, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, menuBefore, menuAfter, menuTriggerClassName, headerHeight = DEFAULT_HEADER_HEIGHT, children, }) {
+    // manage mobile navigation
+    const [isMobile, setIsMobile] = useState(false);
+    const [isSiderCompact, setIsSiderCompact] = useState(compactSider?.isCompact ?? false);
+    const [hiddenSider, setHiddenSider] = useState(false);
+    const siderWidth = siderProps?.width;
+    const classes = useStyles({
+        isMobile,
+        compactSider: isSiderCompact,
+        siderWidth,
+        headerHeight,
+    });
+    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
+    return (React.createElement(Layout, { hasSider: true, ...layoutProps },
+        isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) },
+            React.createElement(MenuTrigger, { hiddenSider: hiddenSider, headerHeight: headerHeight, className: menuTriggerClassName, onClick: () => {
+                    setHiddenSider(!hiddenSider);
+                } }))),
+        React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
+                setIsMobile(broken);
+                setHiddenSider(true);
+            }, collapsed: (isMobile && hiddenSider) || isSiderCompact, collapsedWidth: isMobile && hiddenSider
+                ? 0
+                : isSiderCompact
+                    ? headerHeight
+                    : 0, trigger: null },
+            menuBefore,
+            React.createElement(Menu, { style: { flex: 1 }, ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedPages, onSelect: ({ key }) => {
+                    if (!hiddenSider) {
+                        setHiddenSider(true);
+                    }
+                    onSelect?.(key);
+                } }),
+            menuAfter,
+            compactSider?.showButton && !isMobile && (React.createElement("div", { className: classNames(classes.compactSiderButton, compactSider.buttonClassName), onClick: () => setIsSiderCompact(!isSiderCompact) },
+                React.createElement(LeftOutlined, { className: classNames(classes.compactSiderButtonItem, {
+                        [classes.compactSiderButtonItemCollapsed]: isSiderCompact,
+                    }) })))),
+        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) }, children)));
+}
 //# sourceMappingURL=BasicLayout.js.map

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