npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.2.0 → 3.0.0-dev.4.1 - Mend

@pega/cosmos-react-core 3.0.0-dev.2.0 → 3.0.0-dev.4.1

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

Files changed (132) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,QAAQ,EAOR,WAAW,EAEZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,MAAM,EAAE,EAAe,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,OAAO,EAAE,EAAgB,aAAa,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,kBAAkB,MAAM,qCAAqC,CAAC;AAC1E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAIlC,YAAY,CAAC,kBAAkB,CAAC,CAAC;AA8BjC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAA~~;;;QAG9B~~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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n KeyboardEvent,\n MouseEventHandler,\n MouseEvent,\n UIEvent,\n PropsWithoutRef,\n useCallback,\n KeyboardEventHandler\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef, useUID, useFocusWithin, useDirection } from '../../hooks';\nimport Button, { ButtonProps, StyledButton } from '../Button';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport Menu from '../Menu';\nimport { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport type { CountProps } from '../Badges/Count';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp {\n /** The text for the MenuButton also used to set the aria-label. /\n text: string;\n /\n Determines the Button variant for the MenuButton.\n * @default \"secondary\"\n /\n variant?: ButtonProps['variant'];\n /* The name of the icon for the MenuButton. /\n icon?: string;\n /* Only display the icon. The text prop will be forwarded to a tooltip. /\n iconOnly?: ButtonProps['icon'];\n /* The total count representing the list data which was selected. /\n count?: CountProps['children'];\n /* The click handler for the MenuButton. /\n onClick?: MouseEventHandler;\n /* Menu related props. /\n menu?: MenuProps;\n /* Popover related props. /\n popover?: OmitStrict<PopoverProps, 'show' \| 'target' \| 'children'>;\n /* DOM id for the button element. /\n id?: string;\n /* Ref for the button element. /\n ref?: ButtonProps['ref'];\n /* The keydown handler for the MenuButton. /\n onKeyDown?: KeyboardEventHandler;\n}\n\nconst StyledMenuButton = styled.button`\n flex-shrink: 0;\n\n & + ${StyledPopover} + ${StyledButton} {\n margin-inline-start: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n min-width: 20ch;\n`;\n\nconst MenuButton: FunctionComponent<ForwardProps & MenuButtonProps> = forwardRef(\n (props: PropsWithoutRef<MenuButtonProps>, ref: MenuButtonProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n text,\n menu,\n popover,\n onClick,\n onKeyDown,\n icon,\n count,\n iconOnly = false,\n ...restProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const buttonRef = useConsolidatedRef(ref);\n const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.ref);\n const menuRef = useConsolidatedRef<HTMLDivElement>(menu?.ref);\n\n // FIXME: Type assertion required for issue in useFocusWithin generic\n useFocusWithin<HTMLElement>(\n [popoverRef, buttonRef],\n useCallback(isFocused => {\n if (!isFocused) setIsOpen(false);\n }, [])\n );\n\n const { rtl } = useDirection();\n\n return (\n <>\n <Button\n as={StyledMenuButton}\n {...restProps}\n id={id}\n ref={buttonRef}\n aria-expanded={isOpen}\n aria-haspopup='menu'\n aria-controls={`${id}-popover`}\n aria-label={text}\n label={iconOnly && !isOpen ? text : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n // clickCount is 0 when triggered by keyboard.\n const clickCount = e.detail;\n\n // Close the menu if it is open and either:\n // It is a mouse* click on the button.\n // Or, the menu mode is not multiselect.\n if (isOpen && (clickCount > 0 \|\| menu?.mode !== 'multi-select')) {\n setIsOpen(false);\n } else {\n setIsOpen(true);\n }\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Escape') setIsOpen(false);\n onKeyDown?.(e);\n }}\n icon={iconOnly}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon && <Icon name={icon} />}\n {!iconOnly && (\n <Text>\n {text} {count !== undefined && <Count>{count}</Count>}\n {text && <Icon name='arrow-micro-down' />}\n </Text>\n )}\n </Flex>\n </Button>\n <StyledMenuButtonPopover\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n id={`${id}-popover`}\n {...popover}\n hideOnTargetHidden\n show={!!menu && isOpen}\n target={buttonRef.current}\n ref={popoverRef}\n >\n {menu && (\n <Menu\n {...menu}\n ref={menuRef}\n items={menu.items}\n onItemClick={(itemId, e) => {\n if (\n menu.mode !== 'multi-select' &&\n (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n .detail > 0\n ) {\n setIsOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n }}\n focusControlEl={buttonRef.current \|\| undefined}\n />\n )}\n </StyledMenuButtonPopover>\n </>\n );\n }\n);\n\nexport default MenuButton;\n"]}
1	+ {"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n KeyboardEvent,\n MouseEventHandler,\n MouseEvent,\n UIEvent,\n PropsWithoutRef,\n useCallback,\n KeyboardEventHandler\n} from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { useConsolidatedRef, useUID, useFocusWithin, useDirection } from '../../hooks';\nimport Button, { ButtonProps, StyledButton } from '../Button';\nimport Popover, { PopoverProps, StyledPopover } from '../Popover';\nimport Menu from '../Menu';\nimport { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as arrowMicroDownIcon from '../Icon/icons/arrow-micro-down.icon';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport type { CountProps } from '../Badges/Count';\n\nregisterIcon(arrowMicroDownIcon);\n\nexport interface MenuButtonProps extends BaseProps, NoChildrenProp {\n /** The text for the MenuButton also used to set the aria-label. /\n text: string;\n /\n Determines the Button variant for the MenuButton.\n * @default \"secondary\"\n /\n variant?: ButtonProps['variant'];\n /* The name of the icon for the MenuButton. /\n icon?: string;\n /* Only display the icon. The text prop will be forwarded to a tooltip. /\n iconOnly?: ButtonProps['icon'];\n /* The total count representing the list data which was selected. /\n count?: CountProps['children'];\n /* The click handler for the MenuButton. /\n onClick?: MouseEventHandler;\n /* Menu related props. /\n menu?: MenuProps;\n /* Popover related props. /\n popover?: OmitStrict<PopoverProps, 'show' \| 'target' \| 'children'>;\n /* DOM id for the button element. /\n id?: string;\n /* Ref for the button element. /\n ref?: ButtonProps['ref'];\n /* The keydown handler for the MenuButton. /\n onKeyDown?: KeyboardEventHandler;\n}\n\nconst StyledMenuButton = styled.button`\n flex-shrink: 0;\n white-space: nowrap;\n\n & + ${StyledPopover} + ${StyledButton} {\n margin-inline-start: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nconst StyledMenuButtonPopover = styled(Popover)`\n min-width: 20ch;\n`;\n\nconst MenuButton: FunctionComponent<ForwardProps & MenuButtonProps> = forwardRef(\n (props: PropsWithoutRef<MenuButtonProps>, ref: MenuButtonProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n text,\n menu,\n popover,\n onClick,\n onKeyDown,\n icon,\n count,\n iconOnly = false,\n ...restProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const buttonRef = useConsolidatedRef(ref);\n const popoverRef = useConsolidatedRef<HTMLDivElement>(popover?.ref);\n const menuRef = useConsolidatedRef<HTMLDivElement>(menu?.ref);\n\n // FIXME: Type assertion required for issue in useFocusWithin generic\n useFocusWithin<HTMLElement>(\n [popoverRef, buttonRef],\n useCallback(isFocused => {\n if (!isFocused) setIsOpen(false);\n }, [])\n );\n\n const { rtl } = useDirection();\n\n return (\n <>\n <Button\n as={StyledMenuButton}\n {...restProps}\n id={id}\n ref={buttonRef}\n aria-expanded={isOpen}\n aria-haspopup='menu'\n aria-controls={`${id}-popover`}\n aria-label={text}\n label={iconOnly && !isOpen ? text : undefined}\n onClick={(e: MouseEvent<HTMLButtonElement> & UIEvent<HTMLButtonElement>) => {\n // clickCount is 0 when triggered by keyboard.\n const clickCount = e.detail;\n\n // Close the menu if it is open and either:\n // It is a mouse* click on the button.\n // Or, the menu mode is not multiselect.\n if (isOpen && (clickCount > 0 \|\| menu?.mode !== 'multi-select')) {\n setIsOpen(false);\n } else {\n setIsOpen(true);\n }\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Escape') setIsOpen(false);\n onKeyDown?.(e);\n }}\n icon={iconOnly}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n {icon && <Icon name={icon} />}\n {!iconOnly && (\n <Text>\n {text} {count !== undefined && <Count>{count}</Count>}\n {text && <Icon name='arrow-micro-down' />}\n </Text>\n )}\n </Flex>\n </Button>\n <StyledMenuButtonPopover\n placement={rtl ? 'bottom-end' : 'bottom-start'}\n id={`${id}-popover`}\n {...popover}\n hideOnTargetHidden\n show={!!menu && isOpen}\n target={buttonRef.current}\n ref={popoverRef}\n >\n {menu && (\n <Menu\n {...menu}\n ref={menuRef}\n items={menu.items}\n onItemClick={(itemId, e) => {\n if (\n menu.mode !== 'multi-select' &&\n (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n .detail > 0\n ) {\n setIsOpen(false);\n }\n menu.onItemClick?.(itemId, e);\n }}\n focusControlEl={buttonRef.current \|\| undefined}\n />\n )}\n </StyledMenuButtonPopover>\n </>\n );\n }\n);\n\nexport default MenuButton;\n"]}

package/lib/components/Number/NumberDisplay.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { FunctionComponent, Ref } from 'react';
 import type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
 export interface NumberDisplayProps extends BaseProps, NoChildrenProp {
     /** Number value */
-    value?: string;
+    value?: number | bigint;
     /** Unit to be included in the text, for example '%' */
     unit?: string;
     /**
@@ -12,24 +12,24 @@ export interface NumberDisplayProps extends BaseProps, NoChildrenProp {
     unitPlacement?: 'before' | 'after';
     formattingOptions?: {
         /**
-         * Determines whether decimal places should be shown. The displayed value is truncated if true.
-         * @default true
+         * Value display notation.
+         * @default 'standard'
          */
-        showDecimal?: boolean;
+        notation?: 'standard' | 'compact';
         /**
-         * Determines the fixed number of decimal places. The value is rounded to the given precision.
+         * Determines the fixed number of fraction digits. The value is rounded to the given precision.
          * Maximum is 20, default is value precision.
-         * @default 2
+         * @default variable
          */
-        numberOfDecimals?: number;
+        fractionDigits?: number;
         /**
          * Determines whether group separators should be shown.
          * @default true
          */
-        showGroupSeparators?: boolean;
+        groupSeparators?: boolean;
     };
     /** Ref for the wrapping element. */
-    ref?: Ref<HTMLAnchorElement>;
+    ref?: Ref<HTMLSpanElement>;
 }
 declare const NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps>;
 export default NumberDisplay;

package/lib/components/Number/NumberDisplay.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.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,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;~~IACf~~,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,~~WAAW~~,CAAC,EAAE,~~OAAO~~,CAAC;~~QACtB~~;;;;WAIG;QACH,~~gBAAgB~~,CAAC,EAAE,MAAM,CAAC;~~QAC1B~~;;;WAGG;QACH,~~mBAAmB~~,CAAC,EAAE,OAAO,CAAC;~~KAC/B~~,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,~~iBAAiB~~,CAAC,CAAC;~~CAC9B~~;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CAqCvE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.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,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAsCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Number/NumberDisplay.js CHANGED Viewed

@@ -2,15 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useConfiguration } from '../../hooks';
 import { getFraction } from './utils';
-const NumberDisplay = forwardRef(({ value = '', unit = '', unitPlacement = 'after', formattingOptions: { showDecimal = true, numberOfDecimals = showDecimal ? getFraction(value).substring(1).length : 0, showGroupSeparators = true } = {}, ...restProps }, ref) => {
+const NumberDisplay = forwardRef(({ value, unit = '', unitPlacement = 'after', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) => {
     const { locale } = useConfiguration();
     const numberFormatterOptions = {
-        minimumFractionDigits: numberOfDecimals,
-        maximumFractionDigits: numberOfDecimals,
-        useGrouping: showGroupSeparators
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+        useGrouping: groupSeparators,
+        notation
     };
     const formatter = new Intl.NumberFormat(locale, numberFormatterOptions);
-    return (_jsx("span", { ref: ref, ...restProps, children: value ? (`${unit && unitPlacement === 'before' ? `${unit}\u00a0` : ''}${formatter.format(Number(showDecimal ? value : value.split('.')[0]))}${unit && unitPlacement === 'after' ? `\u00a0${unit}` : ''}`) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0)) }, void 0));
+    return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (`${unit && unitPlacement === 'before' ? `${unit}\u00a0` : ''}${formatter.format(value)}${unit && unitPlacement === 'after' ? `\u00a0${unit}` : ''}`) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0)) }, void 0));
 });
 export default NumberDisplay;
 //# sourceMappingURL=NumberDisplay.js.map

package/lib/components/Number/NumberDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkCtC,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,~~GAAG~~,~~EAAE,EACV,~~IAAI,GAAG,EAAE,EACT,aAAa,GAAG,OAAO,EACvB,iBAAiB,EAAE,EACjB,~~WAAW~~,GAAG,~~IAAI,EAClB,gBAAgB,GAAG,~~WAAW,CAAC,~~CAAC~~,CAAC,~~WAAW~~,CAAC,~~KAAK,~~CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EAC3E,mBAAmB,~~GAAG,IAAI,~~EAC3B~~,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,sBAAsB,GAAG;QAC7B,qBAAqB,EAAE,~~gBAAgB~~;~~QACvC~~,qBAAqB,EAAE,~~gBAAgB~~;~~QACvC~~,WAAW,EAAE,~~mBAAmB~~;~~KACxB~~,CAAC;~~IAEX~~,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IAExE,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,~~CACP~~,GAAG,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,~~CAC7E,MAAM,~~CAAC,~~WAAW,CAAC,CAAC,CAAC,~~KAAK,CAAC,~~CAAC~~,~~CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAClD,GAAG,~~IAAI,IAAI,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,~~EAAE~~,EAAE,~~CAC/D~~,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,WACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\n\nimport { getFraction } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n /** Number value /\n value?: ~~string~~;\n /* Unit to be included in the text, for example '%' /\n unit?: string;\n /\n Determines the placement of the unit.\n * @default \"after\"\n /\n unitPlacement?: 'before' \| 'after';\n formattingOptions?: {\n /\n ~~Determines~~ ~~whether~~ ~~decimal places should be shown. The displayed value is truncated if true~~.\n * @default ~~true~~\n /\n ~~showDecimal~~?: ~~boolean~~;\n /\n Determines the fixed number of ~~decimal~~ ~~places~~. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default 2\n /\n ~~numberOfDecimals~~?: number;\n /\n Determines whether group separators should be shown.\n * @default true\n /\n ~~showGroupSeparators~~?: boolean;\n };\n /* Ref for the wrapping element. */\n ref?: Ref<~~HTMLAnchorElement~~>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value ~~= ''~~,\n unit = '',\n unitPlacement = 'after',\n formattingOptions: {\n ~~showDecimal~~ = ~~true,\n numberOfDecimals = showDecimal ?~~ getFraction(value).substring(1).length ~~: 0~~,\n ~~showGroupSeparators~~ = true\n } = {},\n ...restProps\n }: PropsWithoutRef<NumberDisplayProps>,\n ref: NumberDisplayProps['ref']\n ) => {\n const { locale } = useConfiguration();\n\n const numberFormatterOptions = {\n minimumFractionDigits: ~~numberOfDecimals~~,\n maximumFractionDigits: ~~numberOfDecimals~~,\n useGrouping: ~~showGroupSeparators~~\n } as ~~const~~;\n\n const formatter = new Intl.NumberFormat(locale, numberFormatterOptions);\n\n return (\n <span ref={ref} {...restProps}>\n {value ? (\n `${unit && unitPlacement === 'before' ? `${unit}\\u00a0` : ''}${formatter.format(~~\n Number(showDecimal ?~~ value ~~: value.split('.'~~)~~[0])\n )~~}${unit && unitPlacement === 'after' ? `\\u00a0${unit}` : ''}`\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </span>\n );\n }\n);\n\nexport default NumberDisplay;\n"]}
1	+ {"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkCtC,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,aAAa,GAAG,OAAO,EACvB,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,sBAAsB,GAAG;QAC7B,qBAAqB,EAAE,cAAc;QACrC,qBAAqB,EAAE,cAAc;QACrC,WAAW,EAAE,eAAe;QAC5B,QAAQ;KACmB,CAAC;IAE9B,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IAExE,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,GAAG,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,GACpF,IAAI,IAAI,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,EACxD,EAAE,CACH,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,WACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\n\nimport { getFraction } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n /** Number value /\n value?: number \| bigint;\n /* Unit to be included in the text, for example '%' /\n unit?: string;\n /\n Determines the placement of the unit.\n * @default \"after\"\n /\n unitPlacement?: 'before' \| 'after';\n formattingOptions?: {\n /\n Value display notation.\n * @default 'standard'\n /\n notation?: 'standard' \| 'compact';\n /\n Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n /\n fractionDigits?: number;\n /\n Determines whether group separators should be shown.\n * @default true\n /\n groupSeparators?: boolean;\n };\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value,\n unit = '',\n unitPlacement = 'after',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true\n } = {},\n ...restProps\n }: PropsWithoutRef<NumberDisplayProps>,\n ref: NumberDisplayProps['ref']\n ) => {\n const { locale } = useConfiguration();\n\n const numberFormatterOptions = {\n minimumFractionDigits: fractionDigits,\n maximumFractionDigits: fractionDigits,\n useGrouping: groupSeparators,\n notation\n } as Intl.NumberFormatOptions;\n\n const formatter = new Intl.NumberFormat(locale, numberFormatterOptions);\n\n return (\n <span ref={ref} {...restProps}>\n {value \|\| value === 0 ? (\n `${unit && unitPlacement === 'before' ? `${unit}\\u00a0` : ''}${formatter.format(value)}${\n unit && unitPlacement === 'after' ? `\\u00a0${unit}` : ''\n }`\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </span>\n );\n }\n);\n\nexport default NumberDisplay;\n"]}

package/lib/components/PageTemplates/DashboardPage.d.ts CHANGED Viewed

@@ -14,10 +14,15 @@ export interface DashboardPageLayoutProps extends PageLayoutProps {
     fitToViewport?: boolean;
     regionFullWidth: ReactNode[];
 }
-export declare const StyledFilterRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDashboardRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFilterRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    fillHeight?: boolean | undefined;
+}, never>;
+export declare const StyledDashboardRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    fillHeight?: boolean | undefined;
+}, never>;
 export declare const StyledDashboardPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     scrollContent: boolean | undefined;
+    minContentHeight?: number | undefined;
 } & Pick<DashboardPageProps, "fitToViewport">, never>;
 declare const DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps>;
 export default DashboardPage;

package/lib/components/PageTemplates/DashboardPage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,~~yGAAyB,~~CAAC;AAIzD,eAAO,MAAM,qBAAqB,~~yGAEjC,~~CAAC;AAIF,eAAO,MAAM,yBAAyB;;qDAYpC,CAAC;AA+LH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB;;SAAyB,CAAC;AAIzD,eAAO,MAAM,qBAAqB;;SAEjC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;qDAYpC,CAAC;AA+LH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -65,12 +65,17 @@ export interface PageLayoutProps extends PageTemplateProps {
 }
 export declare const StyledPageIcon: import("styled-components").StyledComponent<FunctionComponent<import("../Flex").FlexProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPageHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledRegions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    fillHeight?: boolean | undefined;
+}, never>;
+export declare const StyledRegions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    pad: boolean;
+}, never>;
 export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledScrollableTabPanel: typeof TabPanel;
 export declare const StyledPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     scrollContent: PageLayoutProps['scrollContent'];
+    minContentHeight?: number | undefined;
 }, never>;
 export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;
 export declare const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EAET,YAAY,~~EAEb~~,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM9E,OAAO,IAAI,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpD,OAAoB,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAKlF,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,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,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,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;IACjC,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc,iKAUzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAW3B,CAAC;AAIH,eAAO,MAAM,YAAY,~~yGAAe,~~CAAC;~~AAGzC~~,eAAO,MAAM,aAAa,~~yGAEzB~~,CAAC;~~AAGF~~,eAAO,MAAM,aAAa,yGAAe,CAAC;AAG1C,eAAO,MAAM,wBAAwB,EAAE,OAAO,QAK5C,CAAC;AAIH,eAAO,MAAM,gBAAgB;mBACZ,eAAe,CAAC,eAAe,CAAC~~;SAqBhD~~,CAAC;~~AAsHF~~,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAyBxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAI9E,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAM9E,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAMlF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAchF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAMhF,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAMhF,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAetF,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAetF,CAAC;AAEJ,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAe1F,CAAC"}
1	+ {"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 CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useContext } from 'react';
+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';
@@ -40,11 +40,29 @@ export const StyledPageHeader = styled.header(({ theme }) => {
   `;
 });
 StyledPageHeader.defaultProps = defaultThemeProp;
-export const StyledRegion = styled.div ``;
+export const StyledRegion = styled.div(({ fillHeight }) => {
+    return css `
+    flex-grow: 1;
+    ${fillHeight &&
+        css `
+      height: 100%;
+    `}
+  `;
+});
 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 +73,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,37 +94,66 @@ 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 }, void 0), header || (_jsx(SummaryItem, { visual: icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: icon }, void 0) }, void 0)), primary: _jsx(Text, { variant: 'h1', children: title }, void 0), actions: actions }, void 0)), banners, tabs] }, void 0), _jsxs(Flex, { container: true, item: { grow: 1 }, as: StyledContent, ref: scrollContent ? setContentEl : undefined, children: [renderSingleRegion && (_jsx(StyledRegions, { ref: consolidatedRegionRef, pad: true, children: _jsx(Flex, { container: {
                                 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));
+                            }, fillHeight: true, children: regions[0] }, void 0) }, void 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));
+                        }) }, void 0))] }, void 0)] }, void 0));
 });
 export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
     const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n ReactNode,\n useRef,\n ReactElement,\n useContext\n} 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"]}
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,EACV,SAAS,EACV,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,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE5F,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,CAA2B,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IAClF,OAAO,GAAG,CAAA;;;MAGN,UAAU;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAmB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAEnC,OAAO,GAAG,CAAA;;;;MAIN,GAAG;QACL,GAAG,CAAA;4BACqB,OAAO,cAAc,OAAO;KACnD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,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,CAGvC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAChD,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAElF,OAAO,GAAG,CAAA;gCACoB,kBAAkB;;;wBAG1B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;MAEtD,aAAa;QACf,GAAG,CAAA;QACC,aAAa;;;;QAIb,aAAa;;;;;;KAMhB;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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,qBAAqB,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC7D,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,MAAM,kBAAkB,GAAG,OAAO,EAAE,MAAM,KAAK,CAAC,CAAC;IAEjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE/E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,IAAI,qBAAqB,CAAC,OAAO,EAAE;YAC1D,MAAM,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC;YACjD,MAAM,0BAA0B,GAAG,MAAM,CAAC,QAAQ,CAChD,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EACtE,EAAE,CACH,CAAC;YAEF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC7C,MAAM,YAAY,GAAG,QAAQ,EAAE,YAAY,IAAI,CAAC,CAAC;gBACjD,MAAM,WAAW,GACf,QAAQ,CAAC,eAAe,CAAC,YAAY;oBACrC,CAAC,YAAY,GAAG,UAAU,EAAE,SAAS,CAAC;oBACtC,0BAA0B,CAAC;gBAE7B,mBAAmB,CAAC,WAAW,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;YAEH,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAEnC,OAAO,GAAG,EAAE;gBACV,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,SAAS;YACrB,GAAG,EAAE,CAAC;SACP,EACD,aAAa,EAAE,aAAa,EAC5B,EAAE,EAAE,gBAAgB,EACpB,WAAW,EAAE,EAAE,EACf,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,aAElC,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,MAAC,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,aAE5C,kBAAkB,IAAI,CACrB,KAAC,aAAa,IAAC,GAAG,EAAE,qBAAqB,EAAE,GAAG,kBAC5C,KAAC,IAAI,IACH,SAAS,EAAE;gCACT,SAAS,EAAE,QAAQ;gCACnB,GAAG,EAAE,CAAC;6BACP,EACD,EAAE,EAAE,YAAY,EAChB,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,EACD,UAAU,kBAET,OAAO,CAAC,CAAC,CAAC,WACN,WACO,CACjB,EAEA,CAAC,kBAAkB,IAAI,CACtB,KAAC,IAAI,IACH,SAAS,EAAE;4BACT,IAAI,EAAE,gBAAgB;4BACtB,UAAU,EAAE,OAAO;4BACnB,GAAG,EAAE,CAAC;4BACN,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;yBACf,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAC3B,EAAE,EAAE,aAAa,EACjB,GAAG,EAAE,qBAAqB,YAEzB,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE;4BAC3B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;oCACT,SAAS,EAAE,QAAQ;oCACnB,GAAG,EAAE,CAAC;iCACP,EACD,EAAE,EAAE,YAAY,EAGhB,GAAG,EAAE,CAAC,EAAyB,EAAE,EAAE;oCACjC,IAAI,EAAE,EAAE;wCACN,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;qCAC7C;gCACH,CAAC,YAEA,QAAQ,IAPJ,CAAC,CAQD,CACR,CAAC;wBACJ,CAAC,CAAC,WACG,CACR,YACI,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 useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, AsProp } from '../../types';\nimport Grid from '../Grid';\nimport Text from '../Text';\nimport SummaryItem from '../SummaryItem';\nimport Icon from '../Icon';\nimport { tryCatch } from '../../utils';\nimport Tabs, { TabPanel, TabsProps } from '../Tabs';\nimport Flex from '../Flex';\nimport { useBreakpoint, useElement, useScrollStick, useConsolidatedRef } from '../../hooks';\nimport type { ScrollStickOptions } from '../../hooks/useScrollStick';\nimport Breadcrumbs, { BreadcrumbsProps, StyledBreadcrumbs } from '../Breadcrumbs';\nimport AppShellContext from '../AppShell/AppShellContext';\nimport { StyledBanner } from '../Banner/Banner';\nimport { StyledTabs } from '../Tabs/Tabs';\n\nexport interface PageTemplateProps extends BaseProps, AsProp, NoChildrenProp {\n title: string;\n icon?: string;\n actions?: ReactNode;\n banners?: ReactNode;\n path?: BreadcrumbsProps['path'];\n header?: ReactNode;\n scrollContent?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TabbedPageProps extends PageTemplateProps {\n tabs: TabsProps;\n a: ReactNode;\n}\n\nexport interface OneColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n}\n\nexport interface TwoColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface ThreeColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface FourColumnPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n d: ReactNode;\n}\n\nexport interface WideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface NarrowWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n}\n\nexport interface WideWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideWidePageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface NarrowWideNarrowPageProps extends PageTemplateProps {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n}\n\nexport interface PageLayoutProps extends PageTemplateProps {\n tabs?: ReactElement<typeof Tabs>;\n regions: ReactNode[];\n regionsRef?: Ref<HTMLDivElement>;\n cols?: string;\n}\n\nexport const StyledPageIcon = styled(Flex)(({ theme }) => {\n const bgColor = theme.base.palette['brand-primary'];\n const color = tryCatch(() => readableColor(bgColor));\n return css`\n height: calc(4 * ${theme.base.spacing});\n width: calc(4 * ${theme.base.spacing});\n background: ${bgColor};\n color: ${color};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n `;\n});\n\nStyledPageIcon.defaultProps = defaultThemeProp;\n\nexport const StyledPageHeader = styled.header(({ theme }) => {\n return css`\n ${StyledBreadcrumbs} {\n margin-block-end: ${theme.base.spacing};\n }\n\n ${StyledBanner},\n ${StyledTabs} {\n margin-block-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledPageHeader.defaultProps = defaultThemeProp;\n\nexport const StyledRegion = styled.div<{ fillHeight?: boolean }>(({ fillHeight }) => {\n return css`\n flex-grow: 1;\n\n ${fillHeight &&\n css`\n height: 100%;\n `}\n `;\n});\nStyledRegion.defaultProps = defaultThemeProp;\n\nexport const StyledRegions = styled.div<{ pad: boolean }>(({ pad, theme }) => {\n const spacing = theme.base.spacing;\n\n return css`\n flex-grow: 1;\n max-width: 100%;\n\n ${pad &&\n css`\n padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n `}\n `;\n});\nStyledRegions.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div``;\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledScrollableTabPanel: typeof TabPanel = styled(TabPanel)(() => {\n return css`\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledScrollableTabPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPageLayout = styled.div<{\n scrollContent: PageLayoutProps['scrollContent'];\n minContentHeight?: number;\n}>(({ theme, scrollContent, minContentHeight }) => {\n const emptyContentHeight = minContentHeight ? `${minContentHeight}px` : undefined;\n\n return css`\n --content-height-in-view: ${emptyContentHeight};\n position: relative;\n min-height: inherit;\n background-color: ${theme.base.palette['app-background']};\n\n ${scrollContent &&\n css`\n ${StyledContent} {\n position: relative;\n }\n\n ${StyledRegions} {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: auto;\n }\n `}\n `;\n});\n\nStyledPageLayout.defaultProps = defaultThemeProp;\n\nconst PageLayout: FunctionComponent<PageLayoutProps & ForwardProps> = forwardRef(\n (\n {\n regions,\n cols = `repeat(${regions.length}, minmax(0, 1fr))`,\n title,\n icon,\n path,\n actions,\n banners,\n tabs,\n as,\n header,\n regionsRef,\n scrollContent = false,\n ...restProps\n }: PropsWithoutRef<PageLayoutProps>,\n ref: PageLayoutProps['ref']\n ) => {\n const [contentEl, setContentEl] = useElement<HTMLElement>();\n const isMediumOrAbove = useBreakpoint('md');\n const hasSideBySideColumns = regions.length > 1 && isMediumOrAbove;\n const { headerEl } = useContext(AppShellContext);\n\n const consolidatedRegionRef = useConsolidatedRef(regionsRef);\n const scrollStickOptions = useRef<ScrollStickOptions & { elements: HTMLElement[] }>({\n elements: []\n });\n\n scrollStickOptions.current.scrollContainer = scrollContent && contentEl ? contentEl : undefined;\n scrollStickOptions.current.offset = (headerEl?.offsetHeight ?? 0) + 16;\n\n useScrollStick(hasSideBySideColumns ? scrollStickOptions.current : undefined);\n\n const renderSingleRegion = regions?.length === 1;\n\n const [minContentHeight, setMinContentHeight] = useState<number \| undefined>();\n\n useEffect(() => {\n if (consolidatedRegionRef && consolidatedRegionRef.current) {\n const refElement = consolidatedRegionRef.current;\n const regionsPaddingBottomPixels = Number.parseInt(\n window.getComputedStyle(refElement).getPropertyValue('padding-bottom'),\n 10\n );\n\n const resizeObserver = new ResizeObserver(() => {\n const headerOffset = headerEl?.offsetHeight ?? 0;\n const emptyHeight =\n document.documentElement.offsetHeight -\n (headerOffset + refElement?.offsetTop) -\n regionsPaddingBottomPixels;\n\n setMinContentHeight(emptyHeight);\n });\n\n resizeObserver.observe(refElement);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [consolidatedRegionRef, headerEl]);\n\n return (\n <Flex\n {...restProps}\n container={{\n direction: 'column',\n alignItems: 'stretch',\n gap: 2\n }}\n scrollContent={scrollContent}\n as={StyledPageLayout}\n forwardedAs={as}\n ref={ref}\n minContentHeight={minContentHeight}\n >\n <Flex\n container={{ direction: 'column', pad: [2, 2, 0] }}\n item={{ grow: 0, shrink: 0 }}\n as={StyledPageHeader}\n >\n {path && path.length > 0 && <Breadcrumbs path={...path} />}\n\n {header \|\| (\n <SummaryItem\n visual={\n icon && (\n <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name={icon} />\n </StyledPageIcon>\n )\n }\n primary={<Text variant='h1'>{title}</Text>}\n actions={actions}\n />\n )}\n\n {banners}\n {tabs}\n </Flex>\n\n <Flex\n container\n item={{ grow: 1 }}\n as={StyledContent}\n ref={scrollContent ? setContentEl : undefined}\n >\n {renderSingleRegion && (\n <StyledRegions ref={consolidatedRegionRef} pad>\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[0] = el;\n }\n }}\n fillHeight\n >\n {regions[0]}\n </Flex>\n </StyledRegions>\n )}\n\n {!renderSingleRegion && (\n <Grid\n container={{\n cols: 'minmax(0, 1fr)',\n alignItems: 'start',\n gap: 2,\n pad: [0, 2, 2]\n }}\n md={{ container: { cols } }}\n as={StyledRegions}\n ref={consolidatedRegionRef}\n >\n {regions.map((colItems, i) => {\n return (\n <Flex\n container={{\n direction: 'column',\n gap: 2\n }}\n as={StyledRegion}\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n ref={(el: HTMLDivElement \| null) => {\n if (el) {\n scrollStickOptions.current.elements[i] = el;\n }\n }}\n >\n {colItems}\n </Flex>\n );\n })}\n </Grid>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n const [tabId, setTabId] = useState(tabs.currentTabId ?? tabs.tabs[0]?.id);\n\n return (\n <PageLayout\n {...restProps}\n tabs={\n <Tabs\n {...tabs}\n onTabClick={(id, e) => {\n setTabId(id);\n tabs.onTabClick?.(id, e);\n }}\n />\n }\n regions={[\n <Flex container={{ direction: 'column', gap: 2 }} as={TabPanel} tabId={tabId}>\n {a}\n </Flex>\n ]}\n ref={ref}\n />\n );\n }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n ({ a, ...restProps }: PropsWithoutRef<OneColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return <PageLayout regions={[a]} ref={ref} {...restProps} cols='minmax(0, 1fr)' />;\n }\n);\n\nexport const TwoColumnPage: FunctionComponent<TwoColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<TwoColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='repeat(2, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const ThreeColumnPage: FunctionComponent<ThreeColumnPageProps & ForwardProps> = forwardRef(\n ({ a, b, c, ...restProps }: PropsWithoutRef<ThreeColumnPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b, c]} ref={ref} {...restProps} cols='repeat(3, minmax(0, 1fr))' />\n );\n }\n);\n\nexport const FourColumnPage: FunctionComponent<FourColumnPageProps & ForwardProps> = forwardRef(\n (\n { a, b, c, d, ...restProps }: PropsWithoutRef<FourColumnPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c, d]}\n ref={ref}\n {...restProps}\n cols='repeat(4, minmax(0, 1fr))'\n />\n );\n }\n);\n\nexport const WideNarrowPage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 2fr) minmax(0, 1fr)' />\n );\n }\n);\n\nexport const NarrowWidePage: FunctionComponent<WideNarrowPageProps & ForwardProps> = forwardRef(\n ({ a, b, ...restProps }: PropsWithoutRef<WideNarrowPageProps>, ref: Ref<HTMLDivElement>) => {\n return (\n <PageLayout regions={[a, b]} ref={ref} {...restProps} cols='minmax(0, 1fr) minmax(0, 2fr)' />\n );\n }\n);\n\nexport const WideWideNarrowPage: FunctionComponent<WideWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<WideWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='repeat(2, minmax(0, 2fr)) minmax(0, 1fr)'\n />\n );\n }\n );\n\nexport const NarrowWideWidePage: FunctionComponent<NarrowWideWidePageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideWidePageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) repeat(2, minmax(0, 2fr))'\n />\n );\n }\n );\n\nexport const NarrowWideNarrowPage: FunctionComponent<NarrowWideNarrowPageProps & ForwardProps> =\n forwardRef(\n (\n { a, b, c, ...restProps }: PropsWithoutRef<NarrowWideNarrowPageProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n return (\n <PageLayout\n regions={[a, b, c]}\n ref={ref}\n {...restProps}\n cols='minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'\n />\n );\n }\n );\n"]}

package/lib/components/Popover/Popover.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,~~yGAuB9B~~,CAAC;AAIF,eAAO,MAAM,aAAa;;~~SA2HzB~~,CAAC"}
1	+ {"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,yGAwB9B,CAAC;AAIF,eAAO,MAAM,aAAa;;SAoJzB,CAAC"}

package/lib/components/Popover/Popover.styles.js CHANGED Viewed

@@ -2,22 +2,23 @@ import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
 export const StyledPopoverArrow = styled.div(({ theme: { base: { shadow: { 'low-filter': low } } } }) => css `
     background-color: inherit;
-    height: 0;
-    width: 0;
-    filter: ${low};
-    z-index: -1; /* Make sure it's under the Popover. */
+    ::before,
     ::after {
       content: '';
       display: block;
+      position: absolute;
       background-color: inherit;
-      height: 0.5rem;
-      width: 0.5rem;
+    }
+    ::before {
+      inset: -0.25rem;
+      filter: ${low};
       transform: rotate(45deg);
     }
   `);
 StyledPopoverArrow.defaultProps = defaultThemeProp;
-export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { 'low-filter': low } }, components: { card: { background, 'border-radius': cardBorderRadius } } }, offset }) => {
+export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: zIndex }, shadow: { 'low-filter': low } }, components: { card: { background }, 'form-control': { 'border-radius': formControlBorderRadius } } }, offset }) => {
     return css `
       /*
         Margin should never be used with Popper.
@@ -26,7 +27,7 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       margin: 0 !important;
       z-index: ${zIndex};
       background-color: ${background};
-      border-radius: calc(${cardBorderRadius} / 2);
+      border-radius: calc(${formControlBorderRadius} * ${borderRadius});
       ::after {
         content: '';
@@ -48,12 +49,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       &[data-popper-placement^='top'] {
         > ${StyledPopoverArrow} {
-          top: calc(100% - 0.25rem);
-          margin-inline-start: -0.25rem;
+          top: calc(100%);
-          ::after {
+          ::before {
             border-bottom-right-radius: calc(${borderRadius} / 4);
           }
+          ::after {
+            top: -0.75rem;
+            right: -0.75rem;
+            bottom: 0;
+            left: -0.75rem;
+          }
         }
         ::before {
@@ -68,12 +75,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       &[data-popper-placement^='bottom'] {
         > ${StyledPopoverArrow} {
-          bottom: calc(100% + 0.25rem);
-          margin-inline-start: -0.25rem;
+          bottom: calc(100%);
-          ::after {
+          ::before {
             border-top-left-radius: calc(${borderRadius} / 4);
           }
+          ::after {
+            top: 0;
+            right: -0.75rem;
+            bottom: -0.75rem;
+            left: -0.75rem;
+          }
         }
         ::before {
@@ -88,12 +101,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       &[data-popper-placement^='right'] {
         > ${StyledPopoverArrow} {
-          inset-inline-end: calc(100% + 0.25rem);
-          margin-block-start: -0.25rem;
+          right: calc(100%);
-          ::after {
+          ::before {
             border-bottom-left-radius: calc(${borderRadius} / 4);
           }
+          ::after {
+            top: -0.75rem;
+            right: -0.75rem;
+            bottom: -0.75rem;
+            left: 0;
+          }
         }
         ::before {
@@ -108,12 +127,18 @@ export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': bor
       &[data-popper-placement^='left'] {
         > ${StyledPopoverArrow} {
-          left: calc(100% - 0.25rem);
-          margin-block-start: -0.25rem;
+          left: calc(100%);
-          ::after {
+          ::before {
             border-top-right-radius: calc(${borderRadius} / 4);
           }
+          ::after {
+            top: -0.75rem;
+            right: 0;
+            bottom: -0.75rem;
+            left: -0.75rem;
+          }
         }
         ::before {