@pega/cosmos-react-build 5.0.0-dev.5.0 → 5.0.0-dev.6.1

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

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { AppShellProps } from './AppShell.types';
 declare const AppShell: FunctionComponent<AppShellProps & ForwardProps>;
 export default AppShell;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,OAAO,CAAC;AAErF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0G5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAcrE,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,yBAAyB,CAAC;AAkB5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA0G5D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref, useMemo } from 'react';\n\nimport {\n  registerIcon,\n  useI18n,\n  Icon,\n  ForwardProps,\n  useDirection,\n  useConsolidatedRef,\n  useElement,\n  useTransitionState,\n  SkipLinksProps,\n  Flex,\n  Tooltip,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';\nimport * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport AppHeader from './Header/AppHeader';\nimport {\n  StyledScrollWrap,\n  StyledMain,\n  StyledUtils,\n  StyledNav,\n  StyledAppShellToggleButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps } from './AppShell.types';\nimport NavigationList from './NavigationList';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n  { main, appHeader, nav, ...restProps }: PropsWithoutRef<AppShellProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const { start, end } = useDirection();\n  const navRef = useConsolidatedRef(ref);\n\n  const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n  const { state: navState, set: setNavState } = useTransitionState({\n    ref: navRef,\n    property: 'width',\n    states: openCloseStates,\n    defaultState: nav?.defaultExpanded === false ? 'closed' : 'open'\n  });\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const openNav = () => {\n    setNavState('open');\n  };\n\n  const closeNav = () => {\n    setNavState('closed');\n  };\n\n  return (\n    <AppShellContext.Provider\n      value={useMemo(\n        () => ({\n          navOpen: navState === 'open' || navState === 'opening',\n          navState,\n          openNav\n        }),\n        [navState]\n      )}\n    >\n      <SkipLinks items={skipLinks} />\n      <AppHeader {...appHeader} />\n\n      {nav && (\n        <Flex\n          {...restProps}\n          container={{\n            direction: 'column',\n            justify: 'between'\n          }}\n          ref={navRef}\n          as={StyledNav}\n        >\n          <StyledScrollWrap\n            onClick={() => {\n              if (['closing', 'closed'].includes(navState)) {\n                openNav();\n              } else {\n                closeNav();\n              }\n            }}\n          >\n            <NavigationList {...nav} />\n          </StyledScrollWrap>\n\n          <Flex as={StyledUtils} container={{ justify: 'center' }}>\n            <StyledAppShellToggleButton\n              icon\n              ref={setExpandCollapseEl}\n              compact\n              variant='simple'\n              onClick={() => {\n                setNavState(navState === 'closed' ? 'open' : 'closed');\n              }}\n              aria-label={navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n            >\n              <Icon\n                name={`arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}`}\n              />\n            </StyledAppShellToggleButton>\n            {['open', 'closed'].includes(navState) && (\n              <Tooltip\n                target={expandCollapseEl}\n                placement='right'\n                showDelay='none'\n                hideDelay='none'\n              >\n                {t(navState === 'closed' ? 'expand_navigation' : 'collapse_navigation')}\n              </Tooltip>\n            )}\n          </Flex>\n        </Flex>\n      )}\n\n      <StyledMain navOpen={['open', 'opening'].includes(navState)} hideNav={!nav}>\n        {main}\n      </StyledMain>\n    </AppShellContext.Provider>\n  );\n});\n\nexport default AppShell;\n"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EACL,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,SAAS,EACV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AACvF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,SAAS,EACT,0BAA0B,EAC3B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;AAE1F,MAAM,QAAQ,GAAoD,UAAU,CAAC,SAAS,QAAQ,CAC5F,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,EAAkC,EACtE,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEvC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEhF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC;QAC/D,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,eAAe;QACvB,YAAY,EAAE,GAAG,EAAE,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;KACjE,CAAC,CAAC;IAEH,MAAM,SAAS,GAA4B,OAAO,CAChD,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;YAC9B,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE;SAC3D;KACF,EACD,CAAC,CAAC,CAAC,CACJ,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,OAAO,EAAE,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,SAAS;YACtD,QAAQ;YACR,OAAO;SACR,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC/B,KAAC,SAAS,OAAK,SAAS,GAAI,EAE3B,GAAG,IAAI,CACN,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,OAAO,EAAE,SAAS;iBACnB,EACD,GAAG,EAAE,MAAM,EACX,EAAE,EAAE,SAAS,aAEb,KAAC,gBAAgB,IACf,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gCAC5C,OAAO,EAAE,CAAC;6BACX;iCAAM;gCACL,QAAQ,EAAE,CAAC;6BACZ;wBACH,CAAC,YAED,KAAC,cAAc,OAAK,GAAG,GAAI,GACV,EAEnB,MAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,aACrD,KAAC,0BAA0B,IACzB,IAAI,QACJ,GAAG,EAAE,mBAAmB,EACxB,OAAO,QACP,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,WAAW,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;gCACzD,CAAC,gBACW,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAErF,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,GAC7E,GACyB,EAC5B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CACxC,KAAC,OAAO,IACN,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAC,OAAO,EACjB,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,MAAM,YAEf,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC,GAC/D,CACX,IACI,IACF,CACR,EAED,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,GAAG,YACvE,IAAI,GACM,IACY,CAC5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport {\n  registerIcon,\n  useI18n,\n  Icon,\n  useDirection,\n  useConsolidatedRef,\n  useElement,\n  useTransitionState,\n  Flex,\n  Tooltip,\n  SkipLinks\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SkipLinksProps } from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport * as caseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/case-solid.icon';\nimport * as barsIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bars.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport AppHeader from './Header/AppHeader';\nimport {\n  StyledScrollWrap,\n  StyledMain,\n  StyledUtils,\n  StyledNav,\n  StyledAppShellToggleButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps } from './AppShell.types';\nimport NavigationList from './NavigationList';\n\nregisterIcon(timesIcon, plusIcon, caseSolidIcon, barsIcon, caretRightIcon, caretLeftIcon);\n\nconst AppShell: FunctionComponent<AppShellProps & ForwardProps> = forwardRef(function AppShell(\n  { main, appHeader, nav, ...restProps }: PropsWithoutRef<AppShellProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const { start, end } = useDirection();\n  const navRef = useConsolidatedRef(ref);\n\n  const [expandCollapseEl, setExpandCollapseEl] = useElement<HTMLButtonElement>();\n\n  const { state: navState, set: setNavState } = useTransitionState({\n    ref: navRef,\n    property: 'width',\n    states: openCloseStates,\n    defaultState: nav?.defaultExpanded === false ? 'closed' : 'open'\n  });\n\n  const skipLinks: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: t('go_to_main_content'),\n        target: { ariaLabel: t('main_content'), selector: 'main' }\n      }\n    ],\n    [t]\n  );\n\n  const openNav = () => {\n    setNavState('open');\n  };\n\n  const closeNav = () => {\n    setNavState('closed');\n  };\n\n  return (\n    <AppShellContext.Provider\n      value={useMemo(\n        () => ({\n          navOpen: navState === 'open' || navState === 'opening',\n          navState,\n          openNav\n        }),\n        [navState]\n      )}\n    >\n      <SkipLinks items={skipLinks} />\n      <AppHeader {...appHeader} />\n\n      {nav && (\n        <Flex\n          {...restProps}\n          container={{\n            direction: 'column',\n            justify: 'between'\n          }}\n          ref={navRef}\n          as={StyledNav}\n        >\n          <StyledScrollWrap\n            onClick={() => {\n              if (['closing', 'closed'].includes(navState)) {\n                openNav();\n              } else {\n                closeNav();\n              }\n            }}\n          >\n            <NavigationList {...nav} />\n          </StyledScrollWrap>\n\n          <Flex as={StyledUtils} container={{ justify: 'center' }}>\n            <StyledAppShellToggleButton\n              icon\n              ref={setExpandCollapseEl}\n              compact\n              variant='simple'\n              onClick={() => {\n                setNavState(navState === 'closed' ? 'open' : 'closed');\n              }}\n              aria-label={navState === 'closed' ? t('expand_navigation') : t('collapse_navigation')}\n            >\n              <Icon\n                name={`arrow-micro-${['closed', 'closing'].includes(navState) ? end : start}`}\n              />\n            </StyledAppShellToggleButton>\n            {['open', 'closed'].includes(navState) && (\n              <Tooltip\n                target={expandCollapseEl}\n                placement='right'\n                showDelay='none'\n                hideDelay='none'\n              >\n                {t(navState === 'closed' ? 'expand_navigation' : 'collapse_navigation')}\n              </Tooltip>\n            )}\n          </Flex>\n        </Flex>\n      )}\n\n      <StyledMain navOpen={['open', 'opening'].includes(navState)} hideNav={!nav}>\n        {main}\n      </StyledMain>\n    </AppShellContext.Provider>\n  );\n});\n\nexport default AppShell;\n"]}

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

@@ -1,7 +1,7 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
-import { AppHeaderProps } from './Header/AppHeader.types';
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import type { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import type { AppHeaderProps } from './Header/AppHeader.types';
 export interface NestedNavItemProps {
     /** Unique id for the nav item. */
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAEvF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,UAAU,kBAAkB;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,CAAC,kBAAkB,GAAG,YAAY,CAAC,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,sDAAsD;IACtD,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,MAAM,EAAE,SAAS,EAAE,cAAc;IAC3E,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED,UAAU,kBAAkB;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,YAAY;IACpB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,CAAC,kBAAkB,GAAG,YAAY,CAAC,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB,sEAAsE;IACtE,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,sDAAsD;IACtD,GAAG,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,MAAM,EAAE,SAAS,EAAE,cAAc;IAC3E,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;CACpC"}

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 { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface NestedNavItemProps {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the nav item. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n}\n\ninterface ParentNavItemProps {\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n  href?: never;\n  onClick?: never;\n}\n\ninterface NavLinkProps {\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the link. If no href if passed, this will render the nav item as a button. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  items?: never;\n}\n\nexport type NavItemProps = {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */\n  icon: string;\n} & (ParentNavItemProps | NavLinkProps);\n\nexport interface NavProps {\n  /** A set of nav items that will render as a list in the App Shell. */\n  items: NavItemProps[];\n  /** The id of the active nav item. */\n  currentItemId?: NavItemProps['id'];\n  /**\n   * If true, the nav will be expanded on initial load.\n   * @default true\n   */\n  defaultExpanded?: boolean;\n}\n\nexport interface AppShellProps extends NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Props related to the App Shell header. */\n  appHeader: AppHeaderProps;\n  /** Props related to the App Shell side navigation. */\n  nav?: NavProps;\n}\n\nexport interface AppShellContextValue {\n  navOpen: boolean;\n  navState: (typeof openCloseStates)[keyof typeof openCloseStates];\n  openNav: () => void;\n}\n\nexport interface NavItemRenderProps extends AsProp, BaseProps, NoChildrenProp {\n  id: NavItemProps['id'];\n  label: NavItemProps['label'];\n  visual: ReactNode;\n  href?: NavLinkProps['href'];\n  onClick?: NavLinkProps['onClick'];\n  items?: NestedNavItemProps['items'];\n  currentItemId?: NavItemProps['id'];\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport type { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport type { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport type { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface NestedNavItemProps {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the nav item. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n}\n\ninterface ParentNavItemProps {\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n  href?: never;\n  onClick?: never;\n}\n\ninterface NavLinkProps {\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the link. If no href if passed, this will render the nav item as a button. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  items?: never;\n}\n\nexport type NavItemProps = {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */\n  icon: string;\n} & (ParentNavItemProps | NavLinkProps);\n\nexport interface NavProps {\n  /** A set of nav items that will render as a list in the App Shell. */\n  items: NavItemProps[];\n  /** The id of the active nav item. */\n  currentItemId?: NavItemProps['id'];\n  /**\n   * If true, the nav will be expanded on initial load.\n   * @default true\n   */\n  defaultExpanded?: boolean;\n}\n\nexport interface AppShellProps extends NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Props related to the App Shell header. */\n  appHeader: AppHeaderProps;\n  /** Props related to the App Shell side navigation. */\n  nav?: NavProps;\n}\n\nexport interface AppShellContextValue {\n  navOpen: boolean;\n  navState: (typeof openCloseStates)[keyof typeof openCloseStates];\n  openNav: () => void;\n}\n\nexport interface NavItemRenderProps extends AsProp, BaseProps, NoChildrenProp {\n  id: NavItemProps['id'];\n  label: NavItemProps['label'];\n  visual: ReactNode;\n  href?: NavLinkProps['href'];\n  onClick?: NavLinkProps['onClick'];\n  items?: NestedNavItemProps['items'];\n  currentItemId?: NavItemProps['id'];\n}\n"]}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AppShellContextValue } from './AppShell.types';
+import type { AppShellContextValue } from './AppShell.types';
 declare const AppShellContext: import("react").Context<AppShellContextValue>;
 export default AppShellContext;
 //# sourceMappingURL=AppShellContext.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAInB,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,QAAA,MAAM,eAAe,+CAInB,CAAC;AAEH,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  navOpen: false,\n  navState: 'closed',\n  openNav: () => {}\n});\n\nexport default AppShellContext;\n"]}
+{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport type { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  navOpen: false,\n  navState: 'closed',\n  openNav: () => {}\n});\n\nexport default AppShellContext;\n"]}

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

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { AppHeaderProps } from './AppHeader.types';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { AppHeaderProps } from './AppHeader.types';
 declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
 export default AppHeader;
 //# sourceMappingURL=AppHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ1E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,yBAAyB,CAAC;AAmB9E,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ/E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiG9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState,\n  useRef,\n  Dispatch,\n  SetStateAction\n} from 'react';\n\nimport {\n  ContextSwitcher,\n  Flex,\n  SearchInput,\n  ForwardProps,\n  SearchInputProps,\n  useBreakpoint,\n  Button,\n  Icon,\n  useI18n,\n  Tooltip,\n  useElement,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledAppHeaderSearch,\n  StyledAppName,\n  StyledAppVersion,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledContext\n} from './AppHeader.styles';\nimport { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id);\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, e);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    node => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback(node => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledAppHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [appInfoEl, setAppInfoEl] = useElement(null);\n\n  return (\n    <Flex\n      container={{ justify: 'between', alignItems: 'center' }}\n      md={{ container: { justify: 'end' } }}\n      item={{ shrink: 1 }}\n      as={StyledUtilsContainer}\n    >\n      {appInfo && (\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n          item={{ shrink: 1 }}\n          ref={setAppInfoEl}\n        >\n          <Flex as={StyledAppName} item={{ shrink: 1 }}>\n            {appInfo.name}\n          </Flex>\n          <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n          <Tooltip target={appInfoEl} hideDelay='none'>\n            {`${appInfo.name} ${appInfo.version}`}\n          </Tooltip>\n        </Flex>\n      )}\n      <Flex container={{ alignItems: 'center' }}>\n        {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n        {action && (\n          <Flex\n            container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n            item={{ shrink: 0 }}\n            as={Button}\n            variant='secondary'\n            icon={!isMediumOrAbove}\n            label={isMediumOrAbove ? undefined : action.text}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n            disabled={action.disabled}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {isMediumOrAbove && action.text}\n          </Flex>\n        )}\n      </Flex>\n      {isMediumOrAbove && (\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-end' }}\n        >\n          <Avatar {...operator.avatar} />\n        </AppShellOperator>\n      )}\n    </Flex>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    brand,\n    utils,\n    links\n  }: PropsWithoutRef<AppHeaderProps>,\n  ref: AppHeaderProps['ref']\n) {\n  const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{\n        justify: 'between',\n        alignItems: 'center',\n        colGap: 2,\n        wrap: 'wrap',\n        pad: [0, 1]\n      }}\n      md={{ container: { wrap: 'nowrap' } }}\n      ref={ref}\n    >\n      {showSearchButton && (\n        <Flex\n          as={StyledBrandContainer}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1\n          }}\n          item={{ shrink: 0, alignSelf: 'stretch' }}\n        >\n          {contexts && onContextClick && contexts.length > 1 && (\n            <ContextSwitcher\n              contexts={contexts}\n              onContextClick={onContextClick}\n              label={contextSwitcherLabel}\n            />\n          )}\n          <Flex\n            as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n            variant='simple'\n            container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n            aria-label={`${brand.label} - ${selectedContext.primary}`}\n            onClick={brand.onClick}\n            href={brand.href}\n          >\n            <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n            <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n              {selectedContext.visual}\n              <StyledContext>{selectedContext.primary}</StyledContext>\n            </Flex>\n          </Flex>\n        </Flex>\n      )}\n      {links && links.length > 0 && <Links links={links} />}\n\n      <Flex\n        container={{\n          gap: 1,\n          justify: 'center',\n          alignItems: 'center'\n        }}\n        item={{ grow: showSearchButton ? 0 : 1 }}\n        md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n      >\n        {utils?.search && (\n          <AppHeaderSearch\n            {...utils.search}\n            showSearchButton={showSearchButton}\n            setShowSearchButton={setShowSearchButton}\n          />\n        )}\n        {showSearchButton && !isMediumOrAbove && utils?.operator && (\n          <AppShellOperator\n            as={StyledAppHeaderOperator}\n            actions={utils.operator.actions}\n            popover={{ placement: 'bottom-start' }}\n          >\n            <Avatar {...utils.operator.avatar} />\n          </AppShellOperator>\n        )}\n      </Flex>\n      {utils && <Utils {...utils} />}\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAU7E,OAAO,EACL,eAAe,EACf,IAAI,EACJ,WAAW,EACX,aAAa,EACb,MAAM,EACN,IAAI,EACJ,OAAO,EACP,OAAO,EACP,UAAU,EACV,MAAM,EACP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,gBAAgB,MAAM,0DAA0D,CAAC;AACxF,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,kEAAkE,CAAC;AAE1E,OAAO,EACL,eAAe,EACf,UAAU,EACV,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACd,MAAM,oBAAoB,CAAC;AAE5B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,KAAK,GAA+B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,EAAU,EAAE,CAAqD,EAAE,EAAE;QACpE,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACxD,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;YAC9B,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SAClC;IACH,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,GAAI,CAAC;AAC7F,CAAC,CAAC;AAEF,MAAM,eAAe,GAKjB,CAAC,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC9D,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,cAAc,GAAG,WAAW,CAChC,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,gBAAgB,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IACF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE;QACzC,IAAI,IAAI,IAAI,cAAc,CAAC,OAAO,EAAE;YAClC,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,eAAe,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAC5C,MAAC,IAAI,IACH,EAAE,EAAE,qBAAqB,EACzB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAC5B,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EACpC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAE/D,KAAC,yBAAyB,IACxB,IAAI,EAAC,QAAQ,gBACD,CAAC,CAAC,UAAU,CAAC,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACjC,eAAe,EAAE,eAAe,YAEhC,KAAC,WAAW,OAAK,SAAS,EAAE,GAAG,EAAE,cAAc,GAAI,GACzB,EAC5B,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE;oBACZ,mBAAmB,CAAC,IAAI,CAAC,CAAC;oBAC1B,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAChC,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,YAE3B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,CACR,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACzC,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,YAEzB,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACf,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,KAAK,GAAmB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;IACtE,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAEnD,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EACvD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EACrC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,oBAAoB,aAEvB,OAAO,IAAI,CACV,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EACjE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,GAAG,EAAE,YAAY,aAEjB,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YACzC,OAAO,CAAC,IAAI,GACR,EACP,KAAC,gBAAgB,cAAE,OAAO,CAAC,OAAO,GAAoB,EACtD,KAAC,OAAO,IAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,YACzC,GAAG,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,OAAO,EAAE,GAC7B,IACL,CACR,EACD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACtC,MAAM,IAAI,KAAC,YAAY,OAAK,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GAAI,EACvF,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EACjE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,MAAM,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,CAAC,eAAe,EACtB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAChD,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAC7E,QAAQ,EAAE,MAAM,CAAC,QAAQ,aAExB,MAAM,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,EAC1C,eAAe,IAAI,MAAM,CAAC,IAAI,IAC1B,CACR,IACI,EACN,eAAe,IAAI,CAClB,KAAC,gBAAgB,IACf,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,YAEpC,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACd,CACpB,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,EACE,eAAe,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,oBAAoB,EAAE,GAAG,EAAE,EAC/E,KAAK,EACL,KAAK,EACL,KAAK,EAC2B,EAClC,GAA0B;IAE1B,MAAM,eAAe,GAAG,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEjG,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,IAAI,CAAC,gBAAgB,EAAE;YACxC,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,MAAM;YACZ,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;SACZ,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EACrC,GAAG,EAAE,GAAG,aAEP,gBAAgB,IAAI,CACnB,MAAC,IAAI,IACH,EAAE,EAAE,oBAAoB,EACxB,SAAS,EAAE;oBACT,OAAO,EAAE,SAAS;oBAClB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,CAAC;iBACP,EACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,aAExC,QAAQ,IAAI,cAAc,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,oBAAoB,GAC3B,CACH,EACD,MAAC,IAAI,IACH,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,EAC3D,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,gBAC3D,GAAG,KAAK,CAAC,KAAK,MAAM,eAAe,CAAC,OAAO,EAAE,EACzD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,KAAK,CAAC,IAAI,aAEhB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,EACtF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,eAAe,CAAC,MAAM,EACvB,KAAC,aAAa,cAAE,eAAe,CAAC,OAAO,GAAiB,IACnD,IACF,IACF,CACR,EACA,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,EAErD,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,OAAO,EAAE,QAAQ;oBACjB,UAAU,EAAE,QAAQ;iBACrB,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACxC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,aAE/C,KAAK,EAAE,MAAM,IAAI,CAChB,KAAC,eAAe,OACV,KAAK,CAAC,MAAM,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,GACxC,CACH,EACA,gBAAgB,IAAI,CAAC,eAAe,IAAI,KAAK,EAAE,QAAQ,IAAI,CAC1D,KAAC,gBAAgB,IACf,EAAE,EAAE,uBAAuB,EAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,OAAO,EAC/B,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAEtC,KAAC,MAAM,OAAK,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAI,GACpB,CACpB,IACI,EACN,KAAK,IAAI,KAAC,KAAK,OAAK,KAAK,GAAI,IACzB,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  Dispatch,\n  SetStateAction\n} from 'react';\n\nimport {\n  ContextSwitcher,\n  Flex,\n  SearchInput,\n  useBreakpoint,\n  Button,\n  Icon,\n  useI18n,\n  Tooltip,\n  useElement,\n  Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SearchInputProps } from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledAppHeaderSearch,\n  StyledAppName,\n  StyledAppVersion,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledContext\n} from './AppHeader.styles';\nimport type { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id);\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, e);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    node => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback(node => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledAppHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const isSmallOrAbove = useBreakpoint('sm');\n  const [appInfoEl, setAppInfoEl] = useElement(null);\n\n  return (\n    <Flex\n      container={{ justify: 'between', alignItems: 'center' }}\n      md={{ container: { justify: 'end' } }}\n      item={{ shrink: 1 }}\n      as={StyledUtilsContainer}\n    >\n      {appInfo && (\n        <Flex\n          container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n          item={{ shrink: 1 }}\n          ref={setAppInfoEl}\n        >\n          <Flex as={StyledAppName} item={{ shrink: 1 }}>\n            {appInfo.name}\n          </Flex>\n          <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n          <Tooltip target={appInfoEl} hideDelay='none'>\n            {`${appInfo.name} ${appInfo.version}`}\n          </Tooltip>\n        </Flex>\n      )}\n      <Flex container={{ alignItems: 'center' }}>\n        {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n        {action && (\n          <Flex\n            container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n            item={{ shrink: 0 }}\n            as={Button}\n            variant='secondary'\n            icon={!isMediumOrAbove}\n            label={isMediumOrAbove ? undefined : action.text}\n            onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n            disabled={action.disabled}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {isMediumOrAbove && action.text}\n          </Flex>\n        )}\n      </Flex>\n      {isMediumOrAbove && (\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-end' }}\n        >\n          <Avatar {...operator.avatar} />\n        </AppShellOperator>\n      )}\n    </Flex>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    brand,\n    utils,\n    links\n  }: PropsWithoutRef<AppHeaderProps>,\n  ref: AppHeaderProps['ref']\n) {\n  const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  return (\n    <Flex\n      as={StyledAppHeader}\n      container={{\n        justify: 'between',\n        alignItems: 'center',\n        colGap: 2,\n        wrap: 'wrap',\n        pad: [0, 1]\n      }}\n      md={{ container: { wrap: 'nowrap' } }}\n      ref={ref}\n    >\n      {showSearchButton && (\n        <Flex\n          as={StyledBrandContainer}\n          container={{\n            justify: 'between',\n            alignItems: 'center',\n            gap: 1\n          }}\n          item={{ shrink: 0, alignSelf: 'stretch' }}\n        >\n          {contexts && onContextClick && contexts.length > 1 && (\n            <ContextSwitcher\n              contexts={contexts}\n              onContextClick={onContextClick}\n              label={contextSwitcherLabel}\n            />\n          )}\n          <Flex\n            as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n            variant='simple'\n            container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n            aria-label={`${brand.label} - ${selectedContext.primary}`}\n            onClick={brand.onClick}\n            href={brand.href}\n          >\n            <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n            <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n              {selectedContext.visual}\n              <StyledContext>{selectedContext.primary}</StyledContext>\n            </Flex>\n          </Flex>\n        </Flex>\n      )}\n      {links && links.length > 0 && <Links links={links} />}\n\n      <Flex\n        container={{\n          gap: 1,\n          justify: 'center',\n          alignItems: 'center'\n        }}\n        item={{ grow: showSearchButton ? 0 : 1 }}\n        md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n      >\n        {utils?.search && (\n          <AppHeaderSearch\n            {...utils.search}\n            showSearchButton={showSearchButton}\n            setShowSearchButton={setShowSearchButton}\n          />\n        )}\n        {showSearchButton && !isMediumOrAbove && utils?.operator && (\n          <AppShellOperator\n            as={StyledAppHeaderOperator}\n            actions={utils.operator.actions}\n            popover={{ placement: 'bottom-start' }}\n          >\n            <Avatar {...utils.operator.avatar} />\n          </AppShellOperator>\n        )}\n      </Flex>\n      {utils && <Utils {...utils} />}\n    </Flex>\n  );\n});\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/Header/AppHeader.types.d.ts

@@ -1,7 +1,7 @@
-import { Ref, MouseEvent } from 'react';
-import { AppShellProps, OmitStrict, Action, BaseProps, NoChildrenProp, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
-import { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
-import { BranchButtonProps } from './BranchButton';
+import type { Ref, MouseEvent } from 'react';
+import type { AppShellProps, OmitStrict, Action, BaseProps, NoChildrenProp, Tab, AvatarProps, SearchInputProps } from '@pega/cosmos-react-core';
+import type { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
+import type { BranchButtonProps } from './BranchButton';
 export interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
     avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,aAAa,EACb,UAAU,EACV,MAAM,EACN,SAAS,EACT,cAAc,EACd,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACpF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAChD;AACD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH"}
+{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,MAAM,EACN,SAAS,EACT,cAAc,EACd,GAAG,EACH,WAAW,EACX,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAC;AAE3G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACpF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;CAChD;AACD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,SAAU,SAAQ,GAAG;IACpC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport {\n  AppShellProps,\n  OmitStrict,\n  Action,\n  BaseProps,\n  NoChildrenProp,\n  Tab,\n  AvatarProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { BranchButtonProps } from './BranchButton';\n\nexport interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n  avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  contextSwitcher: ContextSwitcherProps;\n  brand: {\n    label: string;\n    logo: string;\n    href?: string;\n    onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  };\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface LinkProps extends Tab {\n  onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\nexport interface UtilsProps {\n  operator: OperatorProps;\n  search?: SearchInputProps;\n  branch?: BranchButtonProps;\n  action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled' | 'icon'>;\n  appInfo?: {\n    name: string;\n    version: string;\n  };\n}\n"]}
+{"version":3,"file":"AppHeader.types.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, MouseEvent } from 'react';\n\nimport type {\n  AppShellProps,\n  OmitStrict,\n  Action,\n  BaseProps,\n  NoChildrenProp,\n  Tab,\n  AvatarProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\nimport type { ContextSwitcherProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport type { BranchButtonProps } from './BranchButton';\n\nexport interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n  avatar: Pick<AvatarProps, 'name' | 'imageSrc'>;\n}\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  contextSwitcher: ContextSwitcherProps;\n  brand: {\n    label: string;\n    logo: string;\n    href?: string;\n    onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  };\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface LinkProps extends Tab {\n  onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\nexport interface UtilsProps {\n  operator: OperatorProps;\n  search?: SearchInputProps;\n  branch?: BranchButtonProps;\n  action?: Pick<Action, 'id' | 'text' | 'onClick' | 'disabled' | 'icon'>;\n  appInfo?: {\n    name: string;\n    version: string;\n  };\n}\n"]}

package/lib/components/AppShell/Header/BranchButton.d.ts

@@ -1,6 +1,7 @@
-import { FunctionComponent } from 'react';
-import { DefaultTheme } from 'styled-components';
-import { Button, CountProps, MenuProps, StatusProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { DefaultTheme } from 'styled-components';
+import { Button } from '@pega/cosmos-react-core';
+import type { CountProps, MenuProps, StatusProps } from '@pega/cosmos-react-core';
 export interface BranchButtonProps {
     /** The text for the BranchButton also used to set the aria-label. */
     text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AACnE,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EACL,MAAM,EACN,UAAU,EAMV,SAAS,EAMT,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,MAuDvC,CAAC;AAqBF,eAAO,MAAM,cAAc,8JAIzB,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EACL,MAAM,EAaP,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQlF,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC/B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,MAuDvC,CAAC;AAqBF,eAAO,MAAM,cAAc,8JAIzB,CAAC;AAgBH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/AppShell/Header/BranchButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BranchButton.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  CountProps,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  Menu,\n  Count,\n  MenuProps,\n  Popover,\n  useDirection,\n  useElement,\n  registerIcon,\n  useOuterEvent,\n  StatusProps,\n  useI18n,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport * as nodesDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down-solid.icon';\nimport * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\n\nregisterIcon(nodesDownSolidIcon, warnSolidIcon, caretDownIcon);\n\nexport interface BranchButtonProps {\n  /** The text for the BranchButton also used to set the aria-label. */\n  text: string;\n  /** Determines the variant for the BranchButton. */\n  variant?: Extract<StatusProps['variant'], 'success' | 'urgent'>;\n  /** Only display the branch and caret icon */\n  compact?: boolean;\n  /** The total count representing the number of unmerged changes. */\n  count?: CountProps['children'];\n  /** An array of MenuItemProps. */\n  items: MenuProps['items'];\n}\n\nexport const StyledBranchButton: typeof Button = styled(Button)(\n  ({\n    theme,\n    branchVariant\n  }: {\n    theme: DefaultTheme;\n    branchVariant: BranchButtonProps['variant'];\n  }) => {\n    const {\n      base: {\n        colors,\n        palette: { 'primary-background': primaryBackground },\n        shadow: { focus },\n        spacing\n      },\n      components: {\n        badges: {\n          status,\n          count: {\n            default: { background, foreground }\n          }\n        }\n      }\n    } = theme;\n\n    const backgroundColor = branchVariant ? status[branchVariant].background : primaryBackground;\n    const borderColor = !branchVariant ? colors.gray.medium : 'transparent';\n    const countBgColor = branchVariant === 'success' ? colors.green.medium : background;\n    const countColor = branchVariant === 'success' ? colors.white : foreground;\n    const buttonColor = tryCatch(() => readableColor(backgroundColor));\n\n    return css`\n      flex-shrink: 0;\n      background-color: ${backgroundColor};\n      border-color: ${borderColor};\n      color: ${buttonColor};\n      padding-inline-start: ${spacing};\n      padding-inline-end: ${spacing};\n\n      &:hover {\n        background-color: ${backgroundColor};\n        box-shadow: ${focus};\n      }\n\n      svg {\n        height: 1rem;\n        width: 1rem;\n      }\n\n      ${StyledCount} {\n        background-color: ${countBgColor};\n        color: ${countColor};\n      }\n    `;\n  }\n);\n\nStyledBranchButton.defaultProps = defaultThemeProp;\n\nconst StyledBranchButtonPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { spacing, 'content-width': contentWidth }\n    }\n  }) => {\n    const minWidth = `calc(${contentWidth.xs} + (2 * ${spacing}))`;\n\n    return css`\n      min-width: ${minWidth};\n      max-width: calc(${minWidth} + 5ch);\n    `;\n  }\n);\n\nStyledBranchButtonPopover.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.red.medium};\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled.span(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.5;\n  `;\n});\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst BranchButton: FunctionComponent<BranchButtonProps> = (props: BranchButtonProps) => {\n  const { text, variant, count, compact = false, items = [] } = props;\n\n  const [open, setOpen] = useState(false);\n\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const { rtl } = useDirection();\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  let ariaLabel = t('branch_with_no_changes', [text]);\n  if (variant === 'success') {\n    ariaLabel = t('branch_with_no_potential_conflicts', [text, count ?? 0]);\n  } else if (variant === 'urgent') {\n    ariaLabel = t('branch_with_potential_conflicts', [text]);\n  }\n\n  return (\n    <>\n      <StyledBranchButton\n        ref={setButtonEl}\n        aria-expanded={open}\n        aria-haspopup='menu'\n        aria-controls='branch-popover'\n        aria-label={ariaLabel}\n        branchVariant={variant}\n        label={!open && compact ? text : undefined}\n        onClick={() => setOpen(cur => !cur)}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setOpen(false);\n        }}\n      >\n        <Flex container={{ alignItems: 'center', gap: compact ? 1 : 0.5 }}>\n          <Icon name='nodes-down-solid' />\n          {!compact && (\n            <>\n              <StyledEllipsizedText>{text}</StyledEllipsizedText>\n              {variant === 'urgent' ? (\n                <StyledWarnIcon name='warn-solid' />\n              ) : (\n                count !== undefined && <Count>{count}</Count>\n              )}\n            </>\n          )}\n          <Icon name='caret-down' />\n        </Flex>\n      </StyledBranchButton>\n      <StyledBranchButtonPopover\n        placement={rtl ? 'bottom-end' : 'bottom-start'}\n        id='branch-popover'\n        hideOnTargetHidden\n        show={open}\n        target={buttonEl}\n        ref={setPopoverRef}\n      >\n        <Menu\n          items={items}\n          scrollAt={20}\n          onItemClick={() => setOpen(false)}\n          focusControlEl={buttonEl || undefined}\n        />\n      </StyledBranchButtonPopover>\n    </>\n  );\n};\n\nexport default BranchButton;\n"]}
+{"version":3,"file":"BranchButton.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/BranchButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  Icon,\n  Menu,\n  Count,\n  Popover,\n  useDirection,\n  useElement,\n  registerIcon,\n  useOuterEvent,\n  useI18n,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport type { CountProps, MenuProps, StatusProps } from '@pega/cosmos-react-core';\nimport * as nodesDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down-solid.icon';\nimport * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\n\nregisterIcon(nodesDownSolidIcon, warnSolidIcon, caretDownIcon);\n\nexport interface BranchButtonProps {\n  /** The text for the BranchButton also used to set the aria-label. */\n  text: string;\n  /** Determines the variant for the BranchButton. */\n  variant?: Extract<StatusProps['variant'], 'success' | 'urgent'>;\n  /** Only display the branch and caret icon */\n  compact?: boolean;\n  /** The total count representing the number of unmerged changes. */\n  count?: CountProps['children'];\n  /** An array of MenuItemProps. */\n  items: MenuProps['items'];\n}\n\nexport const StyledBranchButton: typeof Button = styled(Button)(\n  ({\n    theme,\n    branchVariant\n  }: {\n    theme: DefaultTheme;\n    branchVariant: BranchButtonProps['variant'];\n  }) => {\n    const {\n      base: {\n        colors,\n        palette: { 'primary-background': primaryBackground },\n        shadow: { focus },\n        spacing\n      },\n      components: {\n        badges: {\n          status,\n          count: {\n            default: { background, foreground }\n          }\n        }\n      }\n    } = theme;\n\n    const backgroundColor = branchVariant ? status[branchVariant].background : primaryBackground;\n    const borderColor = !branchVariant ? colors.gray.medium : 'transparent';\n    const countBgColor = branchVariant === 'success' ? colors.green.medium : background;\n    const countColor = branchVariant === 'success' ? colors.white : foreground;\n    const buttonColor = tryCatch(() => readableColor(backgroundColor));\n\n    return css`\n      flex-shrink: 0;\n      background-color: ${backgroundColor};\n      border-color: ${borderColor};\n      color: ${buttonColor};\n      padding-inline-start: ${spacing};\n      padding-inline-end: ${spacing};\n\n      &:hover {\n        background-color: ${backgroundColor};\n        box-shadow: ${focus};\n      }\n\n      svg {\n        height: 1rem;\n        width: 1rem;\n      }\n\n      ${StyledCount} {\n        background-color: ${countBgColor};\n        color: ${countColor};\n      }\n    `;\n  }\n);\n\nStyledBranchButton.defaultProps = defaultThemeProp;\n\nconst StyledBranchButtonPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { spacing, 'content-width': contentWidth }\n    }\n  }) => {\n    const minWidth = `calc(${contentWidth.xs} + (2 * ${spacing}))`;\n\n    return css`\n      min-width: ${minWidth};\n      max-width: calc(${minWidth} + 5ch);\n    `;\n  }\n);\n\nStyledBranchButtonPopover.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.red.medium};\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst StyledEllipsizedText = styled.span(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xs};\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.5;\n  `;\n});\n\nStyledEllipsizedText.defaultProps = defaultThemeProp;\n\nconst BranchButton: FunctionComponent<BranchButtonProps> = (props: BranchButtonProps) => {\n  const { text, variant, count, compact = false, items = [] } = props;\n\n  const [open, setOpen] = useState(false);\n\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const { rtl } = useDirection();\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  let ariaLabel = t('branch_with_no_changes', [text]);\n  if (variant === 'success') {\n    ariaLabel = t('branch_with_no_potential_conflicts', [text, count ?? 0]);\n  } else if (variant === 'urgent') {\n    ariaLabel = t('branch_with_potential_conflicts', [text]);\n  }\n\n  return (\n    <>\n      <StyledBranchButton\n        ref={setButtonEl}\n        aria-expanded={open}\n        aria-haspopup='menu'\n        aria-controls='branch-popover'\n        aria-label={ariaLabel}\n        branchVariant={variant}\n        label={!open && compact ? text : undefined}\n        onClick={() => setOpen(cur => !cur)}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Escape') setOpen(false);\n        }}\n      >\n        <Flex container={{ alignItems: 'center', gap: compact ? 1 : 0.5 }}>\n          <Icon name='nodes-down-solid' />\n          {!compact && (\n            <>\n              <StyledEllipsizedText>{text}</StyledEllipsizedText>\n              {variant === 'urgent' ? (\n                <StyledWarnIcon name='warn-solid' />\n              ) : (\n                count !== undefined && <Count>{count}</Count>\n              )}\n            </>\n          )}\n          <Icon name='caret-down' />\n        </Flex>\n      </StyledBranchButton>\n      <StyledBranchButtonPopover\n        placement={rtl ? 'bottom-end' : 'bottom-start'}\n        id='branch-popover'\n        hideOnTargetHidden\n        show={open}\n        target={buttonEl}\n        ref={setPopoverRef}\n      >\n        <Menu\n          items={items}\n          scrollAt={20}\n          onItemClick={() => setOpen(false)}\n          focusControlEl={buttonEl || undefined}\n        />\n      </StyledBranchButtonPopover>\n    </>\n  );\n};\n\nexport default BranchButton;\n"]}

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

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { NavProps, NavItemRenderProps } from './AppShell.types';
+import type { FunctionComponent } from 'react';
+import type { NavProps, NavItemRenderProps } from './AppShell.types';
 export declare const NavLinkItem: FunctionComponent<NavItemRenderProps>;
 declare const NavigationList: FunctionComponent<NavProps>;
 export default NavigationList;

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAmBf,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA2HhE,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CAuC/C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAkBvF,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA2HrE,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CAuC/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  StandardTreeNode,\n  StandardTreeProps,\n  treeHelpers,\n  useAfterInitialEffect,\n  useUID\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const treeId = useUID();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonEl?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, [currentItemId]);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        ref={setButtonEl}\n        aria-expanded={!collapsed}\n        aria-controls={treeId}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <StyledAppShellCaretIcon name={`caret-${end}`} nestedListCollapsed={collapsed} />\n        )}\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={buttonEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n      <ExpandCollapse\n        id={treeId}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        let activeTreeRoot = false;\n\n        if (item.items) {\n          ItemComponent = NavParentItem;\n\n          if (\n            currentItemId &&\n            treeHelpers.getNode(transformItems(item.items, new Set()), currentItemId) !== undefined\n          ) {\n            activeTreeRoot = true;\n          }\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            activeTreeRoot={activeTreeRoot}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAO,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,cAAc,EACd,UAAU,EACV,YAAY,EACZ,WAAW,EACX,qBAAqB,EACrB,MAAM,EACP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAGlF,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC9F,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,cAAc,GAAG,CACrB,KAAkC,EAClC,WAAwC,EACZ,EAAE;IAC9B,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IAEtB,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,CAAC,EAAU,EAAE,CAAuD,EAAE,EAAE;YAC/E,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;QAC3D,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;KACxE,CAAC,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,aAAa,GAA0C,CAAC,EAC5D,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACd,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA6B,GAAG,EAAE,CAChF,cAAc,CAAC,KAAK,EAAE,IAAI,GAAG,EAAE,CAAC,CACjC,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAqB,CAAC;IAChE,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE/C,MAAM,eAAe,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,EAAE;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO,EAAE,CAAC;SACX;;YAAM,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,QAAQ,EAAE,KAAK,EAAE,CAAC;IACpB,CAAC,EAAE,OAAO,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,aAAa,IAAI,WAAW,CAAC,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,EAAE;YACrE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;YACrE,YAAY,CAAC,KAAK,CAAC,CAAC;SACrB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,qBAAqB,CAAC,GAAG,EAAE;QACzB,eAAe,CAAC,GAAG,CAAC,EAAE;YACpB,MAAM,WAAW,GAAG,IAAI,GAAG,EAA0B,CAAC;YAEtD,WAAW,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE;gBAClC,IAAI,IAAI,CAAC,QAAQ;oBAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;YAEH,OAAO,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,8BACE,MAAC,UAAU,IACT,GAAG,EAAE,WAAW,mBACD,CAAC,SAAS,mBACV,MAAM,gBACT,KAAK,EACjB,OAAO,EAAE,eAAe,aAEvB,MAAM,EACP,yBAAO,KAAK,GAAQ,EACnB,QAAQ,KAAK,MAAM,IAAI,CACtB,KAAC,uBAAuB,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,mBAAmB,EAAE,SAAS,GAAI,CAClF,IACU,EACZ,CAAC,OAAO,IAAI,CACX,KAAC,OAAO,IAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACzE,KAAK,GACE,CACX,EACD,KAAC,cAAc,IACb,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,SAAS,IAAI,CAAC,OAAO,EAChC,eAAe,EACb,YAAY,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAG9E,KAAC,YAAY,IACX,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,YAAkC,EACzC,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,KAAK,EACxB,YAAY,EAAE,MAAM,CAAC,EAAE;wBACrB,eAAe,CAAC,KAAK,CAAC,EAAE,CACtB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;4BACxC,OAAO;gCACL,GAAG,IAAI;gCACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;6BACzB,CAAC;wBACJ,CAAC,CAAC,CACH,CAAC;oBACJ,CAAC,GACD,GACa,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA0C,CAAC,EACjE,EAAE,EACF,KAAK,EACL,MAAM,EACN,IAAI,EACJ,OAAO,EACR,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,UAAU,EAAyC,CAAC;IAExF,OAAO,CACL,8BACE,MAAC,UAAU,IACT,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAoD,EAAE,EAAE;oBAChE,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACnB,CAAC,gBACW,KAAK,aAEhB,MAAM,EACP,yBAAO,KAAK,GAAQ,IACT,EACZ,CAAC,OAAO,IAAI,CACX,KAAC,OAAO,IAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAC3E,KAAK,GACE,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAgC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;IAC/E,IAAI,aAA0B,CAAC;IAE/B,OAAO,CACL,KAAC,aAAa,cACX,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,IAAI,cAAc,GAAG,KAAK,CAAC;YAE3B,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,aAAa,GAAG,aAAa,CAAC;gBAE9B,IACE,aAAa;oBACb,WAAW,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK,SAAS,EACvF;oBACA,cAAc,GAAG,IAAI,CAAC;iBACvB;aACF;iBAAM;gBACL,aAAa,GAAG,WAAW,CAAC;aAC7B;YAED,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAChD,OAAO,CACL,KAAC,iBAAiB,oBACF,aAAa,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACjE,cAAc,EAAE,cAAc,EAE9B,EAAE,EAAE,IAAI,CAAC,EAAE,YAEX,KAAC,aAAa,OACR,IAAI,EACR,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACjC,aAAa,EAAE,aAAa,GAC5B,IAPG,IAAI,CAAC,EAAE,CAQM,CACrB,CAAC;QACJ,CAAC,CAAC,GACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useContext, useEffect, useRef, useState } from 'react';\nimport type { ElementType, FunctionComponent, KeyboardEvent, MouseEvent } from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  treeHelpers,\n  useAfterInitialEffect,\n  useUID\n} from '@pega/cosmos-react-core';\nimport type { StandardTreeNode, StandardTreeProps } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport type { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const treeId = useUID();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonEl?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, [currentItemId]);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        ref={setButtonEl}\n        aria-expanded={!collapsed}\n        aria-controls={treeId}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <StyledAppShellCaretIcon name={`caret-${end}`} nestedListCollapsed={collapsed} />\n        )}\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={buttonEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n      <ExpandCollapse\n        id={treeId}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        let activeTreeRoot = false;\n\n        if (item.items) {\n          ItemComponent = NavParentItem;\n\n          if (\n            currentItemId &&\n            treeHelpers.getNode(transformItems(item.items, new Set()), currentItemId) !== undefined\n          ) {\n            activeTreeRoot = true;\n          }\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            activeTreeRoot={activeTreeRoot}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { DynamicContentEditorProps } from './DynamicContentEditor.types';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { DynamicContentEditorProps } from './DynamicContentEditor.types';
 export declare const StyledSearchPopover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     offset?: number | undefined;
     portal?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAKpG,OAAO,EAGL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,yBAAyB,EAAY,MAAM,8BAA8B,CAAC;AAOnF,eAAO,MAAM,mBAAmB;;;SAE/B,CAAC;AAIF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAyTlF,CAAC;AAEL,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DynamicContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAmBhE,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,yBAAyB,EAAY,MAAM,8BAA8B,CAAC;AAOxF,eAAO,MAAM,mBAAmB;;;SAE/B,CAAC;AAIF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAyTlF,CAAC;AAEL,eAAe,oBAAoB,CAAC"}

package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Menu,\n  menuHelpers,\n  MenuProps,\n  Modal,\n  ModalMethods,\n  Popover,\n  PropsWithDefaults,\n  StyledPopover,\n  useModalManager,\n  useConsolidatedRef,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n  forwardRef(function DynamicContentEditor(\n    {\n      form: { dynamicContentPicker, onSubmit },\n      onActiveFieldChange,\n      label,\n      toolbar,\n      fieldItems,\n      defaultValue,\n      onBlur,\n      ...restProps\n    }: PropsWithoutRef<DynamicContentEditorProps>,\n    ref: DynamicContentEditorProps['ref']\n  ) {\n    const menuID = useUID();\n    const { create } = useModalManager();\n    const t = useI18n();\n\n    const modalMethods = useRef<ModalMethods>();\n    const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n    const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n    const [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems || []);\n    const [currentElementId, setCurrentElementId] = useState('');\n    const [currentElementContent, setCurrentElementContent] = useState('');\n    const [currentCursorPosition, setCurrentCursorPosition] = useState({\n      bottom: 0,\n      height: 0,\n      left: 0,\n      right: 0,\n      top: 0,\n      width: 0,\n      x: 0,\n      y: 0,\n      toJSON: () => {}\n    });\n    const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n    const fieldPopoverRef = useRef<HTMLDivElement>(null);\n    const editorRef = useConsolidatedRef(ref);\n\n    const tooltip = getKeyCommand(\n      navigator.appVersion.includes('Mac'),\n      ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n    );\n\n    const insertField = (field: ItemType) => {\n      if (!editor) return;\n\n      const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n      if (bookmark) {\n        editor.selection.moveToBookmark(bookmark);\n        editor.selection.setContent(fieldContent);\n      } else {\n        editor.insertContent(fieldContent);\n      }\n\n      modalMethods.current?.dismiss();\n    };\n\n    const modalProps = {\n      children: dynamicContentPicker,\n      heading: t('rte_insert_field'),\n      actions: (\n        <>\n          <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n            {t('cancel')}\n          </Button>\n          <Button variant='primary' onClick={() => onSubmit(insertField)}>\n            {t('submit')}\n          </Button>\n        </>\n      ),\n      center: true,\n      onAfterClose: () => {\n        setBookmark(undefined);\n        setCurrentElementId('');\n        setCurrentElementContent('');\n        onActiveFieldChange({ id: '', text: '' });\n      },\n      onBeforeOpen: () => {\n        if (currentElementId) {\n          onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n        }\n      }\n    };\n\n    const findAndRenameField = (fieldId: string) => {\n      if (!editor || !fieldMenuItems) return;\n\n      const selectedRange = editor.selection.getRng();\n      const endOffset = selectedRange.endOffset;\n      const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n      if (stringToSearch === undefined) return;\n\n      const splitSearch = stringToSearch.split(' ');\n      const fieldString = splitSearch[splitSearch.length - 1];\n      const range = editor.getDoc().createRange();\n\n      const startPos = stringToSearch.lastIndexOf(fieldString);\n      const endPos = startPos + fieldString.length;\n      range.setStart(selectedRange.commonAncestorContainer, startPos);\n      range.setEnd(selectedRange.commonAncestorContainer, endPos);\n      editor.getDoc().getSelection()?.removeAllRanges();\n      editor.getDoc().getSelection()?.addRange(range);\n\n      const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n      if (selectedField) {\n        editor.selection.setContent(\n          `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\".${selectedField.id}\">${selectedField.primary}</pega-reference>`\n        );\n        setShowFieldsPopover(false);\n      }\n    };\n\n    const hidePopover = () => {\n      if (fieldPopoverRef) setShowFieldsPopover(false);\n    };\n\n    const filterFieldMenu = (searchString: string) => {\n      setShowFieldsPopover(true);\n      setFieldMenuItems(fieldItems || []);\n      if (/\\s/.test(searchString)) {\n        setShowFieldsPopover(false);\n        return;\n      }\n      if (searchString && fieldMenuItems) {\n        const newFieldMenuItems: MenuProps['items'] = menuHelpers\n          .flatten(fieldMenuItems)\n          .filter(({ primary }) =>\n            primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n          );\n        if (newFieldMenuItems) {\n          setShowFieldsPopover(true);\n          setFieldMenuItems(newFieldMenuItems);\n        } else setShowFieldsPopover(false);\n      }\n    };\n\n    const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n      const targetEl = editorSelection.getNode() as HTMLElement;\n      const fieldId = targetEl.getAttribute('data-rule-id');\n      const fieldValue = targetEl.innerText;\n      setBookmark(editorSelection.getBookmark());\n      setCurrentElementId(fieldId || '');\n      setCurrentElementContent(fieldValue);\n    };\n\n    const handleElementClick = ({ target }: MouseEvent) => {\n      if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n        updateBookmarkAndCurrentElement(editor.selection);\n      }\n      hidePopover();\n    };\n\n    const onInsertField = (incEditor: TinyMCEEditor) => {\n      const targetEl = incEditor.selection.getNode();\n      if (targetEl.tagName === 'PEGA-REFERENCE') {\n        updateBookmarkAndCurrentElement(incEditor.selection);\n      } else {\n        modalMethods.current = create(Modal, modalProps);\n      }\n    };\n\n    const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n      const targetEl = incEditor.selection.getNode();\n      return targetEl.tagName === 'PEGA-REFERENCE';\n    };\n\n    const fieldSelectionPopover = (\n      <Popover\n        show={showFieldsPopover}\n        strategy='fixed'\n        ref={fieldPopoverRef}\n        target={{\n          getBoundingClientRect() {\n            return currentCursorPosition;\n          }\n        }}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: () => {\n                const iframe = editorRef.current?.element?.querySelector('iframe');\n                const iframeRect = iframe?.getBoundingClientRect();\n                const x = iframeRect?.x ?? 0;\n                const y = iframeRect?.y ?? 0;\n                return [x, y];\n              }\n            }\n          }\n        ]}\n        placement='bottom-start'\n      >\n        {fieldMenuItems && (\n          <Menu\n            id={menuID}\n            items={fieldMenuItems}\n            as={StyledSearchPopover}\n            focusControlEl={editor?.getBody() || undefined}\n            mode='action'\n            onItemClick={findAndRenameField}\n            variant='drill-down'\n          />\n        )}\n      </Popover>\n    );\n\n    useEffect(() => {\n      if (currentElementId && currentElementContent)\n        modalMethods.current = create(Modal, modalProps);\n    }, [currentElementId, currentElementContent]);\n\n    useEffect(() => {\n      editor?.getDoc().addEventListener('click', handleElementClick);\n      return () => {\n        editor?.getDoc().removeEventListener('click', handleElementClick);\n      };\n    }, [editor, editorRef.current]);\n\n    useEffect(() => {\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      }\n    }, [modalProps]);\n\n    const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n      if (formEditor) {\n        const targetEl = formEditor.selection.getBoundingClientRect();\n        const { left = 0, top = 0 } = targetEl ?? {};\n        setCurrentCursorPosition({\n          ...formEditor.selection.getBoundingClientRect(),\n          x: left,\n          y: top,\n          toJSON: () => {}\n        });\n\n        if (formEditor.selection.isCollapsed()) {\n          // get the full line string\n          const selectedRange = formEditor.selection.getRng();\n          const endOffset = selectedRange.endOffset;\n          const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n            0,\n            endOffset\n          );\n          const fieldString = stringToSearch?.split(' ')[stringToSearch.split(' ').length - 1];\n          if (\n            fieldString?.startsWith('@') &&\n            fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n          ) {\n            filterFieldMenu(fieldString.slice(1));\n          } else setShowFieldsPopover(false);\n        }\n      }\n    };\n\n    const onKeyDown: EditorProps['onKeyDown'] = event => {\n      if (\n        (event?.key === 'Enter' ||\n          event?.key === 'ArrowLeft' ||\n          event?.key === 'ArrowRight' ||\n          event?.key === 'ArrowDown' ||\n          event?.key === 'ArrowUp') &&\n        !!fieldPopoverRef.current\n      ) {\n        event?.preventDefault();\n      }\n      if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n        hidePopover();\n      }\n    };\n\n    return (\n      <Editor\n        ref={editorRef}\n        {...restProps}\n        label={label}\n        toolbar={toolbar}\n        customComponents={[\n          {\n            createCustomElement: createPegaReferenceElement,\n            name: 'pega-reference',\n            extensionAttributes: ['contenteditable'],\n            style: pegaReferenceElementStyle\n          }\n        ]}\n        customActions={[\n          {\n            icon: 'code',\n            text: tooltip,\n            onMouseDown: () => {\n              modalMethods.current = create(Modal, modalProps);\n            },\n            active: isPegaRefActive,\n            shortcut: {\n              pattern: 'meta+191',\n              description: tooltip,\n              command: onInsertField\n            }\n          }\n        ]}\n        onInit={setEditor}\n        onChange={onEditorChange}\n        onBlur={() => {\n          onBlur?.();\n          hidePopover();\n        }}\n        onKeyDown={onKeyDown}\n        defaultValue={defaultValue}\n      >\n        {fieldSelectionPopover}\n      </Editor>\n    );\n  });\n\nexport default DynamicContentEditor;\n"]}
+{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\nimport type { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorProps } from '@pega/cosmos-react-rte';\nimport {\n  Button,\n  defaultThemeProp,\n  Menu,\n  menuHelpers,\n  Modal,\n  Popover,\n  StyledPopover,\n  useModalManager,\n  useConsolidatedRef,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\nimport type {\n  ForwardProps,\n  MenuProps,\n  ModalMethods,\n  PropsWithDefaults\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport type { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n  min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n  forwardRef(function DynamicContentEditor(\n    {\n      form: { dynamicContentPicker, onSubmit },\n      onActiveFieldChange,\n      label,\n      toolbar,\n      fieldItems,\n      defaultValue,\n      onBlur,\n      ...restProps\n    }: PropsWithoutRef<DynamicContentEditorProps>,\n    ref: DynamicContentEditorProps['ref']\n  ) {\n    const menuID = useUID();\n    const { create } = useModalManager();\n    const t = useI18n();\n\n    const modalMethods = useRef<ModalMethods>();\n    const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n    const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n    const [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems || []);\n    const [currentElementId, setCurrentElementId] = useState('');\n    const [currentElementContent, setCurrentElementContent] = useState('');\n    const [currentCursorPosition, setCurrentCursorPosition] = useState({\n      bottom: 0,\n      height: 0,\n      left: 0,\n      right: 0,\n      top: 0,\n      width: 0,\n      x: 0,\n      y: 0,\n      toJSON: () => {}\n    });\n    const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n    const fieldPopoverRef = useRef<HTMLDivElement>(null);\n    const editorRef = useConsolidatedRef(ref);\n\n    const tooltip = getKeyCommand(\n      navigator.appVersion.includes('Mac'),\n      ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n    );\n\n    const insertField = (field: ItemType) => {\n      if (!editor) return;\n\n      const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n      if (bookmark) {\n        editor.selection.moveToBookmark(bookmark);\n        editor.selection.setContent(fieldContent);\n      } else {\n        editor.insertContent(fieldContent);\n      }\n\n      modalMethods.current?.dismiss();\n    };\n\n    const modalProps = {\n      children: dynamicContentPicker,\n      heading: t('rte_insert_field'),\n      actions: (\n        <>\n          <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n            {t('cancel')}\n          </Button>\n          <Button variant='primary' onClick={() => onSubmit(insertField)}>\n            {t('submit')}\n          </Button>\n        </>\n      ),\n      center: true,\n      onAfterClose: () => {\n        setBookmark(undefined);\n        setCurrentElementId('');\n        setCurrentElementContent('');\n        onActiveFieldChange({ id: '', text: '' });\n      },\n      onBeforeOpen: () => {\n        if (currentElementId) {\n          onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n        }\n      }\n    };\n\n    const findAndRenameField = (fieldId: string) => {\n      if (!editor || !fieldMenuItems) return;\n\n      const selectedRange = editor.selection.getRng();\n      const endOffset = selectedRange.endOffset;\n      const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n      if (stringToSearch === undefined) return;\n\n      const splitSearch = stringToSearch.split(' ');\n      const fieldString = splitSearch[splitSearch.length - 1];\n      const range = editor.getDoc().createRange();\n\n      const startPos = stringToSearch.lastIndexOf(fieldString);\n      const endPos = startPos + fieldString.length;\n      range.setStart(selectedRange.commonAncestorContainer, startPos);\n      range.setEnd(selectedRange.commonAncestorContainer, endPos);\n      editor.getDoc().getSelection()?.removeAllRanges();\n      editor.getDoc().getSelection()?.addRange(range);\n\n      const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n      if (selectedField) {\n        editor.selection.setContent(\n          `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\".${selectedField.id}\">${selectedField.primary}</pega-reference>`\n        );\n        setShowFieldsPopover(false);\n      }\n    };\n\n    const hidePopover = () => {\n      if (fieldPopoverRef) setShowFieldsPopover(false);\n    };\n\n    const filterFieldMenu = (searchString: string) => {\n      setShowFieldsPopover(true);\n      setFieldMenuItems(fieldItems || []);\n      if (/\\s/.test(searchString)) {\n        setShowFieldsPopover(false);\n        return;\n      }\n      if (searchString && fieldMenuItems) {\n        const newFieldMenuItems: MenuProps['items'] = menuHelpers\n          .flatten(fieldMenuItems)\n          .filter(({ primary }) =>\n            primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n          );\n        if (newFieldMenuItems) {\n          setShowFieldsPopover(true);\n          setFieldMenuItems(newFieldMenuItems);\n        } else setShowFieldsPopover(false);\n      }\n    };\n\n    const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n      const targetEl = editorSelection.getNode() as HTMLElement;\n      const fieldId = targetEl.getAttribute('data-rule-id');\n      const fieldValue = targetEl.innerText;\n      setBookmark(editorSelection.getBookmark());\n      setCurrentElementId(fieldId || '');\n      setCurrentElementContent(fieldValue);\n    };\n\n    const handleElementClick = ({ target }: MouseEvent) => {\n      if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n        updateBookmarkAndCurrentElement(editor.selection);\n      }\n      hidePopover();\n    };\n\n    const onInsertField = (incEditor: TinyMCEEditor) => {\n      const targetEl = incEditor.selection.getNode();\n      if (targetEl.tagName === 'PEGA-REFERENCE') {\n        updateBookmarkAndCurrentElement(incEditor.selection);\n      } else {\n        modalMethods.current = create(Modal, modalProps);\n      }\n    };\n\n    const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n      const targetEl = incEditor.selection.getNode();\n      return targetEl.tagName === 'PEGA-REFERENCE';\n    };\n\n    const fieldSelectionPopover = (\n      <Popover\n        show={showFieldsPopover}\n        strategy='fixed'\n        ref={fieldPopoverRef}\n        target={{\n          getBoundingClientRect() {\n            return currentCursorPosition;\n          }\n        }}\n        modifiers={[\n          {\n            name: 'offset',\n            options: {\n              offset: () => {\n                const iframe = editorRef.current?.element?.querySelector('iframe');\n                const iframeRect = iframe?.getBoundingClientRect();\n                const x = iframeRect?.x ?? 0;\n                const y = iframeRect?.y ?? 0;\n                return [x, y];\n              }\n            }\n          }\n        ]}\n        placement='bottom-start'\n      >\n        {fieldMenuItems && (\n          <Menu\n            id={menuID}\n            items={fieldMenuItems}\n            as={StyledSearchPopover}\n            focusControlEl={editor?.getBody() || undefined}\n            mode='action'\n            onItemClick={findAndRenameField}\n            variant='drill-down'\n          />\n        )}\n      </Popover>\n    );\n\n    useEffect(() => {\n      if (currentElementId && currentElementContent)\n        modalMethods.current = create(Modal, modalProps);\n    }, [currentElementId, currentElementContent]);\n\n    useEffect(() => {\n      editor?.getDoc().addEventListener('click', handleElementClick);\n      return () => {\n        editor?.getDoc().removeEventListener('click', handleElementClick);\n      };\n    }, [editor, editorRef.current]);\n\n    useEffect(() => {\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      }\n    }, [modalProps]);\n\n    const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n      if (formEditor) {\n        const targetEl = formEditor.selection.getBoundingClientRect();\n        const { left = 0, top = 0 } = targetEl ?? {};\n        setCurrentCursorPosition({\n          ...formEditor.selection.getBoundingClientRect(),\n          x: left,\n          y: top,\n          toJSON: () => {}\n        });\n\n        if (formEditor.selection.isCollapsed()) {\n          // get the full line string\n          const selectedRange = formEditor.selection.getRng();\n          const endOffset = selectedRange.endOffset;\n          const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n            0,\n            endOffset\n          );\n          const fieldString = stringToSearch?.split(' ')[stringToSearch.split(' ').length - 1];\n          if (\n            fieldString?.startsWith('@') &&\n            fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n          ) {\n            filterFieldMenu(fieldString.slice(1));\n          } else setShowFieldsPopover(false);\n        }\n      }\n    };\n\n    const onKeyDown: EditorProps['onKeyDown'] = event => {\n      if (\n        (event?.key === 'Enter' ||\n          event?.key === 'ArrowLeft' ||\n          event?.key === 'ArrowRight' ||\n          event?.key === 'ArrowDown' ||\n          event?.key === 'ArrowUp') &&\n        !!fieldPopoverRef.current\n      ) {\n        event?.preventDefault();\n      }\n      if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n        hidePopover();\n      }\n    };\n\n    return (\n      <Editor\n        ref={editorRef}\n        {...restProps}\n        label={label}\n        toolbar={toolbar}\n        customComponents={[\n          {\n            createCustomElement: createPegaReferenceElement,\n            name: 'pega-reference',\n            extensionAttributes: ['contenteditable'],\n            style: pegaReferenceElementStyle\n          }\n        ]}\n        customActions={[\n          {\n            icon: 'code',\n            text: tooltip,\n            onMouseDown: () => {\n              modalMethods.current = create(Modal, modalProps);\n            },\n            active: isPegaRefActive,\n            shortcut: {\n              pattern: 'meta+191',\n              description: tooltip,\n              command: onInsertField\n            }\n          }\n        ]}\n        onInit={setEditor}\n        onChange={onEditorChange}\n        onBlur={() => {\n          onBlur?.();\n          hidePopover();\n        }}\n        onKeyDown={onKeyDown}\n        defaultValue={defaultValue}\n      >\n        {fieldSelectionPopover}\n      </Editor>\n    );\n  });\n\nexport default DynamicContentEditor;\n"]}

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { EditorProps } from '@pega/cosmos-react-rte';
-import { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
+import type { ReactNode } from 'react';
+import type { EditorProps } from '@pega/cosmos-react-rte';
+import type { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
 export type ItemType = {
     id: string;
     text: string;

package/lib/components/DynamicContentEditor/DynamicContentEditor.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAEnF,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}
+{"version":3,"file":"DynamicContentEditor.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAExF,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,wBAAwB;IACxB,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,KAAK,IAAI,CAAC;QACnE,oBAAoB,EAAE,SAAS,CAAC;KACjC,CAAC;IACF,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC/C,+BAA+B;IAC/B,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,gCAAiC,SAAQ,yBAAyB;IACjF,gBAAgB,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD"}

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

@@ -1 +1 @@
-{"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { EditorProps } from '@pega/cosmos-react-rte';\nimport { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport type ItemType = {\n  id: string;\n  text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n  /** Insert field form */\n  form: {\n    onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n    dynamicContentPicker: ReactNode;\n  };\n  onActiveFieldChange: (field: ItemType) => void;\n  /** Property selection array */\n  fieldItems?: MenuProps['items'];\n  defaultValue?: string;\n  onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n  updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}
+{"version":3,"file":"DynamicContentEditor.types.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { EditorProps } from '@pega/cosmos-react-rte';\nimport type { MenuProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport type ItemType = {\n  id: string;\n  text: string;\n};\n\nexport interface DynamicContentEditorProps extends EditorProps {\n  /** Insert field form */\n  form: {\n    onSubmit: (insertField: (selectedField: ItemType) => void) => void;\n    dynamicContentPicker: ReactNode;\n  };\n  onActiveFieldChange: (field: ItemType) => void;\n  /** Property selection array */\n  fieldItems?: MenuProps['items'];\n  defaultValue?: string;\n  onBlur?: () => void;\n}\n\nexport interface DynamicContentEditorContextProps extends DynamicContentEditorProps {\n  updateProperties?: (selectedfield: ItemType) => void;\n}\n"]}

package/lib/components/ExpressionBuilder/CodeEditor/CodeEditor.d.ts

@@ -1,8 +1,8 @@
-import { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/hint/show-hint.js';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { CodeEditorProps } from './CodeEditor.types';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { CodeEditorProps } from './CodeEditor.types';
 declare const CodeEditor: FunctionComponent<CodeEditorProps & ForwardProps>;
 export default CodeEditor;
 //# sourceMappingURL=CodeEditor.d.ts.map