npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.9.1 → 10.0.0-build.9.11 - Mend

@pega/cosmos-react-core 10.0.0-build.9.1 → 10.0.0-build.9.11

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 (148) hide show

package/lib/components/AIRewrite/AIRewrite.styles.d.ts CHANGED Viewed

@@ -1,38 +1,58 @@
 export declare const StyledAIRewriteDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<import("../Dialog/Dialog.types").BaseDialogProps & {
     onDismiss?: () => void;
-    onCancel: import("../Dialog/Dialog.types").FormAction;
     onSubmit: import("../Dialog/Dialog.types").FormAction;
 } & {
-    compact: true;
+    compact?: boolean;
 } & {
     'aria-label': string;
     heading?: never;
     additionalInfo?: never;
-} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+} & {
+    onAfterClose?: () => void;
+    onCancel: import("../Dialog/Dialog.types").FormAction | undefined;
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onAfterClose" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }) | (Omit<Omit<import("../Dialog/Dialog.types").BaseDialogProps & {
     onDismiss?: () => void;
-    onCancel: import("../Dialog/Dialog.types").FormAction;
     onSubmit: import("../Dialog/Dialog.types").FormAction;
 } & {
-    compact?: false | undefined;
+    compact?: boolean;
+} & {
+    'aria-label': string;
+    heading?: never;
+    additionalInfo?: never;
+} & {
+    onAfterClose: () => void;
+    onCancel?: import("../Dialog/Dialog.types").FormAction;
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onAfterClose" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}) | (Omit<Omit<import("../Dialog/Dialog.types").BaseDialogProps & {
+    onDismiss?: () => void;
+    onSubmit: import("../Dialog/Dialog.types").FormAction;
+} & {
+    compact?: false;
 } & {
     heading: string;
     additionalInfo?: import("../AdditionalInfo").AdditionalInfoProps;
     'aria-label'?: never;
-} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+} & {
+    onAfterClose?: () => void;
+    onCancel: import("../Dialog/Dialog.types").FormAction | undefined;
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onAfterClose" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }) | (Omit<Omit<import("../Dialog/Dialog.types").BaseDialogProps & {
     onDismiss?: () => void;
-    onCancel: import("../Dialog/Dialog.types").FormAction;
     onSubmit: import("../Dialog/Dialog.types").FormAction;
 } & {
-    compact?: false | undefined;
+    compact?: false;
 } & {
-    'aria-label': string;
-    heading?: never;
-    additionalInfo?: never;
-} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    heading: string;
+    additionalInfo?: import("../AdditionalInfo").AdditionalInfoProps;
+    'aria-label'?: never;
+} & {
+    onAfterClose: () => void;
+    onCancel?: import("../Dialog/Dialog.types").FormAction;
+} & Omit<import("../..").Attributes<"div">, "compact" | "aria-label" | "onSubmit" | "onCancel" | "heading" | "onAfterClose" | "onDismiss" | keyof import("../Dialog/Dialog.types").BaseDialogProps | "additionalInfo">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<import("../Dialog").FormDialogProps> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledFormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AIRewrite.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.styles.ts"],"names":[],"mappings":"~~AAKA~~,eAAO,MAAM,qBAAqB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uRAIhC~~,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAM5B,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAIrC,CAAC"}
1	+ {"version":3,"file":"AIRewrite.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uRAMhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAM5B,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAIrC,CAAC"}

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

@@ -1,9 +1,12 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import FormDialog from '../Dialog/FormDialog';
+import { FormDialog } from '../Dialog';
+import { StyledTouchDialog } from '../Dialog/TouchDialog.styles';
 export const StyledAIRewriteDialog = styled(FormDialog)(({ theme }) => {
     return css `
-    min-width: min(${theme.base['content-width'].xl}, calc(100vw - 2rem));
+    &:not(${StyledTouchDialog}) {
+      min-width: min(${theme.base['content-width'].xl}, calc(100vw - 2rem));
+    }
   `;
 });
 StyledAIRewriteDialog.defaultProps = defaultThemeProp;

package/lib/components/AIRewrite/AIRewrite.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIRewrite.styles.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,UAAU,MAAM,~~sBAAsB~~,CAAC;~~AAE9C~~,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,OAAO,GAAG,CAAA;~~qBACS~~,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE~~;GAChD~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;qBACvC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;wBACxB,KAAK,CAAC,IAAI,CAAC,OAAO;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIlD,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport FormDialog from '../Dialog/~~FormDialog~~';\n\nexport const StyledAIRewriteDialog = styled(FormDialog)(({ theme }) => {\n return css`\n min-width: min(${theme.base['content-width'].xl}, calc(100vw - 2rem));\n `;\n});\n\nStyledAIRewriteDialog.defaultProps = defaultThemeProp;\n\nexport const StyledFormSection = styled.div(({ theme }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border-radius: ${theme.base['border-radius']};\n padding: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledFormSection.defaultProps = defaultThemeProp;\n\nexport const StyledInstructionsWrapper = styled.div`\n textarea {\n min-height: unset;\n }\n`;\n\nStyledInstructionsWrapper.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AIRewrite.styles.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,OAAO,GAAG,CAAA;YACA,iBAAiB;uBACN,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;kBACM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;qBACvC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;wBACxB,KAAK,CAAC,IAAI,CAAC,OAAO;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIlD,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { FormDialog } from '../Dialog';\nimport { StyledTouchDialog } from '../Dialog/TouchDialog.styles';\n\nexport const StyledAIRewriteDialog = styled(FormDialog)(({ theme }) => {\n return css`\n &:not(${StyledTouchDialog}) {\n min-width: min(${theme.base['content-width'].xl}, calc(100vw - 2rem));\n }\n `;\n});\n\nStyledAIRewriteDialog.defaultProps = defaultThemeProp;\n\nexport const StyledFormSection = styled.div(({ theme }) => {\n return css`\n background: ${theme.base.palette['secondary-background']};\n border-radius: ${theme.base['border-radius']};\n padding: calc(2 * ${theme.base.spacing});\n `;\n});\n\nStyledFormSection.defaultProps = defaultThemeProp;\n\nexport const StyledInstructionsWrapper = styled.div`\n textarea {\n min-height: unset;\n }\n`;\n\nStyledInstructionsWrapper.defaultProps = defaultThemeProp;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAQjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,~~CA0N9D~~,CAAC;AAEH,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAQjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiO9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js CHANGED Viewed

@@ -11,13 +11,13 @@ import { ThemeOverride } from '../Configuration';
 import useThemeMode from '../../hooks/useThemeMode';
 import MenuButton from '../MenuButton';
 import AppShellOperator from './Operator';
+import AppShellNotifications from './Notifications';
 import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderName, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
-import { StyledShareIcon } from './AppShell.styles';
 import AppShellContext from './AppShellContext';
 import { getHeaderTheme } from './style-utils';
 import ThemeSwitcher from './ThemeSwitcher';
-const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage, headerUtils, helpMenu, shareApp, portalSwitcher }, ref) {
+const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, notifications, searchInput, searchLabel, searchPage, headerUtils, helpMenu, shareApp, portalSwitcher }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
     const isSmallOrAbove = useBreakpoint('sm');
@@ -75,7 +75,8 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
                                             setSearchExpanded(false);
                                         }) }))) })) : (_jsx(StyledAppHeaderSpacer, {})), !searchTakeover && headerUtils?.[1]] }), !searchTakeover && (_jsxs(_Fragment, { children: [onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), helpMenu && (_jsx(MenuButton, { variant: 'simple', icon: 'help', text: t('app_header_help'), iconOnly: true, menu: {
                                 items: helpMenu
-                            } })), portalSwitcher && _jsx(MenuButton, { ...portalSwitcher }), shareApp && (_jsx(Button, { variant: 'secondary', onClick: shareApp.onClick, children: _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(StyledShareIcon, { name: 'share' }), _jsx("span", { children: shareLabel })] }) })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }))] }) }));
+                            } })), portalSwitcher && _jsx(MenuButton, { ...portalSwitcher, iconOnly: !isSmallOrAbove }), shareApp &&
+                            (isSmallOrAbove ? (_jsx(Button, { variant: 'secondary', onClick: shareApp.onClick, children: _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(Icon, { name: 'share-external' }), _jsx("span", { children: shareLabel })] }) })) : (_jsx(Button, { variant: 'secondary', icon: true, label: shareLabel, onClick: shareApp.onClick, children: _jsx(Icon, { name: 'share-external' }) }))), notifications && _jsx(AppShellNotifications, { ...notifications }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }))] }) }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\nimport MenuButton from '../MenuButton';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n StyledAppHeader,\n StyledAppHeaderInfo,\n StyledAppHeaderName,\n StyledAppHeaderSearchForm,\n StyledAppHeaderSpacer,\n StyledAppHeaderText,\n StyledAppHeaderOperator,\n StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport { StyledShareIcon } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n {\n appName,\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n fullImageSrc,\n imageSrc,\n imageAltText,\n href,\n onClick,\n portalName,\n target,\n appNameHidden,\n operator,\n searchInput,\n searchLabel,\n searchPage,\n headerUtils,\n helpMenu,\n shareApp,\n portalSwitcher\n }: AppHeaderProps,\n ref: Ref<Element>\n) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [searchExpanded, setSearchExpanded] = useState(false);\n const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n const { drawerOpen, isTopBar, setSearchContainerEl } = useContext(AppShellContext);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const theme = useTheme();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n // Below `md` there's no room for the app/portal name side by side, so they stack into two rows.\n const stacked = !isMediumOrAbove;\n const searchCollapsible = !isMediumOrAbove \|\| isTopBar;\n const searchDisplay = (() => {\n if (!searchExpanded) return searchCollapsible ? 'icon' : undefined;\n if (!isSmallOrAbove) return 'fullWidth';\n if (!isMediumOrAbove) return 'grow';\n return undefined;\n })();\n const searchTakeover = searchDisplay === 'fullWidth';\n\n const shareLabel = shareApp?.label ?? t('app_shell_share');\n\n useEffect(() => {\n if (searchPage && searchContainer) {\n setSearchContainerEl(searchContainer);\n } else {\n setSearchContainerEl(null);\n }\n }, [searchPage, searchContainer, setSearchContainerEl]);\n\n // Auto-collapse back to the icon when focus leaves the search area, as long as nothing was typed.\n useEffect(() => {\n if (!searchCollapsible \|\| !searchExpanded \|\| searchInput?.value \|\| !searchContainer)\n return undefined;\n\n const handleFocusOut = (e: FocusEvent) => {\n const nextTarget = e.relatedTarget instanceof Node ? e.relatedTarget : null;\n if (!searchInput?.value && !searchContainer.contains(nextTarget)) setSearchExpanded(false);\n };\n\n searchContainer.addEventListener('focusout', handleFocusOut);\n return () => searchContainer.removeEventListener('focusout', handleFocusOut);\n }, [searchCollapsible, searchExpanded, searchInput?.value, searchContainer]);\n\n const { themeMode, onThemeModeChange } = useThemeMode();\n\n let appInfoAs: ElementType = 'div';\n if (href) appInfoAs = 'a';\n return (\n <ThemeOverride theme={headerTheme}>\n <Flex\n as={StyledAppHeader}\n container={{ alignItems: 'center', pad: 1 }}\n stacked={stacked}\n drawerOpen={drawerOpen}\n ref={ref}\n >\n {!searchTakeover && (\n <>\n {contexts && contexts.length > 1 && onContextClick && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n\n <Flex\n as={StyledAppHeaderInfo}\n container={{ colGap: 0.5 }}\n item={{ shrink: 1 }}\n centerLogo={!fullImageSrc}\n >\n <Flex\n container={{ inline: true, alignItems: 'center' }}\n item={{ shrink: 1 }}\n as={appInfoAs}\n href={href}\n onClick={href ? onClick : undefined}\n target={target}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }} item={{ shrink: 1 }}>\n {(fullImageSrc \|\| imageSrc) && (\n <Flex\n container={{ alignItems: 'center' }}\n item={{ shrink: 0 }}\n as={StyledAppHeaderLogo}\n >\n <Image\n src={fullImageSrc \|\| imageSrc}\n alt={imageAltText ?? t('application_logo')}\n />\n </Flex>\n )}\n <StyledAppHeaderName stacked={stacked \|\| appNameHidden}>\n <StyledAppHeaderText\n as={appNameHidden ? VisuallyHiddenText : 'span'}\n variant='primary'\n >\n {appName}\n </StyledAppHeaderText>\n {portalName && (\n <StyledAppHeaderText variant='secondary' stacked={stacked \|\| appNameHidden}>\n {portalName}\n </StyledAppHeaderText>\n )}\n </StyledAppHeaderName>\n </Flex>\n </Flex>\n {headerUtils?.[0]}\n </Flex>\n </>\n )}\n\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 searchDisplay={searchDisplay}\n >\n {!searchPage &&\n (searchDisplay === 'icon' ? (\n <Button\n icon\n variant='simple'\n label={t('search')}\n aria-label={t('expand_search')}\n onClick={() => {\n setSearchExpanded(true);\n setTimeout(() => searchInputRef.current?.focus());\n }}\n >\n <Icon name='search' />\n </Button>\n ) : (\n <SearchInput\n {...searchInput}\n ref={searchInputRef}\n onSearchSubmit={\n searchInput.onSearchSubmit &&\n (value => {\n searchInput.onSearchSubmit?.(value);\n setSearchExpanded(false);\n })\n }\n />\n ))}\n </StyledAppHeaderSearchForm>\n ) : (\n <StyledAppHeaderSpacer />\n )}\n {!searchTakeover && headerUtils?.[1]}\n </Flex>\n {!searchTakeover && (\n <>\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\n {helpMenu && (\n <MenuButton\n variant='simple'\n icon='help'\n text={t('app_header_help')}\n iconOnly\n menu={{\n items: helpMenu\n }}\n />\n )}\n {portalSwitcher && <MenuButton {...portalSwitcher} />}\n {shareApp && (\n <Button variant='secondary' onClick={shareApp.onClick}>\n <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n <StyledShareIcon name='share' />\n <span>{shareLabel}</span>\n </Flex>\n </Button>\n )}\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={operator.name}\n >\n {operator.avatar}\n </AppShellOperator>\n </>\n )}\n </Flex>\n </ThemeOverride>\n );\n});\n\nexport default AppHeader;\n"]}
1	+ {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\nimport MenuButton from '../MenuButton';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport AppShellNotifications from './Notifications';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n StyledAppHeader,\n StyledAppHeaderInfo,\n StyledAppHeaderName,\n StyledAppHeaderSearchForm,\n StyledAppHeaderSpacer,\n StyledAppHeaderText,\n StyledAppHeaderOperator,\n StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n {\n appName,\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n fullImageSrc,\n imageSrc,\n imageAltText,\n href,\n onClick,\n portalName,\n target,\n appNameHidden,\n operator,\n notifications,\n searchInput,\n searchLabel,\n searchPage,\n headerUtils,\n helpMenu,\n shareApp,\n portalSwitcher\n }: AppHeaderProps,\n ref: Ref<Element>\n) {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [searchExpanded, setSearchExpanded] = useState(false);\n const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n const { drawerOpen, isTopBar, setSearchContainerEl } = useContext(AppShellContext);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const theme = useTheme();\n const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n\n // Below `md` there's no room for the app/portal name side by side, so they stack into two rows.\n const stacked = !isMediumOrAbove;\n const searchCollapsible = !isMediumOrAbove \|\| isTopBar;\n const searchDisplay = (() => {\n if (!searchExpanded) return searchCollapsible ? 'icon' : undefined;\n if (!isSmallOrAbove) return 'fullWidth';\n if (!isMediumOrAbove) return 'grow';\n return undefined;\n })();\n const searchTakeover = searchDisplay === 'fullWidth';\n\n const shareLabel = shareApp?.label ?? t('app_shell_share');\n\n useEffect(() => {\n if (searchPage && searchContainer) {\n setSearchContainerEl(searchContainer);\n } else {\n setSearchContainerEl(null);\n }\n }, [searchPage, searchContainer, setSearchContainerEl]);\n\n // Auto-collapse back to the icon when focus leaves the search area, as long as nothing was typed.\n useEffect(() => {\n if (!searchCollapsible \|\| !searchExpanded \|\| searchInput?.value \|\| !searchContainer)\n return undefined;\n\n const handleFocusOut = (e: FocusEvent) => {\n const nextTarget = e.relatedTarget instanceof Node ? e.relatedTarget : null;\n if (!searchInput?.value && !searchContainer.contains(nextTarget)) setSearchExpanded(false);\n };\n\n searchContainer.addEventListener('focusout', handleFocusOut);\n return () => searchContainer.removeEventListener('focusout', handleFocusOut);\n }, [searchCollapsible, searchExpanded, searchInput?.value, searchContainer]);\n\n const { themeMode, onThemeModeChange } = useThemeMode();\n\n let appInfoAs: ElementType = 'div';\n if (href) appInfoAs = 'a';\n return (\n <ThemeOverride theme={headerTheme}>\n <Flex\n as={StyledAppHeader}\n container={{ alignItems: 'center', pad: 1 }}\n stacked={stacked}\n drawerOpen={drawerOpen}\n ref={ref}\n >\n {!searchTakeover && (\n <>\n {contexts && contexts.length > 1 && onContextClick && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n\n <Flex\n as={StyledAppHeaderInfo}\n container={{ colGap: 0.5 }}\n item={{ shrink: 1 }}\n centerLogo={!fullImageSrc}\n >\n <Flex\n container={{ inline: true, alignItems: 'center' }}\n item={{ shrink: 1 }}\n as={appInfoAs}\n href={href}\n onClick={href ? onClick : undefined}\n target={target}\n >\n <Flex container={{ alignItems: 'center', gap: 1 }} item={{ shrink: 1 }}>\n {(fullImageSrc \|\| imageSrc) && (\n <Flex\n container={{ alignItems: 'center' }}\n item={{ shrink: 0 }}\n as={StyledAppHeaderLogo}\n >\n <Image\n src={fullImageSrc \|\| imageSrc}\n alt={imageAltText ?? t('application_logo')}\n />\n </Flex>\n )}\n <StyledAppHeaderName stacked={stacked \|\| appNameHidden}>\n <StyledAppHeaderText\n as={appNameHidden ? VisuallyHiddenText : 'span'}\n variant='primary'\n >\n {appName}\n </StyledAppHeaderText>\n {portalName && (\n <StyledAppHeaderText variant='secondary' stacked={stacked \|\| appNameHidden}>\n {portalName}\n </StyledAppHeaderText>\n )}\n </StyledAppHeaderName>\n </Flex>\n </Flex>\n {headerUtils?.[0]}\n </Flex>\n </>\n )}\n\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 searchDisplay={searchDisplay}\n >\n {!searchPage &&\n (searchDisplay === 'icon' ? (\n <Button\n icon\n variant='simple'\n label={t('search')}\n aria-label={t('expand_search')}\n onClick={() => {\n setSearchExpanded(true);\n setTimeout(() => searchInputRef.current?.focus());\n }}\n >\n <Icon name='search' />\n </Button>\n ) : (\n <SearchInput\n {...searchInput}\n ref={searchInputRef}\n onSearchSubmit={\n searchInput.onSearchSubmit &&\n (value => {\n searchInput.onSearchSubmit?.(value);\n setSearchExpanded(false);\n })\n }\n />\n ))}\n </StyledAppHeaderSearchForm>\n ) : (\n <StyledAppHeaderSpacer />\n )}\n {!searchTakeover && headerUtils?.[1]}\n </Flex>\n {!searchTakeover && (\n <>\n {onThemeModeChange && (\n <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n )}\n {helpMenu && (\n <MenuButton\n variant='simple'\n icon='help'\n text={t('app_header_help')}\n iconOnly\n menu={{\n items: helpMenu\n }}\n />\n )}\n {portalSwitcher && <MenuButton {...portalSwitcher} iconOnly={!isSmallOrAbove} />}\n {shareApp &&\n (isSmallOrAbove ? (\n <Button variant='secondary' onClick={shareApp.onClick}>\n <Flex container={{ gap: 0.5, alignItems: 'center' }}>\n <Icon name='share-external' />\n <span>{shareLabel}</span>\n </Flex>\n </Button>\n ) : (\n <Button variant='secondary' icon label={shareLabel} onClick={shareApp.onClick}>\n <Icon name='share-external' />\n </Button>\n ))}\n {notifications && <AppShellNotifications {...notifications} />}\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={operator.name}\n >\n {operator.avatar}\n </AppShellOperator>\n </>\n )}\n </Flex>\n </ThemeOverride>\n );\n});\n\nexport default AppHeader;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;oBACpB,MAAM,GAAG,MAAM,GAAG,WAAW;YAkF7C,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAIH,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAQhE,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;aACrB,SAAS,CAAC,SAAS,CAAC;cACnB,OAAO;8HA+CjB,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;aAA4B,OAAO;gBAAc,OAAO;~~YAmEnF~~,CAAC"}
1	+ {"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;oBACpB,MAAM,GAAG,MAAM,GAAG,WAAW;YAkF7C,CAAC;AAIH,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAIH,eAAO,MAAM,mBAAmB;cAA0B,OAAO;YAQhE,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;aACrB,SAAS,CAAC,SAAS,CAAC;cACnB,OAAO;8HA+CjB,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;aAA4B,OAAO;gBAAc,OAAO;YA4EnF,CAAC"}

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

@@ -230,6 +230,15 @@ export const StyledAppHeader = styled.header(({ stacked, drawerOpen, theme }) =>
           }
         }
       }
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block-start: calc(-1 * var(--appshell-hard-top-offset));
+        inset-inline: 0;
+        height: var(--appshell-hard-top-offset);
+        background: inherit;
+      }
     `;
 });
 StyledAppHeader.defaultProps = defaultThemeProp;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n getHoverColors,\n calculateForegroundColor,\n type FontSize\n} 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 {\n StyledSearchButton,\n StyledSearchFiltersButton,\n StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { 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 & > :is(a, button) {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n }\n\n & > :is(a, button):focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n ${StyledImage} {\n height: 1.0725rem;\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<{\n searchDisplay?: 'icon' \| 'grow' \| 'fullWidth';\n}>(({ searchDisplay, theme }) => {\n const {\n base: { animation },\n components: {\n 'app-shell': { header },\n input\n }\n } = theme;\n\n const {\n background: headerBg,\n 'search-input': {\n 'background-color': searchInputBg,\n 'foreground-color': searchInputFg,\n 'border-color': searchInputBorder\n }\n } = header;\n\n const searchBg = searchInputBg;\n const searchFg = calculateForegroundColor(headerBg, searchInputFg, theme);\n const searchBorder = calculateForegroundColor(headerBg, searchInputBorder, theme);\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 ${animation.speed} ${animation.timing.ease};\n\n ${StyledSearchInput} input::placeholder {\n color: ${transparentize(0.4, searchFg)};\n }\n\n ${searchDisplay === 'icon' &&\n css`\n max-width: ${input.height};\n min-width: ${input.height};\n width: auto;\n margin-inline-start: auto;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'grow' &&\n css`\n flex-grow: 1;\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'fullWidth' &&\n css`\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n &:not([focused]) {\n ${StyledSearchInput} {\n background: ${searchBg};\n border-color: ${searchBorder};\n ${StyledSearchButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchTextInput} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchFiltersButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n }\n }\n `;\n});\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n return css`\n max-width: min(${theme.base['content-width'].sm}, 25vw);\n `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\n// Shrinks the app/portal name for ellipsis truncation; stacks vertically below `md` where there's no room for both names side by side.\nexport const StyledAppHeaderName = styled.div<{ stacked?: boolean }>(\n ({ theme, stacked }) => css`\n display: flex;\n flex-direction: ${stacked ? 'column' : 'row'};\n align-items: ${stacked ? 'stretch' : 'baseline'};\n gap: ${stacked ? 0 : theme.base.spacing};\n min-width: 0;\n `\n);\nStyledAppHeaderName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{\n variant: TextProps['variant'];\n stacked?: boolean;\n}>(({ theme, variant, stacked }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor =\n theme.components['app-shell'].header['app-name-color'] === 'auto'\n ? calculateForegroundColor(headerBg, headerFgColor, theme)\n : theme.components['app-shell'].header['app-name-color'];\n\n const secondaryColor =\n theme.components['app-shell'].header['portal-name-color'] === 'auto'\n ? tryCatch(() =>\n rgba(\n foregroundColor ?? theme.base.palette['foreground-color'],\n theme.base.transparency['transparent-2']\n )\n )\n : theme.components['app-shell'].header['portal-name-color'];\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: inline-block;\n max-width: 100%;\n min-width: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n font-family: ${theme.components.text['brand-primary']['font-family']};\n\n ${variant === 'primary' &&\n css`\n font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n font-weight: ${theme.components.text['brand-primary']['font-weight']};\n `}\n\n ${variant === 'secondary' &&\n css`\n font-size: ${fontSize[theme.components.text.secondary['font-size'] as FontSize]};\n ${stacked &&\n css`\n align-self: flex-start;\n `}\n `}\n `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ stacked: boolean; drawerOpen: boolean }>(\n ({ stacked, drawerOpen, theme }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor, theme);\n\n const hoverColors = getHoverColors(\n tryCatch(\n () => mix(0.01, theme.base.palette.interactive, headerBg),\n () => theme.base.palette.interactive\n ),\n theme.base['min-contrast']\n );\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: var(--appshell-hard-top-offset, 0);\n gap: ${theme.base.spacing};\n max-width: 100%;\n height: ${headerHeight};\n background: ${headerBg};\n color: ${foregroundColor};\n border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n ${StyledAppHeaderInfo} {\n justify-self: flex-start;\n min-width: 33vw;\n\n ${stacked &&\n css`\n min-width: 0;\n `}\n }\n\n ${StyledSearchFiltersButton} {\n color: ${foregroundColor};\n }\n\n > ${StyledAppHeaderOperator} {\n justify-self: flex-end;\n\n + ${StyledPopover} {\n &,\n ${StyledMenuListContainer} {\n background: ${headerBg};\n }\n\n ${StyledMenuListContainer} li {\n color: ${foregroundColor};\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"]}
1	+ {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, rgba, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n calculateFontSize,\n getHoverColors,\n calculateForegroundColor,\n type FontSize\n} 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 {\n StyledSearchButton,\n StyledSearchFiltersButton,\n StyledSearchTextInput\n} from '../SearchInput/SearchInput.styles';\nimport Text from '../Text';\nimport type { 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 & > :is(a, button) {\n cursor: pointer;\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n }\n\n & > :is(a, button):focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n ${StyledImage} {\n height: 1.0725rem;\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<{\n searchDisplay?: 'icon' \| 'grow' \| 'fullWidth';\n}>(({ searchDisplay, theme }) => {\n const {\n base: { animation },\n components: {\n 'app-shell': { header },\n input\n }\n } = theme;\n\n const {\n background: headerBg,\n 'search-input': {\n 'background-color': searchInputBg,\n 'foreground-color': searchInputFg,\n 'border-color': searchInputBorder\n }\n } = header;\n\n const searchBg = searchInputBg;\n const searchFg = calculateForegroundColor(headerBg, searchInputFg, theme);\n const searchBorder = calculateForegroundColor(headerBg, searchInputBorder, theme);\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 ${animation.speed} ${animation.timing.ease};\n\n ${StyledSearchInput} input::placeholder {\n color: ${transparentize(0.4, searchFg)};\n }\n\n ${searchDisplay === 'icon' &&\n css`\n max-width: ${input.height};\n min-width: ${input.height};\n width: auto;\n margin-inline-start: auto;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'grow' &&\n css`\n flex-grow: 1;\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n ${searchDisplay === 'fullWidth' &&\n css`\n max-width: 100%;\n margin-inline-end: 0;\n `}\n\n &:not([focused]) {\n ${StyledSearchInput} {\n background: ${searchBg};\n border-color: ${searchBorder};\n ${StyledSearchButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchTextInput} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n\n ${StyledSearchFiltersButton} {\n background: ${searchBg};\n color: ${searchFg};\n border-color: ${searchBorder};\n }\n }\n }\n `;\n});\n\nStyledAppHeaderSearchForm.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSpacer = styled.div`\n margin: auto;\n`;\n\nexport const StyledAppHeaderLogo = styled.div(({ theme }) => {\n return css`\n max-width: min(${theme.base['content-width'].sm}, 25vw);\n `;\n});\nStyledAppHeaderLogo.defaultProps = defaultThemeProp;\n\n// Shrinks the app/portal name for ellipsis truncation; stacks vertically below `md` where there's no room for both names side by side.\nexport const StyledAppHeaderName = styled.div<{ stacked?: boolean }>(\n ({ theme, stacked }) => css`\n display: flex;\n flex-direction: ${stacked ? 'column' : 'row'};\n align-items: ${stacked ? 'stretch' : 'baseline'};\n gap: ${stacked ? 0 : theme.base.spacing};\n min-width: 0;\n `\n);\nStyledAppHeaderName.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderText = styled(Text)<{\n variant: TextProps['variant'];\n stacked?: boolean;\n}>(({ theme, variant, stacked }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor =\n theme.components['app-shell'].header['app-name-color'] === 'auto'\n ? calculateForegroundColor(headerBg, headerFgColor, theme)\n : theme.components['app-shell'].header['app-name-color'];\n\n const secondaryColor =\n theme.components['app-shell'].header['portal-name-color'] === 'auto'\n ? tryCatch(() =>\n rgba(\n foregroundColor ?? theme.base.palette['foreground-color'],\n theme.base.transparency['transparent-2']\n )\n )\n : theme.components['app-shell'].header['portal-name-color'];\n\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: inline-block;\n max-width: 100%;\n min-width: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${variant === 'secondary' ? secondaryColor : foregroundColor};\n font-family: ${theme.components.text['brand-primary']['font-family']};\n\n ${variant === 'primary' &&\n css`\n font-size: ${fontSize[theme.components.text['brand-primary']['font-size'] as FontSize]};\n font-weight: ${theme.components.text['brand-primary']['font-weight']};\n `}\n\n ${variant === 'secondary' &&\n css`\n font-size: ${fontSize[theme.components.text.secondary['font-size'] as FontSize]};\n ${stacked &&\n css`\n align-self: flex-start;\n `}\n `}\n `;\n});\n\nStyledAppHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledAppHeaderOperator.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeader = styled.header<{ stacked: boolean; drawerOpen: boolean }>(\n ({ stacked, drawerOpen, theme }) => {\n const headerBg = theme.components['app-shell'].header.background;\n const headerFgColor = theme.components['app-shell'].header['foreground-color'];\n\n const foregroundColor = calculateForegroundColor(headerBg, headerFgColor, theme);\n\n const hoverColors = getHoverColors(\n tryCatch(\n () => mix(0.01, theme.base.palette.interactive, headerBg),\n () => theme.base.palette.interactive\n ),\n theme.base['min-contrast']\n );\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: var(--appshell-hard-top-offset, 0);\n gap: ${theme.base.spacing};\n max-width: 100%;\n height: ${headerHeight};\n background: ${headerBg};\n color: ${foregroundColor};\n border-bottom: solid 0.0625rem ${theme.components['app-shell'].header['border-color']};\n\n ${StyledAppHeaderInfo} {\n justify-self: flex-start;\n min-width: 33vw;\n\n ${stacked &&\n css`\n min-width: 0;\n `}\n }\n\n ${StyledSearchFiltersButton} {\n color: ${foregroundColor};\n }\n\n > ${StyledAppHeaderOperator} {\n justify-self: flex-end;\n\n + ${StyledPopover} {\n &,\n ${StyledMenuListContainer} {\n background: ${headerBg};\n }\n\n ${StyledMenuListContainer} li {\n color: ${foregroundColor};\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 &::before {\n content: '';\n position: absolute;\n inset-block-start: calc(-1 * var(--appshell-hard-top-offset));\n inset-inline: 0;\n height: var(--appshell-hard-top-offset);\n background: inherit;\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,4 +1,5 @@
 import type { AppShellProps } from './AppShell.types';
-declare const AppShellMain: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
+import type { TouchAppShellProps } from './TouchAppShell';
+declare const AppShellMain: import("react").ForwardRefExoticComponent<AppShellProps & Pick<TouchAppShellProps, "bottomTouchPanel"> & import("react").RefAttributes<HTMLDivElement>>;
 export default AppShellMain;
 //# sourceMappingURL=AppShell.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"~~AAiDA~~,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;~~AAsWrE~~,QAAA,MAAM,YAAY,~~0GAuKjB~~,CAAC;~~AAEF~~,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAQrE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAmW1D,QAAA,MAAM,YAAY,yJA6LhB,CAAC;AAEH,eAAe,YAAY,CAAC"}

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

@@ -11,7 +11,7 @@ import * as caretRightIcon from '../Icon/icons/caret-right.icon';
 import * as sunIcon from '../Icon/icons/sun.icon';
 import * as moonIcon from '../Icon/icons/moon.icon';
 import * as circleMixedLeftIcon from '../Icon/icons/circle-mixed-left.icon';
-import * as shareIcon from '../Icon/icons/share.icon';
+import * as shareExternalIcon from '../Icon/icons/share-external.icon';
 import { useI18n, useBreakpoint, useConsolidatedRef, useElement, useTransitionState, useEvent, useUID, usePreviewManager, useDirection } from '../../hooks';
 import useThemeMode from '../../hooks/useThemeMode';
 import { openCloseStates } from '../../hooks/useTransitionState';
@@ -25,7 +25,7 @@ import Tooltip from '../Tooltip';
 import AppShellContext from './AppShellContext';
 import AppHeader from './AppHeader';
 import AppTopNav from './AppTopNav';
-import { StyledAppMain, StyledBannerRegion, StyledAppShellToggleButton, StyledAppShellTooltip, StyledSidebarNav, AppShellGlobalStyle, StyledShareIcon } from './AppShell.styles';
+import { StyledAppMain, StyledBannerRegion, StyledAppShellToggleButton, StyledAppShellTooltip, StyledSidebarNav, AppShellGlobalStyle } from './AppShell.styles';
 import { followingNodes, focusRegion } from './utils';
 import AppNavigationPanel from './AppNavigationPanel';
 import NavigationList from './NavigationList';
@@ -33,11 +33,12 @@ import DocumentTabs, { getTabElementId, getTabPanelId } from './DocumentTabs';
 import { StyledDocumentTabPanel } from './DocumentTabs.styles';
 import TopNavDrawerProvider from './TopNavDrawerProvider';
 import TouchAppShell from './TouchAppShell';
-registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon, sunIcon, moonIcon, circleMixedLeftIcon, shareIcon);
+import { useNotificationsPopover } from './Notifications';
+registerIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon, sunIcon, moonIcon, circleMixedLeftIcon, shareExternalIcon);
 registerAction({ id: 'NextRegion', defaultKeyBinding: 'F9' }, { id: 'PrevRegion', defaultKeyBinding: 'Shift+F9' }, { id: 'KeyboardCommands', defaultKeyBinding: 'CommandOrControl+/' });
 const AppShell = forwardRef(function AppShell(props, ref) {
     const t = useI18n();
-    const { appInfo, contextSwitcher, searchInput, appHeader, searchPage, searchLabel = t('sitewide'), caseTypes, links, agent, banners, progress, main, operator, utils, headerUtils, helpMenu, cases, defaultExpanded = false, collapsedHoverMenus = false, shareApp, portalSwitcher, navOrientation = 'side-rail', documentTabs, utilsList, ...restProps } = props;
+    const { appInfo, contextSwitcher, searchInput, appHeader, searchPage, searchLabel = t('sitewide'), caseTypes, links, agent, banners, progress, main, operator, notifications, utils, headerUtils, helpMenu, cases, defaultExpanded = false, collapsedHoverMenus = false, shareApp, portalSwitcher, navOrientation = 'side-rail', documentTabs, utilsList, ...restProps } = props;
     const skipLinks = useMemo(() => [
         {
             label: t('go_to_main_content'),
@@ -146,7 +147,7 @@ const AppShell = forwardRef(function AppShell(props, ref) {
             headerEl,
             searchContainerEl,
             previewActive
-        ]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, headerUtils: headerUtils, helpMenu: helpMenu, searchPage: searchPage, shareApp: shareApp, portalSwitcher: portalSwitcher, ref: setHeaderEl })), isTopBar && (_jsx(TopNavDrawerProvider, { children: _jsx(AppTopNav, { appInfo: appInfo, links: links, caseTypes: caseTypes, cases: cases, agent: agent, utils: utils, searchInput: searchInput, searchPage: searchPage, searchLabel: searchLabel }) })), !isTopBar && isSmallOrAbove && (_jsxs(Flex, { ...restProps, container: {
+        ]), children: [_jsx(SkipLinks, { items: skipLinks }), showAppHeader && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, operator: operator, notifications: notifications, headerUtils: headerUtils, helpMenu: helpMenu, searchPage: searchPage, shareApp: shareApp, portalSwitcher: portalSwitcher, ref: setHeaderEl })), isTopBar && (_jsx(TopNavDrawerProvider, { children: _jsx(AppTopNav, { appInfo: appInfo, links: links, caseTypes: caseTypes, cases: cases, agent: agent, utils: utils, searchInput: searchInput, searchPage: searchPage, searchLabel: searchLabel }) })), !isTopBar && isSmallOrAbove && (_jsxs(Flex, { ...restProps, container: {
                     direction: 'column',
                     justify: 'between'
                 }, id: navId, as: StyledSidebarNav, portalAgent: !!agent, ref: navRef, "data-app-region": true, onFocus: onFocus, "aria-label": t('app_shell_main_navigation_label'), children: [_jsx(AppNavigationPanel, { navState: sidebarNavState, appInfo: !showAppHeader ? appInfo : undefined, searchInput: !showAppHeader ? searchInput : undefined, searchLabel: searchLabel, caseTypes: caseTypes, links: links, cases: cases, utils: utilsList, onClick: () => {
@@ -163,12 +164,13 @@ const AppShell = forwardRef(function AppShell(props, ref) {
                         if (!documentTabs)
                             return mainRegion;
                         return (_jsx(StyledDocumentTabPanel, { role: 'tabpanel', id: documentTabs.currentTabId ? getTabPanelId(documentTabs.currentTabId) : undefined, "aria-labelledby": documentTabs.currentTabId ? getTabElementId(documentTabs.currentTabId) : undefined, tabIndex: 0, children: mainRegion }));
-                    })()] })), _jsx(AppShellGlobalStyle, { isTopBar: isTopBar, showAppHeader: showAppHeader, isMobile: false, hasDocumentTabs: !!documentTabs, navOpen: sidebarNavState === 'open' || sidebarNavState === 'opening' })] }));
+                    })()] })), _jsx(AppShellGlobalStyle, { isTopBar: isTopBar, showAppHeader: showAppHeader, isTouchDevice: false, isExtraSmallScreen: !isSmallOrAbove, hasDocumentTabs: !!documentTabs, navOpen: sidebarNavState === 'open' || sidebarNavState === 'opening' })] }));
 });
 const AppShellMain = forwardRef(function AppShellMain(props, ref) {
     const t = useI18n();
+    const { start } = useDirection();
     const navId = useUID();
-    const { appInfo, appHeader, contextSwitcher, searchPage, searchInput, searchLabel = t('sitewide'), caseTypes, links, cases, agent, utils, operator, headerUtils, helpMenu, shareApp, banners, progress, main, documentTabs, navOrientation = 'side-rail', ...restProps } = props;
+    const { appInfo, appHeader, contextSwitcher, searchPage, searchInput, searchLabel = t('sitewide'), caseTypes, links, cases, agent, utils, operator, notifications, headerUtils, helpMenu, shareApp, banners, progress, main, bottomTouchPanel, documentTabs, navOrientation = 'side-rail', ...restProps } = props;
     const isSmallOrAbove = useBreakpoint('sm');
     const isTopBar = navOrientation === 'top-bar' || !isSmallOrAbove;
     const showAppHeader = isTouchDevice
@@ -198,7 +200,7 @@ const AppShellMain = forwardRef(function AppShellMain(props, ref) {
             return {
                 name: shareLabel,
                 primary: shareLabel,
-                visual: _jsx(StyledShareIcon, { name: 'share' }),
+                visual: _jsx(Icon, { name: 'share-external' }),
                 onClick: shareApp.onClick
             };
         }
@@ -247,23 +249,31 @@ const AppShellMain = forwardRef(function AppShellMain(props, ref) {
             };
         }
     }, [onThemeModeChange, showAppHeader, t, themeMode]);
+    // With the app header shown, `AppHeader` renders its own notifications button and popover.
+    const navNotifications = showAppHeader ? undefined : notifications;
+    const { toggle: toggleNotificationsPopover, popover: notificationsPopover } = useNotificationsPopover(navNotifications, start);
+    const notificationsUtilItem = useMemo(() => {
+        if (!navNotifications)
+            return;
+        const { visual, name, count } = navNotifications;
+        return { visual, name, count, onClick: e => toggleNotificationsPopover(e.currentTarget) };
+    }, [navNotifications, toggleNotificationsPopover]);
     const utilsList = useMemo(() => [
         ...(utils ?? []),
+        ...(notificationsUtilItem ? [notificationsUtilItem] : []),
         ...(contextSwitcherUtilItem ? [contextSwitcherUtilItem] : []),
         ...(shareApplicationUtilItem ? [shareApplicationUtilItem] : []),
         ...(operatorInfoUtilItem ? [operatorInfoUtilItem] : []),
         ...(themeSwitcherUtilItem ? [themeSwitcherUtilItem] : [])
     ], [
         contextSwitcherUtilItem,
+        notificationsUtilItem,
         operatorInfoUtilItem,
         shareApplicationUtilItem,
         themeSwitcherUtilItem,
         utils
     ]);
-    if (isTouchDevice) {
-        return (_jsx(TouchAppShell, { appInfo: appInfo, appHeader: appHeader, contextSwitcher: contextSwitcher, searchPage: searchPage, searchInput: searchInput, searchLabel: searchLabel, caseTypes: caseTypes, links: links, cases: cases, agent: agent, utils: utils, utilsList: utilsList, operator: operator, headerUtils: headerUtils, helpMenu: helpMenu, shareApp: shareApp, banners: banners, progress: progress, main: main, documentTabs: documentTabs, navId: navId, restProps: restProps }));
-    }
-    return _jsx(AppShell, { ...props, utilsList: utilsList, ref: ref });
+    return (_jsxs(_Fragment, { children: [isTouchDevice ? (_jsx(TouchAppShell, { appInfo: appInfo, appHeader: appHeader, contextSwitcher: contextSwitcher, searchPage: searchPage, searchInput: searchInput, searchLabel: searchLabel, caseTypes: caseTypes, links: links, cases: cases, agent: agent, utils: utils, utilsList: utilsList, operator: operator, notifications: notifications, headerUtils: headerUtils, helpMenu: helpMenu, shareApp: shareApp, banners: banners, progress: progress, main: main, bottomTouchPanel: bottomTouchPanel, documentTabs: documentTabs, navId: navId, restProps: restProps })) : (_jsx(AppShell, { ...props, utilsList: utilsList, ref: ref })), notificationsPopover] }));
 });
 export default AppShellMain;
 //# sourceMappingURL=AppShell.js.map