@cccsaurora/howler-ui 2.14.0-dev.248 → 2.14.0-dev.254

package/commons/components/pages/PageCardCentered.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card, styled, useMediaQuery, useTheme } from '@mui/material';
-import { memo } from 'react';
-const StyledCard = styled(Card)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-    left: '50%', // X
-    top: '50%', // Y
-    transform: 'translate(-50%, -50%)',
-    maxWidth: '22rem',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: '4px',
-    [theme.breakpoints.down('sm')]: {
-        backgroundColor: theme.palette.background.default,
-        width: '100%',
-        maxWidth: '22rem',
-        padding: '0rem 1rem 3rem'
-    },
-    [theme.breakpoints.up('sm')]: {
-        width: '22rem',
-        padding: '0 2rem 3rem'
-    }
-}));
-function PageCardCentered({ children }) {
-    const theme = useTheme();
-    const isXs = useMediaQuery(theme.breakpoints.only('xs'));
-    return _jsx(StyledCard, { elevation: isXs ? 0 : 4, children: children });
-}
-export default memo(PageCardCentered);

package/commons/components/pages/PageCenter.d.ts

@@ -1,8 +0,0 @@
-import { type PageProps } from '@cccsaurora/howler-ui/commons/components/pages//hooks/usePageProps';
-type PageCenterProps = PageProps & {
-    children: React.ReactNode;
-    maxWidth?: string;
-    textAlign?: string;
-};
-declare const _default: import("react").MemoExoticComponent<({ children, height, width, maxWidth, textAlign, ...props }: PageCenterProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/pages/PageCenter.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages//PageContent';
-import {} from '@cccsaurora/howler-ui/commons/components/pages//hooks/usePageProps';
-import { memo } from 'react';
-const PageCenter = ({ children, height, width = '95%', maxWidth = '1200px', textAlign = 'center', ...props }) => {
-    return (_jsx(Box, { component: "div", height: height, width: width, maxWidth: maxWidth, sx: theme => ({
-            height,
-            width,
-            textAlign,
-            display: 'flex',
-            flexDirection: 'column',
-            margin: '0 auto 0 auto',
-            maxWidth,
-            [theme.breakpoints.down('sm')]: {
-                maxWidth: '100%'
-            }
-        }), children: _jsx(PageContent, { ...props, height: "100%", children: children }) }));
-};
-export default memo(PageCenter);

package/commons/components/pages/PageContent.d.ts

@@ -1,7 +0,0 @@
-import { type PageProps } from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-import { type ReactNode } from 'react';
-type PageContentProps = PageProps & {
-    children?: ReactNode;
-};
-declare const _default: import("react").MemoExoticComponent<({ children, ...props }: PageContentProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/pages/PageContent.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import usePageProps, {} from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-import { memo } from 'react';
-const PageContent = ({ children, ...props }) => {
-    const pageProps = usePageProps({ props });
-    return _jsx("div", { ...pageProps, children: children });
-};
-export default memo(PageContent);

package/commons/components/pages/PageFullScreen.d.ts

@@ -1,10 +0,0 @@
-type PageFullscreenProps = {
-    children: React.ReactNode;
-    margin?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-};
-declare const _default: import("react").MemoExoticComponent<({ children, margin, mb, ml, mr, mt }: PageFullscreenProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/pages/PageFullScreen.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fullscreen, FullscreenExit } from '@mui/icons-material';
-import { Box, IconButton } from '@mui/material';
-import { useAppBar, useAppBarHeight, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages/PageContent';
-import useFullscreenStatus from '@cccsaurora/howler-ui/commons/components/utils/hooks/useFullscreenStatus';
-import { memo, useCallback, useRef } from 'react';
-const PageFullscreen = ({ children, margin = null, mb = 2, ml = 2, mr = 2, mt = 2 }) => {
-    const maximizableElement = useRef(null);
-    const appBarHeight = useAppBarHeight();
-    const layout = useAppLayout();
-    const appbar = useAppBar();
-    let isFullscreen;
-    let setIsFullscreen;
-    let fullscreenSupported;
-    const barWillHide = layout.current !== 'top' && appbar.autoHide;
-    try {
-        [isFullscreen, setIsFullscreen] = useFullscreenStatus(maximizableElement);
-    }
-    catch (e) {
-        fullscreenSupported = false;
-        isFullscreen = false;
-        setIsFullscreen = undefined;
-    }
-    const handleEnterFullscreen = useCallback(() => {
-        setIsFullscreen();
-    }, [setIsFullscreen]);
-    const handleExitFullscreen = () => {
-        document.exitFullscreen();
-    };
-    return (_jsxs(Box, { ref: maximizableElement, component: "div", sx: theme => ({ backgroundColor: theme.palette.background.default }), children: [_jsx(Box, { component: "div", sx: theme => ({
-                    top: barWillHide || isFullscreen ? 0 : appBarHeight,
-                    float: 'right',
-                    paddingTop: theme.spacing(2),
-                    position: 'sticky',
-                    right: theme.spacing(2),
-                    zIndex: theme.zIndex.appBar + 1
-                }), children: fullscreenSupported ? null : isFullscreen ? (_jsx(IconButton, { onClick: handleExitFullscreen, size: "large", children: _jsx(FullscreenExit, {}) })) : (_jsx(IconButton, { onClick: handleEnterFullscreen, size: "large", children: _jsx(Fullscreen, {}) })) }), _jsx(PageContent, { margin: margin, mb: mb, ml: ml, mr: mr, mt: mt, children: children })] }));
-};
-export default memo(PageFullscreen);

package/commons/components/pages/PageFullWidth.d.ts

@@ -1,11 +0,0 @@
-type PageFullWidthProps = {
-    children: React.ReactNode;
-    height?: number | string;
-    margin?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-};
-declare const _default: import("react").NamedExoticComponent<PageFullWidthProps>;
-export default _default;

package/commons/components/pages/PageFullWidth.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages//PageContent';
-import { memo } from 'react';
-const PageFullWidth = ({ children, height, margin = null, mb = 2, ml = 2, mr = 2, mt = 2 }) => {
-    return (_jsx(PageContent, { width: "100%", height: height, margin: margin, mb: mb, ml: ml, mr: mr, mt: mt, children: children }));
-};
-export default memo(PageFullWidth);

package/commons/components/pages/PageHeader.d.ts

@@ -1,23 +0,0 @@
-import { type ButtonProps, type IconButtonProps } from '@mui/material';
-export type PageHeaderAction = {
-    key?: string;
-    title?: string;
-    tooltip?: string;
-    icon?: React.ReactNode;
-    color?: 'primary' | 'secondary';
-    action?: () => void;
-    btnProp?: ButtonProps | IconButtonProps;
-};
-type PageHeaderProps = {
-    children?: React.ReactNode;
-    left?: React.ReactNode;
-    right?: React.ReactNode;
-    actions?: PageHeaderAction[];
-    isSticky?: boolean;
-    top?: number;
-    elevation?: number;
-    backgroundColor?: string;
-    className?: string;
-};
-declare const _default: import("react").NamedExoticComponent<PageHeaderProps>;
-export default _default;

package/commons/components/pages/PageHeader.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppBar, Button, IconButton, Toolbar, Tooltip, useTheme } from '@mui/material';
-import { useAppBar, useAppBarHeight, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { memo } from 'react';
-const PageHeader = ({ children, left, right, actions, backgroundColor, className, isSticky = false, top = null, elevation = 0 }) => {
-    const theme = useTheme();
-    const layout = useAppLayout();
-    const appbar = useAppBar();
-    const appBarHeight = useAppBarHeight();
-    const barWillHide = layout.current !== 'top' && appbar.autoHide;
-    return (_jsxs(AppBar, { id: "header1", position: isSticky ? 'sticky' : 'relative', style: {
-            top: top !== null ? top : isSticky ? (barWillHide ? 0 : appBarHeight) : null,
-            backgroundColor: backgroundColor || theme.palette.background.default,
-            zIndex: !isSticky ? theme.zIndex.appBar - 100 : null
-        }, className: className, elevation: elevation, color: "inherit", children: [children, (left || right || actions) && (_jsxs(Toolbar, { style: { minHeight: 0 }, disableGutters: true, children: [_jsx("div", { style: { flexGrow: 1 }, children: left }), _jsx("div", { children: actions &&
-                            actions.map((a, i) => {
-                                let act = null;
-                                if (a.title) {
-                                    act = (_jsx(Button, { startIcon: a.icon, color: a.color, onClick: a.action, ...a.btnProp, style: { marginRight: theme.spacing(1) }, children: a.title }, a.tooltip ? null : a.key ? a.key : `ph-action-${i}`));
-                                }
-                                else {
-                                    act = (_jsx(IconButton, { color: a.color, onClick: a.action, ...a.btnProp, style: { marginRight: theme.spacing(1) }, size: "large", children: a.icon }, a.tooltip ? null : a.key ? a.key : `ph-action-${i}`));
-                                }
-                                return a.tooltip ? (_jsx(Tooltip, { title: a.tooltip, children: act }, a.key ? a.key : `ph-action-${i}`)) : (act);
-                            }) }), _jsx("div", { children: right })] }))] }));
-};
-export default memo(PageHeader);

package/commons/components/pages/hooks/usePageProps.d.ts

@@ -1,24 +0,0 @@
-export type PageProps = {
-    className?: string;
-    width?: string | number;
-    height?: string | number;
-    margin?: number;
-    mb?: number;
-    ml?: number;
-    mr?: number;
-    mt?: number;
-};
-export default function usePageProps({ props, defaultOverrides }: {
-    props: PageProps;
-    defaultOverrides?: PageProps;
-}): {
-    className: string;
-    style: {
-        width: string | number;
-        height: string | number;
-        marginBottom: string;
-        marginLeft: string;
-        marginRight: string;
-        marginTop: string;
-    };
-};

package/commons/components/pages/hooks/usePageProps.js

@@ -1,19 +0,0 @@
-import { useMediaQuery, useTheme } from '@mui/material';
-import { useMemo } from 'react';
-const PagePropsDefaults = { margin: null, mt: 2, mr: 2, mb: 2, ml: 2 };
-export default function usePageProps({ props, defaultOverrides = PagePropsDefaults }) {
-    const { className, width, height, margin, mt, mr, mb, ml } = { ...PagePropsDefaults, ...defaultOverrides, ...props };
-    const theme = useTheme();
-    const divider = useMediaQuery(theme.breakpoints.up('md')) ? 1 : 2;
-    return useMemo(() => ({
-        className,
-        style: {
-            width,
-            height,
-            marginBottom: theme.spacing(margin !== null ? margin / divider : mb / divider),
-            marginLeft: theme.spacing(margin !== null ? margin / divider : ml / divider),
-            marginRight: theme.spacing(margin !== null ? margin / divider : mr / divider),
-            marginTop: theme.spacing(margin !== null ? margin / divider : mt / divider)
-        }
-    }), [className, width, height, margin, mt, mr, mb, ml, divider, theme]);
-}

package/commons/components/search/AppSearch.d.ts

@@ -1 +0,0 @@
-export default function AppSearch(): import("react/jsx-runtime").JSX.Element;

package/commons/components/search/AppSearch.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Search } from '@mui/icons-material';
-import { Box, ClickAwayListener, Dialog, DialogContent, DialogTitle, emphasize, IconButton, Popper, Slide, Stack, styled, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import { useAppSearchService } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSearchService';
-import AppSearchInput from '@cccsaurora/howler-ui/commons/components/search/AppSearchInput';
-import AppSearchResult from '@cccsaurora/howler-ui/commons/components/search/AppSearchResult';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-const MENU_LIST_SX = { maxHeight: 500, overflow: 'auto' };
-const AppSearchRoot = styled(Box, { shouldForwardProp: prop => prop !== 'menuOpen' })(({ theme, menuOpen }) => {
-    const backgroundColor = emphasize(theme.palette.background.default, 0.1);
-    return {
-        position: 'relative',
-        borderRadius: theme.shape.borderRadius,
-        borderBottomLeftRadius: menuOpen && 0,
-        borderBottomRightRadius: menuOpen && 0,
-        '.app-search-input': {
-            backgroundColor: theme.palette.mode === 'dark' ? backgroundColor : menuOpen ? theme.palette.background.default : backgroundColor,
-            boxShadow: menuOpen && theme.shadows[4]
-        },
-        '.app-search-result': {
-            backgroundColor: theme.palette.mode === 'dark' ? backgroundColor : theme.palette.background.default,
-            borderBottomLeftRadius: theme.shape.borderRadius,
-            borderBottomRightRadius: theme.shape.borderRadius,
-            boxShadow: menuOpen && theme.shadows[4],
-            color: theme.palette.text.primary
-        }
-    };
-});
-const ModalTransition = forwardRef(function Transition(props, ref) {
-    const { children, ..._props } = props;
-    return (_jsx(Slide, { direction: "down", ref: ref, ..._props, children: children }));
-});
-export default function AppSearch() {
-    const theme = useTheme();
-    const menuRef = useRef(null);
-    const showSearchIcon = useMediaQuery(theme.breakpoints.down('lg'));
-    const { t } = useTranslation();
-    const { provided, state, service } = useAppSearchService();
-    const [value, setValue] = useState('');
-    // const [fullscreen, setFullscreen] = useState<boolean>(false);
-    useEffect(() => {
-        if (service.onMounted) {
-            service.onMounted(setValue, state);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // keyboard[window] handler.
-    // this is to trigger the CTLR+K shortcut to appsearch.
-    useEffect(() => {
-        const keyHandler = event => {
-            const { key, isCtrl } = parseEvent(event);
-            if (isCtrl && key === 'k') {
-                event.preventDefault();
-                const inputRef = menuRef.current.querySelector('input');
-                if (provided && !inputRef) {
-                    state.set({ ...state, menu: !state.menu, mode: 'fullscreen' });
-                }
-                else if (provided && state.menu) {
-                    state.set({ ...state, mode: 'fullscreen' });
-                }
-                else {
-                    inputRef.focus();
-                }
-            }
-        };
-        window.addEventListener('keydown', keyHandler);
-        return () => {
-            window.removeEventListener('keydown', keyHandler);
-        };
-    }, [provided, state]);
-    // Search input focus handler.
-    const onFocus = useCallback(() => {
-        //state.setMenu(!!state?.items && state.items.length > 0);
-        state.set({ ...state, menu: true });
-    }, [state]);
-    // Search input change handler.
-    const onChange = useCallback((event) => {
-        setValue(event.currentTarget.value);
-        if (service.onChange) {
-            service.onChange(event.currentTarget.value, state, setValue);
-        }
-    }, [service, state]);
-    // keyboard[ENTER] handler.
-    const onEnter = useCallback(() => {
-        if (service.onEnter) {
-            state.set({ ...state, menu: true });
-            service.onEnter(value, state);
-        }
-    }, [value, state, service]);
-    // Keyboard handler.
-    const onKeyDown = useCallback((event) => {
-        const { isEnter, isEscape, isArrowDown } = parseEvent(event);
-        if (isEnter) {
-            onEnter();
-        }
-        else if (isEscape) {
-            state.set({ ...state, menu: !state.menu });
-        }
-        else if (isArrowDown) {
-            const result = document.querySelector('[data-tui-id="tui-app-search-result"]');
-            if (result) {
-                // Prevent scolling before menu list gets focus.
-                // Doing this prevents the menu list from scrolling down
-                //  and then back up on second arrow down.
-                event.preventDefault(); // prevent native scroll.
-                result.focus();
-            }
-        }
-    }, [state, onEnter]);
-    // Clear search input handler.
-    const onClear = useCallback(() => {
-        setValue('');
-        state.set({ ...state, items: null });
-    }, [state]);
-    // Fullscreen modal toggle handler.
-    const onToggleFullscreen = useCallback(() => {
-        state.set({ ...state, mode: state.mode === 'inline' ? 'fullscreen' : 'inline' });
-    }, [state]);
-    return (_jsx(ClickAwayListener, { onClickAway: () => state.set({ ...state, menu: false }), children: _jsxs(AppSearchRoot, { ref: menuRef, sx: { mr: !showSearchIcon && 1 }, menuOpen: state.menu, children: [showSearchIcon ? (_jsx(IconButton, { color: "inherit", size: "large", onClick: () => state.set({ ...state, menu: !state.menu, mode: 'fullscreen' }), children: _jsx(Tooltip, { title: _jsxs(Stack, { direction: "column", textAlign: "center", children: [_jsx("span", { children: t('app.search.fullscreen') }), " ", _jsx("span", { children: "CTLR+K" })] }), children: _jsx(Search, {}) }) })) : (_jsxs(_Fragment, { children: [_jsx(AppSearchInput, { showToggle: true, provided: provided, className: "app-search-input", value: value, searching: state.searching, open: state.menu, onFocus: onFocus, onChange: onChange, onKeyDown: onKeyDown, onClear: onClear, onToggleFullscreen: onToggleFullscreen }), provided && (_jsx(Popper, { open: state.menu && state.mode === 'inline', anchorEl: menuRef.current, placement: "bottom-end", sx: _theme => ({ width: '100%', zIndex: _theme.zIndex.appBar + 1 }), disablePortal: true, children: _jsx(AppSearchResult, { className: "app-search-result", sx: MENU_LIST_SX }) }))] })), _jsxs(Dialog, { disableRestoreFocus: true, fullWidth: true, maxWidth: "md", TransitionComponent: ModalTransition, open: state.menu && state.mode === 'fullscreen', onClose: () => state.set({ ...state, mode: 'inline', menu: false }), sx: {
-                        maxHeight: '75%',
-                        margin: 0,
-                        '.MuiDialog-container': {
-                            alignItems: 'start'
-                        }
-                    }, PaperProps: {
-                        sx: {
-                            borderTopLeftRadius: 0,
-                            borderTopRightRadius: 0,
-                            margin: 0,
-                            width: '100%'
-                        }
-                    }, children: [_jsx(DialogTitle, { children: _jsx(AppSearchInput, { autoFocus: true, className: "app-search-input", style: { backgroundColor: emphasize(theme.palette.background.default, 0.1) }, showToggle: false, value: value, searching: state.searching, open: false, onFocus: onFocus, onChange: onChange, onKeyDown: onKeyDown, onClear: onClear, onToggleFullscreen: onToggleFullscreen }) }), provided && state.items && (_jsx(DialogContent, { children: _jsx(AppSearchResult, {}) })), provided && service.footerRenderer && service.footerRenderer(state)] })] }) }));
-}

package/commons/components/search/AppSearchInput.d.ts

@@ -1,11 +0,0 @@
-import { type InputBaseProps } from '@mui/material';
-type AppSearchInputProps = {
-    searching?: boolean;
-    provided?: boolean;
-    showToggle?: boolean;
-    open?: boolean;
-    onClear: () => void;
-    onToggleFullscreen: () => void;
-} & InputBaseProps;
-declare const _default: import("react").MemoExoticComponent<({ searching, provided, autoFocus, showToggle, value, open, onClear, onToggleFullscreen, onFocus, onChange, onKeyDown, ...inputProps }: AppSearchInputProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/search/AppSearchInput.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Clear, Search } from '@mui/icons-material';
-import { Button, CircularProgress, IconButton, InputAdornment, InputBase, Stack, Tooltip } from '@mui/material';
-import { memo, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-const AppSearchInput = ({ searching, provided, autoFocus, showToggle, value, open, onClear, onToggleFullscreen, onFocus, onChange, onKeyDown, ...inputProps }) => {
-    const { t } = useTranslation();
-    const rootRef = useRef();
-    // CTRL+K button click handler.
-    // Decicde whether to open search in normal or fullscreen/modal mode.
-    const onToggleClick = useCallback(() => {
-        if (open && provided) {
-            onToggleFullscreen();
-        }
-        else {
-            rootRef.current.querySelector('input').focus();
-        }
-    }, [open, provided, onToggleFullscreen]);
-    return (_jsx(Stack, { direction: "row", ref: rootRef, children: _jsx(InputBase, { ...inputProps, fullWidth: true, autoComplete: "off", autoFocus: autoFocus, value: value, onFocus: onFocus, onChange: onChange, onKeyDown: onKeyDown, placeholder: t('quicksearch.placeholder'), inputProps: { 'aria-label': t('quicksearch.aria') }, startAdornment: _jsx(InputAdornment, { position: "start", sx: theme => ({ color: theme.palette.text.disabled }), children: searching ? _jsx(CircularProgress, { size: 24, color: "inherit" }) : _jsx(Search, { color: "inherit" }) }), endAdornment: _jsxs(InputAdornment, { position: "end", sx: theme => ({ color: theme.palette.text.disabled }), children: [showToggle && (_jsx(Tooltip, { title: t(open && provided ? 'app.search.fullscreen' : 'app.search.shortcut'), children: _jsx(Button, { size: "small", color: "inherit", onClick: onToggleClick, children: "CTRL+K" }) })), _jsx(IconButton, { color: "inherit", onClick: onClear, children: _jsx(Clear, {}) })] }), sx: theme => ({
-                color: theme.palette.text.secondary,
-                width: '100%',
-                paddingTop: 0.5,
-                paddingBottom: 0.5,
-                paddingLeft: 1.5,
-                paddingRight: 1,
-                // backgroundColor: emphasize(theme.palette.background.default, 0.1),
-                // backgroundColor: theme.palette.background,
-                borderTopLeftRadius: theme.spacing(0.5),
-                borderTopRightRadius: theme.spacing(0.5),
-                borderBottomLeftRadius: open ? 0 : theme.spacing(0.5),
-                borderBottomRightRadius: open ? 0 : theme.spacing(0.5)
-                // boxShadow: theme.palette.mode === 'light' && theme.shadows[2]
-            }) }) }));
-};
-export default memo(AppSearchInput);

package/commons/components/search/AppSearchResult.d.ts

@@ -1,4 +0,0 @@
-import { type MenuListProps } from '@mui/material';
-type AppSearchResultProps = MenuListProps;
-declare const _default: import("react").MemoExoticComponent<({ className, ...menuProps }: AppSearchResultProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/search/AppSearchResult.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, MenuItem, MenuList, Typography } from '@mui/material';
-import { useAppSearchService } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppSearchService';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
-const AppSearchResult = ({ className, ...menuProps }) => {
-    const { t } = useTranslation();
-    const { state, service } = useAppSearchService();
-    const onKeyDown = (event, item) => {
-        const { isEnter, isEscape } = parseEvent(event);
-        if (isEnter) {
-            if (service.onItemSelect) {
-                service.onItemSelect(item, state);
-            }
-        }
-        else if (isEscape) {
-            state.set({ ...state, menu: false });
-        }
-    };
-    const options = useMemo(() => state.items?.reduce((_options, _item, index) => ({
-        ..._options,
-        [index]: { state, index, last: index === state.items.length - 1 }
-    }), {}), [state]);
-    return (_jsxs("div", { className: className, children: [_jsx(MenuList, { "data-tui-id": "tui-app-search-result", ...menuProps, children: state.items?.length > 0 ? (state.items.map((item, index) => (_jsx(MenuItem, { onKeyDown: event => onKeyDown(event, item), children: service.itemRenderer(item, options[index]) }, item.id)))) : state.items ? (_jsx(AppListEmpty, {})) : (_jsx(MenuItem, { disabled: true, children: _jsx(Box, { mt: 1, mb: 1, children: _jsx(Typography, { variant: "body2", children: _jsx("em", { children: t('app.search.starttyping') }) }) }) })) }), state.mode === 'inline' && service.footerRenderer && service.footerRenderer(state)] }));
-};
-export default memo(AppSearchResult);

package/commons/components/topnav/AppBar.d.ts

@@ -1,5 +0,0 @@
-export declare const AppBarBase: ({ children }: {
-    children: any;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/topnav/AppBar.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, AppBar as MuiAppBar, Toolbar, useMediaQuery, useTheme } from '@mui/material';
-import { useAppBar, useAppBreadcrumbs, useAppConfigs, useAppLayout, useAppQuickSearch } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { APPBAR_READY_EVENT } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppBarHeight';
-import Breadcrumbs from '@cccsaurora/howler-ui/commons/components/breadcrumbs/Breadcrumbs';
-import AppSearch from '@cccsaurora/howler-ui/commons/components/search/AppSearch';
-import AppName from '@cccsaurora/howler-ui/commons/components/topnav/AppName';
-import AppSwitcher from '@cccsaurora/howler-ui/commons/components/topnav/AppSwitcher';
-import { Notifications } from '@cccsaurora/howler-ui/commons/components/topnav/Notifications';
-import ThemeSelectionIcon from '@cccsaurora/howler-ui/commons/components/topnav/ThemeSelectionIcon';
-import UserProfile from '@cccsaurora/howler-ui/commons/components/topnav/UserProfile';
-import { memo, useCallback, useLayoutEffect, useMemo } from 'react';
-export const AppBarBase = ({ children }) => {
-    const layout = useAppLayout();
-    const configs = useAppConfigs();
-    const appbar = useAppBar();
-    const isTopLayout = layout.current === 'top';
-    const autoHide = !isTopLayout && appbar.autoHide;
-    const elevation = useMemo(() => {
-        if (layout.current === 'side') {
-            return 0;
-        }
-        return configs.theme.appbar?.elevation !== undefined ? configs.theme.appbar?.elevation : 1;
-    }, [layout, configs.theme.appbar?.elevation]);
-    return (_jsx(MuiAppBar, { id: "appbar", position: autoHide && !isTopLayout ? 'relative' : 'sticky', elevation: elevation, sx: theme => ({
-            '@media print': {
-                display: 'none !important'
-            },
-            [theme.breakpoints.only('xs')]: {
-                zIndex: theme.zIndex.drawer - 1
-            },
-            ...(isTopLayout
-                ? {
-                    zIndex: theme.zIndex.drawer + 1,
-                    ...(configs.theme.appbar ? configs.theme.appbar[theme.palette.mode] : {})
-                }
-                : {
-                    color: theme.palette.getContrastText(theme.palette.background.paper),
-                    backgroundColor: theme.palette.background.paper
-                })
-        }), children: children }));
-};
-const AppBar = () => {
-    // React Hooks.
-    const muiTheme = useTheme();
-    // TUI hooks.
-    const layout = useAppLayout();
-    const configs = useAppConfigs();
-    const breadcrumbs = useAppBreadcrumbs();
-    const quicksearch = useAppQuickSearch();
-    const { left, leftAfterBreadcrumbs, right, rightBeforeSearch, themeSelectionMode } = configs.preferences.topnav;
-    // media queries.
-    const isXs = useMediaQuery(muiTheme.breakpoints.only('xs'));
-    // const isSmUp = useMediaQuery(muiTheme.breakpoints.up('sm'));
-    const isMdDown = useMediaQuery(muiTheme.breakpoints.down('md'));
-    // const isMdUp = useMediaQuery(muiTheme.breakpoints.up('md'));
-    // compute some flags we need to perform render.
-    const isTopLayout = layout.current === 'top';
-    // const showSpacer = isXs || !quicksearch.show || (isMdUp && (breadcrumbs.show || !!left || !!leftAfterBreadcrumbs));
-    const showBreadcrumbs = breadcrumbs.show && !isMdDown;
-    // Once the dom is mounted, dispatch event to let listeners know
-    //  that the apppbar/topbar dom is available.
-    // Primary usecase is to initialize the 'useAppBarHeight' hook.
-    // That value doesn't initialize properly because it typically gets
-    //  called before the appbar is ready.
-    // The appbar/top bar is conditionally rendered on app/user ready state.
-    useLayoutEffect(() => {
-        window.dispatchEvent(new CustomEvent(APPBAR_READY_EVENT));
-    }, []);
-    const renderLeft = useCallback(() => (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center'
-        }, children: [(isTopLayout || isXs) && _jsx(AppName, { noName: isXs }), _jsx(Box, { sx: { ...(isTopLayout && { marginLeft: 3 }) } }), left, showBreadcrumbs && _jsx(Breadcrumbs, {}), leftAfterBreadcrumbs && (_jsx(Box, { sx: { ...(showBreadcrumbs && { marginLeft: 3, marginRight: 3 }) }, children: leftAfterBreadcrumbs }))] })), [showBreadcrumbs, leftAfterBreadcrumbs, isTopLayout, left, isXs]);
-    return (_jsx(AppBarBase, { children: _jsxs(Toolbar, { disableGutters: true, style: {
-                paddingLeft: !isXs && !isTopLayout ? muiTheme.spacing(2) : null,
-                paddingRight: muiTheme.spacing(1)
-            }, children: [renderLeft(), _jsx("div", { style: { flex: 1 } }), rightBeforeSearch, quicksearch.show && _jsx(AppSearch, {}), _jsx(Notifications, {}), right, themeSelectionMode === 'icon' && _jsx(ThemeSelectionIcon, {}), _jsx(AppSwitcher, {}), !configs.preferences.topnav.hideUserAvatar && _jsx(UserProfile, {})] }) }));
-};
-export default memo(AppBar);

package/commons/components/topnav/AppName.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("react").MemoExoticComponent<({ noName }: {
-    noName?: boolean;
-}) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/commons/components/topnav/AppName.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu } from '@mui/icons-material';
-import { IconButton, styled, useMediaQuery, useTheme } from '@mui/material';
-import { useAppConfigs, useAppLeftNav, useAppLogo } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { memo } from 'react';
-import { Link } from 'react-router-dom';
-const StyledTitle = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    flex: '0 0 auto',
-    fontSize: '1.5rem',
-    letterSpacing: '-1px'
-});
-const StyledIcon = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0',
-    minWidth: theme.spacing(7)
-}));
-const AppName = ({ noName }) => {
-    const theme = useTheme();
-    const logo = useAppLogo();
-    const configs = useAppConfigs();
-    const leftnav = useAppLeftNav();
-    const isXs = useMediaQuery(theme.breakpoints.only('xs'));
-    if (isXs) {
-        return (_jsxs(StyledTitle, { style: { paddingLeft: theme.spacing(2) }, children: [_jsx(StyledIcon, { children: _jsx(IconButton, { "aria-label": "open drawer", edge: "start", onClick: leftnav.toggle, size: "large", color: "inherit", children: _jsx(Menu, {}) }) }), _jsx("div", { children: !noName && configs.preferences.appName })] }));
-    }
-    return (_jsx(Link, { to: configs.preferences.appLink, style: { color: 'inherit', textDecoration: 'none', paddingLeft: theme.spacing(2) }, children: _jsxs(StyledTitle, { children: [_jsx(StyledIcon, { children: logo }), _jsx("div", { children: !noName && configs.preferences.appName })] }) }));
-};
-export default memo(AppName);

package/commons/components/topnav/AppSwitcher.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-export default _default;