@pega/cosmos-react-core 2.0.0-dev.11.0 → 2.0.0-dev.14.0

package/lib/components/PageTemplates/CategorySubPage.js

@@ -29,8 +29,7 @@ const NavGroup = ({ item }) => {
     }, [item.title, item.items]);
     const groupLabelId = useUID();
     if (titledGroup) {
-        return (_jsxs(StyledNavGroup, Object.assign({ as: 'li' }, { children: [_jsx(StyledNavGroupHeader, Object.assign({ variant: 'h3', id: groupLabelId }, { children: item.title }), void 0),
-                _jsx(StyledNavGroupList, Object.assign({ "aria-labelledby": groupLabelId }, { children: mappedGroupedItems }), void 0)] }), void 0));
+        return (_jsxs(StyledNavGroup, Object.assign({ as: 'li' }, { children: [_jsx(StyledNavGroupHeader, Object.assign({ variant: 'h3', id: groupLabelId }, { children: item.title }), void 0), _jsx(StyledNavGroupList, Object.assign({ "aria-labelledby": groupLabelId }, { children: mappedGroupedItems }), void 0)] }), void 0));
     }
     if (anonGroup) {
         return _jsx(StyledNavGroup, { children: mappedGroupedItems }, void 0);
@@ -52,21 +51,14 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
     return (_jsx(StyledTemplate, { children: _jsxs(Flex, Object.assign({}, restProps, { ref: templateRef, as: StyledTemplateRow, container: { alignItems: 'stretch', wrap: 'nowrap' } }, { children: [_jsxs(StyledMenuColumn, { children: [_jsx(StyledSkipNavigation, Object.assign({ onClick: () => {
                                 if (articleRef.current)
                                     articleRef.current.focus();
-                            } }, { children: "Skip to page content" }), void 0),
-                        _jsxs(Flex, Object.assign({ as: StyledCategoryHeadingRow, container: { alignItems: 'center' } }, { children: [categoryIcon && (_jsx(Flex, Object.assign({ as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: categoryIcon }, void 0) }), void 0)),
-                                _jsx(Text, Object.assign({ variant: 'h1' }, { children: category }), void 0)] }), void 0),
-                        _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
+                            } }, { children: "Skip to page content" }), void 0), _jsxs(Flex, Object.assign({ as: StyledCategoryHeadingRow, container: { alignItems: 'center' } }, { children: [categoryIcon && (_jsx(Flex, Object.assign({ as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: categoryIcon }, void 0) }), void 0)), _jsx(Text, Object.assign({ variant: 'h1' }, { children: category }), void 0)] }), void 0), _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, Object.assign({ 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, Object.assign({ as: StyledArticleHeader, container: {
+                                }) }, void 0) }, void 0)] }, void 0), _jsxs(Flex, Object.assign({ 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, Object.assign({ 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 }, 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: {
                                                                 items: pageActions
                                                                     .slice(maxActions - 1)
                                                                     .map(({ id, text, onClick, ...rest }) => ({
@@ -75,12 +67,10 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
                                                                     onClick,
                                                                     ...rest
                                                                 }))
-                                                            } }, void 0),
-                                                        pageActions
+                                                            } }, void 0), 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)] }, void 0))] }, void 0))] }), void 0)), region] }, void 0))] }), void 0)] }), void 0) }, void 0));
 });
 export default CategorySubPage;
 //# sourceMappingURL=CategorySubPage.js.map

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

@@ -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\ninterface 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"]}
+{"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

@@ -72,10 +72,7 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                 rows: pageRows,
                 cols
             }
-        }, ref: ref }, { children: [_jsxs(Grid, Object.assign({ as: StyledPageHeader, md: { item: { area: 'header' } } }, { children: [path && path.length > 0 && _jsx(StyledBreadcrumbs, { path: path }, void 0),
-                    _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: icon }, void 0) }), void 0)), primary: _jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), actions: actions }, void 0)] }), void 0),
-            banners && _jsx(Grid, Object.assign({ md: { item: { area: 'banner' } } }, { children: banners }), void 0),
-            filters && Object.keys(filters).length !== 0 && (_jsx(Grid, Object.assign({ as: StyledFilterRegionLayout, container: {
+        }, ref: ref }, { children: [_jsxs(Grid, Object.assign({ as: StyledPageHeader, md: { item: { area: 'header' } } }, { children: [path && path.length > 0 && _jsx(StyledBreadcrumbs, { path: path }, void 0), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: icon }, void 0) }), void 0)), primary: _jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), actions: actions }, void 0)] }), void 0), banners && _jsx(Grid, Object.assign({ md: { item: { area: 'banner' } } }, { children: banners }), void 0), filters && Object.keys(filters).length !== 0 && (_jsx(Grid, Object.assign({ as: StyledFilterRegionLayout, container: {
                     autoRows: 'max-content',
                     pad: 2,
                     gap: 2
@@ -84,16 +81,14 @@ const DashboardPageLayout = forwardRef(({ regions, regionFullWidth, cols = `repe
                         cols: 'repeat(auto-fit, minmax(min(20ch, 100%), 1fr))'
                     },
                     item: { area: 'filter' }
-                } }, { children: filters }), void 0)),
-            regions.map((colItems, i) => {
+                } }, { children: filters }), void 0)), regions.map((colItems, i) => {
                 const key = `${i}`;
                 return (_jsx(Grid, Object.assign({ container: {
                         cols: 'minmax(0, 1fr)',
                         alignItems: 'start',
                         gap: 2
                     }, md: { item: { area: `col-${i + 1}` } } }, { children: colItems }), key));
-            }),
-            regionFullWidth.map((colItems, i) => {
+            }), regionFullWidth.map((colItems, i) => {
                 const key = `${i}`;
                 return (_jsx(Grid, Object.assign({ container: {
                         cols: 'minmax(0, 1fr)',

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

@@ -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 from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\n\nimport {\n  PageTemplateProps,\n  PageLayoutProps,\n  StyledPageLayout,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  StyledPageIcon\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  filters?: ReactNode[];\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n  filters?: ReactNode[];\n  filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n  regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegionLayout = styled.div``;\n\nStyledFilterRegionLayout.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      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 (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    }, [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={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 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 && <StyledBreadcrumbs 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={StyledFilterRegionLayout}\n            container={{\n              autoRows: 'max-content',\n              pad: 2,\n              gap: 2\n            }}\n            md={{\n              container: {\n                cols: '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            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: `col-${i + 1}` } }}\n              key={key}\n            >\n              {colItems}\n            </Grid>\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              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, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <DashboardPageLayout\n        {...restProps}\n        cols='1fr 1fr'\n        filters={filters}\n        regions={[a, b]}\n        regionFullWidth={[c]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default DashboardPage;\n"]}
+{"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 from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { ForwardProps } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\n\nimport {\n  PageTemplateProps,\n  PageLayoutProps,\n  StyledPageLayout,\n  StyledBreadcrumbs,\n  StyledPageHeader,\n  StyledPageIcon\n} from './PageTemplates';\n\nexport interface DashboardPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  filters?: ReactNode[];\n}\n\nexport interface DashboardPageLayoutProps extends PageLayoutProps {\n  filters?: ReactNode[];\n  filterPosition?: 'block-start' | 'inline-start' | 'inline-end';\n  regionFullWidth: ReactNode[];\n}\n\nexport const StyledFilterRegionLayout = styled.div``;\n\nStyledFilterRegionLayout.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      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 (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    }, [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={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 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 && <StyledBreadcrumbs 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={StyledFilterRegionLayout}\n            container={{\n              autoRows: 'max-content',\n              pad: 2,\n              gap: 2\n            }}\n            md={{\n              container: {\n                cols: '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            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: `col-${i + 1}` } }}\n              key={key}\n            >\n              {colItems}\n            </Grid>\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              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, ...restProps }: PropsWithoutRef<DashboardPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <DashboardPageLayout\n        {...restProps}\n        cols='1fr 1fr'\n        filters={filters}\n        regions={[a, b]}\n        regionFullWidth={[c]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default DashboardPage;\n"]}

package/lib/components/PageTemplates/PageTemplates.d.ts

@@ -57,10 +57,12 @@ export interface NarrowWideNarrowPageProps extends PageTemplateProps {
 }
 export interface PageLayoutProps extends PageTemplateProps {
     regions: ReactNode[];
+    regionsGridRef?: Ref<HTMLDivElement>;
     cols?: string;
 }
 export declare const StyledPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPageHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPageIcon: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledBreadcrumbs: typeof Breadcrumbs;
 export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;

package/lib/components/PageTemplates/PageTemplates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EAEV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM9E,OAAa,EAAY,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpD,OAAO,WAAW,EAAE,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,IAAI,EAAE,SAAS,CAAC;IAChB,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB;IAClE,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,yGAM5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,iKAgBzB,CAAC;AAIH,eAAO,MAAM,iBAAiB,EAAE,OAAO,WAIrC,CAAC;AAsGH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAiCxE,CAAC;AACF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAI9E,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAI9E,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAIlF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAOhF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAIhF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAIhF,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAQtF,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAQtF,CAAC;AAEJ,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAQ1F,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -20,11 +20,12 @@ export const StyledPageLayout = styled.div(({ theme }) => css `
 StyledPageLayout.defaultProps = defaultThemeProp;
 export const StyledPageHeader = styled.header(({ theme }) => {
     return css `
-    min-height: ${theme.base.sizes['touch-mouse']};
+    min-height: ${theme.base['hit-area']['mouse-min']};
     min-width: 0;
   `;
 });
 StyledPageHeader.defaultProps = defaultThemeProp;
+export const StyledBannerRegion = styled.div ``;
 export const StyledPageIcon = styled(Flex)(({ theme }) => {
     const bgColor = theme.base.palette['brand-primary'];
     const color = tryCatch(() => readableColor(bgColor));
@@ -49,9 +50,7 @@ export const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => {
   `;
 });
 StyledBreadcrumbs.defaultProps = defaultThemeProp;
-const PageLayout = forwardRef(({ regions, cols = `repeat(${regions.length}, minmax(0, 1fr))`, title, icon, path, actions, banners, as, ...restProps }, ref) => {
-    const headerArea = `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;
-    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;
+const PageLayout = forwardRef(({ regions, cols = `repeat(${regions.length}, minmax(0, 1fr))`, title, icon, path, actions, banners, as, regionsGridRef, ...restProps }, ref) => {
     const regionArea = `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(' ')}'`;
     const isMediumOrAbove = useBreakpoint('md');
     const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;
@@ -61,43 +60,34 @@ const PageLayout = forwardRef(({ regions, cols = `repeat(${regions.length}, minm
     });
     useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);
     return (_jsxs(Grid, Object.assign({}, restProps, { as: StyledPageLayout, forwardedAs: as, container: {
-            autoRows: 'max-content',
-            cols: '1fr',
             gap: 2
         }, md: {
             container: {
-                areas: banners
-                    ? `${headerArea}\n${bannerArea}\n${regionArea}`
-                    : `${headerArea}\n${regionArea}`,
-                rows: banners ? 'auto auto 1fr' : 'auto 1fr',
-                cols
+                areas: banners ? `"header"\n"banner"\n"regions"` : `"header"\n"regions"`
             }
-        }, ref: ref }, { children: [_jsxs(Grid, Object.assign({ as: StyledPageHeader, md: { item: { area: 'header' } } }, { children: [path && path.length > 0 && _jsx(StyledBreadcrumbs, { path: path }, void 0),
-                    _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: icon }, void 0) }), void 0)), primary: _jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), actions: actions }, void 0)] }), void 0),
-            banners && _jsx(Grid, Object.assign({ md: { item: { area: 'banner' } } }, { children: banners }), void 0),
-            regions.map((colItems, i) => {
-                return (_jsx(Grid, Object.assign({ ref: (el) => {
-                        var _a;
-                        if (el)
-                            ((_a = scrollStickOptions.current) === null || _a === void 0 ? void 0 : _a.elements).push(el);
-                    }, container: {
-                        cols: 'minmax(0, 1fr)',
-                        alignItems: 'start',
-                        alignContent: 'start',
-                        gap: 2
-                    }, md: { item: { area: `col-${i + 1}`, alignSelf: 'start' } } }, { children: colItems }), i));
-            })] }), void 0));
+        }, ref: ref }, { children: [_jsxs(Grid, Object.assign({ as: StyledPageHeader, md: { item: { area: 'header' } } }, { children: [path && path.length > 0 && _jsx(StyledBreadcrumbs, { path: path }, void 0), _jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: icon }, void 0) }), void 0)), primary: _jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), actions: actions }, void 0)] }), void 0), banners && (_jsx(Grid, Object.assign({ as: StyledBannerRegion, md: { item: { area: 'banner' } } }, { children: banners }), void 0)), _jsx(Grid, Object.assign({ ref: regionsGridRef, container: {
+                    autoRows: 'max-content',
+                    cols: '1fr',
+                    gap: 2
+                }, md: { container: { areas: regionArea, rows: '1fr', cols }, item: { area: 'regions' } } }, { children: regions.map((colItems, i) => {
+                    return (_jsx(Grid, Object.assign({ ref: (el) => {
+                            if (el)
+                                (scrollStickOptions.current?.elements).push(el);
+                        }, container: {
+                            cols: 'minmax(0, 1fr)',
+                            alignItems: 'start',
+                            alignContent: 'start',
+                            gap: 2
+                        }, md: { item: { area: `col-${i + 1}`, alignSelf: 'start' } } }, { children: colItems }), i));
+                }) }), void 0)] }), void 0));
 });
 export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
-    var _a, _b;
-    const [tabId, setTabId] = useState((_a = tabs.currentTabId) !== null && _a !== void 0 ? _a : (_b = tabs.tabs[0]) === null || _b === void 0 ? void 0 : _b.id);
+    const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);
     return (_jsx(PageLayout, Object.assign({ regions: [
             _jsxs(_Fragment, { children: [_jsx(Tabs, Object.assign({}, tabs, { onTabClick: (id, e) => {
-                            var _a;
                             setTabId(id);
-                            (_a = tabs.onTabClick) === null || _a === void 0 ? void 0 : _a.call(tabs, id, e);
-                        } }), void 0),
-                    _jsx(Grid, Object.assign({ as: TabPanel, tabId: tabId, container: {
+                            tabs.onTabClick?.(id, e);
+                        } }), void 0), _jsx(Grid, Object.assign({ as: TabPanel, tabId: tabId, container: {
                             alignItems: 'start',
                             alignContent: 'start',
                             gap: 2

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

@@ -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} 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, { StyledIcon } from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useScrollStick } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps } from '../Breadcrumbs';\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  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  regions: ReactNode[];\n  cols?: string;\n}\n\nexport const StyledPageLayout = styled.div(\n  ({ theme }) => css`\n    height: 100%;\n    padding: calc(2 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['app-background']};\n  `\n);\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n  return css`\n    min-height: ${theme.base.sizes['touch-mouse']};\n    min-width: 0;\n  `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\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    /* Need to override size set in SummaryItem */\n    ${StyledIcon} {\n      height: 1.125rem;\n      width: 1.125rem;\n    }\n  `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledBreadcrumbs: typeof Breadcrumbs = styled(Breadcrumbs)(({ theme }) => {\n  return css`\n    margin-bottom: ${theme.base.spacing};\n  `;\n});\n\nStyledBreadcrumbs.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      as,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const headerArea = `'${Array.from({ length: regions.length }, () => 'header').join(' ')}'`;\n    const bannerArea = `'${Array.from({ length: regions.length }, () => 'banner').join(' ')}'`;\n    const regionArea = `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n      ' '\n    )}'`;\n\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n      elements: [],\n      offset: 16\n    });\n\n    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          autoRows: 'max-content',\n          cols: '1fr',\n          gap: 2\n        }}\n        md={{\n          container: {\n            areas: banners\n              ? `${headerArea}\\n${bannerArea}\\n${regionArea}`\n              : `${headerArea}\\n${regionArea}`,\n            rows: banners ? 'auto auto 1fr' : 'auto 1fr',\n            cols\n          }\n        }}\n        ref={ref}\n      >\n        <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n          {path && path.length > 0 && <StyledBreadcrumbs 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        {regions.map((colItems: ReactNode, i: number) => {\n          return (\n            <Grid\n              ref={(el: HTMLDivElement) => {\n                if (el) (scrollStickOptions.current?.elements).push(el);\n              }}\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                alignContent: 'start',\n                gap: 2\n              }}\n              md={{ item: { area: `col-${i + 1}`, alignSelf: 'start' } }}\n              // eslint-disable-next-line react/no-array-index-key\n              key={i}\n            >\n              {colItems}\n            </Grid>\n          );\n        })}\n      </Grid>\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        regions={[\n          <>\n            <Tabs\n              {...tabs}\n              onTabClick={(id, e) => {\n                setTabId(id);\n                tabs.onTabClick?.(id, e);\n              }}\n            />\n            <Grid\n              as={TabPanel}\n              tabId={tabId}\n              container={{\n                alignItems: 'start',\n                alignContent: 'start',\n                gap: 2\n              }}\n            >\n              {a}\n            </Grid>\n          </>\n        ]}\n        ref={ref}\n        {...restProps}\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} />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b, c]} ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c, d]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} cols='2fr 1fr' ref={ref} {...restProps} />;\n  }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} cols='1fr 2fr' ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c]} cols='2fr 2fr 1fr' ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c]} cols='1fr 2fr 2fr' ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c]} cols='1fr 3fr 1fr' ref={ref} {...restProps} />;\n    }\n  );\n"]}
+{"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} 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, { StyledIcon } from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useScrollStick } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps } from '../Breadcrumbs';\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  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  regions: ReactNode[];\n  regionsGridRef?: Ref<HTMLDivElement>;\n  cols?: string;\n}\n\nexport const StyledPageLayout = styled.div(\n  ({ theme }) => css`\n    height: 100%;\n    padding: calc(2 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['app-background']};\n  `\n);\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n  return css`\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    min-width: 0;\n  `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBannerRegion = styled.div``;\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    /* Need to override size set in SummaryItem */\n    ${StyledIcon} {\n      height: 1.125rem;\n      width: 1.125rem;\n    }\n  `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledBreadcrumbs: typeof Breadcrumbs = styled(Breadcrumbs)(({ theme }) => {\n  return css`\n    margin-bottom: ${theme.base.spacing};\n  `;\n});\n\nStyledBreadcrumbs.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      as,\n      regionsGridRef,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const regionArea = `'${Array.from({ length: regions.length }, (_, i) => `col-${i + 1}`).join(\n      ' '\n    )}'`;\n\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n      elements: [],\n      offset: 16\n    });\n\n    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        container={{\n          gap: 2\n        }}\n        md={{\n          container: {\n            areas: banners ? `\"header\"\\n\"banner\"\\n\"regions\"` : `\"header\"\\n\"regions\"`\n          }\n        }}\n        ref={ref}\n      >\n        <Grid as={StyledPageHeader} md={{ item: { area: 'header' } }}>\n          {path && path.length > 0 && <StyledBreadcrumbs 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 && (\n          <Grid as={StyledBannerRegion} md={{ item: { area: 'banner' } }}>\n            {banners}\n          </Grid>\n        )}\n        <Grid\n          ref={regionsGridRef}\n          container={{\n            autoRows: 'max-content',\n            cols: '1fr',\n            gap: 2\n          }}\n          md={{ container: { areas: regionArea, rows: '1fr', cols }, item: { area: 'regions' } }}\n        >\n          {regions.map((colItems: ReactNode, i: number) => {\n            return (\n              <Grid\n                ref={(el: HTMLDivElement) => {\n                  if (el) (scrollStickOptions.current?.elements).push(el);\n                }}\n                container={{\n                  cols: 'minmax(0, 1fr)',\n                  alignItems: 'start',\n                  alignContent: 'start',\n                  gap: 2\n                }}\n                md={{ item: { area: `col-${i + 1}`, alignSelf: 'start' } }}\n                // eslint-disable-next-line react/no-array-index-key\n                key={i}\n              >\n                {colItems}\n              </Grid>\n            );\n          })}\n        </Grid>\n      </Grid>\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        regions={[\n          <>\n            <Tabs\n              {...tabs}\n              onTabClick={(id, e) => {\n                setTabId(id);\n                tabs.onTabClick?.(id, e);\n              }}\n            />\n            <Grid\n              as={TabPanel}\n              tabId={tabId}\n              container={{\n                alignItems: 'start',\n                alignContent: 'start',\n                gap: 2\n              }}\n            >\n              {a}\n            </Grid>\n          </>\n        ]}\n        ref={ref}\n        {...restProps}\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} />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b, c]} ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c, d]} ref={ref} {...restProps} />;\n  }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} cols='2fr 1fr' ref={ref} {...restProps} />;\n  }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a, b]} cols='1fr 2fr' ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c]} cols='2fr 2fr 1fr' ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c]} cols='1fr 2fr 2fr' ref={ref} {...restProps} />;\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 <PageLayout regions={[a, b, c]} cols='1fr 3fr 1fr' ref={ref} {...restProps} />;\n    }\n  );\n"]}

package/lib/components/Pagination/Pagination.js

@@ -25,11 +25,9 @@ const Pagination = (props) => {
     const { start, end } = useDirection();
     return (_jsxs(Flex, Object.assign({ container: {
             gap: 1
-        }, "aria-label": t('pagination_page_of', pageNumber, pageCount).toString(), role: 'tablist', total: total }, restProps, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, "aria-hidden": 'true' }, { children: t('pagination_page_of', pageNumber, pageCount) }), void 0),
-            _jsxs(Flex, Object.assign({ container: {
+        }, "aria-label": t('pagination_page_of', pageNumber, pageCount).toString(), role: 'tablist', total: total }, restProps, { children: [_jsx(Flex, Object.assign({ container: { alignItems: 'center' }, "aria-hidden": 'true' }, { children: t('pagination_page_of', pageNumber, pageCount) }), void 0), _jsxs(Flex, Object.assign({ container: {
                     gap: 1
-                }, role: 'group' }, { children: [_jsx(Button, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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, Object.assign({ 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));
 };
 Pagination.defaultProps = defaultProps;
 export default Pagination;

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

@@ -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,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAmB3B,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,kBACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP,gBACW,CAAC,CAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,EACrE,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,IACR,SAAS,eAEb,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,gBAC1D,CAAC,CAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,CAAC,YAC1C;YACP,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAC,OAAO,iBAEZ,KAAC,MAAM,kBACL,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,sBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,YACzB;oBACT,KAAC,MAAM,kBACL,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,sBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,WAAI,YACvB,aACJ,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,YAAY,CAAC;AAEvC,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n } from '../../hooks';\nimport Icon from '../Icon';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nexport interface PaginationProps extends BaseProps {\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).toString()}\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"]}
+{"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,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAmB3B,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,kBACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;SACP,gBACW,CAAC,CAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,EACrE,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,IACR,SAAS,eAEb,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,gBAC1D,CAAC,CAAC,oBAAoB,EAAE,UAAU,EAAE,SAAS,CAAC,YAC1C,EACP,MAAC,IAAI,kBACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAC,OAAO,iBAEZ,KAAC,MAAM,kBACL,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,sBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,KAAK,EAAE,WAAI,YACzB,EACT,KAAC,MAAM,kBACL,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,sBAEJ,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,WAAI,YACvB,aACJ,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,YAAY,CAAC;AAEvC,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, useCallback } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useDirection, useI18n } from '../../hooks';\nimport Icon from '../Icon';\nimport Button from '../Button';\nimport Flex from '../Flex';\n\nexport interface PaginationProps extends BaseProps {\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).toString()}\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/Phone/PhoneDisplay.js

@@ -3,8 +3,7 @@ import { forwardRef } from 'react';
 import parsePhoneNumber from 'libphonenumber-js';
 import Link from '../Link';
 const PhoneDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
-    var _a;
-    const displayValue = value ? (displayText || ((_a = parsePhoneNumber(value || '')) === null || _a === void 0 ? void 0 : _a.formatInternational()) || value) : (_jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0));
+    const displayValue = value ? (displayText || parsePhoneNumber(value || '')?.formatInternational() || value) : (_jsx("span", Object.assign({ "aria-hidden": 'true' }, { children: "\u2013\u2013" }), void 0));
     return variant === 'text' || !value ? (_jsx("span", Object.assign({ ref: ref }, restProps, { children: displayValue }), void 0)) : (_jsx(Link, Object.assign({ ref: ref }, restProps, { href: `tel:${value}` }, { children: displayValue }), void 0));
 });
 export default PhoneDisplay;

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

@@ -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,KAAI,MAAA,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,0CAAE,mBAAmB,EAAE,CAAA,IAAI,KAAK,CAC7E,CAAC,CAAC,CAAC,CACF,4CAAkB,MAAM,0CAAsB,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,6BAAM,GAAG,EAAE,GAA2B,IAAM,SAAS,cAClD,YAAY,YACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,kBAAC,GAAG,EAAE,GAA6B,IAAM,SAAS,IAAE,IAAI,EAAE,OAAO,KAAK,EAAE,gBAC1E,YAAY,YACR,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 { BaseProps, ForwardProps } from '../../types';\nimport Link from '../Link';\n\nexport interface PhoneDisplayProps extends BaseProps {\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'>&ndash;&ndash;</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"]}
+{"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,4CAAkB,MAAM,0CAAsB,CAC/C,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,6BAAM,GAAG,EAAE,GAA2B,IAAM,SAAS,cAClD,YAAY,YACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,kBAAC,GAAG,EAAE,GAA6B,IAAM,SAAS,IAAE,IAAI,EAAE,OAAO,KAAK,EAAE,gBAC1E,YAAY,YACR,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 { BaseProps, ForwardProps } from '../../types';\nimport Link from '../Link';\n\nexport interface PhoneDisplayProps extends BaseProps {\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'>&ndash;&ndash;</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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAgBrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS;IAClE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA2HjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAerE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS;IAClE;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAgIjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Phone/PhoneInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { useAfterInitialEffect, useDirection, useFocusWithin } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
@@ -9,7 +10,6 @@ import Select, { Option } from '../Select';
 import Input from '../Input';
 import { StyledSelect } from '../Select/Select';
 import Flex from '../Flex';
-import { useDirection, useFocusWithin } from '../../hooks';
 import callingCodes from './callingCodes';
 import { calculateCursorPosition, convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
 const StyledPhoneInput = styled.div(() => {
@@ -35,21 +35,24 @@ const PhoneInput = forwardRef((props, ref) => {
     const phoneNumberParts = useMemo(() => {
         return value ? getPhoneNumberParts(value, callingCodesList) : undefined;
     }, [callingCodesList, value]);
-    const [countryCode, setCountryCode] = useState(phoneNumberParts === null || phoneNumberParts === void 0 ? void 0 : phoneNumberParts[0]);
+    const [countryCode, setCountryCode] = useState(phoneNumberParts?.[0]);
     const [phoneNumber, setPhoneNumber] = useState(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');
+    useAfterInitialEffect(() => {
+        setCountryCode(phoneNumberParts?.[0]);
+        setPhoneNumber(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');
+    }, [phoneNumberParts]);
     const [cursor, setCursor] = useState(undefined);
     const inputRef = useRef(null);
     useEffect(() => {
-        var _a;
         if (cursor !== undefined)
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursor, cursor);
+            inputRef.current?.setSelectionRange(cursor, cursor);
     }, [cursor, inputRef.current]);
     const onFocusChange = (focused) => {
         const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);
         if (focused)
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(callbackParam);
+            onFocus?.(callbackParam);
         else
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParam);
+            onBlur?.(callbackParam);
     };
     const containerRef = useRef(null);
     useFocusWithin([containerRef], onFocusChange);
@@ -61,17 +64,16 @@ const PhoneInput = forwardRef((props, ref) => {
         if (countryCode) {
             setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(countryCode, formatted));
+        onChange?.(convertToCallbackParameter(countryCode, formatted));
     };
     const onSelectChange = (e) => {
         const selectValue = e.target.value;
         setCountryCode(selectValue);
         setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(selectValue, phoneNumber));
+        onChange?.(convertToCallbackParameter(selectValue, phoneNumber));
     };
     const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, Object.assign({ value: code }, { children: code }), code))) }, void 0));
-    const Comp = (_jsxs(StyledPhoneInput, Object.assign({ as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled }, { children: [showCountryCode && (_jsx(Select, Object.assign({ value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled }, { children: codesOptions }), void 0)),
-            _jsx(Input, Object.assign({}, restProps, { inputMode: 'tel', ref: inputRef, value: phoneNumber, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled }), void 0)] }), void 0));
+    const Comp = (_jsxs(StyledPhoneInput, Object.assign({ as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled }, { children: [showCountryCode && (_jsx(Select, Object.assign({ value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled }, { children: codesOptions }), void 0)), _jsx(Input, Object.assign({}, 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, Object.assign({ as: 'fieldset', labelAs: 'legend' }, { label, labelHidden, id, info, ref, status, required, disabled }, { children: Comp }), void 0)) : (Comp);
 });
 export default PhoneInput;