@pega/cosmos-react-core 5.0.0-dev.4.7 → 5.0.0-dev.4.9

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

@@ -1,136 +0,0 @@
-import styled, { css } from 'styled-components';
-import { calculateFontSize } from '../../styles';
-import { defaultThemeProp } from '../../theme';
-import { StyledMetaListItem } from '../MetaList/MetaList';
-import { StyledLabel } from '../Label';
-import { StyledForm } from '../MultiStepForm/MultiStepForm';
-import { navOpenWidth } from './AppShell.styles';
-import { navContrastColors, pxToRem } from './style-utils';
-export const StyledDrawerWrapper = styled.div(({ theme, open }) => {
-    const { components: { 'app-shell': { nav: { 'background-color': navBg } } } } = theme;
-    const { foreground, border: borderColor } = navContrastColors(theme);
-    return css `
-    background: ${navBg};
-    width: ${navOpenWidth};
-    height: 100%;
-    color: ${foreground};
-    opacity: ${open ? 1 : 0};
-    border-inline-end: ${pxToRem(1)} solid ${borderColor};
-
-    ${StyledForm},
-    ${StyledLabel},
-    ${StyledMetaListItem} {
-      color: ${foreground};
-    }
-  `;
-});
-StyledDrawerWrapper.defaultProps = defaultThemeProp;
-export const StyledDrawerHeading = styled.header(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    const { foreground } = navContrastColors(theme);
-    return css `
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    line-height: 1;
-
-    h2 {
-      font-size: ${fontSize.s};
-      font-weight: ${theme.base['font-weight']['semi-bold']};
-      margin: 0 auto;
-      position: relative;
-      left: -0.7rem;
-    }
-
-    svg {
-      font-size: ${fontSize.xxl};
-      cursor: pointer;
-      color: ${foreground};
-    }
-  `;
-});
-StyledDrawerHeading.defaultProps = defaultThemeProp;
-export const StyledDrawerBackButton = styled.button(({ theme }) => {
-    const { hoverBg, foreground } = navContrastColors(theme);
-    return css `
-    height: ${theme.base['hit-area']['mouse-min']};
-    width: ${theme.base['hit-area']['mouse-min']};
-    border-radius: calc(
-      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}
-    );
-
-    &:hover,
-    &:focus {
-      color: ${foreground};
-      background-color: ${hoverBg};
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-  `;
-});
-StyledDrawerBackButton.defaultProps = defaultThemeProp;
-export const StyledDrawerList = styled.ul(() => {
-    return css ``;
-});
-StyledDrawerList.defaultProps = defaultThemeProp;
-export const StyledDrawerMetaList = styled.ul `
-  li {
-    color: inherit;
-  }
-`;
-export const EmptyDrawerVisual = styled.div(({ theme }) => {
-    return css `
-    width: calc(4 * ${theme.base.spacing});
-    height: calc(4 * ${theme.base.spacing});
-  `;
-});
-EmptyDrawerVisual.defaultProps = defaultThemeProp;
-export const StyledDrawerListHeading = styled.h3(({ theme }) => {
-    const { hoverBg, foreground } = navContrastColors(theme);
-    return css `
-    position: sticky;
-    top: 0;
-    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
-    background-color: ${hoverBg};
-    color: ${foreground};
-    z-index: 1;
-  `;
-});
-StyledDrawerListHeading.defaultProps = defaultThemeProp;
-export const StyledDrawerViewAll = styled.a(({ theme }) => {
-    const { foreground } = navContrastColors(theme);
-    return css `
-    position: sticky;
-    bottom: 0;
-    padding: ${theme.base.spacing} 0;
-    color: ${foreground};
-    background-color: ${theme.components['app-shell'].nav['background-color']};
-    text-align: center;
-    margin-top: 0.0625rem;
-
-    &:focus {
-      outline: none;
-      box-shadow: ${theme.base.shadow['focus-inset']};
-    }
-  `;
-});
-StyledDrawerViewAll.defaultProps = defaultThemeProp;
-export const StyledDrawerListSection = styled.div(({ theme }) => {
-    const { border: borderColor } = navContrastColors(theme);
-    return css `
-    border-top: 0.0625rem solid ${borderColor};
-    min-height: max(20%, 8rem);
-    overflow-y: auto;
-  `;
-});
-StyledDrawerListSection.defaultProps = defaultThemeProp;
-export const StyledDrawerListContainer = styled.div(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});
-    overflow: auto;
-  `;
-});
-StyledDrawerListContainer.defaultProps = defaultThemeProp;
-//# sourceMappingURL=Drawer.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/Drawer.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { DrawerProps } from '../Drawer';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport { StyledLabel } from '../Label';\nimport { StyledForm } from '../MultiStepForm/MultiStepForm';\n\nimport { navOpenWidth } from './AppShell.styles';\nimport { navContrastColors, pxToRem } from './style-utils';\n\nexport const StyledDrawerWrapper = styled.div<DrawerProps>(({ theme, open }) => {\n  const {\n    components: {\n      'app-shell': {\n        nav: { 'background-color': navBg }\n      }\n    }\n  } = theme;\n  const { foreground, border: borderColor } = navContrastColors(theme);\n\n  return css`\n    background: ${navBg};\n    width: ${navOpenWidth};\n    height: 100%;\n    color: ${foreground};\n    opacity: ${open ? 1 : 0};\n    border-inline-end: ${pxToRem(1)} solid ${borderColor};\n\n    ${StyledForm},\n    ${StyledLabel},\n    ${StyledMetaListItem} {\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeading = styled.header(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    line-height: 1;\n\n    h2 {\n      font-size: ${fontSize.s};\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin: 0 auto;\n      position: relative;\n      left: -0.7rem;\n    }\n\n    svg {\n      font-size: ${fontSize.xxl};\n      cursor: pointer;\n      color: ${foreground};\n    }\n  `;\n});\n\nStyledDrawerHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerBackButton = styled.button(({ theme }) => {\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  return css`\n    height: ${theme.base['hit-area']['mouse-min']};\n    width: ${theme.base['hit-area']['mouse-min']};\n    border-radius: calc(\n      ${`${theme.base['border-radius']} * ${theme.components.button['border-radius']}`}\n    );\n\n    &:hover,\n    &:focus {\n      color: ${foreground};\n      background-color: ${hoverBg};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerBackButton.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerList = styled.ul<{ displayPins: boolean }>(() => {\n  return css``;\n});\n\nStyledDrawerList.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerMetaList = styled.ul`\n  li {\n    color: inherit;\n  }\n`;\n\nexport const EmptyDrawerVisual = styled.div(({ theme }) => {\n  return css`\n    width: calc(4 * ${theme.base.spacing});\n    height: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nEmptyDrawerVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListHeading = styled.h3(({ theme }) => {\n  const { hoverBg, foreground } = 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: ${hoverBg};\n    color: ${foreground};\n    z-index: 1;\n  `;\n});\n\nStyledDrawerListHeading.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerViewAll = styled.a(({ theme }) => {\n  const { foreground } = navContrastColors(theme);\n\n  return css`\n    position: sticky;\n    bottom: 0;\n    padding: ${theme.base.spacing} 0;\n    color: ${foreground};\n    background-color: ${theme.components['app-shell'].nav['background-color']};\n    text-align: center;\n    margin-top: 0.0625rem;\n\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n  `;\n});\n\nStyledDrawerViewAll.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListSection = 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    overflow-y: auto;\n  `;\n});\n\nStyledDrawerListSection.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerListContainer = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    height: calc(100% - 4 * ${theme.base.spacing} - ${fontSize.xxl});\n    overflow: auto;\n  `;\n});\n\nStyledDrawerListContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { NavListItemProps, NavListProps } from './AppShell.types';
-export declare const NavigationListItem: FC<NavListItemProps>;
-declare const NavigationList: FC<NavListProps>;
-export default NavigationList;
-//# sourceMappingURL=NavigationList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EASH,MAAM,OAAO,CAAC;AA0Bf,OAAO,EACL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,kBAAkB,CAAC;AA0F1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA4InD,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CA4DpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/NavigationList.js

@@ -1,125 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { isValidElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { useTheme, useArrows, useConsolidatedRef, useDirection, useUID, useI18n, useEscape } from '../../hooks';
-import ExpandCollapse from '../ExpandCollapse';
-import BareButton from '../Button/BareButton';
-import Flex from '../Flex';
-import Icon, { registerIcon } from '../Icon';
-import Text from '../Text';
-import Button from '../Button';
-import Link from '../Link';
-import * as timesIcon from '../Icon/icons/times.icon';
-import * as checkIcon from '../Icon/icons/check.icon';
-import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
-import * as caretRightIcon from '../Icon/icons/caret-right.icon';
-import NavigationListItemWrapper from './NavigationListItemWrapper';
-import { StyledNavList, StyledNestedNavList, StyledNavItemIconBox, StyledNavListItem, StyledNavListItemExpandCollapse, StyledCaseClose, StyledSingleSelectIconBox } from './AppShell.styles';
-import AppShellContext from './AppShellContext';
-registerIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);
-const NavigationMenu = props => {
-    const { navOpen } = useContext(AppShellContext);
-    const { visual, primary, secondary, href, onClick, items, onDismiss, actions, forwardedRef, ...restProps } = props;
-    const uid = useUID();
-    const { navState } = useContext(AppShellContext);
-    const [collapsed, setCollapsed] = useState(true);
-    const toggleCollapsed = useCallback((e) => {
-        e.stopPropagation();
-        setCollapsed(state => !state);
-    }, [setCollapsed]);
-    const itemRef = useConsolidatedRef(forwardedRef);
-    const menuRef = useRef(null);
-    useArrows(menuRef, { selector: '[role="menuitem"]', cycle: true });
-    useEscape(() => {
-        setCollapsed(true);
-        itemRef.current?.focus();
-    }, menuRef);
-    const { end } = useDirection();
-    return (_createElement(StyledNavListItem, { ...restProps, key: primary, nestedListCollapsed: collapsed, ref: menuRef },
-        _jsxs(BareButton, { id: uid, ref: itemRef, "aria-expanded": !collapsed, "aria-controls": `${uid}-menu`, "aria-label": primary, onClick: toggleCollapsed, children: [visual && _jsx(StyledNavItemIconBox, { children: visual }), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, children: [_jsx("span", { children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { children: primary })), navState === 'open' && _jsx(StyledNavListItemExpandCollapse, { name: `caret-${end}` })] }),
-        _jsx(NavigationList, { id: `${uid}-menu`, nestedList: true, items: items, collapsed: !navOpen || collapsed })));
-};
-export const NavigationListItem = ({ visual, primary, secondary, href, onClick, items, collapseItems = false, onDismiss, actions, forwardedRef, isMenuItem, count, singleSelect, selected, 'aria-labelledby': ariaLabelledBy, 'aria-current': ariaCurrent, ...restProps }) => {
-    const { navOpen, navState } = useContext(AppShellContext);
-    const t = useI18n();
-    const listItemRef = useConsolidatedRef(forwardedRef);
-    const [menuState, setMenuState] = useState('');
-    const hasItems = (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);
-    const compProps = {
-        onClick: (e) => {
-            e.stopPropagation();
-            onClick?.(e);
-        },
-        href
-    };
-    let caseItems;
-    if (onDismiss) {
-        caseItems = [
-            {
-                primary: t('go_to_noun', [primary]),
-                onClick
-            },
-            {
-                primary: t('dismiss_case'),
-                onClick: onDismiss
-            }
-        ];
-    }
-    let Component;
-    if (href) {
-        Component = Link;
-    }
-    else {
-        Component = BareButton;
-    }
-    useEffect(() => {
-        if (!navOpen && actions) {
-            const node = document.getElementsByTagName('body')[0];
-            const clickEvent = document.createEvent('MouseEvent');
-            clickEvent.initEvent('mousedown', true, true);
-            node.dispatchEvent(clickEvent);
-        }
-        if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))
-            listItemRef.current?.focus();
-    }, [navOpen]);
-    const { end } = useDirection();
-    const primaryId = useUID();
-    return (_createElement(StyledNavListItem, { ...restProps, key: primary, singleSelect: singleSelect, nestedListCollapsed: true },
-        _jsx(NavigationListItemWrapper, { tooltipLabel: secondary ? `${primary} ${secondary}` : primary, label: primary, childElementRef: listItemRef, items: actions || items || caseItems, onMenuToggle: setMenuState, children: _jsxs(Component, { ...compProps, ref: listItemRef, ...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {}), "aria-labelledby": `${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy}`, ...(hasItems && { 'aria-haspopup': 'menu', 'aria-expanded': menuState === 'open' }), "aria-current": ariaCurrent, children: [singleSelect && (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledSingleSelectIconBox, children: selected && _jsx(Icon, { name: 'check' }) })), visual && _jsx(StyledNavItemIconBox, { children: visual }), secondary ? (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start' }, item: { shrink: 0 }, as: 'span', children: [_jsx("span", { id: primaryId, children: primary }), _jsx(Text, { variant: 'secondary', children: secondary })] })) : (_jsx("span", { id: primaryId, children: primary })), (hasItems || actions) && navState === 'open' && (_jsx(StyledNavListItemExpandCollapse, { name: `caret-${end}` }))] }) }),
-        onDismiss && navOpen && (_jsx(Button, { icon: true, variant: 'simple', as: StyledCaseClose, onClick: onDismiss, "aria-label": t('dismiss_case'), children: _jsx(Icon, { name: 'times' }) })),
-        hasItems && (
-        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        _jsx(NavigationList, { nestedList: true, items: actions || items, collapsed: !navOpen || collapseItems }))));
-};
-const NavigationList = ({ items = [], nestedList, id, collapsed, singleSelect }) => {
-    let Component = StyledNavList;
-    let ItemComponent;
-    const { navOpen } = useContext(AppShellContext);
-    let fwdProps = {
-        collapsed: !!collapsed
-    };
-    const { base: { animation } } = useTheme();
-    if (nestedList) {
-        fwdProps = {
-            as: ExpandCollapse,
-            forwardedAs: 'ul',
-            nullWhenCollapsed: true,
-            transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,
-            ...fwdProps
-        };
-        Component = StyledNestedNavList;
-    }
-    return (_jsx(Component, { ...(nestedList ? { role: 'menu', id } : {}), ...fwdProps, children: items.map(item => {
-            if (isValidElement(item))
-                return item;
-            if (item.items && item.items.length > 0 && navOpen) {
-                ItemComponent = NavigationMenu;
-            }
-            else {
-                ItemComponent = NavigationListItem;
-            }
-            return (_jsx(ItemComponent, { isMenuItem: nestedList, singleSelect: singleSelect, "aria-current": item['aria-current'], ...item }, item.id || item.primary));
-        }) }));
-};
-export default NavigationList;
-//# sourceMappingURL=NavigationList.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FC,\n  isValidElement,\n  MouseEvent,\n  MouseEventHandler,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useArrows,\n  useConsolidatedRef,\n  useDirection,\n  useUID,\n  useI18n,\n  useEscape\n} from '../../hooks';\nimport ExpandCollapse from '../ExpandCollapse';\nimport BareButton from '../Button/BareButton';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport Text from '../Text';\nimport Button from '../Button';\nimport { OmitStrict } from '../../types';\nimport { PopoverProps } from '../Popover';\nimport Link from '../Link';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\n\nimport NavigationListItemWrapper from './NavigationListItemWrapper';\nimport {\n  NavListItemProps,\n  NavListItemWrapperProps,\n  NavListProps,\n  NavMenuProps\n} from './AppShell.types';\nimport {\n  StyledNavList,\n  StyledNestedNavList,\n  StyledNavItemIconBox,\n  StyledNavListItem,\n  StyledNavListItemExpandCollapse,\n  StyledCaseClose,\n  StyledSingleSelectIconBox\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nregisterIcon(timesIcon, checkIcon, caretLeftIcon, caretRightIcon);\n\nconst NavigationMenu: FC<NavMenuProps> = props => {\n  const { navOpen } = useContext(AppShellContext);\n  const {\n    visual,\n    primary,\n    secondary,\n    href,\n    onClick,\n    items,\n    onDismiss,\n    actions,\n    forwardedRef,\n    ...restProps\n  } = props;\n\n  const uid = useUID();\n\n  const { navState } = useContext(AppShellContext);\n  const [collapsed, setCollapsed] = useState(true);\n\n  const toggleCollapsed = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      setCollapsed(state => !state);\n    },\n    [setCollapsed]\n  );\n\n  const itemRef = useConsolidatedRef(forwardedRef);\n\n  const menuRef = useRef<HTMLLIElement>(null);\n\n  useArrows(menuRef, { selector: '[role=\"menuitem\"]', cycle: true });\n\n  useEscape(() => {\n    setCollapsed(true);\n    itemRef.current?.focus();\n  }, menuRef);\n\n  const { end } = useDirection();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} nestedListCollapsed={collapsed} ref={menuRef}>\n      <BareButton\n        id={uid}\n        ref={itemRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${uid}-menu`}\n        aria-label={primary}\n        onClick={toggleCollapsed}\n      >\n        {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n        {secondary ? (\n          <Flex container={{ direction: 'column', alignItems: 'start' }}>\n            <span>{primary}</span>\n            <Text variant='secondary'>{secondary}</Text>\n          </Flex>\n        ) : (\n          <span>{primary}</span>\n        )}\n\n        {navState === 'open' && <StyledNavListItemExpandCollapse name={`caret-${end}`} />}\n      </BareButton>\n\n      {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n      <NavigationList\n        id={`${uid}-menu`}\n        nestedList\n        items={items}\n        collapsed={!navOpen || collapsed}\n      />\n    </StyledNavListItem>\n  );\n};\n\nexport const NavigationListItem: FC<NavListItemProps> = ({\n  visual,\n  primary,\n  secondary,\n  href,\n  onClick,\n  items,\n  collapseItems = false,\n  onDismiss,\n  actions,\n  forwardedRef,\n  isMenuItem,\n  count,\n  singleSelect,\n  selected,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-current': ariaCurrent,\n  ...restProps\n}) => {\n  const { navOpen, navState } = useContext(AppShellContext);\n  const t = useI18n();\n  const listItemRef = useConsolidatedRef(forwardedRef);\n  const [menuState, setMenuState] = useState('');\n  const hasItems =\n    (Array.isArray(items) && items.length > 0) || (Array.isArray(actions) && actions.length > 0);\n  const compProps: {\n    href?: string;\n    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>;\n    actions?: NavListItemProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n    'aria-label'?: string;\n  } = {\n    onClick: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>) => {\n      e.stopPropagation();\n      onClick?.(e);\n    },\n    href\n  };\n\n  let caseItems: NavListItemWrapperProps['items'] | undefined;\n  if (onDismiss) {\n    caseItems = [\n      {\n        primary: t('go_to_noun', [primary]),\n        onClick\n      },\n      {\n        primary: t('dismiss_case'),\n        onClick: onDismiss\n      }\n    ];\n  }\n\n  let Component: ElementType;\n\n  if (href) {\n    Component = Link;\n  } else {\n    Component = BareButton;\n  }\n\n  useEffect(() => {\n    if (!navOpen && actions) {\n      const node = document.getElementsByTagName('body')[0];\n      const clickEvent = document.createEvent('MouseEvent');\n      clickEvent.initEvent('mousedown', true, true);\n      node.dispatchEvent(clickEvent);\n    }\n    if (navOpen && isMenuItem && listItemRef.current?.parentElement?.matches(':first-child'))\n      listItemRef.current?.focus();\n  }, [navOpen]);\n\n  const { end } = useDirection();\n  const primaryId = useUID();\n\n  return (\n    <StyledNavListItem {...restProps} key={primary} singleSelect={singleSelect} nestedListCollapsed>\n      <NavigationListItemWrapper\n        tooltipLabel={secondary ? `${primary} ${secondary}` : primary}\n        label={primary}\n        childElementRef={listItemRef}\n        items={actions || items || caseItems}\n        onMenuToggle={setMenuState}\n      >\n        <Component\n          {...compProps}\n          ref={listItemRef}\n          {...(navOpen && isMenuItem ? { tabIndex: -1, role: 'menuitem' } : {})}\n          aria-labelledby={`${primaryId} ${count ? `${primary}-count` : ''} ${ariaLabelledBy}`}\n          {...(hasItems && { 'aria-haspopup': 'menu', 'aria-expanded': menuState === 'open' })}\n          aria-current={ariaCurrent}\n        >\n          {singleSelect && (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledSingleSelectIconBox}\n            >\n              {selected && <Icon name='check' />}\n            </Flex>\n          )}\n\n          {visual && <StyledNavItemIconBox>{visual}</StyledNavItemIconBox>}\n\n          {secondary ? (\n            <Flex\n              container={{ direction: 'column', alignItems: 'start' }}\n              item={{ shrink: 0 }}\n              as='span'\n            >\n              <span id={primaryId}>{primary}</span>\n              <Text variant='secondary'>{secondary}</Text>\n            </Flex>\n          ) : (\n            <span id={primaryId}>{primary}</span>\n          )}\n\n          {(hasItems || actions) && navState === 'open' && (\n            <StyledNavListItemExpandCollapse name={`caret-${end}`} />\n          )}\n        </Component>\n      </NavigationListItemWrapper>\n\n      {onDismiss && navOpen && (\n        <Button\n          icon\n          variant='simple'\n          as={StyledCaseClose}\n          onClick={onDismiss}\n          aria-label={t('dismiss_case')}\n        >\n          <Icon name='times' />\n        </Button>\n      )}\n\n      {hasItems && (\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        <NavigationList nestedList items={actions || items} collapsed={!navOpen || collapseItems} />\n      )}\n    </StyledNavListItem>\n  );\n};\n\nconst NavigationList: FC<NavListProps> = ({\n  items = [],\n  nestedList,\n  id,\n  collapsed,\n  singleSelect\n}) => {\n  let Component: ElementType = StyledNavList;\n  let ItemComponent: ElementType;\n  const { navOpen } = useContext(AppShellContext);\n\n  let fwdProps: {\n    as?: ElementType;\n    forwardedAs?: ElementType;\n    nullWhenCollapsed?: boolean;\n    transitionSpeed?: string;\n    collapsed: boolean;\n  } = {\n    collapsed: !!collapsed\n  };\n\n  const {\n    base: { animation }\n  } = useTheme();\n\n  if (nestedList) {\n    fwdProps = {\n      as: ExpandCollapse,\n      forwardedAs: 'ul',\n      nullWhenCollapsed: true,\n      transitionSpeed: items.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed,\n      ...fwdProps\n    };\n\n    Component = StyledNestedNavList;\n  }\n\n  return (\n    <Component {...(nestedList ? { role: 'menu', id } : {})} {...fwdProps}>\n      {items.map(item => {\n        if (isValidElement<any>(item)) return item;\n\n        if (item.items && item.items.length > 0 && navOpen) {\n          ItemComponent = NavigationMenu;\n        } else {\n          ItemComponent = NavigationListItem;\n        }\n\n        return (\n          <ItemComponent\n            key={item.id || item.primary}\n            isMenuItem={nestedList}\n            singleSelect={singleSelect}\n            aria-current={item['aria-current']}\n            {...item}\n          />\n        );\n      })}\n    </Component>\n  );\n};\n\nexport default NavigationList;\n"]}

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

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { NavListItemWrapperProps } from './AppShell.types';
-declare const ListItemWrapper: FC<NavListItemWrapperProps>;
-export default ListItemWrapper;
-//# sourceMappingURL=NavigationListItemWrapper.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationListItemWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0E,MAAM,OAAO,CAAC;AAYnG,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAoD3D,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,uBAAuB,CA+LhD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/NavigationListItemWrapper.js

@@ -1,184 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { useDirection, useEscape, useOuterEvent } from '../../hooks';
-import Text from '../Text';
-import Tooltip from '../Tooltip';
-import Popover from '../Popover';
-import Menu from '../Menu';
-import { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';
-import { defaultThemeProp } from '../../theme';
-import { calculateFontSize } from '../../styles';
-import AppShellContext from './AppShellContext';
-import { navContrastColors } from './style-utils';
-const StyledNavigationPopover = styled.div(({ theme }) => {
-    const navBg = theme.components['app-shell'].nav['background-color'];
-    const { hoverBg, foreground } = navContrastColors(theme);
-    const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;
-    return css `
-    display: flex;
-    background-color: ${navBg};
-
-    ${StyledMenu} {
-      display: flex;
-      flex-direction: column;
-    }
-
-    ${StyledMenuListWrapper} {
-      overflow: auto;
-    }
-
-    &,
-    ${StyledMenuListContainer} {
-      background-color: ${navBg};
-
-      header {
-        color: ${foreground};
-        border-bottom: none;
-        opacity: 0.7;
-
-        h2 {
-          font-weight: ${theme.base['font-weight']['semi-bold']};
-          font-size: ${headingFontSize};
-        }
-      }
-    }
-
-    ${StyledMenuListContainer} li {
-      color: ${foreground};
-      background-color: transparent;
-
-      &:hover,
-      &[data-current='true'] {
-        background-color: ${hoverBg};
-      }
-    }
-  `;
-});
-StyledNavigationPopover.defaultProps = defaultThemeProp;
-const ListItemWrapper = props => {
-    const { children, childElementRef, label, tooltipLabel, items = [], content, onMenuToggle } = props;
-    const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);
-    const popoverRef = useRef(null);
-    const [popoverOpen, setPopoverOpen] = useState(false);
-    const { end } = useDirection();
-    const mousedOverMenu = useRef(false);
-    const hidePopoverTimeout = useRef();
-    const closePopover = (focusChildEl = true) => {
-        if (popoverOpen) {
-            setPopoverOpen(false);
-            if (focusChildEl) {
-                childElementRef.current?.focus();
-            }
-            if (hidePopoverTimeout.current) {
-                clearTimeout(hidePopoverTimeout.current);
-                hidePopoverTimeout.current = null;
-            }
-        }
-    };
-    const onMouseEnterContent = () => {
-        if (collapsedHoverMenus) {
-            mousedOverMenu.current = true;
-        }
-    };
-    const onMouseLeaveContent = () => {
-        if (mousedOverMenu.current && collapsedHoverMenus) {
-            mousedOverMenu.current = false;
-            closePopover();
-        }
-    };
-    useOuterEvent('click', [popoverRef], () => closePopover());
-    useEffect(() => {
-        const onClick = (e) => {
-            if (items.length || content) {
-                if (!navOpen) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                }
-                if (!navOpen && !popoverOpen)
-                    setPopoverOpen(true);
-                else {
-                    setTimeout(() => {
-                        closePopover(false);
-                    }, 0);
-                }
-            }
-        };
-        const onKeyDown = (e) => {
-            if (e.key === 'Tab' && !content) {
-                setPopoverOpen(false);
-            }
-        };
-        const onMouseOut = (e) => {
-            if (hidePopoverTimeout.current) {
-                clearTimeout(hidePopoverTimeout.current);
-                hidePopoverTimeout.current = null;
-            }
-            const tag = e.relatedTarget?.tagName.toLowerCase();
-            // If the mouse is mousing out from this nav item onto another nav item
-            if (tag && ['a', 'button', 'form'].includes(tag)) {
-                closePopover(false);
-            }
-            else {
-                hidePopoverTimeout.current = window.setTimeout(() => {
-                    if (!mousedOverMenu.current) {
-                        closePopover(false);
-                    }
-                }, 1000);
-            }
-        };
-        childElementRef.current?.addEventListener('click', onClick);
-        childElementRef.current?.addEventListener('keydown', onKeyDown);
-        if (collapsedHoverMenus) {
-            childElementRef.current?.addEventListener('mouseenter', onClick);
-            childElementRef.current?.addEventListener('mouseleave', onMouseOut);
-        }
-        return () => {
-            childElementRef.current?.removeEventListener('click', onClick);
-            childElementRef.current?.removeEventListener('keydown', onKeyDown);
-            if (collapsedHoverMenus) {
-                childElementRef.current?.removeEventListener('mouseenter', onClick);
-                childElementRef.current?.removeEventListener('mouseleave', onMouseOut);
-            }
-            if (hidePopoverTimeout.current) {
-                clearTimeout(hidePopoverTimeout.current);
-                hidePopoverTimeout.current = null;
-            }
-        };
-    }, [items, content, navOpen, closePopover, collapsedHoverMenus]);
-    useEffect(() => {
-        onMenuToggle?.(popoverOpen ? 'open' : 'close');
-    }, [popoverOpen]);
-    useEscape(() => closePopover(), childElementRef, [childElementRef]);
-    useEscape(() => closePopover(), popoverRef, [popoverRef]);
-    return (_jsxs(_Fragment, { children: [children, !navOpen && (_jsxs(_Fragment, { children: [!popoverOpen && (_jsx(Tooltip, { target: childElementRef.current, placement: end, showDelay: 'none', hideDelay: 'none', children: tooltipLabel })), popoverOpen && (items.length || content) && (_jsx(Popover, { target: childElementRef.current, placement: `${end}-start`, ref: popoverRef, as: StyledNavigationPopover, arrow: true, modifiers: headerEl
-                            ? [
-                                {
-                                    name: 'preventOverflow',
-                                    options: {
-                                        padding: {
-                                            top: headerEl.offsetHeight + 8,
-                                            right: 8,
-                                            bottom: 8,
-                                            left: 8
-                                        }
-                                    }
-                                }
-                            ]
-                            : undefined, onClick: (e) => {
-                            e.stopPropagation();
-                        }, children: content ? (_jsx("div", { onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent, children: content })) : (_jsx(Menu, { mode: 'action', variant: 'flyout', focusControlEl: childElementRef.current ?? undefined, scrollAt: 99, items: items.map(item => {
-                                return {
-                                    id: (item.primary || item.text),
-                                    primary: (item.primary || item.text),
-                                    href: item.href,
-                                    onClick: (_, e) => {
-                                        e.stopPropagation();
-                                        item.onClick?.(e);
-                                        setPopoverOpen(false);
-                                    }
-                                };
-                            }), header: _jsx(Text, { variant: 'h2', children: label }), onMouseEnter: onMouseEnterContent, onMouseLeave: onMouseLeaveContent })) }))] }))] }));
-};
-export default ListItemWrapper;
-//# sourceMappingURL=NavigationListItemWrapper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"NavigationListItemWrapper.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationListItemWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useContext, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useDirection, useEscape, useOuterEvent } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\nimport Popover from '../Popover';\nimport Menu from '../Menu';\nimport { StyledMenu, StyledMenuListContainer, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\n\nimport { NavListItemWrapperProps } from './AppShell.types';\nimport AppShellContext from './AppShellContext';\nimport { navContrastColors } from './style-utils';\n\nconst StyledNavigationPopover = styled.div(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav['background-color'];\n  const { hoverBg, foreground } = navContrastColors(theme);\n\n  const headingFontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']).s;\n  return css`\n    display: flex;\n    background-color: ${navBg};\n\n    ${StyledMenu} {\n      display: flex;\n      flex-direction: column;\n    }\n\n    ${StyledMenuListWrapper} {\n      overflow: auto;\n    }\n\n    &,\n    ${StyledMenuListContainer} {\n      background-color: ${navBg};\n\n      header {\n        color: ${foreground};\n        border-bottom: none;\n        opacity: 0.7;\n\n        h2 {\n          font-weight: ${theme.base['font-weight']['semi-bold']};\n          font-size: ${headingFontSize};\n        }\n      }\n    }\n\n    ${StyledMenuListContainer} li {\n      color: ${foreground};\n      background-color: transparent;\n\n      &:hover,\n      &[data-current='true'] {\n        background-color: ${hoverBg};\n      }\n    }\n  `;\n});\n\nStyledNavigationPopover.defaultProps = defaultThemeProp;\n\nconst ListItemWrapper: FC<NavListItemWrapperProps> = props => {\n  const {\n    children,\n    childElementRef,\n    label,\n    tooltipLabel,\n    items = [],\n    content,\n    onMenuToggle\n  } = props;\n  const { navOpen, collapsedHoverMenus, headerEl } = useContext(AppShellContext);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const { end } = useDirection();\n  const mousedOverMenu = useRef(false);\n  const hidePopoverTimeout = useRef<number | null>();\n\n  const closePopover = (focusChildEl: boolean = true) => {\n    if (popoverOpen) {\n      setPopoverOpen(false);\n      if (focusChildEl) {\n        childElementRef.current?.focus();\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    }\n  };\n\n  const onMouseEnterContent = () => {\n    if (collapsedHoverMenus) {\n      mousedOverMenu.current = true;\n    }\n  };\n\n  const onMouseLeaveContent = () => {\n    if (mousedOverMenu.current && collapsedHoverMenus) {\n      mousedOverMenu.current = false;\n      closePopover();\n    }\n  };\n\n  useOuterEvent('click', [popoverRef], () => closePopover());\n\n  useEffect(() => {\n    const onClick = (e: Event) => {\n      if (items.length || content) {\n        if (!navOpen) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        if (!navOpen && !popoverOpen) setPopoverOpen(true);\n        else {\n          setTimeout(() => {\n            closePopover(false);\n          }, 0);\n        }\n      }\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Tab' && !content) {\n        setPopoverOpen(false);\n      }\n    };\n\n    const onMouseOut = (e: MouseEvent) => {\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n\n      const tag = (e.relatedTarget as HTMLElement | null)?.tagName.toLowerCase();\n\n      // If the mouse is mousing out from this nav item onto another nav item\n      if (tag && ['a', 'button', 'form'].includes(tag)) {\n        closePopover(false);\n      } else {\n        hidePopoverTimeout.current = window.setTimeout(() => {\n          if (!mousedOverMenu.current) {\n            closePopover(false);\n          }\n        }, 1000);\n      }\n    };\n\n    childElementRef.current?.addEventListener('click', onClick);\n    childElementRef.current?.addEventListener('keydown', onKeyDown);\n    if (collapsedHoverMenus) {\n      childElementRef.current?.addEventListener('mouseenter', onClick);\n      childElementRef.current?.addEventListener('mouseleave', onMouseOut);\n    }\n    return () => {\n      childElementRef.current?.removeEventListener('click', onClick);\n      childElementRef.current?.removeEventListener('keydown', onKeyDown);\n      if (collapsedHoverMenus) {\n        childElementRef.current?.removeEventListener('mouseenter', onClick);\n        childElementRef.current?.removeEventListener('mouseleave', onMouseOut);\n      }\n      if (hidePopoverTimeout.current) {\n        clearTimeout(hidePopoverTimeout.current);\n        hidePopoverTimeout.current = null;\n      }\n    };\n  }, [items, content, navOpen, closePopover, collapsedHoverMenus]);\n\n  useEffect(() => {\n    onMenuToggle?.(popoverOpen ? 'open' : 'close');\n  }, [popoverOpen]);\n\n  useEscape(() => closePopover(), childElementRef, [childElementRef]);\n\n  useEscape(() => closePopover(), popoverRef, [popoverRef]);\n\n  return (\n    <>\n      {children}\n      {!navOpen && (\n        <>\n          {!popoverOpen && (\n            <Tooltip\n              target={childElementRef.current}\n              placement={end}\n              showDelay='none'\n              hideDelay='none'\n            >\n              {tooltipLabel}\n            </Tooltip>\n          )}\n          {popoverOpen && (items.length || content) && (\n            <Popover\n              target={childElementRef.current}\n              placement={`${end}-start`}\n              ref={popoverRef}\n              as={StyledNavigationPopover}\n              arrow\n              modifiers={\n                headerEl\n                  ? [\n                      {\n                        name: 'preventOverflow',\n                        options: {\n                          padding: {\n                            top: headerEl.offsetHeight + 8,\n                            right: 8,\n                            bottom: 8,\n                            left: 8\n                          }\n                        }\n                      }\n                    ]\n                  : undefined\n              }\n              onClick={(e: ReactMouseEvent<HTMLDivElement>) => {\n                e.stopPropagation();\n              }}\n            >\n              {content ? (\n                <div onMouseEnter={onMouseEnterContent} onMouseLeave={onMouseLeaveContent}>\n                  {content}\n                </div>\n              ) : (\n                <Menu\n                  mode='action'\n                  variant='flyout'\n                  focusControlEl={childElementRef.current ?? undefined}\n                  scrollAt={99}\n                  items={items.map(item => {\n                    return {\n                      id: (item.primary || item.text) as string,\n                      primary: (item.primary || item.text) as string,\n                      href: item.href,\n                      onClick: (_, e) => {\n                        e.stopPropagation();\n                        item.onClick?.(e);\n                        setPopoverOpen(false);\n                      }\n                    };\n                  })}\n                  header={<Text variant='h2'>{label}</Text>}\n                  onMouseEnter={onMouseEnterContent}\n                  onMouseLeave={onMouseLeaveContent}\n                />\n              )}\n            </Popover>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nexport default ListItemWrapper;\n"]}

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

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-import type { PopoverProps } from '../Popover';
-import type { AsProp } from '../../types';
-import { OperatorProps } from './AppShell.types';
-declare const Operator: import("react").ForwardRefExoticComponent<{
-    children: ReactNode;
-    actions: OperatorProps['actions'];
-    popover?: Pick<PopoverProps<string>, "ref" | "className" | "placement" | "arrow" | "modifiers" | "strategy" | "portal" | "showDelay" | "hideDelay" | "groupId" | "hideOnTargetHidden" | "onHide"> | undefined;
-} & AsProp & import("react").RefAttributes<HTMLButtonElement>>;
-export default Operator;
-//# sourceMappingURL=Operator.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,aAAa,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,QAAQ;cAOA,SAAS;aACV,aAAa,CAAC,SAAS,CAAC;;8DA4DnC,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/Operator.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';
-import BareButton from '../Button/BareButton';
-import Popover from '../Popover';
-import Menu from '../Menu';
-import { useConsolidatedRef } from '../../hooks';
-import AppShellContext from './AppShellContext';
-const Operator = forwardRef(function Operator({ children, actions, popover, as }, ref) {
-    const { navOpen } = useContext(AppShellContext);
-    const buttonRef = useConsolidatedRef(ref);
-    const operatorMenuItems = useMemo(() => {
-        return actions.flat().map(({ id, primary, onClick: click, ...rest }) => ({
-            id: id || primary,
-            primary,
-            onClick: (menuId, e) => click?.(e),
-            ...rest
-        }));
-    }, [actions]);
-    const [showMenu, setShowMenu] = useState(false);
-    useEffect(() => {
-        if (!navOpen)
-            setShowMenu(false);
-    }, [navOpen]);
-    return (_jsxs(_Fragment, { children: [_jsx(BareButton, { as: as, ref: buttonRef, "aria-expanded": showMenu ? 'true' : 'false', "aria-haspopup": 'menu', onClick: () => {
-                    setShowMenu(cur => !cur);
-                }, onKeyDown: (e) => {
-                    if (e.key === 'Escape')
-                        setShowMenu(false);
-                }, onBlur: () => {
-                    setShowMenu(false);
-                }, children: children }), _jsx(Popover, { ...popover, show: showMenu, target: buttonRef.current, children: _jsx(Menu, { focusControlEl: buttonRef.current ?? undefined, mode: 'action', items: operatorMenuItems, 
-                    /** @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated. */
-                    onItemClick: (_, e) => {
-                        if (e
-                            .detail > 0) {
-                            setShowMenu(false);
-                        }
-                    } }) })] }));
-});
-export default Operator;
-//# sourceMappingURL=Operator.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Operator.js","sourceRoot":"","sources":["../../../src/components/AppShell/Operator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,IAAuB,MAAM,SAAS,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAC3C,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,EAAE,EAKM,EACV,GAAuC;IAEvC,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAgB,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACtF,EAAE,EAAE,EAAE,IAAI,OAAO;YACjB,OAAO;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAClC,GAAG,IAAI;SACR,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,8BACE,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,mBACC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC3B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;oBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;wBAAE,WAAW,CAAC,KAAK,CAAC,CAAC;gBAC7C,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,YAEA,QAAQ,GACE,EACb,KAAC,OAAO,OAAK,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,OAAO,YAC7D,KAAC,IAAI,IACH,cAAc,EAAE,SAAS,CAAC,OAAO,IAAI,SAAS,EAC9C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB;oBACxB,2GAA2G;oBAC3G,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;wBACpB,IACG,CAAgF;6BAC9E,MAAM,GAAG,CAAC,EACb;4BACA,WAAW,CAAC,KAAK,CAAC,CAAC;yBACpB;oBACH,CAAC,GACD,GACM,IACT,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useState, useEffect, useContext, useMemo } from 'react';\nimport type { Ref, ReactNode, MouseEvent, UIEvent } from 'react';\n\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport type { PopoverProps } from '../Popover';\nimport Menu, { MenuItemProps } from '../Menu';\nimport type { AcceptedMouseEventElement } from '../Menu/Menu.types';\nimport { useConsolidatedRef } from '../../hooks';\nimport type { AsProp, OmitStrict } from '../../types';\n\nimport AppShellContext from './AppShellContext';\nimport { OperatorProps } from './AppShell.types';\n\nconst Operator = forwardRef(function Operator(\n  {\n    children,\n    actions,\n    popover,\n    as\n  }: {\n    children: ReactNode;\n    actions: OperatorProps['actions'];\n    popover?: OmitStrict<PopoverProps, 'show' | 'target' | 'children'>;\n  } & AsProp,\n  ref: Ref<HTMLButtonElement> | undefined\n) {\n  const { navOpen } = useContext(AppShellContext);\n  const buttonRef = useConsolidatedRef(ref);\n\n  const operatorMenuItems = useMemo(() => {\n    return actions.flat().map<MenuItemProps>(({ id, primary, onClick: click, ...rest }) => ({\n      id: id || primary,\n      primary,\n      onClick: (menuId, e) => click?.(e),\n      ...rest\n    }));\n  }, [actions]);\n\n  const [showMenu, setShowMenu] = useState(false);\n\n  useEffect(() => {\n    if (!navOpen) setShowMenu(false);\n  }, [navOpen]);\n\n  return (\n    <>\n      <BareButton\n        as={as}\n        ref={buttonRef}\n        aria-expanded={showMenu ? 'true' : 'false'}\n        aria-haspopup='menu'\n        onClick={() => {\n          setShowMenu(cur => !cur);\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setShowMenu(false);\n        }}\n        onBlur={() => {\n          setShowMenu(false);\n        }}\n      >\n        {children}\n      </BareButton>\n      <Popover {...popover} show={showMenu} target={buttonRef.current}>\n        <Menu\n          focusControlEl={buttonRef.current ?? undefined}\n          mode='action'\n          items={operatorMenuItems}\n          /** @see {@link MenuButton} implementation for explanation of conditions. This is in essence duplicated. */\n          onItemClick={(_, e) => {\n            if (\n              (e as MouseEvent<AcceptedMouseEventElement> & UIEvent<AcceptedMouseEventElement>)\n                .detail > 0\n            ) {\n              setShowMenu(false);\n            }\n          }}\n        />\n      </Popover>\n    </>\n  );\n});\n\nexport default Operator;\n"]}