@pega/cosmos-react-core 3.0.0-dev.2.1 → 3.0.0-dev.21.1

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":"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"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useContext, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
 import { defaultThemeProp } from '../../theme';
@@ -10,7 +10,7 @@ import Icon from '../Icon';
 import { tryCatch } from '../../utils';
 import Tabs, { TabPanel } from '../Tabs';
 import Flex from '../Flex';
-import { useBreakpoint, useElement, useScrollStick } from '../../hooks';
+import { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } from '../../hooks';
 import Breadcrumbs, { StyledBreadcrumbs } from '../Breadcrumbs';
 import AppShellContext from '../AppShell/AppShellContext';
 import { StyledBanner } from '../Banner/Banner';
@@ -42,9 +42,18 @@ export const StyledPageHeader = styled.header(({ theme }) => {
 StyledPageHeader.defaultProps = defaultThemeProp;
 export const StyledRegion = styled.div ``;
 StyledRegion.defaultProps = defaultThemeProp;
-export const StyledRegions = styled.div `
-  flex-grow: 1;
-`;
+export const StyledRegions = styled.div(({ pad, theme }) => {
+    const spacing = theme.base.spacing;
+    return css `
+    flex-grow: 1;
+    max-width: 100%;
+
+    ${pad &&
+        css `
+      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});
+    `}
+  `;
+});
 StyledRegions.defaultProps = defaultThemeProp;
 export const StyledContent = styled.div ``;
 StyledContent.defaultProps = defaultThemeProp;
@@ -55,13 +64,16 @@ export const StyledScrollableTabPanel = styled(TabPanel)(() => {
   `;
 });
 StyledScrollableTabPanel.defaultProps = defaultThemeProp;
-export const StyledPageLayout = styled.div(({ theme, scrollContent }) => css `
+export const StyledPageLayout = styled.div(({ theme, scrollContent, minContentHeight }) => {
+    const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;
+    return css `
+    --content-height-in-view: ${emptyContentHeight};
     position: relative;
     min-height: inherit;
     background-color: ${theme.base.palette['app-background']};
 
     ${scrollContent &&
-    css `
+        css `
       ${StyledContent} {
         position: relative;
       }
@@ -73,72 +85,102 @@ export const StyledPageLayout = styled.div(({ theme, scrollContent }) => css `
         overflow: auto;
       }
     `}
-  `);
+  `;
+});
 StyledPageLayout.defaultProps = defaultThemeProp;
 const PageLayout = forwardRef(({ regions, cols = `repeat(${regions.length}, minmax(0, 1fr))`, title, icon, path, actions, banners, tabs, as, header, regionsRef, scrollContent = false, ...restProps }, ref) => {
     const [contentEl, setContentEl] = useElement();
     const isMediumOrAbove = useBreakpoint('md');
     const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;
     const { headerEl } = useContext(AppShellContext);
+    const consolidatedRegionRef = useConsolidatedRef(regionsRef);
     const scrollStickOptions = useRef({
         elements: []
     });
     scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;
     scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;
     useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);
+    const renderSingleRegion = regions?.length === 1;
+    const [minContentHeight, setMinContentHeight] = useState();
+    useEffect(() => {
+        if (consolidatedRegionRef && consolidatedRegionRef.current) {
+            const refElement = consolidatedRegionRef.current;
+            const regionsPaddingBottomPixels = Number.parseInt(window.getComputedStyle(refElement).getPropertyValue('padding-bottom'), 10);
+            const resizeObserver = new ResizeObserver(() => {
+                const headerOffset = headerEl?.offsetHeight ?? 0;
+                const emptyHeight = document.documentElement.offsetHeight -
+                    (headerOffset + refElement?.offsetTop) -
+                    regionsPaddingBottomPixels;
+                setMinContentHeight(emptyHeight);
+            });
+            resizeObserver.observe(refElement);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }, [consolidatedRegionRef, headerEl]);
     return (_jsxs(Flex, { ...restProps, container: {
             direction: 'column',
+            alignItems: 'stretch',
             gap: 2
-        }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: ref, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0] }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }, void 0), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }, void 0) }, void 0)), primary: _jsx(Text, { variant: 'h1', children: title }, void 0), actions: actions }, void 0)), banners, tabs] }, void 0), _jsx(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: _jsx(Grid, { container: {
-                        cols: 'minmax(0, 1fr)',
-                        alignItems: 'start',
-                        gap: 2,
-                        pad: [0, 2, 2]
-                    }, md: { container: { cols } }, as: StyledRegions, ref: regionsRef, children: regions.map((colItems, i) => {
-                        return (_jsx(Flex, { container: {
+        }, scrollContent: scrollContent, as: StyledPageLayout, forwardedAs: as, ref: ref, minContentHeight: minContentHeight, children: [_jsxs(Flex, { container: { direction: 'column', pad: [2, 2, 0] }, item: { grow: 0, shrink: 0 }, as: StyledPageHeader, children: [path && path.length > 0 && _jsx(Breadcrumbs, { path: path }), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }) })), primary: _jsx(Text, { variant: 'h1', children: title }), actions: actions })), banners, tabs] }), _jsxs(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: [renderSingleRegion && (_jsx(StyledRegions, { ref: consolidatedRegionRef, pad: true, children: _jsx(Flex, { container: {
                                 direction: 'column',
                                 gap: 2
                             }, as: StyledRegion, ref: (el) => {
                                 if (el) {
-                                    scrollStickOptions.current.elements[i] = el;
+                                    scrollStickOptions.current.elements[0] = el;
                                 }
-                            }, children: colItems }, i));
-                    }) }, void 0) }, void 0)] }, void 0));
+                            }, children: regions[0] }) })), !renderSingleRegion && (_jsx(Grid, { container: {
+                            cols: 'minmax(0, 1fr)',
+                            alignItems: 'start',
+                            gap: 2,
+                            pad: [0, 2, 2]
+                        }, md: { container: { cols } }, as: StyledRegions, ref: consolidatedRegionRef, children: regions.map((colItems, i) => {
+                            return (_jsx(Flex, { container: {
+                                    direction: 'column',
+                                    gap: 2
+                                }, as: StyledRegion, ref: (el) => {
+                                    if (el) {
+                                        scrollStickOptions.current.elements[i] = el;
+                                    }
+                                }, children: colItems }, i));
+                        }) }))] })] }));
 });
-export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
-    const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);
+export const TabbedPage = forwardRef(({ tabs, ...restProps }, ref) => {
+    const [tabId, setTabId] = useState(tabs.defaultTabId || tabs.tabs[0]?.id);
+    const tabPanels = tabs.tabs.map(tab => {
+        return (_jsx(Flex, { container: { direction: 'column', gap: 2 }, as: TabPanel, tabId: tab.id, currentTabId: tabId, children: tab.content }, tab.id));
+    });
     return (_jsx(PageLayout, { ...restProps, tabs: _jsx(Tabs, { ...tabs, onTabClick: (id, e) => {
                 setTabId(id);
                 tabs.onTabClick?.(id, e);
-            } }, void 0), regions: [
-            _jsx(Flex, { container: { direction: 'column', gap: 2 }, as: TabPanel, tabId: tabId, children: a }, void 0)
-        ], ref: ref }, void 0));
+            }, currentTabId: tabId }), regions: [_jsx(_Fragment, { children: tabPanels })], ref: ref }));
 });
 export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
-    return _jsx(PageLayout, { regions: [a], ref: ref, ...restProps, cols: 'minmax(0, 1fr)' }, void 0);
+    return _jsx(PageLayout, { regions: [a], ref: ref, ...restProps, cols: 'minmax(0, 1fr)' });
 });
 export const TwoColumnPage = forwardRef(({ a, b, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 1fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 1fr))' }));
 });
 export const ThreeColumnPage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(3, minmax(0, 1fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(3, minmax(0, 1fr))' }));
 });
 export const FourColumnPage = forwardRef(({ a, b, c, d, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c, d], ref: ref, ...restProps, cols: 'repeat(4, minmax(0, 1fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c, d], ref: ref, ...restProps, cols: 'repeat(4, minmax(0, 1fr))' }));
 });
 export const WideNarrowPage = forwardRef(({ a, b, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 2fr) minmax(0, 1fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 2fr) minmax(0, 1fr)' }));
 });
 export const NarrowWidePage = forwardRef(({ a, b, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 2fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 2fr)' }));
 });
 export const WideWideNarrowPage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 2fr)) minmax(0, 1fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'repeat(2, minmax(0, 2fr)) minmax(0, 1fr)' }));
 });
 export const NarrowWideWidePage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) repeat(2, minmax(0, 2fr))' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) repeat(2, minmax(0, 2fr))' }));
 });
 export const NarrowWideNarrowPage = forwardRef(({ a, b, c, ...restProps }, ref) => {
-    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)' }, void 0));
+    return (_jsx(PageLayout, { regions: [a, b, c], ref: ref, ...restProps, cols: 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)' }));
 });
 //# sourceMappingURL=PageTemplates.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAKR,MAAM,EAEN,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,IAAI,EAAE,EAAE,QAAQ,EAAa,MAAM,SAAS,CAAC;AACpD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,WAAW,EAAE,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,eAAe,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA2E1C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACrD,OAAO,GAAG,CAAA;uBACW,KAAK,CAAC,IAAI,CAAC,OAAO;sBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;kBACtB,OAAO;aACZ,KAAK;gCACc,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;MACN,iBAAiB;0BACG,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGtC,YAAY;MACZ,UAAU;qCACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACzC,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEtC,CAAC;AACF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAC1C,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,wBAAwB,GAAoB,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE;IAC7E,OAAO,GAAG,CAAA;;;GAGT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;wBAGX,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;MAEtD,aAAa;IACf,GAAG,CAAA;QACC,aAAa;;;;QAIb,aAAa;;;;;;KAMhB;GACF,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CACE,EACE,OAAO,EACP,IAAI,GAAG,UAAU,OAAO,CAAC,MAAM,mBAAmB,EAClD,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,UAAU,EACV,aAAa,GAAG,KAAK,EACrB,GAAG,SAAS,EACqB,EACnC,GAA2B,EAC3B,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,eAAe,CAAC;IACnE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,kBAAkB,GAAG,MAAM,CAAmD;QAClF,QAAQ,EAAE,EAAE;KACb,CAAC,CAAC;IAEH,kBAAkB,CAAC,OAAO,CAAC,eAAe,GAAG,aAAa,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAChG,kBAAkB,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,QAAQ,EAAE,YAAY,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;IAEvE,cAAc,CAAC,oBAAoB,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE9E,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,EACD,aAAa,EAAE,aAAa,EAC5B,EAAE,EAAE,gBAAgB,EACpB,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,aAER,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAClD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC5B,EAAE,EAAE,gBAAgB,aAEnB,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,WAAW,IAAC,IAAI,EAAK,IAAI,WAAI,EAEzD,MAAM,IAAI,CACT,KAAC,WAAW,IACV,MAAM,EACJ,IAAI,IAAI,CACN,KAAC,cAAc,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,WAAI,WACL,CAClB,EAEH,OAAO,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,EAC1C,OAAO,EAAE,OAAO,WAChB,CACH,EAEA,OAAO,EACP,IAAI,YACA,EAEP,KAAC,IAAI,IACH,SAAS,QACT,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,aAAa,EACjB,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,YAE7C,KAAC,IAAI,IACH,SAAS,EAAE;wBACT,IAAI,EAAE,gBAAgB;wBACtB,UAAU,EAAE,OAAO;wBACnB,GAAG,EAAE,CAAC;wBACN,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;qBACf,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAC3B,EAAE,EAAE,aAAa,EACjB,GAAG,EAAE,UAAU,YAEd,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE;wBAC3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;gCACT,SAAS,EAAE,QAAQ;gCACnB,GAAG,EAAE,CAAC;6BACP,EACD,EAAE,EAAE,YAAY,EAGhB,GAAG,EAAE,CAAC,EAAyB,EAAE,EAAE;gCACjC,IAAI,EAAE,EAAE;oCACN,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;iCAC7C;4BACH,CAAC,YAEA,QAAQ,IAPJ,CAAC,CAQD,CACR,CAAC;oBACJ,CAAC,CAAC,WACG,WACF,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAsD,UAAU,CACrF,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,SAAS,EAAoC,EAAE,GAAwB,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE1E,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,IAAI,EACF,KAAC,IAAI,OACC,IAAI,EACR,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACpB,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC3B,CAAC,WACD,EAEJ,OAAO,EAAE;YACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YACzE,CAAC,WACG;SACR,EACD,GAAG,EAAE,GAAG,WACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAAE,GAAwB,EAAE,EAAE;IACrF,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,gBAAgB,WAAG,CAAC;AACrF,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAyD,UAAU,CAC3F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAuC,EAAE,GAAwB,EAAE,EAAE;IACxF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,2BAA2B,WAAG,CAC1F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2D,UAAU,CAC/F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAyC,EAAE,GAAwB,EAAE,EAAE;IAC7F,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,2BAA2B,WAAG,CAC7F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAClE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,2BAA2B,WAChC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAAE,GAAwB,EAAE,EAAE;IACzF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,+BAA+B,WAAG,CAC9F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA0D,UAAU,CAC7F,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAwC,EAAE,GAAwB,EAAE,EAAE;IACzF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,EAAE,IAAI,EAAC,+BAA+B,WAAG,CAC9F,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,0CAA0C,WAC/C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAC7B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA4C,EACnE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,0CAA0C,WAC/C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,oBAAoB,GAC/B,UAAU,CACR,CACE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAA8C,EACrE,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAClB,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,IAAI,EAAC,8CAA8C,WACnD,CACH,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  ReactElement,\n  useContext\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n  title: string;\n  icon?: string;\n  actions?: ReactNode;\n  banners?: ReactNode;\n  path?: BreadcrumbsProps['path'];\n  header?: ReactNode;\n  scrollContent?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n  tabs: TabsProps;\n  a: ReactNode;\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n  tabs?: ReactElement<typeof Tabs>;\n  regions: ReactNode[];\n  regionsRef?: Ref<HTMLDivElement>;\n  cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n  const bgColor = theme.base.palette['brand-primary'];\n  const color = tryCatch(() => readableColor(bgColor));\n  return css`\n    height: calc(4 * ${theme.base.spacing});\n    width: calc(4 * ${theme.base.spacing});\n    background: ${bgColor};\n    color: ${color};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n  return css`\n    ${StyledBreadcrumbs} {\n      margin-block-end: ${theme.base.spacing};\n    }\n\n    ${StyledBanner},\n    ${StyledTabs} {\n      margin-block-start: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div``;\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div`\n  flex-grow: 1;\n`;\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n  return css`\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n  scrollContent: PageLayoutProps['scrollContent'];\n}>(\n  ({ theme, scrollContent }) => css`\n    position: relative;\n    min-height: inherit;\n    background-color: ${theme.base.palette['app-background']};\n\n    ${scrollContent &&\n    css`\n      ${StyledContent} {\n        position: relative;\n      }\n\n      ${StyledRegions} {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        overflow: auto;\n      }\n    `}\n  `\n);\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n  (\n    {\n      regions,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      title,\n      icon,\n      path,\n      actions,\n      banners,\n      tabs,\n      as,\n      header,\n      regionsRef,\n      scrollContent = false,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const [contentEl, setContentEl] = useElement<HTMLElement>();\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const { headerEl } = useContext(AppShellContext);\n\n    const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n      elements: []\n    });\n\n    scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n    scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          gap: 2\n        }}\n        scrollContent={scrollContent}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        ref={ref}\n      >\n        <Flex\n          container={{ direction: 'column', pad: [2, 2, 0] }}\n          item={{ grow: 0, shrink: 0 }}\n          as={StyledPageHeader}\n        >\n          {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n          {header || (\n            <SummaryItem\n              visual={\n                icon && (\n                  <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                    <Icon name={icon} />\n                  </StyledPageIcon>\n                )\n              }\n              primary={<Text variant='h1'>{title}</Text>}\n              actions={actions}\n            />\n          )}\n\n          {banners}\n          {tabs}\n        </Flex>\n\n        <Flex\n          container\n          item={{ grow: 1 }}\n          as={StyledContent}\n          ref={scrollContent ? setContentEl : undefined}\n        >\n          <Grid\n            container={{\n              cols: 'minmax(0, 1fr)',\n              alignItems: 'start',\n              gap: 2,\n              pad: [0, 2, 2]\n            }}\n            md={{ container: { cols } }}\n            as={StyledRegions}\n            ref={regionsRef}\n          >\n            {regions.map((colItems, i) => {\n              return (\n                <Flex\n                  container={{\n                    direction: 'column',\n                    gap: 2\n                  }}\n                  as={StyledRegion}\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={i}\n                  ref={(el: HTMLDivElement | null) => {\n                    if (el) {\n                      scrollStickOptions.current.elements[i] = el;\n                    }\n                  }}\n                >\n                  {colItems}\n                </Flex>\n              );\n            })}\n          </Grid>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);\n\n    return (\n      <PageLayout\n        {...restProps}\n        tabs={\n          <Tabs\n            {...tabs}\n            onTabClick={(id, e) => {\n              setTabId(id);\n              tabs.onTabClick?.(id, e);\n            }}\n          />\n        }\n        regions={[\n          <Flex container={{ direction: 'column', gap: 2 }} as={TabPanel} tabId={tabId}>\n            {a}\n          </Flex>\n        ]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n    );\n  }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n    );\n  }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n  (\n    { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <PageLayout\n        regions={[a, b, c, d]}\n        ref={ref}\n        {...restProps}\n        cols='repeat(4, minmax(0, 1fr))'\n      />\n    );\n  }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n    );\n  }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n    );\n  }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n        />\n      );\n    }\n  );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n        />\n      );\n    }\n  );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n        />\n      );\n    }\n  );\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  useRef,\n  ReactElement,\n  useContext,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp, OmitStrict } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps, Tab } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n  title: string;\n  icon?: string;\n  actions?: ReactNode;\n  banners?: ReactNode;\n  path?: BreadcrumbsProps['path'];\n  header?: ReactNode;\n  scrollContent?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TabbedPageTab extends Tab {\n  content: ReactNode;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n  tabs: OmitStrict<TabsProps, 'tabs' | 'currentTabId'> & {\n    tabs: TabbedPageTab[];\n    defaultTabId?: string;\n  };\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n  d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n  a: ReactNode;\n  b: ReactNode;\n  c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n  tabs?: ReactElement<typeof Tabs>;\n  regions: ReactNode[];\n  regionsRef?: Ref<HTMLDivElement>;\n  cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n  const bgColor = theme.base.palette['brand-primary'];\n  const color = tryCatch(() => readableColor(bgColor));\n  return css`\n    height: calc(4 * ${theme.base.spacing});\n    width: calc(4 * ${theme.base.spacing});\n    background: ${bgColor};\n    color: ${color};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n  return css`\n    ${StyledBreadcrumbs} {\n      margin-block-end: ${theme.base.spacing};\n    }\n\n    ${StyledBanner},\n    ${StyledTabs} {\n      margin-block-start: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div``;\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div<{ pad: boolean }>(({ pad, theme }) => {\n  const spacing = theme.base.spacing;\n\n  return css`\n    flex-grow: 1;\n    max-width: 100%;\n\n    ${pad &&\n    css`\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    `}\n  `;\n});\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n  return css`\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n  scrollContent: PageLayoutProps['scrollContent'];\n  minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n  const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n  return css`\n    --content-height-in-view: ${emptyContentHeight};\n    position: relative;\n    min-height: inherit;\n    background-color: ${theme.base.palette['app-background']};\n\n    ${scrollContent &&\n    css`\n      ${StyledContent} {\n        position: relative;\n      }\n\n      ${StyledRegions} {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        overflow: auto;\n      }\n    `}\n  `;\n});\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n  (\n    {\n      regions,\n      cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n      title,\n      icon,\n      path,\n      actions,\n      banners,\n      tabs,\n      as,\n      header,\n      regionsRef,\n      scrollContent = false,\n      ...restProps\n    }: PropsWithoutRef<PageLayoutProps>,\n    ref: PageLayoutProps['ref']\n  ) => {\n    const [contentEl, setContentEl] = useElement<HTMLElement>();\n    const isMediumOrAbove = useBreakpoint('md');\n    const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n    const { headerEl } = useContext(AppShellContext);\n\n    const consolidatedRegionRef = useConsolidatedRef(regionsRef);\n    const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n      elements: []\n    });\n\n    scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n    scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n    useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n    const renderSingleRegion = regions?.length === 1;\n\n    const [minContentHeight, setMinContentHeight] = useState<number | undefined>();\n\n    useEffect(() => {\n      if (consolidatedRegionRef && consolidatedRegionRef.current) {\n        const refElement = consolidatedRegionRef.current;\n        const regionsPaddingBottomPixels = Number.parseInt(\n          window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n          10\n        );\n\n        const resizeObserver = new ResizeObserver(() => {\n          const headerOffset = headerEl?.offsetHeight ?? 0;\n          const emptyHeight =\n            document.documentElement.offsetHeight -\n            (headerOffset + refElement?.offsetTop) -\n            regionsPaddingBottomPixels;\n\n          setMinContentHeight(emptyHeight);\n        });\n\n        resizeObserver.observe(refElement);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      }\n    }, [consolidatedRegionRef, headerEl]);\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: 'column',\n          alignItems: 'stretch',\n          gap: 2\n        }}\n        scrollContent={scrollContent}\n        as={StyledPageLayout}\n        forwardedAs={as}\n        ref={ref}\n        minContentHeight={minContentHeight}\n      >\n        <Flex\n          container={{ direction: 'column', pad: [2, 2, 0] }}\n          item={{ grow: 0, shrink: 0 }}\n          as={StyledPageHeader}\n        >\n          {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n          {header || (\n            <SummaryItem\n              visual={\n                icon && (\n                  <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n                    <Icon name={icon} />\n                  </StyledPageIcon>\n                )\n              }\n              primary={<Text variant='h1'>{title}</Text>}\n              actions={actions}\n            />\n          )}\n\n          {banners}\n          {tabs}\n        </Flex>\n\n        <Flex\n          container\n          item={{ grow: 1 }}\n          as={StyledContent}\n          ref={scrollContent ? setContentEl : undefined}\n        >\n          {renderSingleRegion && (\n            <StyledRegions ref={consolidatedRegionRef} pad>\n              <Flex\n                container={{\n                  direction: 'column',\n                  gap: 2\n                }}\n                as={StyledRegion}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) {\n                    scrollStickOptions.current.elements[0] = el;\n                  }\n                }}\n              >\n                {regions[0]}\n              </Flex>\n            </StyledRegions>\n          )}\n\n          {!renderSingleRegion && (\n            <Grid\n              container={{\n                cols: 'minmax(0, 1fr)',\n                alignItems: 'start',\n                gap: 2,\n                pad: [0, 2, 2]\n              }}\n              md={{ container: { cols } }}\n              as={StyledRegions}\n              ref={consolidatedRegionRef}\n            >\n              {regions.map((colItems, i) => {\n                return (\n                  <Flex\n                    container={{\n                      direction: 'column',\n                      gap: 2\n                    }}\n                    as={StyledRegion}\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={i}\n                    ref={(el: HTMLDivElement | null) => {\n                      if (el) {\n                        scrollStickOptions.current.elements[i] = el;\n                      }\n                    }}\n                  >\n                    {colItems}\n                  </Flex>\n                );\n              })}\n            </Grid>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    const [tabId, setTabId] = useState(tabs.defaultTabId || tabs.tabs[0]?.id);\n\n    const tabPanels = tabs.tabs.map(tab => {\n      return (\n        <Flex\n          container={{ direction: 'column', gap: 2 }}\n          as={TabPanel}\n          tabId={tab.id}\n          currentTabId={tabId}\n          key={tab.id}\n        >\n          {tab.content}\n        </Flex>\n      );\n    });\n\n    return (\n      <PageLayout\n        {...restProps}\n        tabs={\n          <Tabs\n            {...tabs}\n            onTabClick={(id, e) => {\n              setTabId(id);\n              tabs.onTabClick?.(id, e);\n            }}\n            currentTabId={tabId}\n          />\n        }\n        regions={[<>{tabPanels}</>]}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n  }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n    );\n  }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n  ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n    );\n  }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n  (\n    { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <PageLayout\n        regions={[a, b, c, d]}\n        ref={ref}\n        {...restProps}\n        cols='repeat(4, minmax(0, 1fr))'\n      />\n    );\n  }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n    );\n  }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n  ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n    );\n  }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n        />\n      );\n    }\n  );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n        />\n      );\n    }\n  );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n  forwardRef(\n    (\n      { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <PageLayout\n          regions={[a, b, c]}\n          ref={ref}\n          {...restProps}\n          cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n        />\n      );\n    }\n  );\n"]}

package/lib/components/Pagination/Pagination.js

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

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

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

package/lib/components/Paragraph/ParagraphDisplay.js

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

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

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

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

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

package/lib/components/Phone/PhoneDisplay.js

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

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

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

@@ -16,7 +16,7 @@ export interface PhoneInputProps extends FormControlProps, BaseProps, NoChildren
     /** CCallback fired when the component gets focus */
     onFocus?: (value: string) => void;
     /** Ref for the wrapping element. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLInputElement>;
 }
 declare const PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps>;
 export default PhoneInput;

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;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAerE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;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,CAkIjE,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,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAUrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;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,gBAAgB,CAAC,CAAC;CAC7B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA6HjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Phone/PhoneInput.js

@@ -1,7 +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 { forwardRef, useCallback, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useAfterInitialEffect, useDirection, useFocusWithin } from '../../hooks';
+import { useConsolidatedRef, useDirection, useFocusWithin, useInputFormatter } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
@@ -11,7 +11,7 @@ import Input from '../Input';
 import { StyledSelect } from '../Select/Select';
 import Flex from '../Flex';
 import callingCodes from './callingCodes';
-import { calculateCursorPosition, convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
+import { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
 const StyledPhoneInput = styled.div(() => {
     const { start, end } = useDirection();
     return css `
@@ -31,50 +31,43 @@ const StyledPhoneInput = styled.div(() => {
 });
 StyledPhoneInput.defaultProps = defaultThemeProp;
 const PhoneInput = forwardRef((props, ref) => {
-    const { defaultValue, value = defaultValue, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, ...restProps } = props;
-    const phoneNumberParts = useMemo(() => {
-        return value ? getPhoneNumberParts(value, callingCodesList) : undefined;
-    }, [callingCodesList, value]);
-    const [countryCode, setCountryCode] = useState(showCountryCode ? phoneNumberParts?.[0] || callingCodesList[0] : 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(() => {
-        if (cursor !== undefined)
-            inputRef.current?.setSelectionRange(cursor, cursor);
-    }, [cursor, inputRef.current]);
+    const { value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, onResolveSuggestion, additionalInfo, ...restProps } = props;
+    const [countryCode = callingCodesList[0], subscriberNumber = ''] = value
+        ? getPhoneNumberParts(value, callingCodesList)
+        : [];
     const onFocusChange = (focused) => {
-        const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);
+        const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);
         if (focused)
             onFocus?.(callbackParam);
         else
             onBlur?.(callbackParam);
     };
-    const containerRef = useRef(null);
-    useFocusWithin([containerRef], onFocusChange);
     const onInputChange = (e) => {
-        const inputValue = e.target.value;
-        const selectionStart = e.target.selectionStart;
-        const formatted = formatPhoneNumber(inputValue, countryCode);
-        setPhoneNumber(formatted);
-        if (countryCode) {
-            setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));
-        }
-        onChange?.(convertToCallbackParameter(countryCode, formatted));
+        onChange?.(convertToCallbackParameter(countryCode, e.target.value));
     };
     const onSelectChange = (e) => {
-        const selectValue = e.target.value;
-        setCountryCode(selectValue);
-        setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));
-        onChange?.(convertToCallbackParameter(selectValue, phoneNumber));
+        onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));
     };
-    const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }, void 0));
-    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, children: codesOptions }, void 0)), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: phoneNumber, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled }, void 0)] }, void 0));
-    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, ref, status, required, disabled }, children: Comp }, void 0)) : (Comp);
+    const inputRef = useConsolidatedRef(ref);
+    const containerRef = useRef(null);
+    useFocusWithin([containerRef], onFocusChange);
+    const formatter = useCallback(number => {
+        return formatPhoneNumber(number.replace(/\D+/g, ''), countryCode);
+    }, [countryCode]);
+    const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
+    const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
+    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{
+            additionalInfo,
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default PhoneInput;
 //# sourceMappingURL=PhoneInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useAfterInitialEffect, useDirection, useFocusWithin } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\n\nimport callingCodes from './callingCodes';\nimport {\n  calculateCursorPosition,\n  convertToCallbackParameter,\n  formatPhoneNumber,\n  getPhoneNumberParts\n} from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  const { start, end } = useDirection();\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      ${`border-top-${end}-radius`}: 0;\n      ${`border-bottom-${end}-radius`}: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      ${`border-top-${start}-radius`}: 0;\n      ${`border-bottom-${start}-radius`}: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n    const {\n      defaultValue,\n      value = defaultValue,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      ...restProps\n    } = props;\n\n    const phoneNumberParts = useMemo(() => {\n      return value ? getPhoneNumberParts(value, callingCodesList) : undefined;\n    }, [callingCodesList, value]);\n\n    const [countryCode, setCountryCode] = useState(\n      showCountryCode ? phoneNumberParts?.[0] || callingCodesList[0] : phoneNumberParts?.[0]\n    );\n\n    const [phoneNumber, setPhoneNumber] = useState(\n      phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : ''\n    );\n\n    useAfterInitialEffect(() => {\n      setCountryCode(phoneNumberParts?.[0]);\n      setPhoneNumber(phoneNumberParts ? formatPhoneNumber(phoneNumberParts[1], countryCode) : '');\n    }, [phoneNumberParts]);\n\n    const [cursor, setCursor] = useState<number | undefined>(undefined);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (cursor !== undefined) inputRef.current?.setSelectionRange(cursor, cursor);\n    }, [cursor, inputRef.current]);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, phoneNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const selectionStart = e.target.selectionStart;\n      const formatted = formatPhoneNumber(inputValue, countryCode);\n      setPhoneNumber(formatted);\n      if (countryCode) {\n        setCursor(calculateCursorPosition(formatted, phoneNumber, countryCode, selectionStart));\n      }\n      onChange?.(convertToCallbackParameter(countryCode, formatted));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      const selectValue = e.target.value;\n      setCountryCode(selectValue);\n      setPhoneNumber(formatPhoneNumber(phoneNumber, selectValue));\n      onChange?.(convertToCallbackParameter(selectValue, phoneNumber));\n    };\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            value={countryCode}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={phoneNumber}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{ label, labelHidden, id, info, ref, status, required, disabled }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default PhoneInput;\n"]}
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useDirection, useFocusWithin, useInputFormatter } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\n  /**\n   * Display select with countries calling codes\n   * @default false\n   */\n  showCountryCode?: boolean;\n  /** Changes lists of countries calling codes */\n  callingCodesList?: string[];\n  /** Callback fired on input value change */\n  onChange?: (value: string) => void;\n  /** Callback fired when the component loses focus */\n  onBlur?: (value: string) => void;\n  /** CCallback fired when the component gets focus */\n  onFocus?: (value: string) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n  const { start, end } = useDirection();\n  return css`\n    border: 0;\n    > ${StyledSelect} {\n      max-width: max-content;\n      border-inline-end: none;\n      ${`border-top-${end}-radius`}: 0;\n      ${`border-bottom-${end}-radius`}: 0;\n    }\n\n    > ${StyledSelect} + ${StyledInput} {\n      ${`border-top-${start}-radius`}: 0;\n      ${`border-bottom-${start}-radius`}: 0;\n    }\n  `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n    const {\n      value,\n      id,\n      label,\n      labelHidden,\n      info,\n      status,\n      required,\n      readOnly,\n      disabled,\n      showCountryCode = false,\n      callingCodesList = callingCodes,\n      onChange,\n      onBlur,\n      onFocus,\n      onResolveSuggestion,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n      ? getPhoneNumberParts(value, callingCodesList)\n      : [];\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n      if (focused) onFocus?.(callbackParam);\n      else onBlur?.(callbackParam);\n    };\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n    };\n\n    const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n    };\n\n    const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const formatter = useCallback(\n      number => {\n        return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n      },\n      [countryCode]\n    );\n\n    const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n    const codesOptions = (\n      <>\n        {callingCodesList.map(code => (\n          <Option key={code} value={code}>\n            {code}\n          </Option>\n        ))}\n      </>\n    );\n\n    const Comp = (\n      <StyledPhoneInput\n        as={StyledFormControl}\n        forwardedAs={Flex as any}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        ref={containerRef}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {showCountryCode && (\n          <Select\n            value={countryCode}\n            onChange={onSelectChange}\n            required={required}\n            status={status}\n            readOnly={readOnly}\n            disabled={disabled}\n            autocomplete='tel-country-code'\n            hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n          >\n            {codesOptions}\n          </Select>\n        )}\n        <Input\n          {...restProps}\n          inputMode='tel'\n          ref={inputRef}\n          value={formatted}\n          onChange={onInputChange}\n          required={required}\n          status={status}\n          readOnly={readOnly}\n          disabled={disabled}\n          autocomplete='tel-national'\n          hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        />\n      </StyledPhoneInput>\n    );\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        labelAs='legend'\n        {...{\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default PhoneInput;\n"]}

package/lib/components/Phone/index.d.ts

@@ -3,4 +3,5 @@ export { PhoneInputProps } from './PhoneInput';
 export { default as getPhoneNumberParts } from './utils';
 export { default as PhoneDisplay } from './PhoneDisplay';
 export { PhoneDisplayProps } from './PhoneDisplay';
+export { formatPhone } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Phone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}