@cccsaurora/howler-ui 2.12.0-dev.168

package/commons/components/notification/elements/NotificationSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const NotificationSkeleton: FC;

package/commons/components/notification/elements/NotificationSkeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Skeleton, Typography, useTheme } from '@mui/material';
+import { memo } from 'react';
+export const NotificationSkeleton = memo(() => {
+    const theme = useTheme();
+    return (_jsxs("div", { style: { width: '100%' }, children: [_jsx(Typography, { variant: "caption", children: _jsx(Skeleton, { width: "30%" }) }), _jsx(Typography, { variant: "h6", children: _jsx(Skeleton, { width: "50%" }) }), _jsxs("div", { style: { marginTop: theme.spacing(0.25), marginBottom: theme.spacing(1) }, children: [_jsx(Typography, { variant: "body2", children: _jsx(Skeleton, {}) }), _jsx(Typography, { variant: "body2", children: _jsx(Skeleton, {}) }), _jsx(Typography, { variant: "body2", children: _jsx(Skeleton, {}) })] }), _jsxs("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                }, children: [_jsx(Chip, { size: "small", variant: "outlined", label: _jsx(Skeleton, { width: "30px" }), style: { margin: theme.spacing(0.25) } }), _jsx(Chip, { size: "small", variant: "outlined", label: _jsx(Skeleton, { width: "30px" }), style: { margin: theme.spacing(0.25) } }), _jsx("div", { style: { flex: 1 } }), _jsx(Skeleton, { variant: "circular", width: 25, height: 25, style: { margin: theme.spacing(0.25) } }), _jsx(Typography, { variant: "caption", style: { margin: theme.spacing(0.25) }, children: _jsx(Skeleton, { width: 50 }) }), _jsx(Skeleton, { variant: "circular", width: 25, height: 25, style: { margin: theme.spacing(0.25) } }), _jsx(Typography, { variant: "caption", style: { margin: theme.spacing(0.25) }, children: _jsx(Skeleton, { width: 50 }) })] })] }));
+});

package/commons/components/notification/elements/NotificationTopNavButton.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+type TopNavButtonProps = {
+    newItems?: number;
+    drawer?: boolean;
+    onDrawerOpen: () => void;
+    onDrawerClose: () => void;
+};
+export declare const NotificationTopNavButton: FC<TopNavButtonProps>;
+export {};

package/commons/components/notification/elements/NotificationTopNavButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NotificationsActiveOutlined, NotificationsNoneOutlined } from '@mui/icons-material';
+import { Badge, IconButton, Tooltip } from '@mui/material';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+export const NotificationTopNavButton = memo(({ newItems = 0, drawer = false, onDrawerOpen = () => null, onDrawerClose = () => null }) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip, { title: t('notification.title'), children: _jsx(IconButton, { color: "inherit", onClick: () => (drawer ? onDrawerClose() : onDrawerOpen()), size: "large", children: _jsx(Badge, { badgeContent: newItems, color: "info", max: 99, children: newItems > 0 ? _jsx(NotificationsActiveOutlined, {}) : _jsx(NotificationsNoneOutlined, {}) }) }) }));
+});

package/commons/components/notification/elements/item/NotificationItem.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+import type { FeedItem } from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
+export declare const NotificationItem: FC<{
+    item?: FeedItem;
+}>;

package/commons/components/notification/elements/item/NotificationItem.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@mui/material';
+import { memo } from 'react';
+import { NotificationItemAuthor } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemAuthor';
+import { NotificationItemContent } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemContent';
+import { NotificationItemDate } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemDate';
+import { NotificationItemImage } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemImage';
+import { NotificationItemTag } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemTag';
+import { NotificationItemTitle } from '@cccsaurora/howler-ui/commons/components/notification/elements/item/NotificationItemTitle';
+export const NotificationItem = memo(({ item = null }) => {
+    const theme = useTheme();
+    return !item ? null : (_jsxs("div", { style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+        }, children: [_jsx(NotificationItemDate, { ...item }), _jsx(NotificationItemTitle, { ...item }), _jsx(NotificationItemContent, { ...item }), _jsx(NotificationItemImage, { ...item }), _jsxs("div", { style: {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: theme.spacing(1)
+                }, children: [item?.tags && item?.tags.map(tag => _jsx(NotificationItemTag, { tag: tag }, `${tag}`)), _jsx("div", { style: { flex: 1 } }), item?.authors &&
+                        item?.authors.map(author => _jsx(NotificationItemAuthor, { author: author }, `${author?.name}`))] })] }));
+});

package/commons/components/notification/elements/item/NotificationItemAuthor.d.ts

@@ -0,0 +1,5 @@
+import type { FeedAuthor } from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
+import { type FC } from 'react';
+export declare const NotificationItemAuthor: FC<{
+    author: FeedAuthor;
+}>;

package/commons/components/notification/elements/item/NotificationItemAuthor.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Typography, useTheme } from '@mui/material';
+import { memo, useMemo } from 'react';
+export const NotificationItemAuthor = memo(({ author = null }) => {
+    const theme = useTheme();
+    //Limit github avatar size to 50px
+    const avatar = useMemo(() => {
+        if (author?.avatar.includes('github')) {
+            let url = new URLSearchParams(author?.avatar);
+            url.append('s', '50');
+            return decodeURIComponent(url.toString());
+        }
+        else {
+            return author?.avatar;
+        }
+    }, [author]);
+    const NotificationAuthorContent = useMemo(() => (_jsxs(_Fragment, { children: [avatar && (_jsx("img", { src: avatar, alt: avatar, style: {
+                    maxHeight: '25px',
+                    borderRadius: '50%',
+                    color: theme.palette.text.secondary,
+                    marginRight: theme.spacing(1)
+                } })), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: author?.url &&
+                    author?.url !== '' && {
+                    color: theme.palette.text.secondary,
+                    transition: 'color 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+                    '&:hover': {
+                        color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : theme.palette.secondary.dark
+                    }
+                }, children: author?.name })] })), [author?.name, author?.url, avatar, theme]);
+    return author && author?.url && author?.url !== '' ? (_jsx(Link, { title: author?.url, href: author?.url, target: "_blank", rel: "noopener noreferrer", style: { display: 'contents' }, children: NotificationAuthorContent }, `${author?.name}`)) : (_jsx("div", { style: { display: 'contents' }, children: NotificationAuthorContent }, `${author?.name}`));
+});

package/commons/components/notification/elements/item/NotificationItemContent.d.ts

@@ -0,0 +1,3 @@
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { type FC } from 'react';
+export declare const NotificationItemContent: FC<FeedItem>;

package/commons/components/notification/elements/item/NotificationItemContent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Link, Typography } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/notification';
+import DOMPurify from 'dompurify';
+import { memo } from 'react';
+import Markdown from 'react-markdown';
+export const NotificationItemContent = memo(({ content_html = null, content_text = null, content_md = null }) => content_md ? (_jsx(Box, { sx: { '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }, children: _jsx(Markdown, { components: { a: props => _jsx(Link, { href: props.href, children: props.children }) }, children: content_md }) })) : content_html ? (_jsx(Typography, { sx: { '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }, dangerouslySetInnerHTML: {
+        __html: DOMPurify.sanitize(content_html, { USE_PROFILES: { html: true } })
+    } })) : content_text ? (_jsx(Typography, { sx: { '& *': { margin: 0, marginBottom: 0.5 }, overflow: 'hidden' }, variant: "body2", color: "textPrimary", children: content_text })) : null);

package/commons/components/notification/elements/item/NotificationItemDate.d.ts

@@ -0,0 +1,3 @@
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { type FC } from 'react';
+export declare const NotificationItemDate: FC<FeedItem>;

package/commons/components/notification/elements/item/NotificationItemDate.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/notification';
+import moment from 'moment';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+export const NotificationItemDate = memo(({ date_published = null }) => {
+    const { i18n } = useTranslation(['notification']);
+    return !date_published ? null : (_jsx(Typography, { lineHeight: "revert", display: "block", variant: "caption", color: "textSecondary", children: _jsx(_Fragment, { children: moment(date_published).locale(i18n.language).fromNow() }) }));
+});

package/commons/components/notification/elements/item/NotificationItemImage.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+export declare const NotificationItemImage: FC<{
+    image?: string;
+}>;

package/commons/components/notification/elements/item/NotificationItemImage.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+export const NotificationItemImage = memo(({ image = null }) => image && (_jsx("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' }, children: _jsx("img", { src: image, alt: image, style: {
+            maxWidth: '256px',
+            maxHeight: '256px',
+            borderRadius: '5px',
+            marginTop: '8px'
+        } }) })));

package/commons/components/notification/elements/item/NotificationItemTag.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+export declare const NotificationItemTag: FC<{
+    tag: string;
+}>;

package/commons/components/notification/elements/item/NotificationItemTag.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from '@mui/material';
+import { memo } from 'react';
+const TAG_COLOR = {
+    new: 'info',
+    current: 'success',
+    dev: 'warning',
+    service: 'secondary',
+    blog: 'default'
+};
+export const NotificationItemTag = memo(({ tag = null }) => tag &&
+    tag in TAG_COLOR && (_jsx(Chip, { label: tag.toLowerCase(), variant: "outlined", size: "small", color: TAG_COLOR[tag] ?? 'default' })));

package/commons/components/notification/elements/item/NotificationItemTitle.d.ts

@@ -0,0 +1,3 @@
+import { type FeedItem } from '@cccsaurora/howler-ui/commons/components/notification';
+import { type FC } from 'react';
+export declare const NotificationItemTitle: FC<FeedItem>;

package/commons/components/notification/elements/item/NotificationItemTitle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle } from '@mui/icons-material';
+import { Link, Stack, Typography, useTheme } from '@mui/material';
+import {} from '@cccsaurora/howler-ui/commons/components/notification';
+import { memo } from 'react';
+export const NotificationItemTitle = memo(({ title = null, url = null, _isNew = false }) => {
+    const theme = useTheme();
+    return !title ? null : !url ? (_jsx(Typography, { variant: "h6", sx: { color: theme.palette.primary.main }, children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [title, _isNew && _jsx(Circle, { sx: { width: '15px' } })] }) })) : (_jsx(Typography, { component: Link, href: url, target: "_blank", rel: "noopener noreferrer", underline: "none", sx: {
+            color: theme.palette.primary.main,
+            transition: 'color 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+            '&:hover': {
+                color: theme.palette.text.secondary
+            }
+        }, variant: "h6", children: _jsxs(Stack, { direction: "row", alignItems: "center", gap: 1, children: [title, _isNew && _jsx(Circle, { sx: { width: '15px' } })] }) }));
+});

package/commons/components/notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
+export * from '@cccsaurora/howler-ui/commons/components/notification/Notification';

package/commons/components/notification/index.js

@@ -0,0 +1,2 @@
+export * from '@cccsaurora/howler-ui/commons/components/notification/FeedModels';
+export * from '@cccsaurora/howler-ui/commons/components/notification/Notification';

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

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

package/commons/components/pages/PageCardCentered.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,19 @@
+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

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

package/commons/components/search/AppSearch.js

@@ -0,0 +1,135 @@
+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)] })] }) }));
+}