@pega/cosmos-react-core 4.0.0-dev.1.1 → 4.0.0-dev.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA+C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAoD3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Actions/Actions.js

@@ -1,21 +1,27 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useI18n } from '../../hooks';
+import { useConsolidatedRef, useI18n } from '../../hooks';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
 const Actions = forwardRef(({ items, menuAt = 2, iconOnly = true, menuButtonProps }, ref) => {
     const t = useI18n();
+    const menuButtonRef = useConsolidatedRef(ref);
     if (!items || items.length === 0) {
         return null;
     }
-    return items.length >= menuAt ? (_jsx(MenuButton, { ref: ref, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
-            items: items.map(({ text, ...restProps }) => ({
+    return items.length >= menuAt ? (_jsx(MenuButton, { ref: menuButtonRef, text: t('actions'), iconOnly: true, icon: 'more', variant: 'simple', onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, menu: {
+            items: items.map(({ text, onClick, ...restProps }) => ({
+                ...restProps,
                 primary: text,
-                ...restProps
+                onClick: onClick
+                    ? (id, e) => {
+                        onClick(id, e, menuButtonRef.current ?? undefined);
+                    }
+                    : undefined
             }))
         } })) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
-            return (_jsx(Button, { ref: ref, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
+            return (_jsx(Button, { variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, ...restProps, children: icon && iconOnly ? _jsx(Icon, { name: icon }) : text }, id));
         }) }));
 });
 export default Actions;

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAA+B,MAAM,eAAe,CAAC;AAe5D,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAiC,EACtF,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,eAAe,EAAE,OAAO,EACjC,SAAS,EAAE,eAAe,EAAE,SAAS,EACrC,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5C,OAAO,EAAE,IAAI;gBACb,GAAG,SAAS;aACb,CAAC,CAAC;SACJ,GACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAR1C,EAAE,CASA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton, { MenuButtonProps } from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  menuButtonProps?: {\n    onClick?: MenuButtonProps['onClick'];\n    onKeyDown?: MenuButtonProps['onKeyDown'];\n  };\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true, menuButtonProps }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={ref}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        onClick={menuButtonProps?.onClick}\n        onKeyDown={menuButtonProps?.onKeyDown}\n        menu={{\n          items: items.map(({ text, ...restProps }) => ({\n            primary: text,\n            ...restProps\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              ref={ref}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuD,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,UAA+B,MAAM,eAAe,CAAC;AAe5D,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAiC,EACtF,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE9C,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAC9B,KAAC,UAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,eAAe,EAAE,OAAO,EACjC,SAAS,EAAE,eAAe,EAAE,SAAS,EACrC,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;gBACrD,GAAG,SAAS;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,OAAO;oBACd,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACR,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,aAAa,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;oBACrD,CAAC;oBACH,CAAC,CAAC,SAAS;aACd,CAAC,CAAC;SACJ,GACD,CACH,CAAC,CAAC,CAAC,CACF,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;YACvD,OAAO,CACL,KAAC,MAAM,IAEL,OAAO,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,CAAC,KAAoC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,EACvE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC9B,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,QAAQ,KACpB,SAAS,YAEZ,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAP1C,EAAE,CAQA,CACV,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport { Action, ForwardProps, NoChildrenProp } from '../../types';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport MenuButton, { MenuButtonProps } from '../MenuButton';\n\nexport interface ActionsProps extends NoChildrenProp {\n  items: Action[];\n  /** @default 2 */\n  menuAt?: number;\n  menuButtonProps?: {\n    onClick?: MenuButtonProps['onClick'];\n    onKeyDown?: MenuButtonProps['onKeyDown'];\n  };\n  /** @default true */\n  iconOnly?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nconst Actions: FunctionComponent<ActionsProps & ForwardProps> = forwardRef(\n  (\n    { items, menuAt = 2, iconOnly = true, menuButtonProps }: PropsWithoutRef<ActionsProps>,\n    ref: ActionsProps['ref']\n  ) => {\n    const t = useI18n();\n    const menuButtonRef = useConsolidatedRef(ref);\n\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    return items.length >= menuAt ? (\n      <MenuButton\n        ref={menuButtonRef}\n        text={t('actions')}\n        iconOnly\n        icon='more'\n        variant='simple'\n        onClick={menuButtonProps?.onClick}\n        onKeyDown={menuButtonProps?.onKeyDown}\n        menu={{\n          items: items.map(({ text, onClick, ...restProps }) => ({\n            ...restProps,\n            primary: text,\n            onClick: onClick\n              ? (id, e) => {\n                  onClick(id, e, menuButtonRef.current ?? undefined);\n                }\n              : undefined\n          }))\n        }}\n      />\n    ) : (\n      <>\n        {items.map(({ id, icon, text, onClick, ...restProps }) => {\n          return (\n            <Button\n              key={id}\n              variant={icon && iconOnly ? 'simple' : undefined}\n              onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n              label={icon ? text : undefined}\n              icon={!!icon && iconOnly}\n              {...restProps}\n            >\n              {icon && iconOnly ? <Icon name={icon} /> : text}\n            </Button>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nexport default Actions;\n"]}

package/lib/components/AdditionalInfo/AdditionalInfo.d.ts

@@ -1,8 +1,10 @@
 import { FunctionComponent, Ref } from 'react';
 import { BaseProps, ForwardProps } from '../../types';
+import { DialogHandleValue } from '../Dialog';
 export interface AdditionalInfoProps extends BaseProps {
     heading: string;
     children: string | JSX.Element;
+    dialogHandle?: Ref<DialogHandleValue>;
     ref?: Ref<HTMLDivElement>;
 }
 export declare const StyledAdditionalInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAUtD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAMhC,CAAC;AAIF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAmBzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAc,MAAM,WAAW,CAAC;AAM1D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAiDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AdditionalInfo/AdditionalInfo.js

@@ -1,25 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import styled from 'styled-components';
 import Icon, { registerIcon } from '../Icon';
-import { defaultThemeProp } from '../../theme';
 import HTML from '../HTML';
 import Button from '../Button';
-import Dialog, { useDialog } from '../Dialog';
+import { InfoDialog } from '../Dialog';
 import * as informationIcon from '../Icon/icons/information.icon';
-import { useI18n } from '../../hooks';
-import { StyledDialog } from '../Dialog/Dialog';
+import { useConsolidatedRef, useI18n } from '../../hooks';
 registerIcon(informationIcon);
-export const StyledAdditionalInfo = styled.div(({ theme }) => css `
-    & > ${StyledDialog} {
-      max-width: ${theme.base['content-width'].md};
-    }
-  `);
-StyledAdditionalInfo.defaultProps = defaultThemeProp;
-const AdditionalInfo = forwardRef(({ heading, children, ...restProps }, ref) => {
-    const { target, events } = useDialog();
+export const StyledAdditionalInfo = styled.div ``;
+const AdditionalInfo = forwardRef(({ heading, children, dialogHandle, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledAdditionalInfo, { ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ...events, children: _jsx(Icon, { name: 'information' }) }), _jsx(Dialog, { heading: heading, target: target, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children })] }));
+    const [target, setTarget] = useState(null);
+    const buttonRef = useRef(null);
+    const handleRef = useConsolidatedRef(dialogHandle);
+    useImperativeHandle(handleRef, () => {
+        return {
+            open: () => {
+                setTarget(buttonRef.current);
+            },
+            close: () => {
+                setTarget(null);
+            }
+        };
+    });
+    return (_jsxs(StyledAdditionalInfo, { ref: ref, ...restProps, children: [_jsx(Button, { variant: 'simple', label: t('additional_info'), compact: true, icon: true, ref: buttonRef, onClick: () => {
+                    handleRef.current?.open();
+                }, children: _jsx(Icon, { name: 'information' }) }), target && (_jsx(InfoDialog, { heading: heading, target: target, onDismiss: () => {
+                    handleRef.current?.close();
+                }, children: typeof children === 'string' ? _jsx(HTML, { content: children }) : children }))] }));
 });
 export default AdditionalInfo;
 //# sourceMappingURL=AdditionalInfo.js.map

package/lib/components/AdditionalInfo/AdditionalInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,YAAY,CAAC,eAAe,CAAC,CAAC;AAQ9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAC5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;UACV,YAAY;mBACH,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAE9C,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwC,EACzE,GAA+B,EAC/B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC3C,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,OAAO,QAAC,IAAI,WAAK,MAAM,YAC3E,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YACrC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC/D,IACY,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport Dialog, { useDialog } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useI18n } from '../../hooks';\nimport { StyledDialog } from '../Dialog/Dialog';\n\nregisterIcon(informationIcon);\n\nexport interface AdditionalInfoProps extends BaseProps {\n  heading: string;\n  children: string | JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledAdditionalInfo = styled.div(\n  ({ theme }) => css`\n    & > ${StyledDialog} {\n      max-width: ${theme.base['content-width'].md};\n    }\n  `\n);\n\nStyledAdditionalInfo.defaultProps = defaultThemeProp;\n\nconst AdditionalInfo: FunctionComponent<AdditionalInfoProps & ForwardProps> = forwardRef(\n  (\n    { heading, children, ...restProps }: PropsWithoutRef<AdditionalInfoProps>,\n    ref: AdditionalInfoProps['ref']\n  ) => {\n    const { target, events } = useDialog();\n    const t = useI18n();\n\n    return (\n      <StyledAdditionalInfo ref={ref} {...restProps}>\n        <Button variant='simple' label={t('additional_info')} compact icon {...events}>\n          <Icon name='information' />\n        </Button>\n        <Dialog heading={heading} target={target}>\n          {typeof children === 'string' ? <HTML content={children} /> : children}\n        </Dialog>\n      </StyledAdditionalInfo>\n    );\n  }\n);\n\nexport default AdditionalInfo;\n"]}
+{"version":3,"file":"AdditionalInfo.js","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAqB,UAAU,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE1D,YAAY,CAAC,eAAe,CAAC,CAAC;AAS9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEjD,MAAM,cAAc,GAA0D,UAAU,CACtF,CACE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,SAAS,EAAwC,EACvF,GAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEnD,mBAAmB,CAAC,SAAS,EAAE,GAAG,EAAE;QAClC,OAAO;YACL,IAAI,EAAE,GAAG,EAAE;gBACT,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,aAC3C,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,OAAO,QACP,IAAI,QACJ,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;gBAC5B,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpB,EACR,MAAM,IAAI,CACT,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,EAAE;oBACd,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC7B,CAAC,YAEA,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,QAAQ,GAC3D,CACd,IACoB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  useRef,\n  useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport { BaseProps, ForwardProps } from '../../types';\nimport HTML from '../HTML';\nimport Button from '../Button';\nimport { DialogHandleValue, InfoDialog } from '../Dialog';\nimport * as informationIcon from '../Icon/icons/information.icon';\nimport { useConsolidatedRef, useI18n } from '../../hooks';\n\nregisterIcon(informationIcon);\n\nexport interface AdditionalInfoProps extends BaseProps {\n  heading: string;\n  children: string | JSX.Element;\n  dialogHandle?: Ref<DialogHandleValue>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledAdditionalInfo = styled.div``;\n\nconst AdditionalInfo: FunctionComponent<AdditionalInfoProps & ForwardProps> = forwardRef(\n  (\n    { heading, children, dialogHandle, ...restProps }: PropsWithoutRef<AdditionalInfoProps>,\n    ref: AdditionalInfoProps['ref']\n  ) => {\n    const t = useI18n();\n    const [target, setTarget] = useState<HTMLButtonElement | null>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useConsolidatedRef(dialogHandle);\n\n    useImperativeHandle(handleRef, () => {\n      return {\n        open: () => {\n          setTarget(buttonRef.current);\n        },\n        close: () => {\n          setTarget(null);\n        }\n      };\n    });\n\n    return (\n      <StyledAdditionalInfo ref={ref} {...restProps}>\n        <Button\n          variant='simple'\n          label={t('additional_info')}\n          compact\n          icon\n          ref={buttonRef}\n          onClick={() => {\n            handleRef.current?.open();\n          }}\n        >\n          <Icon name='information' />\n        </Button>\n        {target && (\n          <InfoDialog\n            heading={heading}\n            target={target}\n            onDismiss={() => {\n              handleRef.current?.close();\n            }}\n          >\n            {typeof children === 'string' ? <HTML content={children} /> : children}\n          </InfoDialog>\n        )}\n      </StyledAdditionalInfo>\n    );\n  }\n);\n\nexport default AdditionalInfo;\n"]}

package/lib/components/AppShell/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAM/F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAgG/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAM/F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA0G/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -7,12 +7,13 @@ import { useBreakpoint, useElement } from '../../hooks';
 import BareButton from '../Button/BareButton';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import AppShellOperator from './Operator';
+import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
-const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) => {
+const AppHeader = forwardRef(({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) => {
     const isMediumOrAbove = useBreakpoint('md');
     const [searchContainer, setSearchContainer] = useElement();
-    const { setSearchContainerEl } = useContext(AppShellContext);
+    const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
     useEffect(() => {
         if (searchPage && searchContainer) {
             setSearchContainerEl(searchContainer);
@@ -26,7 +27,7 @@ const AppHeader = forwardRef(({ appName, fullImageSrc, imageSrc, href, onClick,
         appInfoAs = 'a';
     else if (onClick)
         appInfoAs = BareButton;
-    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, ref: ref, children: [_jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }), isMediumOrAbove && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }));
+    return (_jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: onClick, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: '', "aria-hidden": 'true' }), isMediumOrAbove && (_jsxs(_Fragment, { children: [_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

package/lib/components/AppShell/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref, ElementType, useContext, useEffect } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      appName,\n      fullImageSrc,\n      imageSrc,\n      href,\n      onClick,\n      portalName,\n      target,\n      appNameHidden,\n      operator,\n      searchInput,\n      searchLabel,\n      searchPage\n    }: AppHeaderProps,\n    ref: Ref<Element>\n  ) => {\n    const isMediumOrAbove = useBreakpoint('md');\n    const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n    const { setSearchContainerEl } = useContext(AppShellContext);\n\n    useEffect(() => {\n      if (searchPage && searchContainer) {\n        setSearchContainerEl(searchContainer);\n      } else {\n        setSearchContainerEl(null);\n      }\n    }, [searchPage, searchContainer, setSearchContainerEl]);\n\n    let appInfoAs: ElementType = 'div';\n    if (href) appInfoAs = 'a';\n    else if (onClick) appInfoAs = BareButton;\n\n    return (\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        ref={ref}\n      >\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={onClick}\n            target={target}\n          >\n            <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n            {isMediumOrAbove && (\n              <>\n                <StyledAppHeaderText\n                  as={appNameHidden ? VisuallyHiddenText : 'span'}\n                  variant='primary'\n                >\n                  {appName}\n                </StyledAppHeaderText>\n                {portalName && (\n                  <StyledAppHeaderText\n                    as={appNameHidden ? VisuallyHiddenText : 'span'}\n                    variant='secondary'\n                  >\n                    {portalName}\n                  </StyledAppHeaderText>\n                )}\n              </>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref, ElementType, useContext, useEffect } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      appName,\n      contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n      fullImageSrc,\n      imageSrc,\n      href,\n      onClick,\n      portalName,\n      target,\n      appNameHidden,\n      operator,\n      searchInput,\n      searchLabel,\n      searchPage\n    }: AppHeaderProps,\n    ref: Ref<Element>\n  ) => {\n    const isMediumOrAbove = useBreakpoint('md');\n    const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n    const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n\n    useEffect(() => {\n      if (searchPage && searchContainer) {\n        setSearchContainerEl(searchContainer);\n      } else {\n        setSearchContainerEl(null);\n      }\n    }, [searchPage, searchContainer, setSearchContainerEl]);\n\n    let appInfoAs: ElementType = 'div';\n    if (href) appInfoAs = 'a';\n    else if (onClick) appInfoAs = BareButton;\n\n    return (\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={onClick}\n            target={target}\n          >\n            <Image src={fullImageSrc || imageSrc} alt='' aria-hidden='true' />\n            {isMediumOrAbove && (\n              <>\n                <StyledAppHeaderText\n                  as={appNameHidden ? VisuallyHiddenText : 'span'}\n                  variant='primary'\n                >\n                  {appName}\n                </StyledAppHeaderText>\n                {portalName && (\n                  <StyledAppHeaderText\n                    as={appNameHidden ? VisuallyHiddenText : 'span'}\n                    variant='secondary'\n                  >\n                    {portalName}\n                  </StyledAppHeaderText>\n                )}\n              </>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/AppHeader.styles.d.ts

@@ -1,4 +1,5 @@
 import { TextProps } from '../Text';
+export declare const StyledContextSwitcher: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAppHeaderInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     centerLogo: boolean;
 }, never>;
@@ -12,5 +13,6 @@ export declare const StyledAppHeaderText: import("styled-components").StyledComp
 export declare const StyledAppHeaderOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
     hideTitle: boolean;
+    drawerOpen: boolean;
 }, never>;
 //# sourceMappingURL=AppHeader.styles.d.ts.map

package/lib/components/AppShell/AppHeader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAaA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAuBjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAwC9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA0B9E,CAAC;AAIF,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;SA+C/D,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAaA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SAuBjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SAwC9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA0B9E,CAAC;AAIF,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;SAqDrF,CAAC"}

package/lib/components/AppShell/AppHeader.styles.js

@@ -10,7 +10,13 @@ import { StyledPopover } from '../Popover';
 import { StyledSearchInput } from '../SearchInput';
 import { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';
 import Text from '../Text';
-import { headerHeight } from './AppShell.styles';
+import { headerHeight, navWidth } from './AppShell.styles';
+export const StyledContextSwitcher = styled.div(({ theme }) => {
+    return css `
+    width: calc(${navWidth} - 2 * ${theme.base.spacing});
+  `;
+});
+StyledContextSwitcher.defaultProps = defaultThemeProp;
 export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
     return css `
     & > :first-child {
@@ -104,52 +110,56 @@ export const StyledAppHeaderOperator = styled.button(({ theme }) => css `
     }
   `);
 StyledAppHeaderOperator.defaultProps = defaultThemeProp;
-export const StyledAppHeader = styled.header(({ hideTitle, theme }) => {
+export const StyledAppHeader = styled.header(({ hideTitle, drawerOpen, theme }) => {
     const headerColor = theme.components['app-shell'].header['background-color'];
     const contrastColor = tryCatch(() => readableColor(headerColor));
     const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));
     return css `
-    position: sticky;
-    z-index: ${theme.base['z-index'].drawer};
-    top: 0;
-    gap: ${theme.base.spacing};
-    max-width: 100%;
-    height: ${headerHeight};
-    background-color: ${headerColor};
-    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
+      position: sticky;
+      z-index: calc(${theme.base['z-index'].backdrop} - 1);
+      ${drawerOpen &&
+        css `
+        z-index: calc(${theme.base['z-index'].backdrop} - 2);
+      `}
+      top: 0;
+      gap: ${theme.base.spacing};
+      max-width: 100%;
+      height: ${headerHeight};
+      background-color: ${headerColor};
+      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};
 
-    > :first-child {
-      justify-self: flex-start;
-      min-width: 33vw;
+      ${StyledAppHeaderInfo} {
+        justify-self: flex-start;
+        min-width: 33vw;
 
-      ${hideTitle &&
+        ${hideTitle &&
         css `
-        min-width: fit-content;
-      `}
-    }
+          min-width: fit-content;
+        `}
+      }
 
-    > ${StyledAppHeaderOperator} {
-      justify-self: flex-end;
+      > ${StyledAppHeaderOperator} {
+        justify-self: flex-end;
 
-      + ${StyledPopover} {
-        &,
-        ${StyledMenuListContainer} {
-          background-color: ${headerColor};
-        }
+        + ${StyledPopover} {
+          &,
+          ${StyledMenuListContainer} {
+            background-color: ${headerColor};
+          }
 
-        ${StyledMenuListContainer} li {
-          color: ${contrastColor};
-          background-color: transparent;
+          ${StyledMenuListContainer} li {
+            color: ${contrastColor};
+            background-color: transparent;
 
-          &:hover,
-          &[data-current='true'] {
-            color: ${hoverColors.foreground};
-            background-color: ${hoverColors.background};
+            &:hover,
+            &[data-current='true'] {
+              color: ${hoverColors.foreground};
+              background-color: ${hoverColors.background};
+            }
           }
         }
       }
-    }
-  `;
+    `;
 });
 StyledAppHeader.defaultProps = defaultThemeProp;
 //# sourceMappingURL=AppHeader.styles.js.map

package/lib/components/AppShell/AppHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,sBAAsB;AAEtB,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC9F,OAAO,IAAmB,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;;;;;;;;;;;;;MAaN,WAAW;;;QAGT,UAAU;QACZ,GAAG,CAAA;gCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;OAC3C;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAClD,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,GAAG,CAAA;;;;;;;8BAOgB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;QAEpF,CAAC,eAAe;QAClB,GAAG,CAAA;;;;;;YAMG,iBAAiB;cACf,kBAAkB;4BACJ,WAAW;uBAChB,aAAa;;;cAGtB,qBAAqB;4BACP,WAAW;;;;;;;;;OAShC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACxE,CAAC;IACF,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CACnC,IAAI,CACF,aAAa,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACvD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CACzC,CACF,CAAC;IACF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;eAIC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;mBACpD,QAAQ,CAAC,CAAC;;QAErB,OAAO,KAAK,WAAW;QACzB,GAAG,CAAA;uBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;OACtD;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAClD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;oBAIA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5F,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3F,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;WAEhC,KAAK,CAAC,IAAI,CAAC,OAAO;;cAEf,YAAY;wBACF,WAAW;qCACE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;QAM9D,SAAS;QACX,GAAG,CAAA;;OAEF;;;QAGC,uBAAuB;;;UAGrB,aAAa;;UAEb,uBAAuB;8BACH,WAAW;;;UAG/B,uBAAuB;mBACd,aAAa;;;;;qBAKX,WAAW,CAAC,UAAU;gCACX,WAAW,CAAC,UAAU;;;;;GAKnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["/* AppHeader styles */\n\nimport { mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';\nimport Text, { TextProps } from '../Text';\n\nimport { headerHeight } from './AppShell.styles';\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > a,\n    & > button {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n            }\n          }\n        }\n\n        &:focus-within {\n          /* max-width: 100%; */\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n      font-size: ${fontSize.s};\n\n      ${variant !== 'secondary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean }>(({ hideTitle, theme }) => {\n  const headerColor = theme.components['app-shell'].header['background-color'];\n  const contrastColor = tryCatch(() => readableColor(headerColor));\n  const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n  return css`\n    position: sticky;\n    z-index: ${theme.base['z-index'].drawer};\n    top: 0;\n    gap: ${theme.base.spacing};\n    max-width: 100%;\n    height: ${headerHeight};\n    background-color: ${headerColor};\n    border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n\n    > :first-child {\n      justify-self: flex-start;\n      min-width: 33vw;\n\n      ${hideTitle &&\n      css`\n        min-width: fit-content;\n      `}\n    }\n\n    > ${StyledAppHeaderOperator} {\n      justify-self: flex-end;\n\n      + ${StyledPopover} {\n        &,\n        ${StyledMenuListContainer} {\n          background-color: ${headerColor};\n        }\n\n        ${StyledMenuListContainer} li {\n          color: ${contrastColor};\n          background-color: transparent;\n\n          &:hover,\n          &[data-current='true'] {\n            color: ${hoverColors.foreground};\n            background-color: ${hoverColors.background};\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,sBAAsB;AAEtB,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC9F,OAAO,IAAmB,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;kBACM,QAAQ,UAAU,KAAK,CAAC,IAAI,CAAC,OAAO;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;;;;;;;;;;;;;MAaN,WAAW;;;QAGT,UAAU;QACZ,GAAG,CAAA;gCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;OAC3C;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAClD,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IAEjE,OAAO,GAAG,CAAA;;;;;;;8BAOgB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;QAEpF,CAAC,eAAe;QAClB,GAAG,CAAA;;;;;;YAMG,iBAAiB;cACf,kBAAkB;4BACJ,WAAW;uBAChB,aAAa;;;cAGtB,qBAAqB;4BACP,WAAW;;;;;;;;;OAShC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE9C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACrB,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAClC,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACxE,CAAC;IACF,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CACnC,IAAI,CACF,aAAa,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,EACvD,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CACzC,CACF,CAAC;IACF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;;;;eAIC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;mBACpD,QAAQ,CAAC,CAAC;;QAErB,OAAO,KAAK,WAAW;QACzB,GAAG,CAAA;uBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;OACtD;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAClD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;oBAIA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAC1C,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE;IACnC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3F,OAAO,GAAG,CAAA;;sBAEQ,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;QAC5C,UAAU;QACZ,GAAG,CAAA;wBACe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;OAC/C;;aAEM,KAAK,CAAC,IAAI,CAAC,OAAO;;gBAEf,YAAY;0BACF,WAAW;uCACE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;QAEhE,mBAAmB;;;;UAIjB,SAAS;QACX,GAAG,CAAA;;SAEF;;;UAGC,uBAAuB;;;YAGrB,aAAa;;YAEb,uBAAuB;gCACH,WAAW;;;YAG/B,uBAAuB;qBACd,aAAa;;;;;uBAKX,WAAW,CAAC,UAAU;kCACX,WAAW,CAAC,UAAU;;;;;KAKnD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["/* AppHeader styles */\n\nimport { mix, readableColor, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledImage } from '../Image';\nimport { StyledMenuListContainer } from '../Menu/Menu.styles';\nimport { StyledPopover } from '../Popover';\nimport { StyledSearchInput } from '../SearchInput';\nimport { StyledSearchButton, StyledSearchTextInput } from '../SearchInput/SearchInput.styles';\nimport Text, { TextProps } from '../Text';\n\nimport { headerHeight, navWidth } from './AppShell.styles';\n\nexport const StyledContextSwitcher = styled.div(({ theme }) => {\n  return css`\n    width: calc(${navWidth} - 2 * ${theme.base.spacing});\n  `;\n});\n\nStyledContextSwitcher.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderInfo = styled.div<{ centerLogo: boolean }>(({ centerLogo, theme }) => {\n  return css`\n    & > :first-child {\n      vertical-align: top;\n    }\n\n    & > a,\n    & > button {\n      cursor: pointer;\n      text-decoration: none;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    ${StyledImage} {\n      height: 1.625rem;\n\n      ${centerLogo &&\n      css`\n        padding-inline-start: ${theme.base.spacing};\n      `}\n    }\n  `;\n});\n\nStyledAppHeaderInfo.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearchForm = styled.form<{ isMediumOrAbove: boolean }>(\n  ({ isMediumOrAbove, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n\n    return css`\n      max-width: 33vw;\n      min-width: 10rem;\n      width: 100%;\n      justify-self: center;\n      margin-inline-start: 0;\n      margin-inline-end: auto;\n      transition: max-width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n      ${!isMediumOrAbove &&\n      css`\n        max-width: 75%;\n        min-width: 2rem;\n        margin-inline-start: auto;\n\n        &:not([focused]) {\n          ${StyledSearchInput} {\n            ${StyledSearchButton} {\n              background: ${headerColor};\n              color: ${contrastColor};\n            }\n\n            ${StyledSearchTextInput} {\n              background: ${headerColor};\n            }\n          }\n        }\n\n        &:focus-within {\n          /* max-width: 100%; */\n          min-width: 10rem;\n        }\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n  margin: auto;\n`;\n\nexport const StyledAppHeaderText = styled(Text)<{ variant: TextProps['variant'] }>(\n  ({ theme, variant }) => {\n    const contrastColor = tryCatch(() =>\n      readableColor(theme.components['app-shell'].header['background-color'])\n    );\n    const secondaryColor = tryCatch(() =>\n      rgba(\n        contrastColor ?? theme.base.palette['foreground-color'],\n        theme.base.transparency['transparent-2']\n      )\n    );\n    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n      color: ${variant === 'secondary' ? secondaryColor : contrastColor};\n      font-size: ${fontSize.s};\n\n      ${variant !== 'secondary' &&\n      css`\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      `}\n    `;\n  }\n);\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ hideTitle: boolean; drawerOpen: boolean }>(\n  ({ hideTitle, drawerOpen, theme }) => {\n    const headerColor = theme.components['app-shell'].header['background-color'];\n    const contrastColor = tryCatch(() => readableColor(headerColor));\n    const hoverColors = getHoverColors(mix(0.01, theme.base.palette.interactive, headerColor));\n\n    return css`\n      position: sticky;\n      z-index: calc(${theme.base['z-index'].backdrop} - 1);\n      ${drawerOpen &&\n      css`\n        z-index: calc(${theme.base['z-index'].backdrop} - 2);\n      `}\n      top: 0;\n      gap: ${theme.base.spacing};\n      max-width: 100%;\n      height: ${headerHeight};\n      background-color: ${headerColor};\n      border-bottom: solid 0.0625rem ${theme.base.palette['border-line']};\n\n      ${StyledAppHeaderInfo} {\n        justify-self: flex-start;\n        min-width: 33vw;\n\n        ${hideTitle &&\n        css`\n          min-width: fit-content;\n        `}\n      }\n\n      > ${StyledAppHeaderOperator} {\n        justify-self: flex-end;\n\n        + ${StyledPopover} {\n          &,\n          ${StyledMenuListContainer} {\n            background-color: ${headerColor};\n          }\n\n          ${StyledMenuListContainer} li {\n            color: ${contrastColor};\n            background-color: transparent;\n\n            &:hover,\n            &[data-current='true'] {\n              color: ${hoverColors.foreground};\n              background-color: ${hoverColors.background};\n            }\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAEH,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuChD,OAAO,EACL,aAAa,EAMb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAsG1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA2GhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkU7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAWjB,EAAE,EAEH,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuChD,OAAO,EACL,aAAa,EAMb,UAAU,EACX,MAAM,kBAAkB,CAAC;AAsG1B,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA0IhC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAsV7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -20,10 +20,11 @@ import Backdrop from '../Backdrop';
 import Tooltip from '../Tooltip/Tooltip';
 import SkipLinks from '../SkipLinks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
+import Progress from '../Progress';
 import AppShellContext, { AppShellDrawerContext } from './AppShellContext';
 import AppShellDrawer from './Drawer';
 import AppHeader from './AppHeader';
-import { StyledAppNav, StyledAppInfo, StyledCaseTypes, StyledScrollWrap, StyledUtils, StyledAppMain, StyledAppShellNavIcon, StyledNavCasesList, StyledAppEnvironment, StyledBannerRegion, StyledCountIcon, StyledUtilIconCount, StyledMobileNav, StyledAppShellTooltip, StyledAppShellToggleButton } from './AppShell.styles';
+import { StyledAppNav, StyledAppInfo, StyledCaseTypes, StyledScrollWrap, StyledUtils, StyledAppMain, StyledNavCasesList, StyledAppEnvironment, StyledBannerRegion, StyledCountIcon, StyledUtilIconCount, StyledMobileNav, StyledAppShellTooltip, StyledAppShellToggleButton } from './AppShell.styles';
 import NavigationList from './NavigationList';
 import { AppShellSearch } from './AppShellSearch';
 registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);
@@ -38,7 +39,7 @@ const CaseTypes = ({ caseTypes }) => {
     return useMemo(() => (_jsx(StyledCaseTypes, { children: _jsx(NavigationList, { items: [
                 {
                     primary: t('app_shell_create'),
-                    visual: _jsx(Icon, { name: 'plus', as: StyledAppShellNavIcon }),
+                    visual: _jsx(Icon, { name: 'plus' }),
                     items: transformedCaseTypes
                 }
             ] }) })), [caseTypes]);
@@ -53,7 +54,7 @@ const Links = (props) => {
                 ...link,
                 primary: link.name,
                 'aria-current': link.active ? 'page' : null,
-                visual: link.icon ? _jsx(Icon, { name: link.icon, as: StyledAppShellNavIcon }) : null,
+                visual: link.icon ? _jsx(Icon, { name: link.icon }) : null,
                 onClick: link.links ? undefined : link.onClick,
                 items: link.links ? mergedNavLinks(link.links) : undefined
             };
@@ -68,7 +69,7 @@ const Cases = (props) => {
     const { cases } = props;
     const setupCases = (items) => {
         return items.map((item) => {
-            const { id, primary, secondary, visual = _jsx(Icon, { name: 'case-solid', as: StyledAppShellNavIcon }), active, onClick, onDismiss } = item;
+            const { id, primary, secondary, visual = _jsx(Icon, { name: 'case-solid' }), active, onClick, onDismiss } = item;
             return {
                 id,
                 'aria-current': active ? 'page' : undefined,
@@ -84,10 +85,11 @@ const Cases = (props) => {
     };
     return (_jsx(StyledNavCasesList, { children: _jsx(NavigationList, { items: setupCases(cases) }) }));
 };
-export const Utils = ({ operator, items, appHeader }) => {
-    const { navOpen, navState } = useContext(AppShellContext);
+export const Utils = ({ contextSwitcher = {}, operator, items, appHeader }) => {
+    const t = useI18n();
+    const { contexts, onContextClick, label: contextSwitcherLabel = t('switch_to') } = contextSwitcher;
+    const { navOpen, navState, drawerOpen, setDrawerOpen } = useContext(AppShellContext);
     const [item, setItem] = useState();
-    const [drawerOpen, setDrawerOpen] = useState(false);
     useEffect(() => {
         if (drawerOpen && item) {
             setItem(items?.find((utilItem) => !isValidElement(utilItem) && utilItem.name === item.name));
@@ -102,6 +104,24 @@ export const Utils = ({ operator, items, appHeader }) => {
                 items: operator.actions
             }
         ], [appHeader, operator.name, operator.avatar, operator.actions]);
+    const contextSwitcherUtilItem = useMemo(() => {
+        if (!appHeader && contexts && contexts?.length > 1 && !!onContextClick) {
+            return {
+                name: contextSwitcherLabel,
+                primary: contextSwitcherLabel,
+                visual: _jsx(Icon, { name: 'dot-9-solid' }),
+                drawerView: (_jsx(NavigationList, { items: contexts.map(context => ({
+                        ...context,
+                        primary: context.primary,
+                        'aria-current': !!context.selected,
+                        visual: context.visual,
+                        onClick: e => {
+                            onContextClick(context.id, e);
+                        }
+                    })), singleSelect: true }))
+            };
+        }
+    }, [appHeader, contexts, contextSwitcherLabel, onContextClick]);
     const transform = useCallback((utilItem) => {
         const uItem = { ...utilItem };
         delete uItem.onDrawerClose;
@@ -114,7 +134,7 @@ export const Utils = ({ operator, items, appHeader }) => {
             },
             ...uItem,
             primary: utilItem.name,
-            visual: utilItem.count ? (_jsxs(StyledUtilIconCount, { children: [utilItem.visual, _jsx(Count, { as: StyledCountIcon, variant: 'urgent', children: utilItem.count })] })) : (utilItem.visual),
+            visual: utilItem.count ? (_jsxs(StyledUtilIconCount, { children: [utilItem.visual, _jsx(Count, { as: StyledCountIcon, variant: 'urgent', id: `${utilItem.name}-count`, children: utilItem.count })] })) : (utilItem.visual),
             collapseItems: !navOpen
         };
     }, [navOpen]);
@@ -123,6 +143,7 @@ export const Utils = ({ operator, items, appHeader }) => {
             ...(items ?? []).map(uItem => {
                 return isValidElement(uItem) ? uItem : transform(uItem);
             }),
+            ...(contextSwitcherUtilItem ? [transform(contextSwitcherUtilItem)] : []),
             ...operatorInfo
         ];
     }, [items, operatorInfo, transform]);
@@ -147,7 +168,7 @@ export const Utils = ({ operator, items, appHeader }) => {
 };
 const AppShell = forwardRef((props, ref) => {
     const t = useI18n();
-    const { appInfo, searchInput, appHeader, searchPage, searchLabel = t('sitewide'), caseTypes, links, banners, environment: { name: envName, color: envColor } = {}, main, operator, utils, cases, defaultExpanded = false, collapsedHoverMenus = false, ...restProps } = props;
+    const { appInfo, contextSwitcher, searchInput, appHeader, searchPage, searchLabel = t('sitewide'), caseTypes, links, banners, progress, environment: { name: envName, color: envColor } = {}, main, operator, utils, cases, defaultExpanded = false, collapsedHoverMenus = false, ...restProps } = props;
     const { appName, portalName, href: appInfoHref, onClick: appInfoOnClick, imageSrc: logoSrc, appNameHidden, ...appInfoRestProps } = appInfo;
     let appInfoAs = 'div';
     if (appInfoHref)
@@ -159,6 +180,7 @@ const AppShell = forwardRef((props, ref) => {
     const navRef = useConsolidatedRef(ref);
     const [mobileNavOpen, setMobileNavOpen] = useState(false);
     const [mobileNavBackdrop, setMobileNavBackdrop] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
     const focusedImperatively = useRef(false);
     const [headerEl, setHeaderEl] = useElement();
     const [mobileHeaderEl, setMobileHeaderEl] = useElement();
@@ -224,7 +246,7 @@ const AppShell = forwardRef((props, ref) => {
         }, ref: isSmallOrAbove ? navRef : undefined, as: StyledAppNav, appHeader: showAppHeader, navOpen: mobileNavOpen, showEnv: !!envName, onFocus: onFocus, children: [envName && (_jsx(StyledAppEnvironment, { item: { shrink: 0 }, color: envColor ?? theme.base.colors.red['extra-light'], children: envName })), !showAppHeader && (_jsxs(_Fragment, { children: [_jsxs(StyledAppInfo, { as: Grid, forwardedAs: appInfoAs, variant: 'link', href: appInfoHref, onClick: appInfoOnClick, "aria-label": `${appName}${portalName ? ` - ${portalName}` : ''}`, ...appInfoRestProps, container: {
                             alignItems: 'center',
                             areas: portalName ? '"logo app" "logo portal"' : '"logo app"'
-                        }, ref: setAppInfoEl, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }), _jsx(Grid, { item: { area: 'app' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: portalName }))] }), navState === 'closed' && !appNameHidden && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: appName }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
+                        }, ref: setAppInfoEl, icon: true, children: [_jsx(Grid, { item: { area: 'logo' }, as: Image, src: logoSrc, alt: appName }), _jsx(Grid, { item: { area: 'app' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: appName }), portalName && (_jsx(Grid, { item: { area: 'portal' }, as: appNameHidden ? VisuallyHiddenText : 'span', children: portalName }))] }), navState === 'closed' && !appNameHidden && (_jsx(Tooltip, { target: appInfoEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: appName }))] })), searchInput && !showAppHeader && (_jsx(AppShellSearch, { searchLabel: searchLabel, collapsed: !mobileNavOpen && ['closed', 'closing'].includes(navState), searchInput: searchInput })), _jsxs(StyledScrollWrap, { onClick: isSmallOrAbove
                     ? () => {
                         if (['closing', 'closed'].includes(navState)) {
                             openNav(0);
@@ -233,11 +255,13 @@ const AppShell = forwardRef((props, ref) => {
                             closeNav(0);
                         }
                     }
-                    : undefined, children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes }), links && _jsx(Links, { links: links }), cases && _jsx(Cases, { cases: cases })] }), _jsx(Utils, { appHeader: showAppHeader, operator: operator, items: utils }), !mobileNavOpen && (_jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(StyledAppShellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
+                    : undefined, children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes }), links && _jsx(Links, { links: links }), cases && _jsx(Cases, { cases: cases })] }), _jsx(Utils, { appHeader: showAppHeader, operator: operator, contextSwitcher: contextSwitcher, items: utils }), !mobileNavOpen && (_jsxs(Flex, { container: { justify: 'center' }, children: [_jsx(StyledAppShellToggleButton, { icon: true, ref: setExpandCollapseEl, compact: true, variant: 'simple', onClick: () => {
                             setNavState(navState === 'closed' ? 'open' : 'closed');
                         }, open: ['open', 'opening'].includes(navState), "aria-label": navState === 'closed' ? t('expand') : t('collapse'), children: ['closed', 'closing'].includes(navState) ? (_jsx(Icon, { name: `arrow-micro-${end}` })) : (_jsx(Icon, { name: `arrow-micro-${start}` })) }), ['open', 'closed'].includes(navState) && (_jsx(Tooltip, { target: expandCollapseEl, placement: 'right', as: StyledAppShellTooltip, showDelay: 'none', hideDelay: 'none', children: navState === 'closed' ? t('expand') : t('collapse') }))] }))] }));
     return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
             navOpen: mobileNavOpen || navState === 'open' || navState === 'opening',
+            drawerOpen,
+            setDrawerOpen,
             collapsedHoverMenus,
             navState,
             focusedImperatively,
@@ -246,12 +270,12 @@ const AppShell = forwardRef((props, ref) => {
             searchContainerEl,
             setSearchContainerEl,
             mobileNavOpen
-        }), [navState, mobileNavOpen, headerEl, mobileHeaderEl, searchContainerEl]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, searchInput: searchInput, searchLabel: searchLabel, operator: operator, searchPage: searchPage, ref: setHeaderEl })), isSmallOrAbove ? (appShellJSX) : (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMobileNav, container: { alignItems: 'center' }, ref: setMobileHeaderEl, children: _jsx(Button, { variant: 'simple', onClick: () => setMobileNavBackdrop(true), "aria-label": t('app_shell_open_nav'), icon: true, children: _jsx(Icon, { name: 'bars' }) }) }), _jsx(Backdrop, { open: mobileNavBackdrop, transitionSpeed: 'none', onAfterTransitionIn: () => setMobileNavOpen(true), onBeforeTransitionOut: () => setMobileNavOpen(false), onClick: e => {
+        }), [navState, drawerOpen, mobileNavOpen, headerEl, mobileHeaderEl, searchContainerEl]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, searchPage: searchPage, ref: setHeaderEl })), isSmallOrAbove ? (appShellJSX) : (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledMobileNav, container: { alignItems: 'center' }, ref: setMobileHeaderEl, children: _jsx(Button, { variant: 'simple', onClick: () => setMobileNavBackdrop(true), "aria-label": t('app_shell_open_nav'), icon: true, children: _jsx(Icon, { name: 'bars' }) }) }), _jsx(Backdrop, { open: mobileNavBackdrop, transitionSpeed: 'none', onAfterTransitionIn: () => setMobileNavOpen(true), onBeforeTransitionOut: () => setMobileNavOpen(false), onClick: e => {
                             if (e.currentTarget === e.target)
                                 setMobileNavOpen(false);
                         }, children: _jsx(Drawer, { open: mobileNavOpen, onAfterClose: () => {
                                 setMobileNavBackdrop(false);
-                            }, position: 'fixed', placement: start, size: 'min(18.75rem, calc(100vw - 3.5rem))', nullWhenClosed: true, children: appShellJSX }) })] })), showMainContent && (_jsxs(StyledAppMain, { appHeader: showAppHeader, mobileNav: !isSmallOrAbove, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, navOpen: ['open', 'opening'].includes(navState), children: [banners && _jsx(StyledBannerRegion, { children: banners }), main] }))] }));
+                            }, position: 'fixed', placement: start, size: 'min(18.75rem, calc(100vw - 3.5rem))', nullWhenClosed: true, children: appShellJSX }) })] })), showMainContent && (_jsxs(StyledAppMain, { appHeader: showAppHeader, mobileNav: !isSmallOrAbove, headerOffset: isSmallOrAbove ? headerEl?.offsetHeight : mobileHeaderEl?.offsetHeight, navOpen: ['open', 'opening'].includes(navState), "aria-busy": progress ? 'true' : 'false', children: [_jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'string' ? progress : t('loading') }), banners && _jsx(StyledBannerRegion, { children: banners }), main] }))] }));
 });
 export default AppShell;
 //# sourceMappingURL=AppShell.js.map