npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.4.2 → 3.0.0-dev.7.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.4.2 → 3.0.0-dev.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1974) hide show

package/lib/components/PageTemplates/CategorySubPage.js CHANGED Viewed

@@ -12,7 +12,7 @@ import Progress from '../Progress';
 import { StyledTemplate, StyledTemplateRow, StyledPageArticle, StyledArticleHeader, StyledPageActionCol, StyledPageTitle, StyledMenuColumn, StyledCategoryHeadingRow, StyledCategoryIconBlock, StyledNav, StyledNavList, StyledNavGroup, StyledNavGroupList, StyledNavGroupHeader, StyledNavItem, StyledSkipNavigation } from './CategorySubPage.styles';
 const NavItem = ({ item: { href, text, active, ...restProps } }) => {
     const isAnchor = !!href;
-    return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', inverted: false, "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }, void 0) }, void 0));
+    return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', inverted: false, "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }) }));
 };
 const NavGroup = ({ item }) => {
     const mappedGroupedItems = useMemo(() => {
@@ -29,13 +29,13 @@ const NavGroup = ({ item }) => {
     }, [item.title, item.items]);
     const groupLabelId = useUID();
     if (titledGroup) {
-        return (_jsxs(StyledNavGroup, { as: 'li', children: [_jsx(StyledNavGroupHeader, { variant: 'h3', id: groupLabelId, children: item.title }, void 0), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems }, void 0)] }, void 0));
+        return (_jsxs(StyledNavGroup, { as: 'li', children: [_jsx(StyledNavGroupHeader, { variant: 'h3', id: groupLabelId, children: item.title }), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems })] }));
     }
     if (anonGroup) {
-        return _jsx(StyledNavGroup, { children: mappedGroupedItems }, void 0);
+        return _jsx(StyledNavGroup, { children: mappedGroupedItems });
     }
     if (item.items.length === 1) {
-        return _jsx(NavItem, { item: item.items[0] }, void 0);
+        return _jsx(NavItem, { item: item.items[0] });
     }
     return null;
 };
@@ -45,20 +45,20 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
     const mappedAction = useCallback((action) => {
         const { id, text, icon, label, ...rest } = action;
         return (_createElement(Button, { ...rest, key: id, icon: !!icon && !text, label: label || text },
-            !!icon && _jsx(Icon, { name: icon }, void 0),
+            !!icon && _jsx(Icon, { name: icon }),
             !!text && text));
     }, []);
     return (_jsx(StyledTemplate, { children: _jsxs(Flex, { ...restProps, ref: templateRef, as: StyledTemplateRow, container: { alignItems: 'stretch', wrap: 'nowrap' }, children: [_jsxs(StyledMenuColumn, { children: [_jsx(StyledSkipNavigation, { onClick: () => {
                                 if (articleRef.current)
                                     articleRef.current.focus();
-                            }, children: "Skip to page content" }, void 0), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }, void 0) }, void 0)), _jsx(Text, { variant: 'h1', children: category }, void 0)] }, void 0), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
+                            }, children: "Skip to page content" }), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }) })), _jsx(Text, { variant: 'h1', children: category })] }), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
                                     const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;
                                     return _jsx(NavGroup, { item: navItem }, key);
-                                }) }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }, void 0), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
+                                }) }) })] }), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
                                         justify: 'between',
                                         alignItems: 'center',
                                         wrap: 'wrap'
-                                    }, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }, void 0), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) }, void 0)), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
+                                    }, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) })), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
                                                                 items: pageActions
                                                                     .slice(maxActions - 1)
                                                                     .map(({ id, text, onClick, ...rest }) => ({
@@ -67,10 +67,10 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
                                                                     onClick,
                                                                     ...rest
                                                                 }))
-                                                            } }, void 0), pageActions
+                                                            } }), pageActions
                                                             .slice(0, maxActions - 1)
                                                             .reverse()
-                                                            .map(mappedAction)] }, void 0))] }, void 0))] }, void 0)), region] }, void 0))] }, void 0)] }, void 0) }, void 0));
+                                                            .map(mappedAction)] }))] }))] })), region] }))] })] }) }));
 });
 export default CategorySubPage;
 //# sourceMappingURL=CategorySubPage.js.map

package/lib/components/PageTemplates/CategorySubPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createRef,\n Ref,\n forwardRef,\n PropsWithoutRef,\n FunctionComponent,\n ReactNode,\n useCallback,\n useMemo,\n MouseEventHandler\n} from 'react';\n\nimport { hasProp } from '../../utils';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n StyledTemplate,\n StyledTemplateRow,\n StyledPageArticle,\n StyledArticleHeader,\n StyledPageActionCol,\n StyledPageTitle,\n StyledMenuColumn,\n StyledCategoryHeadingRow,\n StyledCategoryIconBlock,\n StyledNav,\n StyledNavList,\n StyledNavGroup,\n StyledNavGroupList,\n StyledNavGroupHeader,\n StyledNavItem,\n StyledSkipNavigation\n} from './CategorySubPage.styles';\n\ninterface NavItemType extends ForwardProps {\n text: string;\n active?: boolean;\n onClick?: MouseEventHandler;\n href?: string;\n}\n\ninterface NavGroupType {\n title?: string;\n items: NavItemType[];\n}\n\ninterface PageAction\n extends Pick<Action, 'id' \| 'icon' \| 'href' \| 'onClick' \| 'disabled'>,\n Pick<ButtonProps, 'variant' \| 'label' \| 'aria-label' \| 'loading'>,\n ForwardProps {\n /** Optional text to replace required text string in Action type /\n text?: string;\n}\n\nexport interface TemplateProps {\n /* Indicates that the primary view for the page cannot yet be rendered /\n /* @default false /\n viewLoading?: boolean;\n /* Parent Category of page and all navigation items /\n category: string;\n /* Parent Category icon /\n categoryIcon?: string;\n navItemGroups: NavGroupType[];\n pageTitle?: string;\n /* Actions to render in fixed page header. Ordered by priority /\n pageActions?: PageAction[];\n /* Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. /\n /* @default 3 /\n maxActions?: number;\n /* Primary page content region /\n region: ReactNode;\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n const isAnchor = !!href;\n\n return (\n <StyledNavItem\n as='li'\n selected={!!active}\n tabType='horizontal'\n inverted={false}\n aria-current={active ? 'page' : undefined}\n >\n <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n {text}\n </Button>\n </StyledNavItem>\n );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n const mappedGroupedItems = useMemo(() => {\n return item.items.map(groupedItem => {\n const key = groupedItem.text;\n return <NavItem item={groupedItem} key={key} />;\n });\n }, [item.items]);\n\n const titledGroup: boolean = useMemo(() => {\n return !!item.title && !!item.items.length;\n }, [item.title, item.items]);\n\n const anonGroup: boolean = useMemo(() => {\n return !item.title && item.items.length > 1;\n }, [item.title, item.items]);\n\n const groupLabelId = useUID();\n if (titledGroup) {\n return (\n <StyledNavGroup as='li'>\n <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n {(item as NavGroupType).title}\n </StyledNavGroupHeader>\n\n <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n </StyledNavGroup>\n );\n }\n\n if (anonGroup) {\n return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n }\n\n if (item.items.length === 1) {\n return <NavItem item={item.items[0]} />;\n }\n\n return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n (\n {\n viewLoading = false,\n category,\n categoryIcon,\n navItemGroups,\n pageTitle,\n pageActions,\n region,\n maxActions = 3,\n ...restProps\n }: PropsWithoutRef<TemplateProps>,\n ref: TemplateProps['ref']\n ) => {\n const articleRef = createRef<HTMLElement>();\n const templateRef = useConsolidatedRef(ref);\n\n const mappedAction = useCallback((action: PageAction) => {\n const { id, text, icon, label, ...rest } = action;\n\n return (\n <Button {...rest} key={id} icon={!!icon && !text} label={label \|\| text}>\n {!!icon && <Icon name={icon} />}\n {!!text && text}\n </Button>\n );\n }, []);\n\n return (\n <StyledTemplate>\n <Flex\n {...restProps}\n ref={templateRef}\n as={StyledTemplateRow}\n container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n >\n <StyledMenuColumn>\n <StyledSkipNavigation\n onClick={() => {\n if (articleRef.current) articleRef.current.focus();\n }}\n >\n Skip to page content\n </StyledSkipNavigation>\n\n <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n {categoryIcon && (\n <Flex\n as={StyledCategoryIconBlock}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <Icon name={categoryIcon} />\n </Flex>\n )}\n <Text variant='h1'>{category}</Text>\n </Flex>\n\n <StyledNav>\n <StyledNavList>\n {navItemGroups.map((navItem, index) => {\n const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;\n\n return <NavGroup key={key} item={navItem} />;\n })}\n </StyledNavList>\n </StyledNav>\n </StyledMenuColumn>\n\n <Flex\n as={StyledPageArticle}\n item={{ grow: 1 }}\n ref={articleRef}\n aria-label={pageTitle \|\| 'Main Content'}\n tabIndex={0}\n >\n {viewLoading && <Progress placement='local' />}\n\n {!viewLoading && (\n <>\n {(pageTitle \|\| pageActions) && (\n <Flex\n as={StyledArticleHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n wrap: 'wrap'\n }}\n >\n {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n {pageActions && !!pageActions.length && (\n <>\n {pageActions.length <= maxActions && (\n <StyledPageActionCol>\n {pageActions.reverse().map(mappedAction)}\n </StyledPageActionCol>\n )}\n\n {pageActions.length > maxActions && (\n <StyledPageActionCol>\n <MenuButton\n text='Actions'\n menu={{\n items: (pageActions as Action[])\n .slice(maxActions - 1)\n .map(({ id, text, onClick, ...rest }) => ({\n id,\n primary: text,\n onClick,\n ...rest\n }))\n }}\n />\n\n {pageActions\n .slice(0, maxActions - 1)\n .reverse()\n .map(mappedAction)}\n </StyledPageActionCol>\n )}\n </>\n )}\n </Flex>\n )}\n\n {region}\n </>\n )}\n </Flex>\n </Flex>\n </StyledTemplate>\n );\n }\n);\n\nexport default CategorySubPage;\n"]}
1	+ {"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createRef,\n Ref,\n forwardRef,\n PropsWithoutRef,\n FunctionComponent,\n ReactNode,\n useCallback,\n useMemo,\n MouseEventHandler\n} from 'react';\n\nimport { hasProp } from '../../utils';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n StyledTemplate,\n StyledTemplateRow,\n StyledPageArticle,\n StyledArticleHeader,\n StyledPageActionCol,\n StyledPageTitle,\n StyledMenuColumn,\n StyledCategoryHeadingRow,\n StyledCategoryIconBlock,\n StyledNav,\n StyledNavList,\n StyledNavGroup,\n StyledNavGroupList,\n StyledNavGroupHeader,\n StyledNavItem,\n StyledSkipNavigation\n} from './CategorySubPage.styles';\n\ninterface NavItemType extends ForwardProps {\n text: string;\n active?: boolean;\n onClick?: MouseEventHandler;\n href?: string;\n}\n\ninterface NavGroupType {\n title?: string;\n items: NavItemType[];\n}\n\ninterface PageAction\n extends Pick<Action, 'id' \| 'icon' \| 'href' \| 'onClick' \| 'disabled'>,\n Pick<ButtonProps, 'variant' \| 'label' \| 'aria-label' \| 'loading'>,\n ForwardProps {\n /** Optional text to replace required text string in Action type /\n text?: string;\n}\n\nexport interface TemplateProps {\n /* Indicates that the primary view for the page cannot yet be rendered /\n /* @default false /\n viewLoading?: boolean;\n /* Parent Category of page and all navigation items /\n category: string;\n /* Parent Category icon /\n categoryIcon?: string;\n navItemGroups: NavGroupType[];\n pageTitle?: string;\n /* Actions to render in fixed page header. Ordered by priority /\n pageActions?: PageAction[];\n /* Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. /\n /* @default 3 /\n maxActions?: number;\n /* Primary page content region /\n region: ReactNode;\n /* Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n const isAnchor = !!href;\n\n return (\n <StyledNavItem\n as='li'\n selected={!!active}\n tabType='horizontal'\n inverted={false}\n aria-current={active ? 'page' : undefined}\n >\n <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n {text}\n </Button>\n </StyledNavItem>\n );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n const mappedGroupedItems = useMemo(() => {\n return item.items.map(groupedItem => {\n const key = groupedItem.text;\n return <NavItem item={groupedItem} key={key} />;\n });\n }, [item.items]);\n\n const titledGroup: boolean = useMemo(() => {\n return !!item.title && !!item.items.length;\n }, [item.title, item.items]);\n\n const anonGroup: boolean = useMemo(() => {\n return !item.title && item.items.length > 1;\n }, [item.title, item.items]);\n\n const groupLabelId = useUID();\n if (titledGroup) {\n return (\n <StyledNavGroup as='li'>\n <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n {(item as NavGroupType).title}\n </StyledNavGroupHeader>\n\n <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n </StyledNavGroup>\n );\n }\n\n if (anonGroup) {\n return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n }\n\n if (item.items.length === 1) {\n return <NavItem item={item.items[0]} />;\n }\n\n return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n (\n {\n viewLoading = false,\n category,\n categoryIcon,\n navItemGroups,\n pageTitle,\n pageActions,\n region,\n maxActions = 3,\n ...restProps\n }: PropsWithoutRef<TemplateProps>,\n ref: TemplateProps['ref']\n ) => {\n const articleRef = createRef<HTMLElement>();\n const templateRef = useConsolidatedRef(ref);\n\n const mappedAction = useCallback((action: PageAction) => {\n const { id, text, icon, label, ...rest } = action;\n\n return (\n <Button {...rest} key={id} icon={!!icon && !text} label={label \|\| text}>\n {!!icon && <Icon name={icon} />}\n {!!text && text}\n </Button>\n );\n }, []);\n\n return (\n <StyledTemplate>\n <Flex\n {...restProps}\n ref={templateRef}\n as={StyledTemplateRow}\n container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n >\n <StyledMenuColumn>\n <StyledSkipNavigation\n onClick={() => {\n if (articleRef.current) articleRef.current.focus();\n }}\n >\n Skip to page content\n </StyledSkipNavigation>\n\n <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n {categoryIcon && (\n <Flex\n as={StyledCategoryIconBlock}\n container={{ alignItems: 'center', justify: 'center' }}\n >\n <Icon name={categoryIcon} />\n </Flex>\n )}\n <Text variant='h1'>{category}</Text>\n </Flex>\n\n <StyledNav>\n <StyledNavList>\n {navItemGroups.map((navItem, index) => {\n const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;\n\n return <NavGroup key={key} item={navItem} />;\n })}\n </StyledNavList>\n </StyledNav>\n </StyledMenuColumn>\n\n <Flex\n as={StyledPageArticle}\n item={{ grow: 1 }}\n ref={articleRef}\n aria-label={pageTitle \|\| 'Main Content'}\n tabIndex={0}\n >\n {viewLoading && <Progress placement='local' />}\n\n {!viewLoading && (\n <>\n {(pageTitle \|\| pageActions) && (\n <Flex\n as={StyledArticleHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n wrap: 'wrap'\n }}\n >\n {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n {pageActions && !!pageActions.length && (\n <>\n {pageActions.length <= maxActions && (\n <StyledPageActionCol>\n {pageActions.reverse().map(mappedAction)}\n </StyledPageActionCol>\n )}\n\n {pageActions.length > maxActions && (\n <StyledPageActionCol>\n <MenuButton\n text='Actions'\n menu={{\n items: (pageActions as Action[])\n .slice(maxActions - 1)\n .map(({ id, text, onClick, ...rest }) => ({\n id,\n primary: text,\n onClick,\n ...rest\n }))\n }}\n />\n\n {pageActions\n .slice(0, maxActions - 1)\n .reverse()\n .map(mappedAction)}\n </StyledPageActionCol>\n )}\n </>\n )}\n </Flex>\n )}\n\n {region}\n </>\n )}\n </Flex>\n </Flex>\n </StyledTemplate>\n );\n }\n);\n\nexport default CategorySubPage;\n"]}

package/lib/components/PageTemplates/DashboardPage.js CHANGED Viewed

@@ -96,7 +96,7 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                 rows: pageRows,
                 cols
             }
-        }, ref: ref, children: [_jsxs(Grid, { as: StyledPageHeader, md: { item: { area: 'header' } }, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }, void 0), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }, void 0) }, void 0)), primary: _jsx(Text, { variant: 'h1', children: title }, void 0), actions: actions }, void 0)] }, void 0), banners && _jsx(Grid, { md: { item: { area: 'banner' } }, children: banners }, void 0), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, { as: StyledFilterRegion, container: {
+        }, ref: ref, children: [_jsxs(Grid, { as: StyledPageHeader, md: { item: { area: 'header' } }, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })] }), banners && _jsx(Grid, { md: { item: { area: 'banner' } }, children: banners }), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, { as: StyledFilterRegion, container: {
                     autoRows: 'max-content',
                     gap: 2
                 }, md: {
@@ -106,7 +106,7 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                             : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'
                     },
                     item: { area: 'filter' }
-                }, children: filters }, void 0)), regions.map((colItems, i) => {
+                }, children: filters })), regions.map((colItems, i) => {
                 const key = `${i}`;
                 return (_jsx(Flex, { container: {
                         direction: 'column',
@@ -120,10 +120,10 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                         alignItems: 'start',
                         gap: 2
                     }, md: { item: { area: 'col-full-width' } }, as: StyledDashboardRegion, children: colItems }, key));
-            })] }, void 0));
+            })] }));
 });
 const DashboardPage = forwardRef(({ a, b, c, filters, fitToViewport, ...restProps }, ref) => {
-    return (_jsx(DashboardPageLayout, { ...restProps, cols: '1fr 1fr', filters: filters, fitToViewport: fitToViewport, regions: [a, b], regionFullWidth: [c], ref: ref }, void 0));
+    return (_jsx(DashboardPageLayout, { ...restProps, cols: '1fr 1fr', filters: filters, fitToViewport: fitToViewport, regions: [a, b], regionFullWidth: [c], ref: ref }));
 });
 export default DashboardPage;
 //# sourceMappingURL=DashboardPage.js.map

package/lib/components/PageTemplates/DashboardPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\n\nimport {\n PageTemplateProps,\n PageLayoutProps,\n StyledPageHeader,\n StyledPageLayout,\n StyledPageIcon,\n StyledRegion\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' \| 'inline-start' \| 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n const height = 'calc(100vh - var(--appshell-offset, 0))';\n\n return css`\n min-height: ${height};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' \|\| !filters \|\| Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const gridAreas = useMemo(() => {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto auto auto' : 'auto auto auto auto';\n }\n return banners ? 'auto auto auto auto' : 'auto auto auto';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={ref}\n >\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, filters, fitToViewport, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n ref={ref}\n />\n );\n }\n);\n\nexport default DashboardPage;\n"]}
1	+ {"version":3,"file":"DashboardPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport Breadcrumbs from '../Breadcrumbs';\n\nimport {\n PageTemplateProps,\n PageLayoutProps,\n StyledPageHeader,\n StyledPageLayout,\n StyledPageIcon,\n StyledRegion\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n filters?: ReactNode[];\n fitToViewport?: boolean;\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n filters?: ReactNode[];\n filterPosition?: 'block-start' \| 'inline-start' \| 'inline-end';\n fitToViewport?: boolean;\n regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegion = styled(StyledRegion)``;\n\nStyledFilterRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardRegion = styled(StyledRegion)`\n overflow: auto;\n`;\n\nStyledDashboardRegion.defaultProps = defaultThemeProp;\n\nexport const StyledDashboardPageLayout = styled(StyledPageLayout)<\n Pick<DashboardPageProps, 'fitToViewport'>\n>(({ fitToViewport }) => {\n const height = 'calc(100vh - var(--appshell-offset, 0))';\n\n return css`\n min-height: ${height};\n ${fitToViewport &&\n css`\n height: ${height};\n `}\n `;\n});\n\nStyledDashboardPageLayout.defaultProps = defaultThemeProp;\n\nconst DashboardPageLayout: FunctionComponent<DashboardPageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n regionFullWidth,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n filters,\n filterPosition = 'block-start',\n fitToViewport = false,\n title,\n icon,\n actions,\n banners,\n path,\n as,\n ...restProps\n }: PropsWithoutRef<DashboardPageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const headerArea = useMemo(() => {\n if (filterPosition === 'block-start' \|\| !filters \|\| Object.keys(filters).length === 0) {\n return `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n }\n return `'${Array.from({ length: regions.length + 1 }, () => 'header').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n const filterArea = `'${Array.from({ length: regions.length }, () => 'filter').join(' ')}'`;\n\n const regionArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const regionFullWidthArea = useMemo(() => {\n if (filters && Object.keys(filters).length !== 0) {\n if (filterPosition === 'inline-start') {\n return `'filter ${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )}'`;\n }\n if (filterPosition === 'inline-end') {\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(\n ' '\n )} filter'`;\n }\n }\n return `'${Array.from({ length: regions.length }, () => 'col-full-width').join(' ')}'`;\n }, [filterPosition, filters, regions.length]);\n\n const gridAreas = useMemo(() => {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${filterArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }\n return banners\n ? `${headerArea}\\n${bannerArea}\\n${regionArea}\\n${regionFullWidthArea}`\n : `${headerArea}\\n${regionArea}\\n${regionFullWidthArea}`;\n }, [filterPosition, filters, banners]);\n\n const pageRows = useMemo(() => {\n if (fitToViewport) {\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto 1fr 1fr' : 'auto auto 1fr 1fr';\n }\n return banners ? 'auto auto 1fr 1fr' : 'auto 1fr 1fr';\n }\n if (filterPosition === 'block-start' && filters && Object.keys(filters).length !== 0) {\n return banners ? 'auto auto auto auto auto' : 'auto auto auto auto';\n }\n return banners ? 'auto auto auto auto' : 'auto auto auto';\n }, [filterPosition, banners]);\n\n if (filterPosition === 'inline-start' && filters && Object.keys(filters).length !== 0) {\n cols = '1fr 2fr 2fr';\n }\n\n if (filterPosition === 'inline-end' && filters && Object.keys(filters).length !== 0) {\n cols = '2fr 2fr 1fr';\n }\n\n return (\n <Grid\n {...restProps}\n as={StyledDashboardPageLayout}\n forwardedAs={as}\n fitToViewport={fitToViewport}\n container={{\n autoRows: 'max-content',\n cols: '1fr',\n gap: 2,\n pad: 2\n }}\n md={{\n container: {\n areas: gridAreas,\n rows: pageRows,\n cols\n }\n }}\n ref={ref}\n >\n <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n </Grid>\n {banners && <Grid md={{ item: { area: 'banner' } }}>{banners}</Grid>}\n {filters && Object.keys(filters).length !== 0 && (\n <Grid\n as={StyledFilterRegion}\n container={{\n autoRows: 'max-content',\n gap: 2\n }}\n md={{\n container: {\n cols:\n filterPosition === 'block-start'\n ? 'repeat(4, minmax(min(20ch, 100%), 1fr))'\n : 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'\n },\n item: { area: 'filter' }\n }}\n >\n {filters}\n </Grid>\n )}\n {regions.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Flex\n container={{\n direction: 'column',\n justify: 'start',\n gap: 2\n }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Flex>\n );\n })}\n {regionFullWidth.map((colItems: ReactNode, i: number) => {\n const key = `${i}`;\n return (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2\n }}\n md={{ item: { area: 'col-full-width' } }}\n as={StyledDashboardRegion}\n key={key}\n >\n {colItems}\n </Grid>\n );\n })}\n </Grid>\n );\n }\n);\n\nconst DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, filters, fitToViewport, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <DashboardPageLayout\n {...restProps}\n cols='1fr 1fr'\n filters={filters}\n fitToViewport={fitToViewport}\n regions={[a, b]}\n regionFullWidth={[c]}\n ref={ref}\n />\n );\n }\n);\n\nexport default DashboardPage;\n"]}

package/lib/components/PageTemplates/PageTemplates.js CHANGED Viewed

@@ -132,14 +132,14 @@ const PageLayout = forwardRef(({ regions, cols = `repeat(${regions.length}, minm
             direction: 'column',
             alignItems: 'stretch',
             gap: 2
-        }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: ref, minContentHeight: minContentHeight, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0] }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }, void 0), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }, void 0) }, void 0)), primary: _jsx(Text, { variant: 'h1', children: title }, void 0), actions: actions }, void 0)), banners, tabs] }, void 0), _jsxs(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: [renderSingleRegion && (_jsx(StyledRegions, { ref: consolidatedRegionRef, pad: true, children: _jsx(Flex, { container: {
+        }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: ref, minContentHeight: minContentHeight, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0] }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })), banners, tabs] }), _jsxs(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: [renderSingleRegion && (_jsx(StyledRegions, { ref: consolidatedRegionRef, pad: true, children: _jsx(Flex, { container: {
                                 direction: 'column',
                                 gap: 2
                             }, as: StyledRegion, ref: (el) => {
                                 if (el) {
                                     scrollStickOptions.current.elements[0] = el;
                                 }
-                            }, fillHeight: true, children: regions[0] }, void 0) }, void 0)), !renderSingleRegion && (_jsx(Grid, { container: {
+                            }, fillHeight: true, children: regions[0] }) })), !renderSingleRegion && (_jsx(Grid, { container: {
                             cols: 'minmax(0, 1fr)',
                             alignItems: 'start',
                             gap: 2,
@@ -153,42 +153,42 @@ const PageLayout = forwardRef(({ regions, cols = `repeat(${regions.length}, minm
                                         scrollStickOptions.current.elements[i] = el;
                                     }
                                 }, children: colItems }, i));
-                        }) }, void 0))] }, void 0)] }, void 0));
+                        }) }))] })] }));
 });
 export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
     const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);
     return (_jsx(PageLayout, { ...restProps, tabs: _jsx(Tabs, { ...tabs, onTabClick: (id, e) => {
                 setTabId(id);
                 tabs.onTabClick?.(id, e);
-            } }, void 0), regions: [
-            _jsx(Flex, { container: { direction: 'column', gap: 2 }, as: TabPanel, tabId: tabId, children: a }, void 0)
-        ], ref: ref }, void 0));
+            } }), regions: [
+            _jsx(Flex, { container: { direction: 'column', gap: 2 }, as: TabPanel, tabId: tabId, children: a })
+        ], ref: ref }));
 });
 export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
-    return _jsx(PageLayout, { regions: [a], ref: ref, ...restProps, cols: 'minmax(0, 1fr)' }, void 0);
+    return _jsx(PageLayout, { regions: [a], ref: ref, ...restProps, cols: 'minmax(0, 1fr)' });
 });
 export const TwoColumnPage = forwardRef(({ a, b, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 1fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 1fr))' }));
 });
 export const ThreeColumnPage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(3, minmax(0, 1fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(3, minmax(0, 1fr))' }));
 });
 export const FourColumnPage = forwardRef(({ a, b, c, d, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c, d], ref: ref, ...restProps, cols: 'repeat(4, minmax(0, 1fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c, d], ref: ref, ...restProps, cols: 'repeat(4, minmax(0, 1fr))' }));
 });
 export const WideNarrowPage = forwardRef(({ a, b, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 2fr) minmax(0, 1fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 2fr) minmax(0, 1fr)' }));
 });
 export const NarrowWidePage = forwardRef(({ a, b, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 2fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 2fr)' }));
 });
 export const WideWideNarrowPage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 2fr)) minmax(0, 1fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 2fr)) minmax(0, 1fr)' }));
 });
 export const NarrowWideWidePage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) repeat(2, minmax(0, 2fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) repeat(2, minmax(0, 2fr))' }));
 });
 export const NarrowWideNarrowPage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)' }));
 });
 //# sourceMappingURL=PageTemplates.js.map

package/lib/components/PageTemplates/PageTemplates.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n useRef,\n ReactElement,\n useContext,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n title: string;\n icon?: string;\n actions?: ReactNode;\n banners?: ReactNode;\n path?: BreadcrumbsProps['path'];\n header?: ReactNode;\n scrollContent?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n tabs: TabsProps;\n a: ReactNode;\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n tabs?: ReactElement<typeof Tabs>;\n regions: ReactNode[];\n regionsRef?: Ref<HTMLDivElement>;\n cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n const bgColor = theme.base.palette['brand-primary'];\n const color = tryCatch(() => readableColor(bgColor));\n return css`\n height: calc(4 * ${theme.base.spacing});\n width: calc(4 * ${theme.base.spacing});\n background: ${bgColor};\n color: ${color};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n return css`\n ${StyledBreadcrumbs} {\n margin-block-end: ${theme.base.spacing};\n }\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div<{ fillHeight?: boolean }>(({ fillHeight }) => {\n return css`\n flex-grow: 1;\n\n ${fillHeight &&\n css`\n height: 100%;\n `}\n `;\n});\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div<{ pad: boolean }>(({ pad, theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n flex-grow: 1;\n max-width: 100%;\n\n ${pad &&\n css`\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n `}\n `;\n});\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n return css`\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n scrollContent: PageLayoutProps['scrollContent'];\n minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n return css`\n --content-height-in-view: ${emptyContentHeight};\n position: relative;\n min-height: inherit;\n background-color: ${theme.base.palette['app-background']};\n\n ${scrollContent &&\n css`\n ${StyledContent} {\n position: relative;\n }\n\n ${StyledRegions} {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: auto;\n }\n `}\n `;\n});\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n title,\n icon,\n path,\n actions,\n banners,\n tabs,\n as,\n header,\n regionsRef,\n scrollContent = false,\n ...restProps\n }: PropsWithoutRef<PageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const [contentEl, setContentEl] = useElement<HTMLElement>();\n const isMediumOrAbove = useBreakpoint('md');\n const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n const { headerEl } = useContext(AppShellContext);\n\n const consolidatedRegionRef = useConsolidatedRef(regionsRef);\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n const renderSingleRegion = regions?.length === 1;\n\n const [minContentHeight, setMinContentHeight] = useState<number \| undefined>();\n\n useEffect(() => {\n if (consolidatedRegionRef && consolidatedRegionRef.current) {\n const refElement = consolidatedRegionRef.current;\n const regionsPaddingBottomPixels = Number.parseInt(\n window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n 10\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const headerOffset = headerEl?.offsetHeight ?? 0;\n const emptyHeight =\n document.documentElement.offsetHeight -\n (headerOffset + refElement?.offsetTop) -\n regionsPaddingBottomPixels;\n\n setMinContentHeight(emptyHeight);\n });\n\n resizeObserver.observe(refElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [consolidatedRegionRef, headerEl]);\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column',\n alignItems: 'stretch',\n gap: 2\n }}\n scrollContent={scrollContent}\n as={StyledPageLayout}\n forwardedAs={as}\n ref={ref}\n minContentHeight={minContentHeight}\n >\n <Flex\n container={{ direction: 'column', pad: [2, 2, 0] }}\n item={{ grow: 0, shrink: 0 }}\n as={StyledPageHeader}\n >\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n {header \|\| (\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n )}\n\n {banners}\n {tabs}\n </Flex>\n\n <Flex\n container\n item={{ grow: 1 }}\n as={StyledContent}\n ref={scrollContent ? setContentEl : undefined}\n >\n {renderSingleRegion && (\n <StyledRegions ref={consolidatedRegionRef} pad>\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[0] = el;\n }\n }}\n fillHeight\n >\n {regions[0]}\n </Flex>\n </StyledRegions>\n )}\n\n {!renderSingleRegion && (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2,\n pad: [0, 2, 2]\n }}\n md={{ container: { cols } }}\n as={StyledRegions}\n ref={consolidatedRegionRef}\n >\n {regions.map((colItems, i) => {\n return (\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[i] = el;\n }\n }}\n >\n {colItems}\n </Flex>\n );\n })}\n </Grid>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);\n\n return (\n <PageLayout\n {...restProps}\n tabs={\n <Tabs\n {...tabs}\n onTabClick={(id, e) => {\n setTabId(id);\n tabs.onTabClick?.(id, e);\n }}\n />\n }\n regions={[\n <Flex container={{ direction: 'column', gap: 2 }} as={TabPanel} tabId={tabId}>\n {a}\n </Flex>\n ]}\n ref={ref}\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c, d]}\n ref={ref}\n {...restProps}\n cols='repeat(4, minmax(0, 1fr))'\n />\n );\n }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n );\n }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n );\n }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n />\n );\n }\n );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n />\n );\n }\n );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n />\n );\n }\n );\n"]}
1	+ {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n useRef,\n ReactElement,\n useContext,\n useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n title: string;\n icon?: string;\n actions?: ReactNode;\n banners?: ReactNode;\n path?: BreadcrumbsProps['path'];\n header?: ReactNode;\n scrollContent?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n tabs: TabsProps;\n a: ReactNode;\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n tabs?: ReactElement<typeof Tabs>;\n regions: ReactNode[];\n regionsRef?: Ref<HTMLDivElement>;\n cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n const bgColor = theme.base.palette['brand-primary'];\n const color = tryCatch(() => readableColor(bgColor));\n return css`\n height: calc(4 * ${theme.base.spacing});\n width: calc(4 * ${theme.base.spacing});\n background: ${bgColor};\n color: ${color};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n return css`\n ${StyledBreadcrumbs} {\n margin-block-end: ${theme.base.spacing};\n }\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div<{ fillHeight?: boolean }>(({ fillHeight }) => {\n return css`\n flex-grow: 1;\n\n ${fillHeight &&\n css`\n height: 100%;\n `}\n `;\n});\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div<{ pad: boolean }>(({ pad, theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n flex-grow: 1;\n max-width: 100%;\n\n ${pad &&\n css`\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n `}\n `;\n});\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n return css`\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n scrollContent: PageLayoutProps['scrollContent'];\n minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n return css`\n --content-height-in-view: ${emptyContentHeight};\n position: relative;\n min-height: inherit;\n background-color: ${theme.base.palette['app-background']};\n\n ${scrollContent &&\n css`\n ${StyledContent} {\n position: relative;\n }\n\n ${StyledRegions} {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: auto;\n }\n `}\n `;\n});\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n title,\n icon,\n path,\n actions,\n banners,\n tabs,\n as,\n header,\n regionsRef,\n scrollContent = false,\n ...restProps\n }: PropsWithoutRef<PageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const [contentEl, setContentEl] = useElement<HTMLElement>();\n const isMediumOrAbove = useBreakpoint('md');\n const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n const { headerEl } = useContext(AppShellContext);\n\n const consolidatedRegionRef = useConsolidatedRef(regionsRef);\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n const renderSingleRegion = regions?.length === 1;\n\n const [minContentHeight, setMinContentHeight] = useState<number \| undefined>();\n\n useEffect(() => {\n if (consolidatedRegionRef && consolidatedRegionRef.current) {\n const refElement = consolidatedRegionRef.current;\n const regionsPaddingBottomPixels = Number.parseInt(\n window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n 10\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const headerOffset = headerEl?.offsetHeight ?? 0;\n const emptyHeight =\n document.documentElement.offsetHeight -\n (headerOffset + refElement?.offsetTop) -\n regionsPaddingBottomPixels;\n\n setMinContentHeight(emptyHeight);\n });\n\n resizeObserver.observe(refElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [consolidatedRegionRef, headerEl]);\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column',\n alignItems: 'stretch',\n gap: 2\n }}\n scrollContent={scrollContent}\n as={StyledPageLayout}\n forwardedAs={as}\n ref={ref}\n minContentHeight={minContentHeight}\n >\n <Flex\n container={{ direction: 'column', pad: [2, 2, 0] }}\n item={{ grow: 0, shrink: 0 }}\n as={StyledPageHeader}\n >\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n {header \|\| (\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n )}\n\n {banners}\n {tabs}\n </Flex>\n\n <Flex\n container\n item={{ grow: 1 }}\n as={StyledContent}\n ref={scrollContent ? setContentEl : undefined}\n >\n {renderSingleRegion && (\n <StyledRegions ref={consolidatedRegionRef} pad>\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[0] = el;\n }\n }}\n fillHeight\n >\n {regions[0]}\n </Flex>\n </StyledRegions>\n )}\n\n {!renderSingleRegion && (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2,\n pad: [0, 2, 2]\n }}\n md={{ container: { cols } }}\n as={StyledRegions}\n ref={consolidatedRegionRef}\n >\n {regions.map((colItems, i) => {\n return (\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[i] = el;\n }\n }}\n >\n {colItems}\n </Flex>\n );\n })}\n </Grid>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);\n\n return (\n <PageLayout\n {...restProps}\n tabs={\n <Tabs\n {...tabs}\n onTabClick={(id, e) => {\n setTabId(id);\n tabs.onTabClick?.(id, e);\n }}\n />\n }\n regions={[\n <Flex container={{ direction: 'column', gap: 2 }} as={TabPanel} tabId={tabId}>\n {a}\n </Flex>\n ]}\n ref={ref}\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c, d]}\n ref={ref}\n {...restProps}\n cols='repeat(4, minmax(0, 1fr))'\n />\n );\n }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n );\n }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n );\n }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n />\n );\n }\n );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n />\n );\n }\n );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n />\n );\n }\n );\n"]}

package/lib/components/Pagination/Pagination.js CHANGED Viewed

@@ -28,9 +28,9 @@ const Pagination = (props) => {
     const { start, end } = useDirection();
     return (_jsxs(Flex, { container: {
             gap: 1
-        }, "aria-label": t('pagination_page_of', [pageNumber, pageCount]), role: 'tablist', total: total, ...restProps, children: [_jsx(Flex, { container: { alignItems: 'center' }, "aria-hidden": 'true', children: t('pagination_page_of', [pageNumber, pageCount]) }, void 0), _jsxs(Flex, { container: {
+        }, "aria-label": t('pagination_page_of', [pageNumber, pageCount]), role: 'tablist', total: total, ...restProps, children: [_jsx(Flex, { container: { alignItems: 'center' }, "aria-hidden": 'true', children: t('pagination_page_of', [pageNumber, pageCount]) }), _jsxs(Flex, { container: {
                     gap: 1
-                }, role: 'group', children: [_jsx(Button, { variant: 'simple', label: t('pagination_prev'), disabled: pageNumber === 1, onClick: () => handlePageChange(pageNumber - 1), icon: true, children: _jsx(Icon, { name: `caret-${start}` }, void 0) }, void 0), _jsx(Button, { variant: 'simple', label: t('pagination_next'), disabled: pageNumber === pageCount, onClick: () => handlePageChange(pageNumber + 1), icon: true, children: _jsx(Icon, { name: `caret-${end}` }, void 0) }, void 0)] }, void 0)] }, void 0));
+                }, role: 'group', children: [_jsx(Button, { variant: 'simple', label: t('pagination_prev'), disabled: pageNumber === 1, onClick: () => handlePageChange(pageNumber - 1), icon: true, children: _jsx(Icon, { name: `caret-${start}` }) }), _jsx(Button, { variant: 'simple', label: t('pagination_next'), disabled: pageNumber === pageCount, onClick: () => handlePageChange(pageNumber + 1), icon: true, children: _jsx(Icon, { name: `caret-${end}` }) })] })] }));
 };
 Pagination.defaultProps = defaultProps;
 export default Pagination;

package/lib/components/Pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAmB5C,MAAM,YAAY,GAA6B;IAC7C,UAAU,EAAE,CAAC;IACb,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,UAAU,GAAsD,CAAC,KAAsB,EAAE,EAAE;IAC/F,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC;IAC9C,IAAI,UAAU,GAAG,CAAC;QAAE,UAAU,GAAG,CAAC,CAAC;IACnC,IAAI,UAAU,GAAG,SAAS;QAAE,UAAU,GAAG,SAAS,CAAC;IAEnD,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,YAAoB,EAAE,EAAE;QACvB,IAAI,YAAY;YAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP,gBACW,CAAC,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC5D,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,KACR,SAAS,aAEb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,YAC1D,CAAC,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,~~WAC5C~~,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAC,OAAO,aAEZ,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,CAAC,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,~~WAAI~~,~~WACzB~~,EACT,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,SAAS,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,~~WAAI~~,~~WACvB~~,~~YACJ~~,~~YACF~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,YAAY,CAAC;AAEvC,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useDirection, useI18n } from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface PaginationProps extends BaseProps, NoChildrenProp {\n /** Total number of items. /\n total: number;\n /\n Size of each page.\n * @default 10\n /\n pageSize?: number;\n /\n Current page number.\n * @default 1\n /\n pageNumber?: number;\n /* Function to handle page change. */\n onPageChange?: (pageNumber: number) => void;\n}\n\nconst defaultProps: Partial<PaginationProps> = {\n pageNumber: 1,\n pageSize: 10\n};\n\nconst Pagination: FunctionComponent<PaginationProps & ForwardProps> = (props: PaginationProps) => {\n const { total, onPageChange, ...restProps } = props;\n let { pageSize = 10, pageNumber = 1 } = props;\n\n const t = useI18n();\n\n pageSize = Math.max(1, pageSize);\n const pageCount = Math.ceil(total / pageSize);\n if (pageNumber < 1) pageNumber = 1;\n if (pageNumber > pageCount) pageNumber = pageCount;\n\n const handlePageChange = useCallback(\n (currentValue: number) => {\n if (onPageChange) onPageChange(currentValue);\n },\n [onPageChange]\n );\n\n const { start, end } = useDirection();\n\n return (\n <Flex\n container={{\n gap: 1\n }}\n aria-label={t('pagination_page_of', [pageNumber, pageCount])}\n role='tablist'\n total={total}\n {...restProps}\n >\n <Flex container={{ alignItems: 'center' }} aria-hidden='true'>\n {t('pagination_page_of', [pageNumber, pageCount])}\n </Flex>\n <Flex\n container={{\n gap: 1\n }}\n role='group'\n >\n <Button\n variant='simple'\n label={t('pagination_prev')}\n disabled={pageNumber === 1}\n onClick={() => handlePageChange(pageNumber - 1)}\n icon\n >\n <Icon name={`caret-${start}`} />\n </Button>\n <Button\n variant='simple'\n label={t('pagination_next')}\n disabled={pageNumber === pageCount}\n onClick={() => handlePageChange(pageNumber + 1)}\n icon\n >\n <Icon name={`caret-${end}`} />\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nPagination.defaultProps = defaultProps;\n\nexport default Pagination;\n"]}
1	+ {"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAmB5C,MAAM,YAAY,GAA6B;IAC7C,UAAU,EAAE,CAAC;IACb,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,UAAU,GAAsD,CAAC,KAAsB,EAAE,EAAE;IAC/F,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IACjC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC;IAC9C,IAAI,UAAU,GAAG,CAAC;QAAE,UAAU,GAAG,CAAC,CAAC;IACnC,IAAI,UAAU,GAAG,SAAS;QAAE,UAAU,GAAG,SAAS,CAAC;IAEnD,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,YAAoB,EAAE,EAAE;QACvB,IAAI,YAAY;YAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP,gBACW,CAAC,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC5D,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,KACR,SAAS,aAEb,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,YAC1D,CAAC,CAAC,oBAAoB,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,GAC5C,EACP,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAC,OAAO,aAEZ,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,CAAC,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,GAAI,GACzB,EACT,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,QAAQ,EAAE,UAAU,KAAK,SAAS,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,EAC/C,IAAI,kBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,GACvB,IACJ,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,YAAY,CAAC;AAEvC,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useDirection, useI18n } from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nexport interface PaginationProps extends BaseProps, NoChildrenProp {\n /** Total number of items. /\n total: number;\n /\n Size of each page.\n * @default 10\n /\n pageSize?: number;\n /\n Current page number.\n * @default 1\n /\n pageNumber?: number;\n /* Function to handle page change. */\n onPageChange?: (pageNumber: number) => void;\n}\n\nconst defaultProps: Partial<PaginationProps> = {\n pageNumber: 1,\n pageSize: 10\n};\n\nconst Pagination: FunctionComponent<PaginationProps & ForwardProps> = (props: PaginationProps) => {\n const { total, onPageChange, ...restProps } = props;\n let { pageSize = 10, pageNumber = 1 } = props;\n\n const t = useI18n();\n\n pageSize = Math.max(1, pageSize);\n const pageCount = Math.ceil(total / pageSize);\n if (pageNumber < 1) pageNumber = 1;\n if (pageNumber > pageCount) pageNumber = pageCount;\n\n const handlePageChange = useCallback(\n (currentValue: number) => {\n if (onPageChange) onPageChange(currentValue);\n },\n [onPageChange]\n );\n\n const { start, end } = useDirection();\n\n return (\n <Flex\n container={{\n gap: 1\n }}\n aria-label={t('pagination_page_of', [pageNumber, pageCount])}\n role='tablist'\n total={total}\n {...restProps}\n >\n <Flex container={{ alignItems: 'center' }} aria-hidden='true'>\n {t('pagination_page_of', [pageNumber, pageCount])}\n </Flex>\n <Flex\n container={{\n gap: 1\n }}\n role='group'\n >\n <Button\n variant='simple'\n label={t('pagination_prev')}\n disabled={pageNumber === 1}\n onClick={() => handlePageChange(pageNumber - 1)}\n icon\n >\n <Icon name={`caret-${start}`} />\n </Button>\n <Button\n variant='simple'\n label={t('pagination_next')}\n disabled={pageNumber === pageCount}\n onClick={() => handlePageChange(pageNumber + 1)}\n icon\n >\n <Icon name={`caret-${end}`} />\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nPagination.defaultProps = defaultProps;\n\nexport default Pagination;\n"]}

package/lib/components/Paragraph/ParagraphDisplay.js CHANGED Viewed

@@ -5,7 +5,7 @@ const StyledParagraphDisplay = styled.p `
   white-space: break-spaces;
 `;
 const ParagraphDisplay = forwardRef(({ value, ...restProps }, ref) => {
-    return (_jsx(StyledParagraphDisplay, { ref: ref, ...restProps, children: value !== undefined ? value : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0) }, void 0));
+    return (_jsx(StyledParagraphDisplay, { ref: ref, ...restProps, children: value !== undefined ? value : _jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }) }));
 });
 export default ParagraphDisplay;
 //# sourceMappingURL=ParagraphDisplay.js.map

package/lib/components/Paragraph/ParagraphDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParagraphDisplay.js","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,sBAAsB,GAAG,MAAM,CAAC,CAAC,CAAA;;CAEtC,CAAC;AAEF,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EAAE,KAAK,EAAE,GAAG,SAAS,EAA0C,EAC/D,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC5C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,8BAAkB,MAAM,~~qCAAsB~~,~~WACtD~~,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface ParagraphDisplayProps extends BaseProps {\n /** Paragraph text /\n value?: string;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLParagraphElement>;\n}\n\nconst StyledParagraphDisplay = styled.p`\n white-space: break-spaces;\n`;\n\nconst ParagraphDisplay: FunctionComponent<ParagraphDisplayProps & ForwardProps> = forwardRef(\n (\n { value, ...restProps }: PropsWithoutRef<ParagraphDisplayProps>,\n ref: ParagraphDisplayProps['ref']\n ) => {\n return (\n <StyledParagraphDisplay ref={ref} {...restProps}>\n {value !== undefined ? value : <span aria-hidden='true'>––</span>}\n </StyledParagraphDisplay>\n );\n }\n);\n\nexport default ParagraphDisplay;\n"]}
1	+ {"version":3,"file":"ParagraphDisplay.js","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAWvC,MAAM,sBAAsB,GAAG,MAAM,CAAC,CAAC,CAAA;;CAEtC,CAAC;AAEF,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EAAE,KAAK,EAAE,GAAG,SAAS,EAA0C,EAC/D,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC5C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,8BAAkB,MAAM,6BAAsB,GACtD,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface ParagraphDisplayProps extends BaseProps {\n /** Paragraph text /\n value?: string;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLParagraphElement>;\n}\n\nconst StyledParagraphDisplay = styled.p`\n white-space: break-spaces;\n`;\n\nconst ParagraphDisplay: FunctionComponent<ParagraphDisplayProps & ForwardProps> = forwardRef(\n (\n { value, ...restProps }: PropsWithoutRef<ParagraphDisplayProps>,\n ref: ParagraphDisplayProps['ref']\n ) => {\n return (\n <StyledParagraphDisplay ref={ref} {...restProps}>\n {value !== undefined ? value : <span aria-hidden='true'>––</span>}\n </StyledParagraphDisplay>\n );\n }\n);\n\nexport default ParagraphDisplay;\n"]}

package/lib/components/Phone/PhoneDisplay.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAG5E~~,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;~~AAG3E~~,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqBrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqBrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Phone/PhoneDisplay.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import parsePhoneNumber from 'libphonenumber-js';
 import Link from '../Link';
+import { formatPhone } from './utils';
 const PhoneDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    const displayValue = value ? (displayText || parsePhoneNumber(value || '')?.formatInternational() || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0));
-    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue }, void 0)) : (_jsx(Link, { ref: ref, ...restProps, href: `tel:${value}`, children: displayValue }, void 0));
+    const displayValue = value ? (displayText || formatPhone(value || '') || value) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }));
+    return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue })) : (_jsx(Link, { ref: ref, ...restProps, href: `tel:${value}`, children: displayValue }));
 });
 export default PhoneDisplay;
 //# sourceMappingURL=PhoneDisplay.js.map

package/lib/components/Phone/PhoneDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;~~AAC5E~~,OAAO,~~gBAAgB~~,MAAM,~~mBAAmB~~,CAAC;~~AAGjD~~,OAAO,~~IAAI~~,MAAM,SAAS,CAAC;~~AAgB3B~~,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,~~gBAAgB~~,CAAC,KAAK,IAAI,EAAE,CAAC,~~EAAE,mBAAmB,EAAE,~~IAAI,KAAK,~~CAC7E~~,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,~~qCAAsB~~,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,~~WACR~~,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE,YAC1E,YAAY,~~WACR~~,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\~~nimport parsePhoneNumber from 'libphonenumber-js';\~~n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nexport interface PhoneDisplayProps extends BaseProps, NoChildrenProp {\n /** Phone number, no 'tel:' scheme, '+18887342669' /\n value?: string;\n /* The text to be displayed. /\n displayText?: string;\n /\n Controls styling of the field.\n * @default \"link\"\n /\n variant?: 'link' \| 'text';\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement \| HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n (\n { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<PhoneDisplayProps>,\n ref: PhoneDisplayProps['ref']\n ) => {\n const displayValue = value ? (\n displayText \|\| ~~parsePhoneNumber~~(value \|\| '')~~?.formatInternational()~~ \|\| value\n ) : (\n <span aria-hidden='true'>––</span>\n );\n\n return variant === 'text' \|\| !value ? (\n <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n {displayValue}\n </span>\n ) : (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`tel:${value}`}>\n {displayValue}\n </Link>\n );\n }\n);\n\nexport default PhoneDisplay;\n"]}
1	+ {"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgBtC,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,SAAS,EAAsC,EAC1F,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,WAAW,CAAC,KAAK,IAAI,EAAE,CAAC,IAAI,KAAK,CACjD,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE,YAC1E,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\n\nimport { formatPhone } from './utils';\n\nexport interface PhoneDisplayProps extends BaseProps, NoChildrenProp {\n /** Phone number, no 'tel:' scheme, '+18887342669' /\n value?: string;\n /* The text to be displayed. /\n displayText?: string;\n /\n Controls styling of the field.\n * @default \"link\"\n /\n variant?: 'link' \| 'text';\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement \| HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n (\n { value, displayText, variant = 'link', ...restProps }: PropsWithoutRef<PhoneDisplayProps>,\n ref: PhoneDisplayProps['ref']\n ) => {\n const displayValue = value ? (\n displayText \|\| formatPhone(value \|\| '') \|\| value\n ) : (\n <span aria-hidden='true'>––</span>\n );\n\n return variant === 'text' \|\| !value ? (\n <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n {displayValue}\n </span>\n ) : (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`tel:${value}`}>\n {displayValue}\n </Link>\n );\n }\n);\n\nexport default PhoneDisplay;\n"]}

package/lib/components/Phone/PhoneInput.js CHANGED Viewed

@@ -72,9 +72,9 @@ const PhoneInput = forwardRef((props, ref) => {
         setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));
         onChange?.(convertToCallbackParameter(selectValue, phoneNumber));
     };
-    const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }, void 0));
-    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, children: codesOptions }, void 0)), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: phoneNumber, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled }, void 0)] }, void 0));
-    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, ref, status, required, disabled }, children: Comp }, void 0)) : (Comp);
+    const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
+    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: phoneNumber, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled })] }));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, ref, status, required, disabled }, children: Comp })) : (Comp);
 });
 export default PhoneInput;
 //# sourceMappingURL=PhoneInput.js.map