@pega/cosmos-react-core 10.0.0-build.9.7 → 10.0.0-build.9.9

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefObject\n} from 'react';\n\nimport type { AsProp, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport type { ImageProps } from '../Image';\nimport type { ProgressProps } from '../Progress';\nimport type { SearchInputProps } from '../SearchInput';\nimport type { MenuItemProps } from '../Menu';\nimport type { MenuButtonProps } from '../MenuButton';\n\n/** Share Application button configuration */\nexport interface ShareAppConfig {\n  /** Click handler for the share application button. */\n  onClick: NavListItemProps['onClick'];\n  /** Label for the share application button. */\n  label?: string;\n}\n\n/** Portal switcher button configuration. */\nexport type PortalSwitcherConfig = Pick<MenuButtonProps, 'text' | 'icon' | 'onClick' | 'menu'>;\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n  /** The primary text to render in the header. */\n  appName: string;\n  /** If true, the appName will not be visibly displayed on screen. */\n  appNameHidden?: boolean;\n  /** The source for a small application image or logo that is rendered in the nav bar. */\n  imageSrc: ImageProps['src'];\n  /** The alt text for the image. Defaults to \"Application logo\" */\n  imageAltText?: string;\n  /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n  fullImageSrc?: ImageProps['src'];\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\nexport interface ContextItem extends Pick<MenuItemProps, 'id' | 'primary' | 'visual' | 'href'> {\n  selected: MenuItemProps['selected'];\n}\n\ninterface ContextSwitcherOptions extends BaseProps {\n  /** Application contexts available to user. */\n  contexts: ContextItem[];\n  /** Callback on click of item in context switcher. */\n  onContextClick: (id: MenuItemProps['id'], e: MouseEvent<HTMLElement>) => void;\n  /** Label of context being modified; i.e: \"Switch Application\", \"Switch Studio\"\n   * @default 'Switch to…'\n   */\n  label?: string;\n}\n\nexport type ContextSwitcherProps = ContextSwitcherOptions | Record<string, never>;\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** Props related to the App Shell header. */\n  appInfo: AppInfoProps;\n  /** The content of the application. */\n  main: ReactNode;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** If true, a header will render containing the logo and name of the app as well as search and operator regions. */\n  appHeader?: boolean;\n  /** Context switcher configuration. */\n  contextSwitcher?: ContextSwitcherProps;\n  /** If true, the search results page will replace the search input in the app header with its own */\n  searchPage?: boolean;\n  /** Props related to the Search Input. */\n  searchInput?: SearchInputProps;\n  /**\n   * The aria-label for the search input.\n   * @default 'Sitewide'\n   */\n  searchLabel?: string;\n  /** A set of cases that will render in an expanded list within the App Shell. */\n  caseTypes?: CaseTypeProps[];\n  /** A set of links that will render as a flat list in the App Shell. */\n  links?: LinkProps[];\n  /** Agent configuration. */\n  agent?: AgentProps;\n  /** A set of cases that will render as a flat list in the App Shell. */\n  cases?: CaseProps[];\n  /** Place the main content of the application into a loading state by way of a boolean or a custom message. */\n  progress?: boolean | ProgressProps['message'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  utils?: (UtilItemProps | ReactElement)[];\n  /** A set of app utilities for the Header */\n  headerUtils?: [ReactNode, ReactNode];\n  /** Configuration for the help menu in the header */\n  helpMenu?: MenuItemProps[];\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  defaultExpanded?: boolean;\n  /** When the navigation is collapsed menus will be shown on hover instead of on click */\n  collapsedHoverMenus?: boolean;\n  /** Configuration for the Share Application button. */\n  shareApp?: ShareAppConfig;\n  /** Configuration for the portal switcher button. */\n  portalSwitcher?: PortalSwitcherConfig;\n  /**\n   * Orientation of the primary navigation.\n   * @default 'side-rail'\n   */\n  navOrientation?: NavOrientation;\n  /** Props related to the document tabs. When provided, shows horizontal tabs below the header. */\n  documentTabs?: DocumentTabsProps;\n}\n\nexport type NavOrientation = 'side-rail' | 'top-bar';\n\nexport interface CaseTypeProps {\n  /** The display name of the case. */\n  name: string;\n  /** The icon for the case. */\n  icon?: string;\n  /** Click handler for the case. */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** The display name of the link. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** The name of the Cosmos Icon to render as a visual. */\n  icon?: string;\n  /** Determines if the link represents the active page. */\n  active?: boolean;\n  /** A set of nested links. */\n  links?: LinkProps[];\n  /** Click handler for the link. */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface AgentProps extends Pick<LinkProps, 'id' | 'name' | 'active' | 'onClick'> {\n  /** Icon or visual element for the agent. */\n  icon?: ReactNode;\n}\n\nexport interface CaseProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** Name of the case or some primary information like title. */\n  primary: string;\n  /** Additional info of a case like timestamp. */\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  /** A visual element identifying the case. If not passed will render case-solid icon */\n  visual?: ReactNode;\n  /** Determines if the case represents the active page. */\n  active?: boolean;\n  /** Click handler for the case . */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Dismiss handler for the case. */\n  onDismiss?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface OperatorProps {\n  /** A visual element identifying the operator. */\n  avatar: ReactNode;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n  /** The name of the operator. */\n  name: string;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n  /** The display name of an utility item. */\n  name: string;\n  /** Number when given displays on top-right of a given icon. */\n  count?: number;\n  /** View that renders on an appShell drawer onClick of an item */\n  drawerView?: ReactNode;\n  /** Heading for view that renders */\n  drawerHeader?: string;\n  /** Callback that fires on appshell drawer open */\n  onDrawerOpen?: () => void;\n  /** Callback that fires on appshell drawer close */\n  onDrawerClose?: () => void;\n}\n\nexport interface UtilsProps {\n  /** Context switcher config. */\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  /** The active user of the application. */\n  operator?: AppShellProps['operator'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  items?: (UtilItemProps | ReactElement)[];\n  /** Configuration for the Share Application button. */\n  shareApp?: ShareAppConfig;\n  /** Configuration for the portal switcher button. */\n  portalSwitcher?: PortalSwitcherConfig;\n}\n\nexport interface NavListProps extends AsProp, BaseProps {\n  items?: (NavListItemProps | ReactElement)[];\n  nestedList?: boolean;\n  collapsed?: boolean;\n  id?: string;\n  /** Whether the list is of single-select style options */\n  singleSelect?: boolean;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavListItemWrapperProps extends ForwardProps {\n  label: string;\n  tooltipLabel: string;\n  content?: ReactNode;\n  items?: NavListItemProps[];\n  /** @default 5 */\n  filterAt?: number;\n  onMenuToggle?: (state: 'open' | 'close') => void;\n  childElementRef: RefObject<HTMLElement>;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChildrenProp {\n  id?: string;\n  visual?: ReactNode;\n  primary: string;\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  items?: NavListItemProps[];\n  collapseItems?: boolean;\n  actions?: OperatorProps['actions'];\n  onDismiss?: MouseEventHandler<HTMLElement>;\n  forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n  isMenuItem?: boolean;\n  /** Whether the item is a single-select option */\n  singleSelect?: NavListProps['singleSelect'];\n  /** Whether the item is selected */\n  selected?: boolean;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavMenuProps extends NavListItemProps {\n  forwardedRef?: Ref<HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  operator: AppShellProps['operator'];\n  searchInput?: AppShellProps['searchInput'];\n  searchLabel?: AppShellProps['searchLabel'];\n  searchPage?: AppShellProps['searchPage'];\n  headerUtils?: AppShellProps['headerUtils'];\n  helpMenu?: AppShellProps['helpMenu'];\n  /** Configuration for the Share Application button. */\n  shareApp?: ShareAppConfig;\n  /** Configuration for the portal switcher button. */\n  portalSwitcher?: PortalSwitcherConfig;\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n  items: (DrawerItemProps & ForwardProps)[];\n  loading?: boolean;\n  viewAll?: {\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport interface DrawerItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** A flag indicating if the item has been pinned or not. */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n  headingText?: string;\n  emptyText: string;\n  displayRecents: boolean;\n  displayPins?: boolean;\n}\n\nexport type DocumentTabGroup = 'page' | 'case' | 'data';\n\nexport interface DocumentTab {\n  /** Unique id for the tab. */\n  id: string;\n  /** Display label for the tab. */\n  label: string;\n  /** Optional icon name to display in the tab. */\n  icon?: string;\n  /** Whether the tab can be closed. Defaults to true. */\n  closeable?: boolean;\n  /** Group for overflow menu categorization. */\n  group?: DocumentTabGroup;\n  /** Secondary line in overflow menu. */\n  secondary?: string;\n  /** When false, tab cannot be reordered. Defaults to true. */\n  reorderable?: boolean;\n}\n\nexport interface DocumentTabsProps {\n  /** The list of open document tabs. */\n  items: DocumentTab[];\n  /** The id of the currently active tab. */\n  currentTabId?: string;\n  /** Callback when a tab is clicked. */\n  onTabClick?: (id: string) => void;\n  /** Callback when a tab's close button is clicked. */\n  onTabClose?: (id: string) => void;\n  /** Callback when all closeable tabs should be closed from the overflow menu. */\n  onTabCloseAll?: () => void;\n  /** Callback when tabs are reordered. Receives tab ids in display order. */\n  onTabReorder?: (orderedIds: string[]) => void;\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefObject\n} from 'react';\n\nimport type { Action, AsProp, BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport type { ImageProps } from '../Image';\nimport type { ProgressProps } from '../Progress';\nimport type { SearchInputProps } from '../SearchInput';\nimport type { MenuItemProps } from '../Menu';\nimport type { MenuButtonProps } from '../MenuButton';\n\n/** Share Application button configuration */\nexport interface ShareAppConfig {\n  /** Click handler for the share application button. */\n  onClick: NavListItemProps['onClick'];\n  /** Label for the share application button. */\n  label?: string;\n}\n\n/** Portal switcher button configuration. */\nexport type PortalSwitcherConfig = Pick<MenuButtonProps, 'text' | 'icon' | 'onClick' | 'menu'>;\n\n/** AppShell props */\n\nexport interface AppInfoProps {\n  /** The primary text to render in the header. */\n  appName: string;\n  /** If true, the appName will not be visibly displayed on screen. */\n  appNameHidden?: boolean;\n  /** The source for a small application image or logo that is rendered in the nav bar. */\n  imageSrc: ImageProps['src'];\n  /** The alt text for the image. Defaults to \"Application logo\" */\n  imageAltText?: string;\n  /** The source for the full size application image or logo that is rendered in the app header, if enabled. */\n  fullImageSrc?: ImageProps['src'];\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  /** The secondary text to render in the header. */\n  portalName?: string;\n  /** Specifies where to open the link href. */\n  target?: string;\n}\n\nexport interface ContextItem extends Pick<MenuItemProps, 'id' | 'primary' | 'visual' | 'href'> {\n  selected: MenuItemProps['selected'];\n}\n\ninterface ContextSwitcherOptions extends BaseProps {\n  /** Application contexts available to user. */\n  contexts: ContextItem[];\n  /** Callback on click of item in context switcher. */\n  onContextClick: (id: MenuItemProps['id'], e: MouseEvent<HTMLElement>) => void;\n  /** Label of context being modified; i.e: \"Switch Application\", \"Switch Studio\"\n   * @default 'Switch to…'\n   */\n  label?: string;\n}\n\nexport type ContextSwitcherProps = ContextSwitcherOptions | Record<string, never>;\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n  /** Props related to the App Shell header. */\n  appInfo: AppInfoProps;\n  /** The content of the application. */\n  main: ReactNode;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** The notifications panel of the application. */\n  notifications?: NotificationsProps;\n  /** If true, a header will render containing the logo and name of the app as well as search, notifications and operator regions. */\n  appHeader?: boolean;\n  /** Context switcher configuration. */\n  contextSwitcher?: ContextSwitcherProps;\n  /** If true, the search results page will replace the search input in the app header with its own */\n  searchPage?: boolean;\n  /** Props related to the Search Input. */\n  searchInput?: SearchInputProps;\n  /**\n   * The aria-label for the search input.\n   * @default 'Sitewide'\n   */\n  searchLabel?: string;\n  /** A set of cases that will render in an expanded list within the App Shell. */\n  caseTypes?: CaseTypeProps[];\n  /** A set of links that will render as a flat list in the App Shell. */\n  links?: LinkProps[];\n  /** Agent configuration. */\n  agent?: AgentProps;\n  /** A set of cases that will render as a flat list in the App Shell. */\n  cases?: CaseProps[];\n  /** Place the main content of the application into a loading state by way of a boolean or a custom message. */\n  progress?: boolean | ProgressProps['message'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  utils?: (UtilItemProps | ReactElement)[];\n  /** A set of app utilities for the Header */\n  headerUtils?: [ReactNode, ReactNode];\n  /** Configuration for the help menu in the header */\n  helpMenu?: MenuItemProps[];\n  /** Banners will render above the main content if they are provided. */\n  banners?: ReactNode;\n  defaultExpanded?: boolean;\n  /** When the navigation is collapsed menus will be shown on hover instead of on click */\n  collapsedHoverMenus?: boolean;\n  /** Configuration for the Share Application button. */\n  shareApp?: ShareAppConfig;\n  /** Configuration for the portal switcher button. */\n  portalSwitcher?: PortalSwitcherConfig;\n  /**\n   * Orientation of the primary navigation.\n   * @default 'side-rail'\n   */\n  navOrientation?: NavOrientation;\n  /** Props related to the document tabs. When provided, shows horizontal tabs below the header. */\n  documentTabs?: DocumentTabsProps;\n}\n\nexport type NavOrientation = 'side-rail' | 'top-bar';\n\nexport interface CaseTypeProps {\n  /** The display name of the case. */\n  name: string;\n  /** The icon for the case. */\n  icon?: string;\n  /** Click handler for the case. */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface LinkProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** The display name of the link. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href: string;\n  /** The name of the Cosmos Icon to render as a visual. */\n  icon?: string;\n  /** Determines if the link represents the active page. */\n  active?: boolean;\n  /** A set of nested links. */\n  links?: LinkProps[];\n  /** Click handler for the link. */\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface AgentProps extends Pick<LinkProps, 'id' | 'name' | 'active' | 'onClick'> {\n  /** Icon or visual element for the agent. */\n  icon?: ReactNode;\n}\n\nexport interface CaseProps extends ForwardProps {\n  /** Unique id */\n  id: string;\n  /** Name of the case or some primary information like title. */\n  primary: string;\n  /** Additional info of a case like timestamp. */\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  /** A visual element identifying the case. If not passed will render case-solid icon */\n  visual?: ReactNode;\n  /** Determines if the case represents the active page. */\n  active?: boolean;\n  /** Click handler for the case . */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /** Dismiss handler for the case. */\n  onDismiss?: MouseEventHandler<HTMLElement>;\n}\n\nexport interface OperatorProps {\n  /** A visual element identifying the operator. */\n  avatar: ReactNode;\n  /** A list of actions that will populate a menu attached to the operator. */\n  actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n  /** The name of the operator. */\n  name: string;\n}\n\nexport interface NotificationsProps extends Pick<NavListItemProps, 'visual'> {\n  /** The display name of the notifications, used as the trigger label and popover heading. */\n  name: string;\n  /** Number of new notifications, displayed as a badge on the trigger when greater than 0. */\n  count?: number;\n  /** Content rendered in the notifications popover. */\n  content?: ReactNode;\n  /** Called when the popover opens. */\n  onOpen?: () => void;\n  /** Called when the popover closes. */\n  onClose?: () => void;\n  /** When given, renders a \"Mark all as read\" button in the popover header. */\n  onMarkAllAsRead?: () => void;\n  /** Actions rendered in the popover header. */\n  actions?: Action[];\n  /** Ref for the popover actions button element. */\n  actionsButtonRef?: Ref<HTMLButtonElement>;\n}\n\nexport interface UtilItemProps extends Pick<NavListItemProps, 'visual' | 'actions' | 'onClick'> {\n  /** The display name of an utility item. */\n  name: string;\n  /** Number when given displays on top-right of a given icon. */\n  count?: number;\n  /** View that renders on an appShell drawer onClick of an item */\n  drawerView?: ReactNode;\n  /** Heading for view that renders */\n  drawerHeader?: string;\n  /** Callback that fires on appshell drawer open */\n  onDrawerOpen?: () => void;\n  /** Callback that fires on appshell drawer close */\n  onDrawerClose?: () => void;\n}\n\nexport interface UtilsProps {\n  /** Context switcher config. */\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  /** The active user of the application. */\n  operator?: AppShellProps['operator'];\n  /** A set of app utilities like notifications, recents that renders at the bottom of AppShell */\n  items?: (UtilItemProps | ReactElement)[];\n  /** Configuration for the Share Application button. */\n  shareApp?: ShareAppConfig;\n  /** Configuration for the portal switcher button. */\n  portalSwitcher?: PortalSwitcherConfig;\n}\n\nexport interface NavListProps extends AsProp, BaseProps {\n  items?: (NavListItemProps | ReactElement)[];\n  nestedList?: boolean;\n  collapsed?: boolean;\n  id?: string;\n  /** Whether the list is of single-select style options */\n  singleSelect?: boolean;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavListItemWrapperProps extends ForwardProps {\n  label: string;\n  tooltipLabel: string;\n  content?: ReactNode;\n  items?: NavListItemProps[];\n  /** @default 5 */\n  filterAt?: number;\n  onMenuToggle?: (state: 'open' | 'close') => void;\n  childElementRef: RefObject<HTMLElement>;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavListItemProps extends AsProp, BaseProps, ForwardProps, NoChildrenProp {\n  id?: string;\n  visual?: ReactNode;\n  primary: string;\n  secondary?: string;\n  /** Presents short, quickly identifiable info to a user for a collapsed nav item. */\n  collapsedItemInfo?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  items?: NavListItemProps[];\n  collapseItems?: boolean;\n  actions?: OperatorProps['actions'];\n  onDismiss?: MouseEventHandler<HTMLElement>;\n  forwardedRef?: Ref<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;\n  isMenuItem?: boolean;\n  /** Whether the item is a single-select option */\n  singleSelect?: NavListProps['singleSelect'];\n  /** Whether the item is selected */\n  selected?: boolean;\n  mobileNavBar?: boolean;\n}\n\nexport interface NavMenuProps extends NavListItemProps {\n  forwardedRef?: Ref<HTMLButtonElement>;\n}\n\n/** AppHeader props */\n\nexport interface AppHeaderProps extends BaseProps, AppInfoProps {\n  contextSwitcher?: ContextSwitcherProps | Record<string, never>;\n  operator: AppShellProps['operator'];\n  notifications?: AppShellProps['notifications'];\n  searchInput?: AppShellProps['searchInput'];\n  searchLabel?: AppShellProps['searchLabel'];\n  searchPage?: AppShellProps['searchPage'];\n  headerUtils?: AppShellProps['headerUtils'];\n  helpMenu?: AppShellProps['helpMenu'];\n  /** Configuration for the Share Application button. */\n  shareApp?: ShareAppConfig;\n  /** Configuration for the portal switcher button. */\n  portalSwitcher?: PortalSwitcherConfig;\n}\n\n/** Drawer props */\n\nexport interface DrawerListProps {\n  items: (DrawerItemProps & ForwardProps)[];\n  loading?: boolean;\n  viewAll?: {\n    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    href?: string;\n  } & ForwardProps;\n  newNotifications?: number;\n  onItemClick?: (id: string, event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  onItemPinToggle?: (id: string) => void;\n  onDrawerOpen?: () => void;\n  onDrawerClose?: () => void;\n}\n\nexport interface DrawerItemProps extends BaseProps {\n  /** An id representing the item. */\n  id: string;\n  /** The primary text for the item. */\n  primary: string;\n  /** Secondary text that will be rendered as a Meta List. */\n  secondary?: string[];\n  /** A visual associated with the item. */\n  visual?: ReactNode;\n  /** A flag indicating if the item has been read. */\n  unread?: boolean;\n  /** A flag indicating if the item has been pinned or not. */\n  pinned?: boolean;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** The onClick handler for the item. */\n  onClick?: (id: string, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** The handler hat is called when a pin icon is toggled on an item. */\n  onPinToggle?: (id: string) => void;\n}\n\nexport interface ListProps extends DrawerListProps {\n  headingText?: string;\n  emptyText: string;\n  displayRecents: boolean;\n  displayPins?: boolean;\n}\n\nexport type DocumentTabGroup = 'page' | 'case' | 'data';\n\nexport interface DocumentTab {\n  /** Unique id for the tab. */\n  id: string;\n  /** Display label for the tab. */\n  label: string;\n  /** Optional icon name to display in the tab. */\n  icon?: string;\n  /** Whether the tab can be closed. Defaults to true. */\n  closeable?: boolean;\n  /** Group for overflow menu categorization. */\n  group?: DocumentTabGroup;\n  /** Secondary line in overflow menu. */\n  secondary?: string;\n  /** When false, tab cannot be reordered. Defaults to true. */\n  reorderable?: boolean;\n}\n\nexport interface DocumentTabsProps {\n  /** The list of open document tabs. */\n  items: DocumentTab[];\n  /** The id of the currently active tab. */\n  currentTabId?: string;\n  /** Callback when a tab is clicked. */\n  onTabClick?: (id: string) => void;\n  /** Callback when a tab's close button is clicked. */\n  onTabClose?: (id: string) => void;\n  /** Callback when all closeable tabs should be closed from the overflow menu. */\n  onTabCloseAll?: () => void;\n  /** Callback when tabs are reordered. Receives tab ids in display order. */\n  onTabReorder?: (orderedIds: string[]) => void;\n}\n"]}

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

@@ -1,4 +1,3 @@
-export declare const StyledAppShellListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledAppShellList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const StyledAppShellSummaryList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const StyledAppShellMetaList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
@@ -16,4 +15,5 @@ export declare const StyledNotificationSecondary: import("styled-components/dist
 export declare const EmptyStateColorContrast: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledAppShellListSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledAppShellListHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledAppShellListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=AppShellList.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,yBAAyB,6NAoBpC,CAAC;AAIH,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAI9C,eAAO,MAAM,yBAAyB,6NA0BpC,CAAC;AAIH,eAAO,MAAM,sBAAsB,iOAIlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yOAwBlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;aAA0B,OAAO;qBAAmB,OAAO;YAiB/F,CAAC;AAIF,eAAO,MAAM,yBAAyB;aAA0B,OAAO;YASrE,CAAC;AAIH,eAAO,MAAM,2BAA2B;aAA0B,OAAO;YAUxE,CAAC;AAIF,eAAO,MAAM,uBAAuB,6NAWlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAOpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qOAWpC,CAAC"}
+{"version":3,"file":"AppShellList.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,kBAAkB,iOAAc,CAAC;AAI9C,eAAO,MAAM,yBAAyB,6NA0BpC,CAAC;AAIH,eAAO,MAAM,sBAAsB,iOAIlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yOAwBlC,CAAC;AAIH,eAAO,MAAM,wBAAwB;aAA0B,OAAO;qBAAmB,OAAO;YAiB/F,CAAC;AAIF,eAAO,MAAM,yBAAyB;aAA0B,OAAO;YASrE,CAAC;AAIH,eAAO,MAAM,2BAA2B;aAA0B,OAAO;YAUxE,CAAC;AAIF,eAAO,MAAM,uBAAuB,6NAWlC,CAAC;AAIH,eAAO,MAAM,yBAAyB,6NAOpC,CAAC;AAIH,eAAO,MAAM,yBAAyB,qOAWpC,CAAC;AAKH,eAAO,MAAM,yBAAyB,6NA4DpC,CAAC"}

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

@@ -1,33 +1,14 @@
-import { darken, getContrast, lighten } from 'polished';
+import { darken, mix, getContrast, lighten } from 'polished';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
 import { StyledAlert } from '../Badges/Alert';
 import { StyledEmptyState } from '../EmptyState';
 import { StyledSummaryItem } from '../SummaryItem';
 import { StyledText } from '../Text';
+import { StyledDrawerViewAll } from './Drawer.styles';
+import { StyledNotificationsPopover } from './Notifications';
 import { navContrastColors } from './style-utils';
-/* AppShellList styles */
-export const StyledAppShellListWrapper = styled.div(({ theme }) => {
-    const { border: borderColor } = navContrastColors(theme);
-    return css `
-    max-height: 100%;
-    white-space: nowrap;
-
-    ${StyledSummaryItem} {
-      position: relative;
-      &::after {
-        content: '';
-        position: absolute;
-        top: calc(100% - 0.03125rem);
-        inset-inline-end: 1rem;
-        inset-inline-start: 1rem;
-        height: 0.0625rem;
-        background-color: ${borderColor};
-      }
-    }
-  `;
-});
-StyledAppShellListWrapper.defaultProps = defaultThemeProp;
 export const StyledAppShellList = styled.ul ``;
 StyledAppShellList.defaultProps = defaultThemeProp;
 export const StyledAppShellSummaryList = styled.li(({ theme }) => {
@@ -154,4 +135,63 @@ export const StyledAppShellListHeading = styled.h3(({ theme }) => {
   `;
 });
 StyledAppShellListHeading.defaultProps = defaultThemeProp;
+/* AppShellList styles */
+export const StyledAppShellListWrapper = styled.div(({ theme }) => {
+    const { palette } = theme.base;
+    const { border: borderColor } = navContrastColors(theme);
+    const hoverBackgroundColor = tryCatch(() => mix(0.9, palette['primary-background'], palette['foreground-color']), () => palette['primary-background']);
+    return css `
+    max-height: 100%;
+    white-space: nowrap;
+
+    ${StyledSummaryItem} {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: calc(100% - 0.03125rem);
+        inset-inline-end: 1rem;
+        inset-inline-start: 1rem;
+        height: 0.0625rem;
+        background-color: ${borderColor};
+      }
+    }
+
+    ${StyledNotificationsPopover}:has(&) {
+      overflow: auto;
+      ${StyledAppShellListSection} {
+        border-block-start-color: ${palette['border-line']};
+
+        ${StyledAppShellSummaryList} ${StyledSummaryItem} {
+          &:hover,
+          &:focus {
+            background-color: ${hoverBackgroundColor};
+          }
+          &::after {
+            background-color: ${palette['border-line']};
+          }
+
+          ${StyledNotificationPrimary} {
+            color: ${palette['foreground-color']};
+          }
+
+          ${StyledNotificationVisual} ${StyledAlert} {
+            background-color: ${palette['foreground-color']};
+          }
+        }
+
+        ${EmptyStateColorContrast} ${StyledEmptyState} span,
+            svg {
+          color: ${palette['foreground-color']};
+        }
+      }
+
+      ${StyledDrawerViewAll} {
+        color: ${palette['foreground-color']};
+        background-color: ${darken(0.075, hoverBackgroundColor)};
+      }
+    }
+  `;
+});
+StyledAppShellListWrapper.defaultProps = defaultThemeProp;
 //# sourceMappingURL=AppShellList.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellList.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, getContrast, lighten } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledSummaryItem } from '../SummaryItem';\nimport { StyledText } from '../Text';\n\nimport { navContrastColors } from './style-utils';\n\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    max-height: 100%;\n    white-space: nowrap;\n\n    ${StyledSummaryItem} {\n      position: relative;\n      &::after {\n        content: '';\n        position: absolute;\n        top: calc(100% - 0.03125rem);\n        inset-inline-end: 1rem;\n        inset-inline-start: 1rem;\n        height: 0.0625rem;\n        background-color: ${borderColor};\n      }\n    }\n  `;\n});\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryList = styled.li(({ theme }) => {\n  const { hoverBg } = navContrastColors(theme);\n\n  return css`\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n      color: inherit;\n      background-color: transparent;\n      border: none;\n      text-decoration: none;\n      cursor: pointer;\n      text-align: start;\n      white-space: normal;\n      width: 100%;\n\n      &:hover,\n      &:focus {\n        background-color: ${hoverBg};\n      }\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\n\nStyledAppShellSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  const { foreground, hoverBg: listHoverBg } = navContrastColors(theme);\n  let hoverBg = darken(0.1, listHoverBg);\n\n  if (getContrast(hoverBg, listHoverBg) < 1.3) {\n    hoverBg = lighten(0.1, listHoverBg);\n  }\n\n  return css`\n    color: inherit;\n    border: none;\n    background-color: transparent;\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean; visualIncluded?: boolean }>(\n  ({ theme, unread, visualIncluded }) => {\n    const { foreground } = navContrastColors(theme);\n\n    return css`\n      position: relative;\n      ${StyledAlert} {\n        display: ${unread ? 'auto' : 'none'};\n        position: absolute;\n        inset-inline-start: -0.65625rem;\n        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};\n        background-color: ${foreground};\n        height: 0.3125rem;\n        width: 0.3125rem;\n      }\n    `;\n  }\n);\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n    color: ${foreground};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const EmptyStateColorContrast = styled.div(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    ${StyledEmptyState} {\n      span,\n      svg {\n        color: ${foreground};\n      }\n    }\n  `;\n});\n\nEmptyStateColorContrast.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${nestedListHeader};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShellList.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { darken, mix, getContrast, lighten } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledEmptyState } from '../EmptyState';\nimport { StyledSummaryItem } from '../SummaryItem';\nimport { StyledText } from '../Text';\n\nimport { StyledDrawerViewAll } from './Drawer.styles';\nimport { StyledNotificationsPopover } from './Notifications';\nimport { navContrastColors } from './style-utils';\n\nexport const StyledAppShellList = styled.ul``;\n\nStyledAppShellList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellSummaryList = styled.li(({ theme }) => {\n  const { hoverBg } = navContrastColors(theme);\n\n  return css`\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n      color: inherit;\n      background-color: transparent;\n      border: none;\n      text-decoration: none;\n      cursor: pointer;\n      text-align: start;\n      white-space: normal;\n      width: 100%;\n\n      &:hover,\n      &:focus {\n        background-color: ${hoverBg};\n      }\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\n\nStyledAppShellSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const StyledAppShellPinButton = styled.button(({ theme }) => {\n  const { foreground, hoverBg: listHoverBg } = navContrastColors(theme);\n  let hoverBg = darken(0.1, listHoverBg);\n\n  if (getContrast(hoverBg, listHoverBg) < 1.3) {\n    hoverBg = lighten(0.1, listHoverBg);\n  }\n\n  return css`\n    color: inherit;\n    border: none;\n    background-color: transparent;\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledAppShellPinButton.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationVisual = styled.span<{ unread?: boolean; visualIncluded?: boolean }>(\n  ({ theme, unread, visualIncluded }) => {\n    const { foreground } = navContrastColors(theme);\n\n    return css`\n      position: relative;\n      ${StyledAlert} {\n        display: ${unread ? 'auto' : 'none'};\n        position: absolute;\n        inset-inline-start: -0.65625rem;\n        top: ${visualIncluded ? 'calc(50% - 0.15625rem)' : '0.5rem'};\n        background-color: ${foreground};\n        height: 0.3125rem;\n        width: 0.3125rem;\n      }\n    `;\n  }\n);\n\nStyledNotificationVisual.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationPrimary = styled.span<{ unread?: boolean }>(({ theme, unread }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    font-weight: ${unread\n      ? theme.base['font-weight'].bold\n      : theme.base['font-weight']['semi-bold']};\n    color: ${foreground};\n  `;\n});\n\nStyledNotificationPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationSecondary = styled.span<{ unread?: boolean }>(\n  ({ theme, unread }) => {\n    return css`\n      ${StyledText} {\n        opacity: ${unread\n          ? theme.base.transparency['transparent-1']\n          : theme.base.transparency['transparent-3']};\n      }\n    `;\n  }\n);\n\nStyledNotificationSecondary.defaultProps = defaultThemeProp;\n\nexport const EmptyStateColorContrast = styled.div(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    ${StyledEmptyState} {\n      span,\n      svg {\n        color: ${foreground};\n      }\n    }\n  `;\n});\n\nEmptyStateColorContrast.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListSection = styled.div(({ theme }) => {\n  const { border: borderColor } = navContrastColors(theme);\n\n  return css`\n    border-top: 0.0625rem solid ${borderColor};\n    min-height: max(20%, 8rem);\n  `;\n});\n\nStyledAppShellListSection.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellListHeading = styled.h3(({ theme }) => {\n  const { foreground, nestedListHeader } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    top: 0;\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    background-color: ${nestedListHeader};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledAppShellListHeading.defaultProps = defaultThemeProp;\n\n/* AppShellList styles */\nexport const StyledAppShellListWrapper = styled.div(({ theme }) => {\n  const { palette } = theme.base;\n  const { border: borderColor } = navContrastColors(theme);\n  const hoverBackgroundColor = tryCatch(\n    () => mix(0.9, palette['primary-background'], palette['foreground-color']),\n    () => palette['primary-background']\n  );\n\n  return css`\n    max-height: 100%;\n    white-space: nowrap;\n\n    ${StyledSummaryItem} {\n      position: relative;\n      &::after {\n        content: '';\n        position: absolute;\n        top: calc(100% - 0.03125rem);\n        inset-inline-end: 1rem;\n        inset-inline-start: 1rem;\n        height: 0.0625rem;\n        background-color: ${borderColor};\n      }\n    }\n\n    ${StyledNotificationsPopover}:has(&) {\n      overflow: auto;\n      ${StyledAppShellListSection} {\n        border-block-start-color: ${palette['border-line']};\n\n        ${StyledAppShellSummaryList} ${StyledSummaryItem} {\n          &:hover,\n          &:focus {\n            background-color: ${hoverBackgroundColor};\n          }\n          &::after {\n            background-color: ${palette['border-line']};\n          }\n\n          ${StyledNotificationPrimary} {\n            color: ${palette['foreground-color']};\n          }\n\n          ${StyledNotificationVisual} ${StyledAlert} {\n            background-color: ${palette['foreground-color']};\n          }\n        }\n\n        ${EmptyStateColorContrast} ${StyledEmptyState} span,\n            svg {\n          color: ${palette['foreground-color']};\n        }\n      }\n\n      ${StyledDrawerViewAll} {\n        color: ${palette['foreground-color']};\n        background-color: ${darken(0.075, hoverBackgroundColor)};\n      }\n    }\n  `;\n});\n\nStyledAppShellListWrapper.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,28 @@
+import type { PopoverProps } from '../Popover';
+import type { NotificationsProps } from './AppShell.types';
+export declare const StyledNotificationsPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<PopoverProps<string> & import("../..").ForwardProps, never>> & string & Omit<(<Modifiers extends string = string>(props: PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement | null), keyof import("react").Component<any, {}, any>>;
+/**
+ * Manages the notifications popover (a full-screen dialog on touch devices). Returns a `toggle`
+ * handler and ARIA `triggerProps` for the trigger, and the element to render (`undefined` when no
+ * notifications are given).
+ */
+export declare const useNotificationsPopover: (notifications: NotificationsProps | undefined, placement?: PopoverProps["placement"]) => {
+    toggle: (trigger: HTMLElement) => void;
+    triggerProps: {
+        readonly 'aria-haspopup': "dialog";
+        readonly 'aria-expanded': boolean;
+        readonly 'aria-controls': string | undefined;
+    };
+    popover: undefined;
+} | {
+    toggle: (trigger: HTMLElement) => void;
+    triggerProps: {
+        readonly 'aria-haspopup': "dialog";
+        readonly 'aria-expanded': boolean;
+        readonly 'aria-controls': string | undefined;
+    };
+    popover: import("react/jsx-runtime").JSX.Element;
+};
+declare const Notifications: (notifications: NotificationsProps) => import("react/jsx-runtime").JSX.Element;
+export default Notifications;
+//# sourceMappingURL=Notifications.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Notifications.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA4B3D,eAAO,MAAM,0BAA0B,kXAerC,CAAC;AAIH;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,eAAe,kBAAkB,GAAG,SAAS,EAC7C,YAAY,YAAY,CAAC,WAAW,CAAC;sBA0BzB,WAAW;;;;;;;;sBAAX,WAAW;;;;;;;CAwIxB,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,eAAe,kBAAkB,4CAoBvD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/AppShell/Notifications.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useEffect } from 'react';
+import { remToPx, stripUnit } from 'polished';
+import styled, { css } from 'styled-components';
+import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useI18n, useOuterEvent, useTheme, useUID } from '../../hooks';
+import { defaultThemeProp } from '../../theme';
+import { getFocusables, isTouchDevice, tryCatch } from '../../utils';
+import Actions from '../Actions';
+import Count, { StyledCount } from '../Badges/Count';
+import Button, { StyledButton } from '../Button';
+import { CardContent, CardHeader, StyledCard } from '../Card';
+import { StyledCardHeader } from '../Card/CardHeader';
+import { TouchDialog } from '../Dialog';
+import Icon, { registerIcon } from '../Icon';
+import * as checkIcon from '../Icon/icons/check.icon';
+import * as timesIcon from '../Icon/icons/times.icon';
+import Popover from '../Popover';
+import Text from '../Text';
+import Flex from '../Flex';
+registerIcon(timesIcon, checkIcon);
+const StyledNotificationsButton = styled(Button) `
+  ${StyledButton} + & {
+    margin-inline-start: 0;
+  }
+  ${StyledCount} {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+`;
+StyledNotificationsButton.defaultProps = defaultThemeProp;
+const StyledCardContent = styled(CardContent) `
+  overflow: auto;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  &:not(${StyledCard} ${StyledCard} > &) {
+    padding: 0;
+  }
+`;
+StyledCardContent.defaultProps = defaultThemeProp;
+export const StyledNotificationsPopover = styled(Popover)(({ theme: { base: { 'content-width': contentWidth } } }) => {
+    return css `
+    display: flex;
+    flex-direction: column;
+    min-width: min(${contentWidth.sm}, calc(100vw - 2rem));
+    width: min(calc(${contentWidth.sm} + 5ch), calc(100vw - 2rem));
+
+    ${StyledCardHeader} ${StyledButton} {
+      margin-inline-start: 0;
+    }
+  `;
+});
+StyledNotificationsPopover.defaultProps = defaultThemeProp;
+/**
+ * Manages the notifications popover (a full-screen dialog on touch devices). Returns a `toggle`
+ * handler and ARIA `triggerProps` for the trigger, and the element to render (`undefined` when no
+ * notifications are given).
+ */
+export const useNotificationsPopover = (notifications, placement) => {
+    const t = useI18n();
+    const theme = useTheme();
+    const [popoverEl, setPopoverEl] = useElement();
+    const popoverRef = useConsolidatedRef(setPopoverEl);
+    const popoverId = useUID();
+    const headingId = useUID();
+    const [{ isOpen, target }, setState] = useState({ isOpen: false, target: null });
+    const close = useCallback(() => {
+        notifications?.onClose?.();
+        // Deferred so the popover's own close handling settles before it hides.
+        setTimeout(() => setState(cur => ({ ...cur, isOpen: false })));
+    }, [notifications]);
+    const closeAndFocusTarget = useCallback(() => {
+        if (!isOpen)
+            return;
+        close();
+        target?.focus();
+    }, [isOpen, close, target]);
+    const toggle = useCallback((trigger) => {
+        if (isOpen) {
+            notifications?.onClose?.();
+            setState(cur => ({ ...cur, isOpen: false }));
+        }
+        else {
+            notifications?.onOpen?.();
+            setState({ isOpen: true, target: trigger });
+        }
+    }, [notifications, isOpen]);
+    useOuterEvent('mousedown', [popoverRef, target], () => {
+        if (!isTouchDevice && isOpen)
+            close();
+    });
+    useEscape(closeAndFocusTarget, isTouchDevice ? null : popoverEl);
+    useFocusTrap(isOpen && !isTouchDevice ? popoverRef : null, true, [isOpen]);
+    useEffect(() => {
+        if (!window.navigation)
+            return;
+        const ac = new AbortController();
+        window.navigation.addEventListener('navigate', () => {
+            if (isTouchDevice && isOpen) {
+                close();
+            }
+        }, {
+            signal: ac.signal
+        });
+        return () => {
+            ac.abort();
+        };
+    }, [isOpen, isTouchDevice, close]);
+    const triggerProps = {
+        'aria-haspopup': 'dialog',
+        'aria-expanded': isOpen,
+        'aria-controls': isOpen ? popoverId : undefined
+    };
+    if (!notifications)
+        return { toggle, triggerProps, popover: undefined };
+    const { name, content, actions, actionsButtonRef, onMarkAllAsRead } = notifications;
+    const headingActions = (_jsxs(_Fragment, { children: [!!actions && _jsx(Actions, { items: actions, menuAt: 1, ref: actionsButtonRef }), onMarkAllAsRead && (_jsx(Button, { variant: 'simple', icon: true, label: t('app_shell_notifications_mark_all_as_read'), onClick: () => {
+                    onMarkAllAsRead();
+                    closeAndFocusTarget();
+                }, children: _jsx(Icon, { name: 'check' }) }))] }));
+    const popover = isTouchDevice ? (_jsx(TouchDialog, { ref: popoverRef, id: popoverId, open: isOpen, size: 'full', heading: _jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h2', children: name }), _jsx(Flex, { container: { alignItems: 'center' }, children: headingActions })] }), onMouseDown: (e) => e.stopPropagation(), onDismiss: close, onAfterClose: () => target?.focus(), children: content })) : (_jsxs(StyledNotificationsPopover, { ref: popoverRef, id: popoverId, role: 'dialog', "aria-labelledby": headingId, target: target, show: isOpen, placement: placement, hideOnTargetHidden: true, onShow: () => getFocusables(popoverRef)[0]?.focus(), onHide: () => {
+            if (!isOpen)
+                return;
+            notifications.onClose?.();
+            setState(cur => ({ ...cur, isOpen: false }));
+        }, modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [
+                        0,
+                        tryCatch(() => Number(stripUnit(remToPx(theme.base.spacing))) * 3, () => 24)
+                    ]
+                }
+            }
+        ], children: [_jsx(CardHeader, { actions: _jsxs(_Fragment, { children: [headingActions, _jsx(Button, { variant: 'simple', icon: true, label: t('dismiss'), onClick: closeAndFocusTarget, children: _jsx(Icon, { name: 'times' }) })] }), children: _jsx(Text, { variant: 'h2', id: headingId, children: name }) }), _jsx(StyledCardContent, { children: content })] }));
+    return { toggle, triggerProps, popover };
+};
+const Notifications = (notifications) => {
+    const { toggle, triggerProps, popover } = useNotificationsPopover(notifications);
+    const { name, visual, count } = notifications;
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledNotificationsButton, { variant: 'simple', icon: true, label: name, "aria-label": count ? `${name}, ${String(count)}` : undefined, ...triggerProps, onClick: (e) => toggle(e.currentTarget), children: [visual, !!count && _jsx(Count, { variant: 'urgent', children: count })] }), popover] }));
+};
+export default Notifications;
+//# sourceMappingURL=Notifications.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.js","sourceRoot":"","sources":["../../../src/components/AppShell/Notifications.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACb,QAAQ,EACR,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAI3B,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAEnC,MAAM,yBAAyB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;IAC5C,YAAY;;;IAGZ,WAAW;;;;;CAKd,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;UAInC,UAAU,IAAI,UAAU;;;CAGjC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EACzD,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;qBAGS,YAAY,CAAC,EAAE;sBACd,YAAY,CAAC,EAAE;;MAE/B,gBAAgB,IAAI,YAAY;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,aAA6C,EAC7C,SAAqC,EACrC,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC/D,MAAM,UAAU,GAAG,kBAAkB,CAAiB,YAAY,CAAC,CAAC;IACpE,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAG5C,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,aAAa,EAAE,OAAO,EAAE,EAAE,CAAC;QAC3B,wEAAwE;QACxE,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,OAAoB,EAAE,EAAE;QACvB,IAAI,MAAM,EAAE,CAAC;YACX,aAAa,EAAE,OAAO,EAAE,EAAE,CAAC;YAC3B,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,aAAa,EAAE,MAAM,EAAE,EAAE,CAAC;YAC1B,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,MAAM,CAAC,CACxB,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE;QACpD,IAAI,CAAC,aAAa,IAAI,MAAM;YAAE,KAAK,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,SAAS,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACjE,YAAY,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,CAAC,UAAU;YAAE,OAAO;QAE/B,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAC;QACjC,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAChC,UAAU,EACV,GAAG,EAAE;YACH,IAAI,aAAa,IAAI,MAAM,EAAE,CAAC;gBAC5B,KAAK,EAAE,CAAC;YACV,CAAC;QACH,CAAC,EACD;YACE,MAAM,EAAE,EAAE,CAAC,MAAM;SAClB,CACF,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,KAAK,EAAE,CAAC;QACb,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnC,MAAM,YAAY,GAAG;QACnB,eAAe,EAAE,QAAQ;QACzB,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KACvC,CAAC;IAEX,IAAI,CAAC,aAAa;QAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;IAExE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,aAAa,CAAC;IAEpF,MAAM,cAAc,GAAG,CACrB,8BACG,CAAC,CAAC,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,gBAAgB,GAAI,EAC1E,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,KAAK,EAAE,CAAC,CAAC,0CAA0C,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE;oBACZ,eAAe,EAAE,CAAC;oBAClB,mBAAmB,EAAE,CAAC;gBACxB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,IACA,CACJ,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC,CAC9B,KAAC,WAAW,IACV,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,SAAS,EACb,IAAI,EAAE,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,GAAQ,EAChC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,cAAc,GAAQ,IAC7D,EAET,WAAW,EAAE,CAAC,CAA0B,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAChE,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,YAElC,OAAO,GACI,CACf,CAAC,CAAC,CAAC,CACF,MAAC,0BAA0B,IACzB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,QAAQ,qBACI,SAAS,EAC1B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,SAAS,EACpB,kBAAkB,QAClB,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EACnD,MAAM,EAAE,GAAG,EAAE;YACX,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC;YAC1B,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC/C,CAAC,EACD,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE;oBACP,MAAM,EAAE;wBACN,CAAC;wBACD,QAAQ,CACN,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,EACxD,GAAG,EAAE,CAAC,EAAE,CACT;qBACF;iBACF;aACF;SACF,aAED,KAAC,UAAU,IACT,OAAO,EACL,8BACG,cAAc,EACf,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,YAC7E,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACR,YAGL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,SAAS,YAC7B,IAAI,GACA,GACI,EACb,KAAC,iBAAiB,cAAE,OAAO,GAAqB,IACrB,CAC9B,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,aAAiC,EAAE,EAAE;IAC1D,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,uBAAuB,CAAC,aAAa,CAAC,CAAC;IACjF,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC;IAE9C,OAAO,CACL,8BACE,MAAC,yBAAyB,IACxB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,KAAK,EAAE,IAAI,gBACC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KACvD,YAAY,EAChB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,aAErE,MAAM,EACN,CAAC,CAAC,KAAK,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,YAAE,KAAK,GAAS,IACzB,EAC3B,OAAO,IACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useCallback, useState, useEffect } from 'react';\nimport type { MouseEvent } from 'react';\nimport { remToPx, stripUnit } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useTheme,\n  useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { getFocusables, isTouchDevice, tryCatch } from '../../utils';\nimport Actions from '../Actions';\nimport Count, { StyledCount } from '../Badges/Count';\nimport Button, { StyledButton } from '../Button';\nimport { CardContent, CardHeader, StyledCard } from '../Card';\nimport { StyledCardHeader } from '../Card/CardHeader';\nimport { TouchDialog } from '../Dialog';\nimport Icon, { registerIcon } from '../Icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Text from '../Text';\nimport Flex from '../Flex';\n\nimport type { NotificationsProps } from './AppShell.types';\n\nregisterIcon(timesIcon, checkIcon);\n\nconst StyledNotificationsButton = styled(Button)`\n  ${StyledButton} + & {\n    margin-inline-start: 0;\n  }\n  ${StyledCount} {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n`;\n\nStyledNotificationsButton.defaultProps = defaultThemeProp;\n\nconst StyledCardContent = styled(CardContent)`\n  overflow: auto;\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  &:not(${StyledCard} ${StyledCard} > &) {\n    padding: 0;\n  }\n`;\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledNotificationsPopover = styled(Popover)(({\n  theme: {\n    base: { 'content-width': contentWidth }\n  }\n}) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n    min-width: min(${contentWidth.sm}, calc(100vw - 2rem));\n    width: min(calc(${contentWidth.sm} + 5ch), calc(100vw - 2rem));\n\n    ${StyledCardHeader} ${StyledButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nStyledNotificationsPopover.defaultProps = defaultThemeProp;\n\n/**\n * Manages the notifications popover (a full-screen dialog on touch devices). Returns a `toggle`\n * handler and ARIA `triggerProps` for the trigger, and the element to render (`undefined` when no\n * notifications are given).\n */\nexport const useNotificationsPopover = (\n  notifications: NotificationsProps | undefined,\n  placement?: PopoverProps['placement']\n) => {\n  const t = useI18n();\n  const theme = useTheme();\n  const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n  const popoverRef = useConsolidatedRef<HTMLDivElement>(setPopoverEl);\n  const popoverId = useUID();\n  const headingId = useUID();\n  const [{ isOpen, target }, setState] = useState<{\n    isOpen: boolean;\n    target: HTMLElement | null;\n  }>({ isOpen: false, target: null });\n\n  const close = useCallback(() => {\n    notifications?.onClose?.();\n    // Deferred so the popover's own close handling settles before it hides.\n    setTimeout(() => setState(cur => ({ ...cur, isOpen: false })));\n  }, [notifications]);\n\n  const closeAndFocusTarget = useCallback(() => {\n    if (!isOpen) return;\n    close();\n    target?.focus();\n  }, [isOpen, close, target]);\n\n  const toggle = useCallback(\n    (trigger: HTMLElement) => {\n      if (isOpen) {\n        notifications?.onClose?.();\n        setState(cur => ({ ...cur, isOpen: false }));\n      } else {\n        notifications?.onOpen?.();\n        setState({ isOpen: true, target: trigger });\n      }\n    },\n    [notifications, isOpen]\n  );\n\n  useOuterEvent('mousedown', [popoverRef, target], () => {\n    if (!isTouchDevice && isOpen) close();\n  });\n  useEscape(closeAndFocusTarget, isTouchDevice ? null : popoverEl);\n  useFocusTrap(isOpen && !isTouchDevice ? popoverRef : null, true, [isOpen]);\n\n  useEffect(() => {\n    if (!window.navigation) return;\n\n    const ac = new AbortController();\n    window.navigation.addEventListener(\n      'navigate',\n      () => {\n        if (isTouchDevice && isOpen) {\n          close();\n        }\n      },\n      {\n        signal: ac.signal\n      }\n    );\n\n    return () => {\n      ac.abort();\n    };\n  }, [isOpen, isTouchDevice, close]);\n\n  const triggerProps = {\n    'aria-haspopup': 'dialog',\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? popoverId : undefined\n  } as const;\n\n  if (!notifications) return { toggle, triggerProps, popover: undefined };\n\n  const { name, content, actions, actionsButtonRef, onMarkAllAsRead } = notifications;\n\n  const headingActions = (\n    <>\n      {!!actions && <Actions items={actions} menuAt={1} ref={actionsButtonRef} />}\n      {onMarkAllAsRead && (\n        <Button\n          variant='simple'\n          icon\n          label={t('app_shell_notifications_mark_all_as_read')}\n          onClick={() => {\n            onMarkAllAsRead();\n            closeAndFocusTarget();\n          }}\n        >\n          <Icon name='check' />\n        </Button>\n      )}\n    </>\n  );\n\n  const popover = isTouchDevice ? (\n    <TouchDialog\n      ref={popoverRef}\n      id={popoverId}\n      open={isOpen}\n      size='full'\n      heading={\n        <Flex container={{ justify: 'between', alignItems: 'center' }}>\n          <Text variant='h2'>{name}</Text>\n          <Flex container={{ alignItems: 'center' }}>{headingActions}</Flex>\n        </Flex>\n      }\n      onMouseDown={(e: MouseEvent<HTMLElement>) => e.stopPropagation()}\n      onDismiss={close}\n      onAfterClose={() => target?.focus()}\n    >\n      {content}\n    </TouchDialog>\n  ) : (\n    <StyledNotificationsPopover\n      ref={popoverRef}\n      id={popoverId}\n      role='dialog'\n      aria-labelledby={headingId}\n      target={target}\n      show={isOpen}\n      placement={placement}\n      hideOnTargetHidden\n      onShow={() => getFocusables(popoverRef)[0]?.focus()}\n      onHide={() => {\n        if (!isOpen) return;\n        notifications.onClose?.();\n        setState(cur => ({ ...cur, isOpen: false }));\n      }}\n      modifiers={[\n        {\n          name: 'offset',\n          options: {\n            offset: [\n              0,\n              tryCatch(\n                () => Number(stripUnit(remToPx(theme.base.spacing))) * 3,\n                () => 24\n              )\n            ]\n          }\n        }\n      ]}\n    >\n      <CardHeader\n        actions={\n          <>\n            {headingActions}\n            <Button variant='simple' icon label={t('dismiss')} onClick={closeAndFocusTarget}>\n              <Icon name='times' />\n            </Button>\n          </>\n        }\n      >\n        <Text variant='h2' id={headingId}>\n          {name}\n        </Text>\n      </CardHeader>\n      <StyledCardContent>{content}</StyledCardContent>\n    </StyledNotificationsPopover>\n  );\n\n  return { toggle, triggerProps, popover };\n};\n\nconst Notifications = (notifications: NotificationsProps) => {\n  const { toggle, triggerProps, popover } = useNotificationsPopover(notifications);\n  const { name, visual, count } = notifications;\n\n  return (\n    <>\n      <StyledNotificationsButton\n        variant='simple'\n        icon\n        label={name}\n        aria-label={count ? `${name}, ${String(count)}` : undefined}\n        {...triggerProps}\n        onClick={(e: MouseEvent<HTMLButtonElement>) => toggle(e.currentTarget)}\n      >\n        {visual}\n        {!!count && <Count variant='urgent'>{count}</Count>}\n      </StyledNotificationsButton>\n      {popover}\n    </>\n  );\n};\n\nexport default Notifications;\n"]}

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

@@ -7,7 +7,7 @@ export interface TouchAppShellProps extends AppShellProps {
         content: ReactNode;
     };
 }
-export default function TouchAppShell({ appInfo, contextSwitcher, searchPage, searchInput, searchLabel, caseTypes, links, cases, agent, utils, utilsList, operator, headerUtils, helpMenu, shareApp, banners, progress, main, bottomTouchPanel, documentTabs, navId, restProps }: TouchAppShellProps & {
+export default function TouchAppShell({ appInfo, contextSwitcher, searchPage, searchInput, searchLabel, caseTypes, links, cases, agent, utils, utilsList, operator, notifications, headerUtils, helpMenu, shareApp, banners, progress, main, bottomTouchPanel, documentTabs, navId, restProps }: TouchAppShellProps & {
     searchLabel: string;
     utilsList: (UtilItemProps | ReactElement)[];
     navId: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TouchAppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwCjE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIrE,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,SAAS,CAAC;KACpB,CAAC;CACH;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,OAAO,EACP,eAAe,EACf,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,SAAS,EACV,EAAE,kBAAkB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,CAAC,aAAa,GAAG,YAAY,CAAC,EAAE,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC,2CAyRA"}
+{"version":3,"file":"TouchAppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwCjE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIrE,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,SAAS,CAAC;KACpB,CAAC;CACH;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,OAAO,EACP,eAAe,EACf,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,SAAS,EACV,EAAE,kBAAkB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,CAAC,aAAa,GAAG,YAAY,CAAC,EAAE,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC,2CA2RA"}

package/lib/components/AppShell/TouchAppShell.js

@@ -17,7 +17,7 @@ import TopNavDrawerProvider from './TopNavDrawerProvider';
 import { menuButtonWidth, StyledAppMain, StyledBannerRegion, AppShellGlobalStyle } from './AppShell.styles';
 import { TouchAppShellGlobalStyle, StyledMainTouchAppShell, StyledSplitViewPanel, StyledPortalTouchDialog, StyledMobileMoreMenuButton, StyledMobileMoreMenu, StyledMobileNav } from './TouchAppShell.styles';
 import AppShellContext from './AppShellContext';
-export default function TouchAppShell({ appInfo, contextSwitcher, searchPage, searchInput, searchLabel, caseTypes, links, cases, agent, utils, utilsList, operator, headerUtils, helpMenu, shareApp, banners, progress, main, bottomTouchPanel, documentTabs, navId, restProps }) {
+export default function TouchAppShell({ appInfo, contextSwitcher, searchPage, searchInput, searchLabel, caseTypes, links, cases, agent, utils, utilsList, operator, notifications, headerUtils, helpMenu, shareApp, banners, progress, main, bottomTouchPanel, documentTabs, navId, restProps }) {
     const t = useI18n();
     const theme = useTheme();
     const { previewActive, setPreviewActive } = usePreviewManager();
@@ -119,8 +119,9 @@ export default function TouchAppShell({ appInfo, contextSwitcher, searchPage, se
     const touchNav = !isSmallOrAbove && (_jsxs(_Fragment, { children: [_jsxs(StyledMobileNav, { hasBottomTouchPanel: !isSmallOrAbove && !!agent && bottomPanelOpen, container: { alignItems: 'center', gap: 0.25 }, ref: setMobileHeaderEl, "data-app-region": true, onClick: () => setMobileNavOpen(false), children: [caseTypes && caseTypes.length > 0 && _jsx(CaseTypes, { caseTypes: caseTypes, mobileNavBar: true }), links && _jsx(Links, { links: links.slice(0, mobileNavLinksCount), mobileNavBar: true }), _jsxs(StyledMobileMoreMenuButton, { variant: 'simple', onClick: (e) => {
                             setMobileNavOpen(prev => !prev);
                             e.stopPropagation();
-                        }, label: t('app_shell_more'), icon: true, "aria-expanded": mobileNavOpen, "aria-controls": navId, children: [_jsx(Icon, { name: 'bars' }), !mobileNavOpen && utils?.some(item => (isValidElement(item) ? false : !!item.count)) && (_jsx(Alert, { variant: 'urgent' })), _jsx("span", { children: t('app_shell_more') })] })] }), _jsx(Drawer, { open: mobileNavOpen, position: 'fixed', placement: 'bottom', size: '100dvh', nullWhenClosed: true, children: _jsx(Flex, { ...restProps, container: { direction: 'column', justify: 'between' }, id: navId, as: StyledMobileMoreMenu, "aria-label": t('app_shell_main_navigation_label'), children: _jsx(AppNavigationPanel, { appInfo: appInfo, navState: 'open', searchInput: searchInput, searchLabel: searchLabel, links: links?.slice(mobileNavLinksCount), cases: cases, utils: utilsList, agent: navigationAgent }) }) })] }));
-    return (_jsx(AppShellContext.Provider, { value: mobileAppShellContext, children: _jsxs(_Fragment, { children: [isSmallOrAbove && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, searchPage: searchPage, operator: operator, headerUtils: headerUtils, helpMenu: helpMenu, shareApp: shareApp, ref: setHeaderEl })), isSmallOrAbove ? (_jsx(TopNavDrawerProvider, { children: _jsx(AppTopNav, { appInfo: appInfo, caseTypes: caseTypes, links: links, cases: cases, agent: navigationAgent, utils: utils, searchInput: searchInput, searchPage: searchPage, searchLabel: searchLabel }) })) : (touchNav), documentTabs && _jsx(DocumentTabs, { ...documentTabs }), (() => {
+                        }, label: t('app_shell_more'), icon: true, "aria-expanded": mobileNavOpen, "aria-controls": navId, children: [_jsx(Icon, { name: 'bars' }), !mobileNavOpen &&
+                                utilsList.some(item => (isValidElement(item) ? false : !!item.count)) && (_jsx(Alert, { variant: 'urgent' })), _jsx("span", { children: t('app_shell_more') })] })] }), _jsx(Drawer, { open: mobileNavOpen, position: 'fixed', placement: 'bottom', size: '100dvh', nullWhenClosed: true, children: _jsx(Flex, { ...restProps, container: { direction: 'column', justify: 'between' }, id: navId, as: StyledMobileMoreMenu, "aria-label": t('app_shell_main_navigation_label'), children: _jsx(AppNavigationPanel, { appInfo: appInfo, navState: 'open', searchInput: searchInput, searchLabel: searchLabel, links: links?.slice(mobileNavLinksCount), cases: cases, utils: utilsList, agent: navigationAgent }) }) })] }));
+    return (_jsx(AppShellContext.Provider, { value: mobileAppShellContext, children: _jsxs(_Fragment, { children: [isSmallOrAbove && (_jsx(AppHeader, { ...appInfo, contextSwitcher: contextSwitcher, searchInput: searchInput, searchLabel: searchLabel, searchPage: searchPage, operator: operator, notifications: notifications, headerUtils: headerUtils, helpMenu: helpMenu, shareApp: shareApp, ref: setHeaderEl })), isSmallOrAbove ? (_jsx(TopNavDrawerProvider, { children: _jsx(AppTopNav, { appInfo: appInfo, caseTypes: caseTypes, links: links, cases: cases, agent: navigationAgent, utils: utils, searchInput: searchInput, searchPage: searchPage, searchLabel: searchLabel }) })) : (touchNav), documentTabs && _jsx(DocumentTabs, { ...documentTabs }), (() => {
                     const mainRegion = (_jsxs(StyledAppMain, { previewActive: previewActive, isTopBar: isSmallOrAbove, hasBottomTouchPanel: !isSmallOrAbove && !!agent && bottomPanelOpen, "aria-busy": !!progress, "data-app-region": true, children: [_jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'string' ? progress : t('loading') }), banners && _jsx(StyledBannerRegion, { children: banners }), main] }));
                     const touchMainRegion = isMobileNav ? (_jsx(StyledMainTouchAppShell, { active: !!agent && bottomPanelOpen, children: mainRegion })) : (mainRegion);
                     if (!documentTabs)

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

@@ -1 +1 @@
-{"version":3,"file":"TouchAppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, ReactElement, ReactNode } from 'react';\n\nimport { Alert } from '../Badges';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport {\n  useBreakpoint,\n  useElement,\n  useEscape,\n  useI18n,\n  usePreviewManager,\n  useScrollToggle,\n  useTheme\n} from '../../hooks';\nimport { debounce, isValidElement } from '../../utils';\nimport { openCloseStates } from '../../hooks/useTransitionState';\nimport Progress from '../Progress';\n\nimport AppNavigationPanel, { CaseTypes, Links } from './AppNavigationPanel';\nimport AppHeader from './AppHeader';\nimport AppTopNav from './AppTopNav';\nimport DocumentTabs, { getTabElementId, getTabPanelId } from './DocumentTabs';\nimport { StyledDocumentTabPanel } from './DocumentTabs.styles';\nimport TopNavDrawerProvider from './TopNavDrawerProvider';\nimport {\n  menuButtonWidth,\n  StyledAppMain,\n  StyledBannerRegion,\n  AppShellGlobalStyle\n} from './AppShell.styles';\nimport {\n  TouchAppShellGlobalStyle,\n  StyledMainTouchAppShell,\n  StyledSplitViewPanel,\n  StyledPortalTouchDialog,\n  StyledMobileMoreMenuButton,\n  StyledMobileMoreMenu,\n  StyledMobileNav\n} from './TouchAppShell.styles';\nimport type { AppShellProps, UtilItemProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellContextValue } from './AppShellContext';\n\nexport interface TouchAppShellProps extends AppShellProps {\n  /** Optional bottom panel rendered by the touch app shell. */\n  bottomTouchPanel?: {\n    heading: string;\n    content: ReactNode;\n  };\n}\n\nexport default function TouchAppShell({\n  appInfo,\n  contextSwitcher,\n  searchPage,\n  searchInput,\n  searchLabel,\n  caseTypes,\n  links,\n  cases,\n  agent,\n  utils,\n  utilsList,\n  operator,\n  headerUtils,\n  helpMenu,\n  shareApp,\n  banners,\n  progress,\n  main,\n  bottomTouchPanel,\n  documentTabs,\n  navId,\n  restProps\n}: TouchAppShellProps & {\n  searchLabel: string;\n  utilsList: (UtilItemProps | ReactElement)[];\n  navId: string;\n  restProps: Record<string, unknown>;\n}) {\n  const t = useI18n();\n  const theme = useTheme();\n  const { previewActive, setPreviewActive } = usePreviewManager();\n  const { disableScroll, enableScroll } = useScrollToggle();\n  const appShellContext = useContext(AppShellContext);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const isMobileNav = !isSmallOrAbove;\n  const [mobileNavOpen, setMobileNavOpen] = useState(false);\n  const [bottomPanelOpen, setBottomPanelOpen] = useState(false);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [mobileNavLinksCount, setMobileNavLinksCount] = useState(0);\n  const [mobileHeaderEl, setMobileHeaderEl] = useElement<HTMLDivElement>();\n  const [headerEl, setHeaderEl] = useElement<HTMLDivElement>();\n  const focusedImperatively = useRef(false);\n  const [searchContainerEl, setSearchContainerEl] = useState<HTMLElement | null>(null);\n  const mobileAppShellContext = useMemo<AppShellContextValue>(\n    () => ({\n      ...appShellContext,\n      navOpen: mobileNavOpen,\n      drawerOpen,\n      setDrawerOpen,\n      navState: openCloseStates.high,\n      focusedImperatively,\n      headerEl: headerEl || mobileHeaderEl,\n      appHeaderEl: headerEl || mobileHeaderEl,\n      searchContainerEl,\n      setSearchContainerEl,\n      isMobileNav,\n      isTopBar: isSmallOrAbove,\n      previewActive,\n      setPreviewActive\n    }),\n    [\n      appShellContext,\n      headerEl,\n      mobileHeaderEl,\n      mobileNavOpen,\n      drawerOpen,\n      searchContainerEl,\n      isMobileNav,\n      previewActive,\n      setPreviewActive,\n      setSearchContainerEl\n    ]\n  );\n\n  useEffect(() => {\n    if (!isSmallOrAbove && agent && agent.active === false) {\n      setBottomPanelOpen(false);\n    }\n  }, [agent?.active, isSmallOrAbove]);\n\n  useEffect(() => {\n    const ac = new AbortController();\n    window.navigation.addEventListener(\n      'navigate',\n      () => {\n        if (mobileNavOpen) {\n          setMobileNavOpen(false);\n        }\n      },\n      {\n        signal: ac.signal\n      }\n    );\n\n    return () => {\n      ac.abort();\n    };\n  }, [mobileNavOpen]);\n\n  const navigationAgent = agent\n    ? {\n        ...agent,\n        active: bottomPanelOpen,\n        onClick: (event: MouseEvent<HTMLElement>) => {\n          setBottomPanelOpen(true);\n          setMobileNavOpen(false);\n\n          if (isSmallOrAbove || (!bottomPanelOpen && !agent.active)) {\n            agent.onClick?.(event);\n          }\n        }\n      }\n    : undefined;\n  useEffect(() => {\n    if (mobileNavOpen) disableScroll();\n    else enableScroll();\n  }, [mobileNavOpen]);\n\n  useEffect(() => {\n    if (isSmallOrAbove && mobileNavOpen) {\n      setMobileNavOpen(false);\n    }\n  }, [isSmallOrAbove, mobileNavOpen]);\n\n  useEscape(() => setMobileNavOpen(false));\n\n  useLayoutEffect(() => {\n    if (!mobileHeaderEl) return;\n\n    const resizeObserver = new ResizeObserver(\n      debounce(() => {\n        const screenWidth = document.documentElement.clientWidth;\n        const regionsPaddingInlinePixels =\n          2 *\n          Number.parseInt(\n            window.getComputedStyle(mobileHeaderEl).getPropertyValue('padding-inline-start'),\n            10\n          );\n        const availableWidth = screenWidth * 0.9 - regionsPaddingInlinePixels;\n        setMobileNavLinksCount(\n          Math.max(\n            Math.floor(availableWidth / menuButtonWidth(theme)) - (caseTypes?.length ? 2 : 1),\n            0\n          )\n        );\n      }, 0)\n    );\n\n    resizeObserver.observe(document.documentElement);\n    return () => resizeObserver.disconnect();\n  }, [mobileHeaderEl, caseTypes?.length, theme]);\n\n  const touchNav = !isSmallOrAbove && (\n    <>\n      <StyledMobileNav\n        hasBottomTouchPanel={!isSmallOrAbove && !!agent && bottomPanelOpen}\n        container={{ alignItems: 'center', gap: 0.25 }}\n        ref={setMobileHeaderEl}\n        data-app-region\n        onClick={() => setMobileNavOpen(false)}\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} mobileNavBar />}\n        {links && <Links links={links.slice(0, mobileNavLinksCount)} mobileNavBar />}\n        <StyledMobileMoreMenuButton\n          variant='simple'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            setMobileNavOpen(prev => !prev);\n            e.stopPropagation();\n          }}\n          label={t('app_shell_more')}\n          icon\n          aria-expanded={mobileNavOpen}\n          aria-controls={navId}\n        >\n          <Icon name='bars' />\n          {!mobileNavOpen && utils?.some(item => (isValidElement(item) ? false : !!item.count)) && (\n            <Alert variant='urgent' />\n          )}\n          <span>{t('app_shell_more')}</span>\n        </StyledMobileMoreMenuButton>\n      </StyledMobileNav>\n      <Drawer open={mobileNavOpen} position='fixed' placement='bottom' size='100dvh' nullWhenClosed>\n        <Flex\n          {...restProps}\n          container={{ direction: 'column', justify: 'between' }}\n          id={navId}\n          as={StyledMobileMoreMenu}\n          aria-label={t('app_shell_main_navigation_label')}\n        >\n          <AppNavigationPanel\n            appInfo={appInfo}\n            navState='open'\n            searchInput={searchInput}\n            searchLabel={searchLabel}\n            links={links?.slice(mobileNavLinksCount)}\n            cases={cases}\n            utils={utilsList}\n            agent={navigationAgent}\n          />\n        </Flex>\n      </Drawer>\n    </>\n  );\n\n  return (\n    <AppShellContext.Provider value={mobileAppShellContext}>\n      <>\n        {isSmallOrAbove && (\n          <AppHeader\n            {...appInfo}\n            contextSwitcher={contextSwitcher}\n            searchInput={searchInput}\n            searchLabel={searchLabel}\n            searchPage={searchPage}\n            operator={operator}\n            headerUtils={headerUtils}\n            helpMenu={helpMenu}\n            shareApp={shareApp}\n            ref={setHeaderEl}\n          />\n        )}\n        {isSmallOrAbove ? (\n          <TopNavDrawerProvider>\n            <AppTopNav\n              appInfo={appInfo}\n              caseTypes={caseTypes}\n              links={links}\n              cases={cases}\n              agent={navigationAgent}\n              utils={utils}\n              searchInput={searchInput}\n              searchPage={searchPage}\n              searchLabel={searchLabel}\n            />\n          </TopNavDrawerProvider>\n        ) : (\n          touchNav\n        )}\n        {documentTabs && <DocumentTabs {...documentTabs} />}\n        {(() => {\n          const mainRegion = (\n            <StyledAppMain\n              previewActive={previewActive}\n              isTopBar={isSmallOrAbove}\n              hasBottomTouchPanel={!isSmallOrAbove && !!agent && bottomPanelOpen}\n              aria-busy={!!progress}\n              data-app-region\n            >\n              <Progress\n                visible={!!progress}\n                placement='local'\n                message={typeof progress === 'string' ? progress : t('loading')}\n              />\n              {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n              {main}\n            </StyledAppMain>\n          );\n          const touchMainRegion = isMobileNav ? (\n            <StyledMainTouchAppShell active={!!agent && bottomPanelOpen}>\n              {mainRegion}\n            </StyledMainTouchAppShell>\n          ) : (\n            mainRegion\n          );\n          if (!documentTabs) return touchMainRegion;\n          return (\n            <StyledDocumentTabPanel\n              role='tabpanel'\n              id={documentTabs.currentTabId ? getTabPanelId(documentTabs.currentTabId) : undefined}\n              aria-labelledby={\n                documentTabs.currentTabId ? getTabElementId(documentTabs.currentTabId) : undefined\n              }\n              tabIndex={0}\n            >\n              {touchMainRegion}\n            </StyledDocumentTabPanel>\n          );\n        })()}\n        <StyledSplitViewPanel active={!isSmallOrAbove && !!agent && bottomPanelOpen}>\n          {!isSmallOrAbove && bottomTouchPanel && (\n            <StyledPortalTouchDialog\n              open={bottomPanelOpen}\n              heading={bottomTouchPanel.heading}\n              outerClickAction='reset-size'\n              onDismiss={() => {\n                setBottomPanelOpen(false);\n              }}\n              size='full-compact'\n            >\n              {bottomTouchPanel.content}\n            </StyledPortalTouchDialog>\n          )}\n        </StyledSplitViewPanel>\n        <AppShellGlobalStyle\n          isTopBar={isSmallOrAbove}\n          showAppHeader={isSmallOrAbove}\n          hasDocumentTabs={!!documentTabs}\n          isTouchDevice\n          isExtraSmallScreen={!isSmallOrAbove}\n          navOpen={mobileNavOpen}\n        />\n        <TouchAppShellGlobalStyle\n          hasBottomTouchPanel={!isSmallOrAbove && !!agent && bottomPanelOpen}\n          isMobileNav={isMobileNav}\n        />\n      </>\n    </AppShellContext.Provider>\n  );\n}\n"]}
+{"version":3,"file":"TouchAppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { MouseEvent, ReactElement, ReactNode } from 'react';\n\nimport { Alert } from '../Badges';\nimport Drawer from '../Drawer';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport {\n  useBreakpoint,\n  useElement,\n  useEscape,\n  useI18n,\n  usePreviewManager,\n  useScrollToggle,\n  useTheme\n} from '../../hooks';\nimport { debounce, isValidElement } from '../../utils';\nimport { openCloseStates } from '../../hooks/useTransitionState';\nimport Progress from '../Progress';\n\nimport AppNavigationPanel, { CaseTypes, Links } from './AppNavigationPanel';\nimport AppHeader from './AppHeader';\nimport AppTopNav from './AppTopNav';\nimport DocumentTabs, { getTabElementId, getTabPanelId } from './DocumentTabs';\nimport { StyledDocumentTabPanel } from './DocumentTabs.styles';\nimport TopNavDrawerProvider from './TopNavDrawerProvider';\nimport {\n  menuButtonWidth,\n  StyledAppMain,\n  StyledBannerRegion,\n  AppShellGlobalStyle\n} from './AppShell.styles';\nimport {\n  TouchAppShellGlobalStyle,\n  StyledMainTouchAppShell,\n  StyledSplitViewPanel,\n  StyledPortalTouchDialog,\n  StyledMobileMoreMenuButton,\n  StyledMobileMoreMenu,\n  StyledMobileNav\n} from './TouchAppShell.styles';\nimport type { AppShellProps, UtilItemProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellContextValue } from './AppShellContext';\n\nexport interface TouchAppShellProps extends AppShellProps {\n  /** Optional bottom panel rendered by the touch app shell. */\n  bottomTouchPanel?: {\n    heading: string;\n    content: ReactNode;\n  };\n}\n\nexport default function TouchAppShell({\n  appInfo,\n  contextSwitcher,\n  searchPage,\n  searchInput,\n  searchLabel,\n  caseTypes,\n  links,\n  cases,\n  agent,\n  utils,\n  utilsList,\n  operator,\n  notifications,\n  headerUtils,\n  helpMenu,\n  shareApp,\n  banners,\n  progress,\n  main,\n  bottomTouchPanel,\n  documentTabs,\n  navId,\n  restProps\n}: TouchAppShellProps & {\n  searchLabel: string;\n  utilsList: (UtilItemProps | ReactElement)[];\n  navId: string;\n  restProps: Record<string, unknown>;\n}) {\n  const t = useI18n();\n  const theme = useTheme();\n  const { previewActive, setPreviewActive } = usePreviewManager();\n  const { disableScroll, enableScroll } = useScrollToggle();\n  const appShellContext = useContext(AppShellContext);\n  const isSmallOrAbove = useBreakpoint('sm');\n  const isMobileNav = !isSmallOrAbove;\n  const [mobileNavOpen, setMobileNavOpen] = useState(false);\n  const [bottomPanelOpen, setBottomPanelOpen] = useState(false);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [mobileNavLinksCount, setMobileNavLinksCount] = useState(0);\n  const [mobileHeaderEl, setMobileHeaderEl] = useElement<HTMLDivElement>();\n  const [headerEl, setHeaderEl] = useElement<HTMLDivElement>();\n  const focusedImperatively = useRef(false);\n  const [searchContainerEl, setSearchContainerEl] = useState<HTMLElement | null>(null);\n  const mobileAppShellContext = useMemo<AppShellContextValue>(\n    () => ({\n      ...appShellContext,\n      navOpen: mobileNavOpen,\n      drawerOpen,\n      setDrawerOpen,\n      navState: openCloseStates.high,\n      focusedImperatively,\n      headerEl: headerEl || mobileHeaderEl,\n      appHeaderEl: headerEl || mobileHeaderEl,\n      searchContainerEl,\n      setSearchContainerEl,\n      isMobileNav,\n      isTopBar: isSmallOrAbove,\n      previewActive,\n      setPreviewActive\n    }),\n    [\n      appShellContext,\n      headerEl,\n      mobileHeaderEl,\n      mobileNavOpen,\n      drawerOpen,\n      searchContainerEl,\n      isMobileNav,\n      previewActive,\n      setPreviewActive,\n      setSearchContainerEl\n    ]\n  );\n\n  useEffect(() => {\n    if (!isSmallOrAbove && agent && agent.active === false) {\n      setBottomPanelOpen(false);\n    }\n  }, [agent?.active, isSmallOrAbove]);\n\n  useEffect(() => {\n    const ac = new AbortController();\n    window.navigation.addEventListener(\n      'navigate',\n      () => {\n        if (mobileNavOpen) {\n          setMobileNavOpen(false);\n        }\n      },\n      {\n        signal: ac.signal\n      }\n    );\n\n    return () => {\n      ac.abort();\n    };\n  }, [mobileNavOpen]);\n\n  const navigationAgent = agent\n    ? {\n        ...agent,\n        active: bottomPanelOpen,\n        onClick: (event: MouseEvent<HTMLElement>) => {\n          setBottomPanelOpen(true);\n          setMobileNavOpen(false);\n\n          if (isSmallOrAbove || (!bottomPanelOpen && !agent.active)) {\n            agent.onClick?.(event);\n          }\n        }\n      }\n    : undefined;\n  useEffect(() => {\n    if (mobileNavOpen) disableScroll();\n    else enableScroll();\n  }, [mobileNavOpen]);\n\n  useEffect(() => {\n    if (isSmallOrAbove && mobileNavOpen) {\n      setMobileNavOpen(false);\n    }\n  }, [isSmallOrAbove, mobileNavOpen]);\n\n  useEscape(() => setMobileNavOpen(false));\n\n  useLayoutEffect(() => {\n    if (!mobileHeaderEl) return;\n\n    const resizeObserver = new ResizeObserver(\n      debounce(() => {\n        const screenWidth = document.documentElement.clientWidth;\n        const regionsPaddingInlinePixels =\n          2 *\n          Number.parseInt(\n            window.getComputedStyle(mobileHeaderEl).getPropertyValue('padding-inline-start'),\n            10\n          );\n        const availableWidth = screenWidth * 0.9 - regionsPaddingInlinePixels;\n        setMobileNavLinksCount(\n          Math.max(\n            Math.floor(availableWidth / menuButtonWidth(theme)) - (caseTypes?.length ? 2 : 1),\n            0\n          )\n        );\n      }, 0)\n    );\n\n    resizeObserver.observe(document.documentElement);\n    return () => resizeObserver.disconnect();\n  }, [mobileHeaderEl, caseTypes?.length, theme]);\n\n  const touchNav = !isSmallOrAbove && (\n    <>\n      <StyledMobileNav\n        hasBottomTouchPanel={!isSmallOrAbove && !!agent && bottomPanelOpen}\n        container={{ alignItems: 'center', gap: 0.25 }}\n        ref={setMobileHeaderEl}\n        data-app-region\n        onClick={() => setMobileNavOpen(false)}\n      >\n        {caseTypes && caseTypes.length > 0 && <CaseTypes caseTypes={caseTypes} mobileNavBar />}\n        {links && <Links links={links.slice(0, mobileNavLinksCount)} mobileNavBar />}\n        <StyledMobileMoreMenuButton\n          variant='simple'\n          onClick={(e: MouseEvent<HTMLButtonElement>) => {\n            setMobileNavOpen(prev => !prev);\n            e.stopPropagation();\n          }}\n          label={t('app_shell_more')}\n          icon\n          aria-expanded={mobileNavOpen}\n          aria-controls={navId}\n        >\n          <Icon name='bars' />\n          {!mobileNavOpen &&\n            utilsList.some(item => (isValidElement(item) ? false : !!item.count)) && (\n              <Alert variant='urgent' />\n            )}\n          <span>{t('app_shell_more')}</span>\n        </StyledMobileMoreMenuButton>\n      </StyledMobileNav>\n      <Drawer open={mobileNavOpen} position='fixed' placement='bottom' size='100dvh' nullWhenClosed>\n        <Flex\n          {...restProps}\n          container={{ direction: 'column', justify: 'between' }}\n          id={navId}\n          as={StyledMobileMoreMenu}\n          aria-label={t('app_shell_main_navigation_label')}\n        >\n          <AppNavigationPanel\n            appInfo={appInfo}\n            navState='open'\n            searchInput={searchInput}\n            searchLabel={searchLabel}\n            links={links?.slice(mobileNavLinksCount)}\n            cases={cases}\n            utils={utilsList}\n            agent={navigationAgent}\n          />\n        </Flex>\n      </Drawer>\n    </>\n  );\n\n  return (\n    <AppShellContext.Provider value={mobileAppShellContext}>\n      <>\n        {isSmallOrAbove && (\n          <AppHeader\n            {...appInfo}\n            contextSwitcher={contextSwitcher}\n            searchInput={searchInput}\n            searchLabel={searchLabel}\n            searchPage={searchPage}\n            operator={operator}\n            notifications={notifications}\n            headerUtils={headerUtils}\n            helpMenu={helpMenu}\n            shareApp={shareApp}\n            ref={setHeaderEl}\n          />\n        )}\n        {isSmallOrAbove ? (\n          <TopNavDrawerProvider>\n            <AppTopNav\n              appInfo={appInfo}\n              caseTypes={caseTypes}\n              links={links}\n              cases={cases}\n              agent={navigationAgent}\n              utils={utils}\n              searchInput={searchInput}\n              searchPage={searchPage}\n              searchLabel={searchLabel}\n            />\n          </TopNavDrawerProvider>\n        ) : (\n          touchNav\n        )}\n        {documentTabs && <DocumentTabs {...documentTabs} />}\n        {(() => {\n          const mainRegion = (\n            <StyledAppMain\n              previewActive={previewActive}\n              isTopBar={isSmallOrAbove}\n              hasBottomTouchPanel={!isSmallOrAbove && !!agent && bottomPanelOpen}\n              aria-busy={!!progress}\n              data-app-region\n            >\n              <Progress\n                visible={!!progress}\n                placement='local'\n                message={typeof progress === 'string' ? progress : t('loading')}\n              />\n              {banners && <StyledBannerRegion>{banners}</StyledBannerRegion>}\n              {main}\n            </StyledAppMain>\n          );\n          const touchMainRegion = isMobileNav ? (\n            <StyledMainTouchAppShell active={!!agent && bottomPanelOpen}>\n              {mainRegion}\n            </StyledMainTouchAppShell>\n          ) : (\n            mainRegion\n          );\n          if (!documentTabs) return touchMainRegion;\n          return (\n            <StyledDocumentTabPanel\n              role='tabpanel'\n              id={documentTabs.currentTabId ? getTabPanelId(documentTabs.currentTabId) : undefined}\n              aria-labelledby={\n                documentTabs.currentTabId ? getTabElementId(documentTabs.currentTabId) : undefined\n              }\n              tabIndex={0}\n            >\n              {touchMainRegion}\n            </StyledDocumentTabPanel>\n          );\n        })()}\n        <StyledSplitViewPanel active={!isSmallOrAbove && !!agent && bottomPanelOpen}>\n          {!isSmallOrAbove && bottomTouchPanel && (\n            <StyledPortalTouchDialog\n              open={bottomPanelOpen}\n              heading={bottomTouchPanel.heading}\n              outerClickAction='reset-size'\n              onDismiss={() => {\n                setBottomPanelOpen(false);\n              }}\n              size='full-compact'\n            >\n              {bottomTouchPanel.content}\n            </StyledPortalTouchDialog>\n          )}\n        </StyledSplitViewPanel>\n        <AppShellGlobalStyle\n          isTopBar={isSmallOrAbove}\n          showAppHeader={isSmallOrAbove}\n          hasDocumentTabs={!!documentTabs}\n          isTouchDevice\n          isExtraSmallScreen={!isSmallOrAbove}\n          navOpen={mobileNavOpen}\n        />\n        <TouchAppShellGlobalStyle\n          hasBottomTouchPanel={!isSmallOrAbove && !!agent && bottomPanelOpen}\n          isMobileNav={isMobileNav}\n        />\n      </>\n    </AppShellContext.Provider>\n  );\n}\n"]}