@pega/cosmos-react-build 2.1.1 → 3.0.0-dev.1.0

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

@@ -1,5 +1,6 @@
 import { FunctionComponent, Ref, MouseEvent } from 'react';
-import { AvatarProps, BaseProps, ForwardProps, SearchInputProps, MenuItemProps, Tab, NoChildrenProp } from '@pega/cosmos-react-core';
+import { AvatarProps, BaseProps, ForwardProps, SearchInputProps, Tab, NoChildrenProp } from '@pega/cosmos-react-core';
+import { BranchButtonProps } from './BranchButton';
 export interface AppHeaderProps extends BaseProps, NoChildrenProp {
     brand: BrandProps;
     links?: LinkProps[];
@@ -20,8 +21,7 @@ interface LinkProps extends Tab {
 interface UtilsProps {
     avatar: AvatarProps;
     search?: SearchInputProps;
-    branchName?: string;
-    actions?: MenuItemProps['items'];
+    branch?: BranchButtonProps;
     onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAMZ,gBAAgB,EAChB,aAAa,EACb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAgBjC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAmFD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAIZ,gBAAgB,EAChB,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAcjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAkED,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppHeader/AppHeader.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
-import { Flex, Icon, MenuButton, Text, useI18n, useBreakpoint, SearchInput } from '@pega/cosmos-react-core';
+import { Flex, Icon, useI18n, useBreakpoint, SearchInput } from '@pega/cosmos-react-core';
 import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
-import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
+import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
+import BranchButton from './BranchButton';
 const BrandContainer = ({ name, onClick, href }) => {
     return (_jsxs(StyledBrandContainer, { container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div', children: [_jsx(StyledIconContainer, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: 'pegasus' }, void 0) }, void 0), _jsx(StyledTitle, { children: name }, void 0)] }, void 0));
 };
@@ -20,10 +21,10 @@ const Links = ({ links = [] }) => {
     }, [links]);
     return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick }, void 0);
 };
-const Utils = ({ avatar, search, branchName, actions, onPreviewClick }) => {
+const Utils = ({ avatar, search, branch, onPreviewClick }) => {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
-    return (_jsxs(StyledUtilsContainer, { isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' }, children: [search && (_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...search }, void 0) }, void 0)), branchName && (_jsxs(StyledBranchContainer, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, { "aria-label": branchName, children: branchName }, void 0)] }, void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, { variant: 'primary', onClick: onPreviewClick, children: t('preview') }, void 0)), _jsx(StyledAppAvatar, { ...avatar }, void 0)] }, void 0));
+    return (_jsxs(StyledUtilsContainer, { isMediumOrAbove: isMediumOrAbove, container: { justify: 'end' }, children: [search && (_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...search }, void 0) }, void 0)), branch && _jsx(BranchButton, { ...branch }, void 0), onPreviewClick && (_jsx(StyledPreviewButton, { variant: 'primary', onClick: onPreviewClick, children: t('preview') }, void 0)), _jsx(StyledAppAvatar, { ...avatar }, void 0)] }, void 0));
 };
 const AppHeader = forwardRef(({ brand, utils, links }, ref) => {
     return (_jsxs(Flex, { as: StyledAppHeader, container: { justify: 'between' }, ref: ref, children: [_jsx(BrandContainer, { ...brand }, void 0), links && links.length > 0 && _jsx(Links, { links: links }, void 0), utils && _jsx(Utils, { ...utils }, void 0)] }, void 0));

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState\n} from 'react';\n\nimport {\n  AvatarProps,\n  BaseProps,\n  Flex,\n  ForwardProps,\n  Icon,\n  MenuButton,\n  Text,\n  useI18n,\n  useBreakpoint,\n  SearchInputProps,\n  MenuItemProps,\n  Tab,\n  SearchInput,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledAppAvatar,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledBranchContainer,\n  StyledPreviewButton,\n  StyledTitle,\n  StyledBrandButton,\n  StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  brand: BrandProps;\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n  /** The primary text to render in the header. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n  onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n  avatar: AvatarProps;\n  search?: SearchInputProps;\n  branchName?: string;\n  actions?: MenuItemProps['items'];\n  onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n  return (\n    <StyledBrandContainer\n      container={{ alignItems: 'center', justify: 'between' }}\n      onClick={onClick}\n      href={href}\n      forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n    >\n      <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n        <Icon name='pegasus' />\n      </StyledIconContainer>\n      <StyledTitle>{name}</StyledTitle>\n    </StyledBrandContainer>\n  );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ 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 Utils: FC<UtilsProps> = ({\n  avatar,\n  search,\n  branchName,\n  actions,\n  onPreviewClick\n}: UtilsProps) => {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n\n  return (\n    <StyledUtilsContainer\n      isMediumOrAbove={isMediumOrAbove}\n      container={{ alignItems: 'center', justify: 'end' }}\n    >\n      {search && (\n        <StyledAppHeaderSearchForm\n          role='search'\n          aria-label={search.searchInputAriaLabel}\n          onSubmit={e => e.preventDefault()}\n          isMediumOrAbove={isMediumOrAbove}\n        >\n          <SearchInput {...search} />\n        </StyledAppHeaderSearchForm>\n      )}\n      {branchName && (\n        <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n          <Icon name='nodes-right' />\n          <Text aria-label={branchName}>{branchName}</Text>\n        </StyledBranchContainer>\n      )}\n      {actions && actions.length > 0 && (\n        <MenuButton variant='link' menu={{ items: actions, scrollAt: 20 }} text={t('actions')} />\n      )}\n      {onPreviewClick && (\n        <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n          {t('preview')}\n        </StyledPreviewButton>\n      )}\n      <StyledAppAvatar {...avatar} />\n    </StyledUtilsContainer>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n    return (\n      <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n        <BrandContainer {...brand} />\n        {links && links.length > 0 && <Links links={links} />}\n        {utils && <Utils {...utils} />}\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState\n} from 'react';\n\nimport {\n  AvatarProps,\n  BaseProps,\n  Flex,\n  ForwardProps,\n  Icon,\n  useI18n,\n  useBreakpoint,\n  SearchInputProps,\n  Tab,\n  SearchInput,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledAppAvatar,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledPreviewButton,\n  StyledTitle,\n  StyledBrandButton,\n  StyledIconContainer\n} from './AppHeader.styles';\nimport BranchButton, { BranchButtonProps } from './BranchButton';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  brand: BrandProps;\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n  /** The primary text to render in the header. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n  onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n  avatar: AvatarProps;\n  search?: SearchInputProps;\n  branch?: BranchButtonProps;\n  onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n  return (\n    <StyledBrandContainer\n      container={{ alignItems: 'center', justify: 'between' }}\n      onClick={onClick}\n      href={href}\n      forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n    >\n      <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n        <Icon name='pegasus' />\n      </StyledIconContainer>\n      <StyledTitle>{name}</StyledTitle>\n    </StyledBrandContainer>\n  );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ 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 Utils: FC<UtilsProps> = ({ avatar, search, branch, onPreviewClick }: UtilsProps) => {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n\n  return (\n    <StyledUtilsContainer isMediumOrAbove={isMediumOrAbove} container={{ justify: 'end' }}>\n      {search && (\n        <StyledAppHeaderSearchForm\n          role='search'\n          aria-label={search.searchInputAriaLabel}\n          onSubmit={e => e.preventDefault()}\n          isMediumOrAbove={isMediumOrAbove}\n        >\n          <SearchInput {...search} />\n        </StyledAppHeaderSearchForm>\n      )}\n      {branch && <BranchButton {...branch} />}\n      {onPreviewClick && (\n        <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n          {t('preview')}\n        </StyledPreviewButton>\n      )}\n      <StyledAppAvatar {...avatar} />\n    </StyledUtilsContainer>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n    return (\n      <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n        <BrandContainer {...brand} />\n        {links && links.length > 0 && <Links links={links} />}\n        {utils && <Utils {...utils} />}\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAGjC,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAgBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAmBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}

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

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs, Button } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
 export const StyledAppHeader = styled.header(({ theme }) => {
     return css `
     height: 3rem;
@@ -90,6 +91,9 @@ export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) =>
       & > div:last-child {
         margin-inline-end: 0;
       }
+      ${StyledAppHeaderSearchForm} {
+        margin-inline-end: ${theme.base.spacing};
+      }
     `;
 });
 StyledUtilsContainer.defaultProps = defaultThemeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  defaultThemeProp,\n  Flex,\n  StyledIcon,\n  Text,\n  Tabs,\n  Button\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n  return css`\n    height: 3rem;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n    box-shadow: ${theme.base.shadow.low};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n  return css`\n    max-width: 25ch;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight'].bold};\n    margin-inline-start: calc(0.75 * ${theme.base.spacing});\n  `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    text-decoration: none;\n  `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    width: 2rem;\n    height: 2rem;\n    position: relative;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      color: ${theme.base.palette.light};\n    }\n  `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n  return css`\n    &:not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n    margin-inline-end: calc(2 * ${theme.base.spacing});\n    border: none;\n    min-height: 3rem;\n    button {\n      height: auto;\n      span:first-of-type {\n        text-transform: none;\n      }\n    }\n    button[aria-selected='false'] > span {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n    button:hover,\n    button:focus,\n    button:active {\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n  ({ theme, isMediumOrAbove }) => {\n    return css`\n      margin-inline-start: auto;\n      padding-block: ${theme.base.spacing};\n      width: auto;\n      min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n      & > div,\n      & > span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n      & > div:last-child {\n        margin-inline-end: 0;\n      }\n    `;\n  }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    span {\n      white-space: nowrap;\n      max-width: 25ch;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin-inline-start: calc(0.5 * ${theme.base.spacing});\n      margin-inline-end: calc(0.75 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n  flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n  return css`\n    width: 1.5rem;\n    height: 1.5rem;\n    && {\n      margin-inline-start: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AACjC,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,iEAAiE,CAAC;AAE5G,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;qCACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;kBAC/C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;wBACf,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GAC7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;;;;aAKC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;uCACV,KAAK,CAAC,IAAI,CAAC,OAAO;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,mBAAmB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;;;;gCAI3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;MAErD,UAAU;;;eAGD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;;oBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;oCACwB,KAAK,CAAC,IAAI,CAAC,OAAO;kCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;qBAU/B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;GAOxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAC3D,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC7B,OAAO,GAAG,CAAA;;uBAES,KAAK,CAAC,IAAI,CAAC,OAAO;;mBAEtB,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;;+BAGpB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;QAKzC,yBAAyB;6BACJ,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,qBAAqB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;;;;;qBAMS,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;wCACnB,KAAK,CAAC,IAAI,CAAC,OAAO;uCACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,mBAAmB,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAA;;CAE/D,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,GAAG,CAAA;;;;sCAI0B,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Avatar,\n  defaultThemeProp,\n  Flex,\n  StyledIcon,\n  Text,\n  Tabs,\n  Button\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n  return css`\n    height: 3rem;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n    box-shadow: ${theme.base.shadow.low};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n  return css`\n    max-width: 25ch;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight'].bold};\n    margin-inline-start: calc(0.75 * ${theme.base.spacing});\n  `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    text-decoration: none;\n  `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    width: 2rem;\n    height: 2rem;\n    position: relative;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      color: ${theme.base.palette.light};\n    }\n  `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n  return css`\n    &:not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n    margin-inline-end: calc(2 * ${theme.base.spacing});\n    border: none;\n    min-height: 3rem;\n    button {\n      height: auto;\n      span:first-of-type {\n        text-transform: none;\n      }\n    }\n    button[aria-selected='false'] > span {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n    button:hover,\n    button:focus,\n    button:active {\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n  ({ theme, isMediumOrAbove }) => {\n    return css`\n      margin-inline-start: auto;\n      padding-block: ${theme.base.spacing};\n      width: auto;\n      min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n      & > div,\n      & > span {\n        margin-inline-start: ${theme.base.spacing};\n      }\n      & > div:last-child {\n        margin-inline-end: 0;\n      }\n      ${StyledAppHeaderSearchForm} {\n        margin-inline-end: ${theme.base.spacing};\n      }\n    `;\n  }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    span {\n      white-space: nowrap;\n      max-width: 25ch;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin-inline-start: calc(0.5 * ${theme.base.spacing});\n      margin-inline-end: calc(0.75 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n  flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n  return css`\n    width: 1.5rem;\n    height: 1.5rem;\n    && {\n      margin-inline-start: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}

package/lib/components/AppHeader/BranchButton.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent } from 'react';
+import { Button, CountProps, Icon, MenuProps, StatusProps } from '@pega/cosmos-react-core';
+export interface BranchButtonProps {
+    /** The text for the BranchButton also used to set the aria-label. */
+    text: string;
+    /** Determines the variant for the BranchButton. */
+    variant?: Extract<StatusProps['variant'], 'success' | 'urgent'>;
+    /** Only display the branch and caret icon */
+    compact?: boolean;
+    /** The total count representing the number of unmerged changes. */
+    count?: CountProps['children'];
+    /** An array of MenuItemProps. */
+    items: MenuProps['items'];
+}
+export declare const StyledBranchButton: typeof Button;
+export declare const StyledWarnIcon: typeof Icon;
+declare const BranchButton: FunctionComponent<BranchButtonProps>;
+export default BranchButton;
+//# sourceMappingURL=BranchButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BranchButton.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/BranchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAGnE,OAAO,EACL,MAAM,EACN,UAAU,EAGV,IAAI,EAGJ,SAAS,EAMT,WAAW,EAEZ,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,MAwDvC,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,OAAO,IAIlC,CAAC;AAYH,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoEtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/AppHeader/BranchButton.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Flex, Icon, Menu, Count, Popover, useDirection, useElement, registerIcon, useOuterEvent, useI18n } from '@pega/cosmos-react-core';
+import * as nodesDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down-solid.icon';
+import * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
+registerIcon(nodesDownSolidIcon, warnSolidIcon, caretDownIcon);
+export const StyledBranchButton = styled(Button)(({ theme, branchVariant }) => {
+    const { base: { colors, palette: { 'foreground-color': foregroundColor }, shadow: { focus }, spacing }, components: { badges: { status, count: { base: { background, foreground } } } } } = theme;
+    const backgroundColor = branchVariant ? status[branchVariant].background : colors.white;
+    const borderColor = !branchVariant ? colors.gray.medium : 'transparent';
+    const countBgColor = branchVariant === 'success' ? colors.green.medium : background;
+    const countColor = branchVariant === 'success' ? colors.white : foreground;
+    return css `
+      flex-shrink: 0;
+      min-width: calc(7 * ${spacing});
+      max-width: calc(23 * ${spacing});
+      background-color: ${backgroundColor};
+      border-color: ${borderColor};
+      color: ${foregroundColor};
+      padding-inline-start: ${spacing};
+      padding-inline-end: ${spacing};
+
+      &:hover {
+        background-color: ${backgroundColor};
+        box-shadow: ${focus};
+      }
+
+      svg {
+        height: 1rem;
+        width: 1rem;
+      }
+
+      ${StyledCount} {
+        background-color: ${countBgColor};
+        color: ${countColor};
+      }
+    `;
+});
+StyledBranchButton.defaultProps = defaultThemeProp;
+const StyledBranchButtonPopover = styled(Popover)(({ theme }) => {
+    return css `
+    min-width: 23ch;
+    max-width: calc(23 * ${theme.base.spacing});
+  `;
+});
+StyledBranchButtonPopover.defaultProps = defaultThemeProp;
+export const StyledWarnIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.colors.red.medium};
+  `;
+});
+StyledWarnIcon.defaultProps = defaultThemeProp;
+const StyledEllipsisedText = styled.span `
+  max-width: 11ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+`;
+const BranchButton = (props) => {
+    const { text, variant, count, compact = false, items = [] } = props;
+    const [open, setOpen] = useState(false);
+    const [popoverEl, setPopoverRef] = useElement();
+    const [buttonEl, setButtonEl] = useElement();
+    const { rtl } = useDirection();
+    const t = useI18n();
+    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
+        if (open)
+            setOpen(false);
+    });
+    let ariaLabel = t('branch_with_no_changes', [text]);
+    if (variant === 'success') {
+        ariaLabel = t('branch_with_no_potential_conflicts', [text, count ?? 0]);
+    }
+    else if (variant === 'urgent') {
+        ariaLabel = t('branch_with_potential_conflicts', [text]);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(StyledBranchButton, { ref: setButtonEl, "aria-expanded": open, "aria-haspopup": 'menu', "aria-controls": 'branch-popover', "aria-label": ariaLabel, branchVariant: variant, label: !open ? text : undefined, onClick: () => setOpen(cur => !cur), onKeyDown: (e) => {
+                    if (e.key === 'Escape')
+                        setOpen(false);
+                }, children: _jsxs(Flex, { container: { alignItems: 'center', gap: compact ? 1 : 0.5 }, children: [_jsx(Icon, { name: 'nodes-down-solid' }, void 0), !compact && (_jsxs(_Fragment, { children: [_jsx(StyledEllipsisedText, { children: text }, void 0), variant === 'urgent' ? (_jsx(StyledWarnIcon, { name: 'warn-solid' }, void 0)) : (count !== undefined && _jsx(Count, { children: count }, void 0))] }, void 0)), _jsx(Icon, { name: 'caret-down' }, void 0)] }, void 0) }, void 0), _jsx(StyledBranchButtonPopover, { placement: rtl ? 'bottom-end' : 'bottom-start', id: 'branch-popover', hideOnTargetHidden: true, show: open, target: buttonEl, ref: setPopoverRef, children: _jsx(Menu, { items: items, scrollAt: 20, onItemClick: () => setOpen(false), focusControlEl: buttonEl || undefined }, void 0) }, void 0)] }, void 0));
+};
+export default BranchButton;
+//# sourceMappingURL=BranchButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BranchButton.js","sourceRoot":"","sources":["../../../src/components/AppHeader/BranchButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\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} 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: { 'foreground-color': foregroundColor },\n        shadow: { focus },\n        spacing\n      },\n      components: {\n        badges: {\n          status,\n          count: {\n            base: { background, foreground }\n          }\n        }\n      }\n    } = theme;\n\n    const backgroundColor = branchVariant ? status[branchVariant].background : colors.white;\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\n    return css`\n      flex-shrink: 0;\n      min-width: calc(7 * ${spacing});\n      max-width: calc(23 * ${spacing});\n      background-color: ${backgroundColor};\n      border-color: ${borderColor};\n      color: ${foregroundColor};\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)(({ theme }) => {\n  return css`\n    min-width: 23ch;\n    max-width: calc(23 * ${theme.base.spacing});\n  `;\n});\n\nStyledBranchButtonPopover.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.red.medium};\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst StyledEllipsisedText = styled.span`\n  max-width: 11ch;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.5;\n`;\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 ? 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              <StyledEllipsisedText>{text}</StyledEllipsisedText>\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/AppHeader/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './AppHeader';
+export { default as BranchButton, BranchButtonProps } from './BranchButton';
 export { AppHeaderProps as AppBarProps } from './AppHeader';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/AppHeader/index.js

@@ -1,2 +1,3 @@
 export { default } from './AppHeader';
+export { default as BranchButton } from './BranchButton';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './AppHeader';\nexport { AppHeaderProps as AppBarProps } from './AppHeader';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAqB,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './AppHeader';\nexport { default as BranchButton, BranchButtonProps } from './BranchButton';\nexport { AppHeaderProps as AppBarProps } from './AppHeader';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AAwFhF,QAAA,MAAM,QAAQ,iMAgIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AA+FhF,QAAA,MAAM,QAAQ,iMAkIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/AppShell/AppShell.js

@@ -27,11 +27,13 @@ const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
         setShowDevMode(devMode ?? false);
     }, [devMode]);
     useAfterInitialEffect(() => {
-        if (!showDevMode)
+        if (!showDevMode) {
+            setDrawerData({ label: '', id: '' });
             onClose();
+        }
     }, [showDevMode]);
-    return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode'), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
-                    return (_jsx(StyledUtilItem, { role: 'menuitem', "aria-current": drawerData.id !== id && currentItemId === id ? 'true' : undefined, children: _jsx(BareButton, { onClick: () => {
+    return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode').toUpperCase(), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
+                    return (_jsx(StyledUtilItem, { role: 'menuitem', "aria-current": drawerData?.id !== id && currentItemId === id ? 'true' : undefined, children: _jsx(BareButton, { onClick: () => {
                                 setDrawerData({ label, id });
                                 setDrawerOpen(true);
                                 onItemClick(id);
@@ -39,8 +41,8 @@ const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
                 }) }, void 0))] }, void 0));
 };
 const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hideNav = false }, ref) => {
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    const [drawerData, setDrawerData] = useState({ label: '', id: '' });
+    const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);
+    const [drawerData, setDrawerData] = useState(utils?.items.find(i => i.id === utils?.currentItemId));
     const backButtonRef = useRef(null);
     const { rtl } = useDirection();
     const navRef = useConsolidatedRef(ref);
@@ -63,13 +65,13 @@ const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hide
             drawerData,
             setDrawerData,
             navState
-        }), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(SkipNavigation, {}, void 0), _jsx(AppHeader, { ...appHeader }, void 0), _jsxs(Flex, { container: true, children: [!hideNav && (_jsxs(StyledNav, { ref: navRef, children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, { container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded, children: [_jsx(Flex, { as: StyledDrawerWrapper, children: _jsxs(Drawer, { open: drawerOpen, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
+        }), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(SkipNavigation, {}, void 0), _jsx(AppHeader, { ...appHeader }, void 0), _jsxs(Flex, { container: true, children: [!hideNav && (_jsxs(StyledNav, { ref: navRef, children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, { container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded, children: [_jsx(Flex, { as: StyledDrawerWrapper, children: _jsxs(Drawer, { open: drawerOpen && !!drawerData, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
                                                     if (backButtonRef.current &&
                                                         document.activeElement !== backButtonRef.current) {
                                                         backButtonRef.current.focus();
                                                     }
                                                     utils?.drawer?.onAfterOpen?.();
-                                                }, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData.label, visual: {
+                                                }, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData?.label || '', visual: {
                                                             icon: {
                                                                 name: 'caret-left',
                                                                 bgColor: 'transparent'

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 {\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useMemo,\n  useState,\n  useContext,\n  useRef,\n  useEffect\n} from 'react';\n\nimport {\n  Flex,\n  Icon,\n  Switch,\n  SkipNavigation,\n  Drawer,\n  useDirection,\n  useI18n,\n  useAfterInitialEffect,\n  StandardTree,\n  useConsolidatedRef,\n  useTransitionState\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\nimport Visual from '../Visual';\n\nimport {\n  StyledHeader,\n  StyledUtils,\n  StyledUtilItem,\n  StyledScrollWrap,\n  StyledNavContent,\n  StyledMain,\n  StyledDrawerWrapper,\n  StyledDrawerHeader,\n  StyledNavTitle,\n  StyledNav,\n  StyledInnerNav,\n  StyledNavToggle,\n  StyledDrawerCloseButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps, AppInfoProps, UtilsProps } from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual }: AppInfoProps) => {\n  return (\n    <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n      {visual && <Visual {...visual} />}\n      <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n    </Flex>\n  );\n};\n\nconst DrawerHeader = forwardRef(\n  ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n    const t = useI18n();\n    const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n\n    const onDrawerClose = () => {\n      setDrawerData({ label: '', id: '' });\n      setDrawerOpen(false);\n    };\n\n    return (\n      <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n        <StyledDrawerCloseButton\n          variant='simple'\n          onClick={onDrawerClose}\n          aria-label={t('close_noun', [text])}\n          icon\n          ref={ref}\n        >\n          {icon && <Icon name={icon.name} />}\n        </StyledDrawerCloseButton>\n\n        <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n      </Flex>\n    );\n  }\n);\n\nconst Utils = ({\n  items,\n  onItemClick,\n  onClose,\n  currentItemId,\n  devMode\n}: UtilsProps & { onClose: () => void }) => {\n  const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n  const [showDevMode, setShowDevMode] = useState(devMode ?? false);\n  const t = useI18n();\n\n  useEffect(() => {\n    setShowDevMode(devMode ?? false);\n  }, [devMode]);\n\n  useAfterInitialEffect(() => {\n    if (!showDevMode) onClose();\n  }, [showDevMode]);\n\n  return (\n    <StyledUtils showDevMode={showDevMode}>\n      <Switch label={t('dev_mode')} onChange={() => setShowDevMode(cur => !cur)} on={showDevMode} />\n      {showDevMode && (\n        <ul role='menu'>\n          {items.map(({ label, id }) => {\n            return (\n              <StyledUtilItem\n                key={id}\n                role='menuitem'\n                aria-current={drawerData.id !== id && currentItemId === id ? 'true' : undefined}\n              >\n                <BareButton\n                  onClick={() => {\n                    setDrawerData({ label, id });\n                    setDrawerOpen(true);\n                    onItemClick(id);\n                  }}\n                >\n                  {label}\n                </BareButton>\n              </StyledUtilItem>\n            );\n          })}\n        </ul>\n      )}\n    </StyledUtils>\n  );\n};\n\nconst AppShell = forwardRef(\n  (\n    {\n      main,\n      appHeader,\n      appInfo,\n      utils,\n      navigation,\n      hideNav = false\n    }: PropsWithoutRef<AppShellProps>,\n    ref: AppShellProps['ref']\n  ) => {\n    const [drawerOpen, setDrawerOpen] = useState(false);\n    const [drawerData, setDrawerData] = useState({ label: '', id: '' });\n    const backButtonRef = useRef<HTMLButtonElement>(null);\n    const { rtl } = useDirection();\n    const navRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const { state: navState, toggle: toggleNavState } = useTransitionState({\n      ref: navRef,\n      property: 'width',\n      states: expandCollapseStates,\n      defaultState: 'expanded'\n    });\n\n    const navExpanded = navState === 'expanded' || navState === 'expanding';\n\n    const navContent = useMemo(() => {\n      return (\n        <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n          <StandardTree {...navigation} />\n        </Flex>\n      );\n    }, [navigation]);\n\n    const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');\n\n    return (\n      <AppShellContext.Provider\n        value={useMemo(\n          () => ({\n            drawerOpen,\n            setDrawerOpen,\n            drawerData,\n            setDrawerData,\n            navState\n          }),\n          [navExpanded, drawerOpen, drawerData, navState]\n        )}\n      >\n        <SkipNavigation />\n        <AppHeader {...appHeader} />\n        <Flex container>\n          {!hideNav && (\n            <StyledNav ref={navRef}>\n              <StyledInnerNav>\n                <Flex\n                  container={{ direction: 'column', justify: 'between' }}\n                  as={StyledNavContent}\n                  aria-hidden={!navExpanded}\n                >\n                  <Flex as={StyledDrawerWrapper}>\n                    <Drawer\n                      open={drawerOpen}\n                      nullWhenClosed\n                      position='absolute'\n                      placement={rtl ? 'right' : 'left'}\n                      onBeforeOpen={utils?.drawer?.onBeforeOpen}\n                      onAfterOpen={() => {\n                        if (\n                          backButtonRef.current &&\n                          document.activeElement !== backButtonRef.current\n                        ) {\n                          backButtonRef.current.focus();\n                        }\n                        utils?.drawer?.onAfterOpen?.();\n                      }}\n                      onBeforeClose={utils?.drawer?.onBeforeClose}\n                      onAfterClose={utils?.drawer?.onAfterClose}\n                    >\n                      <DrawerHeader\n                        ref={backButtonRef}\n                        text={drawerData.label}\n                        visual={{\n                          icon: {\n                            name: 'caret-left',\n                            bgColor: 'transparent'\n                          }\n                        }}\n                      />\n                      {navContent}\n                    </Drawer>\n                  </Flex>\n\n                  {!drawerOpen && (\n                    <>\n                      <NavigationHeader {...appInfo} />\n                      {navContent}\n                    </>\n                  )}\n\n                  {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n                </Flex>\n              </StyledInnerNav>\n              <StyledNavToggle\n                icon\n                aria-expanded={navExpanded}\n                label={\n                  navState === 'expanded' || navState === 'collapsed'\n                    ? toggleButtonLabel\n                    : undefined\n                }\n                aria-label={toggleButtonA11y}\n                onClick={toggleNavState}\n              >\n                <Icon name='arrow-micro-right' />\n              </StyledNavToggle>\n            </StyledNav>\n          )}\n          <Flex item={{ grow: 1 }} as={StyledMain}>\n            {main}\n          </Flex>\n        </Flex>\n      </AppShellContext.Provider>\n    );\n  }\n);\n\nexport default AppShell;\n"]}
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,cAAc,EACd,eAAe,EACf,uBAAuB,EACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAgB,EAAE,EAAE;IAC1D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,aACxE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,cAAc,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,WAAkB,YAC/C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAiC,EAAE,GAA2B,EAAE,EAAE;IACzF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACrC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,kBAAkB,aAC/D,KAAC,uBAAuB,IACtB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,aAAa,gBACV,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EACnC,IAAI,QACJ,GAAG,EAAE,GAAG,YAEP,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,WAAI,WACV,EAE1B,KAAC,cAAc,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,WAAkB,YAC/C,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,OAAO,EAC8B,EAAE,EAAE;IACzC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACjF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACjE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,EAAE;YAChB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,OAAO,EAAE,CAAC;SACX;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,WAAW,IAAC,WAAW,EAAE,WAAW,aACnC,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,EAClC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAC3C,EAAE,EAAE,WAAW,WACf,EACD,WAAW,IAAI,CACd,aAAI,IAAI,EAAC,MAAM,YACZ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;oBAC3B,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAC,UAAU,kBACD,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAEhF,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;gCACZ,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gCAC7B,aAAa,CAAC,IAAI,CAAC,CAAC;gCACpB,WAAW,CAAC,EAAE,CAAC,CAAC;4BAClB,CAAC,YAEA,KAAK,WACK,IAZR,EAAE,CAaQ,CAClB,CAAC;gBACJ,CAAC,CAAC,WACC,CACN,YACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,GAAG,KAAK,EACgB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACrE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,EAAE,aAAa,CAAC,CACtD,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,kBAAkB,CAAC;QACrE,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,oBAAoB;QAC5B,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,CAAC;IAExE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,gBAAgB,YAC3C,KAAC,YAAY,OAAK,UAAU,WAAI,WAC3B,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,iBAAiB,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;IAEtF,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,UAAU;YACV,aAAa;YACb,UAAU;YACV,aAAa;YACb,QAAQ;SACT,CAAC,EACF,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAChD,aAED,KAAC,cAAc,aAAG,EAClB,KAAC,SAAS,OAAK,SAAS,WAAI,EAC5B,MAAC,IAAI,IAAC,SAAS,mBACZ,CAAC,OAAO,IAAI,CACX,MAAC,SAAS,IAAC,GAAG,EAAE,MAAM,aACpB,KAAC,cAAc,cACb,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACtD,EAAE,EAAE,gBAAgB,iBACP,CAAC,WAAW,aAEzB,KAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,YAC3B,MAAC,MAAM,IACL,IAAI,EAAE,UAAU,IAAI,CAAC,CAAC,UAAU,EAChC,cAAc,QACd,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjC,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EACzC,WAAW,EAAE,GAAG,EAAE;oDAChB,IACE,aAAa,CAAC,OAAO;wDACrB,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,EAChD;wDACA,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;qDAC/B;oDACD,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;gDACjC,CAAC,EACD,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAC3C,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,aAEzC,KAAC,YAAY,IACX,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE,EAC7B,MAAM,EAAE;4DACN,IAAI,EAAE;gEACJ,IAAI,EAAE,YAAY;gEAClB,OAAO,EAAE,aAAa;6DACvB;yDACF,WACD,EACD,UAAU,YACJ,WACJ,EAEN,CAAC,UAAU,IAAI,CACd,8BACE,KAAC,gBAAgB,OAAK,OAAO,WAAI,EAChC,UAAU,YACV,CACJ,EAEA,KAAK,IAAI,KAAC,KAAK,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,WAAI,YAC9D,WACQ,EACjB,KAAC,eAAe,IACd,IAAI,yBACW,WAAW,EAC1B,KAAK,EACH,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW;oCACjD,CAAC,CAAC,iBAAiB;oCACnB,CAAC,CAAC,SAAS,gBAEH,gBAAgB,EAC5B,OAAO,EAAE,cAAc,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,WAAG,WACjB,YACR,CACb,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,UAAU,YACpC,IAAI,WACA,YACF,YACkB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useMemo,\n  useState,\n  useContext,\n  useRef,\n  useEffect\n} from 'react';\n\nimport {\n  Flex,\n  Icon,\n  Switch,\n  SkipNavigation,\n  Drawer,\n  useDirection,\n  useI18n,\n  useAfterInitialEffect,\n  StandardTree,\n  useConsolidatedRef,\n  useTransitionState\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\nimport Visual from '../Visual';\n\nimport {\n  StyledHeader,\n  StyledUtils,\n  StyledUtilItem,\n  StyledScrollWrap,\n  StyledNavContent,\n  StyledMain,\n  StyledDrawerWrapper,\n  StyledDrawerHeader,\n  StyledNavTitle,\n  StyledNav,\n  StyledInnerNav,\n  StyledNavToggle,\n  StyledDrawerCloseButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps, AppInfoProps, UtilsProps } from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual }: AppInfoProps) => {\n  return (\n    <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n      {visual && <Visual {...visual} />}\n      <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n    </Flex>\n  );\n};\n\nconst DrawerHeader = forwardRef(\n  ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n    const t = useI18n();\n    const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n\n    const onDrawerClose = () => {\n      setDrawerData({ label: '', id: '' });\n      setDrawerOpen(false);\n    };\n\n    return (\n      <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n        <StyledDrawerCloseButton\n          variant='simple'\n          onClick={onDrawerClose}\n          aria-label={t('close_noun', [text])}\n          icon\n          ref={ref}\n        >\n          {icon && <Icon name={icon.name} />}\n        </StyledDrawerCloseButton>\n\n        <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n      </Flex>\n    );\n  }\n);\n\nconst Utils = ({\n  items,\n  onItemClick,\n  onClose,\n  currentItemId,\n  devMode\n}: UtilsProps & { onClose: () => void }) => {\n  const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n  const [showDevMode, setShowDevMode] = useState(devMode ?? false);\n  const t = useI18n();\n\n  useEffect(() => {\n    setShowDevMode(devMode ?? false);\n  }, [devMode]);\n\n  useAfterInitialEffect(() => {\n    if (!showDevMode) {\n      setDrawerData({ label: '', id: '' });\n      onClose();\n    }\n  }, [showDevMode]);\n\n  return (\n    <StyledUtils showDevMode={showDevMode}>\n      <Switch\n        label={t('dev_mode').toUpperCase()}\n        onChange={() => setShowDevMode(cur => !cur)}\n        on={showDevMode}\n      />\n      {showDevMode && (\n        <ul role='menu'>\n          {items.map(({ label, id }) => {\n            return (\n              <StyledUtilItem\n                key={id}\n                role='menuitem'\n                aria-current={drawerData?.id !== id && currentItemId === id ? 'true' : undefined}\n              >\n                <BareButton\n                  onClick={() => {\n                    setDrawerData({ label, id });\n                    setDrawerOpen(true);\n                    onItemClick(id);\n                  }}\n                >\n                  {label}\n                </BareButton>\n              </StyledUtilItem>\n            );\n          })}\n        </ul>\n      )}\n    </StyledUtils>\n  );\n};\n\nconst AppShell = forwardRef(\n  (\n    {\n      main,\n      appHeader,\n      appInfo,\n      utils,\n      navigation,\n      hideNav = false\n    }: PropsWithoutRef<AppShellProps>,\n    ref: AppShellProps['ref']\n  ) => {\n    const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);\n    const [drawerData, setDrawerData] = useState(\n      utils?.items.find(i => i.id === utils?.currentItemId)\n    );\n    const backButtonRef = useRef<HTMLButtonElement>(null);\n    const { rtl } = useDirection();\n    const navRef = useConsolidatedRef(ref);\n    const t = useI18n();\n\n    const { state: navState, toggle: toggleNavState } = useTransitionState({\n      ref: navRef,\n      property: 'width',\n      states: expandCollapseStates,\n      defaultState: 'expanded'\n    });\n\n    const navExpanded = navState === 'expanded' || navState === 'expanding';\n\n    const navContent = useMemo(() => {\n      return (\n        <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n          <StandardTree {...navigation} />\n        </Flex>\n      );\n    }, [navigation]);\n\n    const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');\n\n    return (\n      <AppShellContext.Provider\n        value={useMemo(\n          () => ({\n            drawerOpen,\n            setDrawerOpen,\n            drawerData,\n            setDrawerData,\n            navState\n          }),\n          [navExpanded, drawerOpen, drawerData, navState]\n        )}\n      >\n        <SkipNavigation />\n        <AppHeader {...appHeader} />\n        <Flex container>\n          {!hideNav && (\n            <StyledNav ref={navRef}>\n              <StyledInnerNav>\n                <Flex\n                  container={{ direction: 'column', justify: 'between' }}\n                  as={StyledNavContent}\n                  aria-hidden={!navExpanded}\n                >\n                  <Flex as={StyledDrawerWrapper}>\n                    <Drawer\n                      open={drawerOpen && !!drawerData}\n                      nullWhenClosed\n                      position='absolute'\n                      placement={rtl ? 'right' : 'left'}\n                      onBeforeOpen={utils?.drawer?.onBeforeOpen}\n                      onAfterOpen={() => {\n                        if (\n                          backButtonRef.current &&\n                          document.activeElement !== backButtonRef.current\n                        ) {\n                          backButtonRef.current.focus();\n                        }\n                        utils?.drawer?.onAfterOpen?.();\n                      }}\n                      onBeforeClose={utils?.drawer?.onBeforeClose}\n                      onAfterClose={utils?.drawer?.onAfterClose}\n                    >\n                      <DrawerHeader\n                        ref={backButtonRef}\n                        text={drawerData?.label || ''}\n                        visual={{\n                          icon: {\n                            name: 'caret-left',\n                            bgColor: 'transparent'\n                          }\n                        }}\n                      />\n                      {navContent}\n                    </Drawer>\n                  </Flex>\n\n                  {!drawerOpen && (\n                    <>\n                      <NavigationHeader {...appInfo} />\n                      {navContent}\n                    </>\n                  )}\n\n                  {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n                </Flex>\n              </StyledInnerNav>\n              <StyledNavToggle\n                icon\n                aria-expanded={navExpanded}\n                label={\n                  navState === 'expanded' || navState === 'collapsed'\n                    ? toggleButtonLabel\n                    : undefined\n                }\n                aria-label={toggleButtonA11y}\n                onClick={toggleNavState}\n              >\n                <Icon name='arrow-micro-right' />\n              </StyledNavToggle>\n            </StyledNav>\n          )}\n          <Flex item={{ grow: 1 }} as={StyledMain}>\n            {main}\n          </Flex>\n        </Flex>\n      </AppShellContext.Provider>\n    );\n  }\n);\n\nexport default AppShell;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGA2BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAQ9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAoHpB,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGA2BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAQ9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAsHpB,CAAC"}

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

@@ -303,6 +303,8 @@ export const StyledNav = styled.nav(({ theme }) => {
       }
 
       ${StyledNodeInteraction} {
+        padding-block-start: calc(0.5 * ${theme.base.spacing});
+        padding-block-end: calc(0.5 * ${theme.base.spacing});
         &:hover,
         &[aria-current='true'] {
           background-color: ${hoverBg};

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  Icon,\n  Text,\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  useDirection,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n  StyledNodeIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: calc(2 * ${theme.base.spacing});\n    inset-inline-end: 0;\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    border: none;\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: ${theme.base.shadow.low};\n    border-radius: 50%;\n    transition-property: background-color;\n    transform: translateX(${ltr ? '50%' : '-50%'});\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n      ${StyledIcon} {\n        transform: rotateY(180deg);\n      }\n    }\n  `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    width: 100%;\n    min-height: 4rem;\n    border-bottom: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n  return css`\n    padding-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow-x: hidden;\n  `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n    border-top: 0.0625rem solid ${borderColor};\n    ${StyledSwitch} {\n      &:hover {\n        background-color: ${hoverBg};\n      }\n\n      ${SwitchLabel} {\n        height: calc(2rem + 4 * ${theme.base.spacing});\n        padding: calc(2 * ${theme.base.spacing});\n        text-transform: capitalize;\n        color: ${theme.base.colors.gray.light};\n        font-weight: ${theme.base['font-weight'].bold};\n\n        &::before,\n        &::after {\n          margin-inline-end: calc(2 * ${theme.base.spacing});\n        }\n      }\n    }\n    & > ul {\n      list-style: none;\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n  return css`\n    &[aria-current='true'] {\n      background-color: rgba(0, 0, 0, 0.4);\n\n      & > ${StyledBareButton} {\n        color: ${theme.base.colors.blue.light};\n      }\n    }\n\n    ${StyledBareButton} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      color: ${theme.base.colors.white};\n      width: 100%;\n      height: 100%;\n      text-align: start;\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      &:focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n  `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    width: 14rem;\n    height: 100%;\n    opacity: 0;\n    transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    ${navState === 'collapsed' &&\n    css`\n      display: none;\n    `}\n\n    ${(navState === 'expanding' || navState === 'expanded') &&\n    css`\n      opacity: 1;\n    `}\n  `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n  return css`\n    position: relative;\n    min-height: calc(100vh - 3rem);\n    background-color: ${theme.base.palette['app-background']};\n    transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    position: relative;\n    z-index: 1;\n    height: ${drawerOpen ? '100%' : 'auto'};\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n  return css`\n    min-width: 2rem;\n    min-height: 2rem;\n    border-radius: 0.4rem;\n    background-color: ${bgColor};\n    margin-inline-end: ${theme.base.spacing};\n    color: ${theme.base.colors.white};\n    & svg {\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-inline-end: ${theme.base.spacing};\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    color: ${theme.base.colors.white};\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n    }\n  `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    height: 100%;\n    ${(navState === 'collapsing' || navState === 'expanding') &&\n    css`\n      overflow: hidden;\n    `}\n  `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    position: fixed;\n    z-index: 1;\n    height: calc(100vh - 3rem);\n    background: ${theme.components['app-shell'].nav['background-color']};\n\n    &,\n    ${StyledInnerNav} {\n      width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;\n      transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    ${theme.base['custom-scrollbar'] &&\n    css`\n      * {\n        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n        scrollbar-width: thin;\n      }\n\n      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n        /* stylelint-disable unit-allowed-list */\n\n        *::-webkit-scrollbar {\n          width: 12px;\n          height: 12px;\n        }\n\n        *::-webkit-scrollbar-track {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n\n        *::-webkit-scrollbar-corner {\n          background-color: rgba(0, 0, 0, 0.2);\n          border-bottom-right-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-thumb {\n          background-color: transparent;\n          border: 3px solid transparent;\n          border-radius: calc(1.125 * ${theme.base['border-radius']});\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n        }\n\n        *::-webkit-scrollbar-thumb:hover {\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n        }\n\n        *::-webkit-scrollbar-track:horizontal {\n          border-bottom-left-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-track:vertical {\n          border-top-right-radius: inherit;\n        }\n\n        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n        *::-webkit-scrollbar-track:not(:corner-present) {\n          border-bottom-right-radius: inherit;\n        }\n\n        /* stylelint-enable unit-allowed-list */\n      }\n    `}\n\n    &:not(:hover) {\n      ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n        ${hideVisually}\n      }\n    }\n\n    /*\n     * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n     * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n     */\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 100%;\n      width: calc(2 * ${theme.base.spacing});\n      height: 100%;\n    }\n\n    ${StyledStandardTree} {\n      color: ${theme.base.colors.white};\n\n      ${StyledNodeText} {\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n\n      ${StyledNodeInteraction} {\n        &:hover,\n        &[aria-current='true'] {\n          background-color: ${hoverBg};\n        }\n\n        &[aria-current='true'] {\n          ${StyledNodeIcon},\n          ${StyledNodeText} {\n            color: ${theme.base.colors.blue.light};\n          }\n        }\n      }\n    }\n\n    /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n    & + ${StyledMain} {\n      margin-inline-start: ${navState === 'expanding' || navState === 'expanded'\n        ? '14rem'\n        : '1.5rem'};\n    }\n  `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  Icon,\n  Text,\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  useDirection,\n  StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n  StyledNodeIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: calc(2 * ${theme.base.spacing});\n    inset-inline-end: 0;\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    border: none;\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: ${theme.base.shadow.low};\n    border-radius: 50%;\n    transition-property: background-color;\n    transform: translateX(${ltr ? '50%' : '-50%'});\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n      ${StyledIcon} {\n        transform: rotateY(180deg);\n      }\n    }\n  `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    width: 100%;\n    min-height: 4rem;\n    border-bottom: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n  return css`\n    padding-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow-x: hidden;\n  `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n    border-top: 0.0625rem solid ${borderColor};\n    ${StyledSwitch} {\n      &:hover {\n        background-color: ${hoverBg};\n      }\n\n      ${SwitchLabel} {\n        height: calc(2rem + 4 * ${theme.base.spacing});\n        padding: calc(2 * ${theme.base.spacing});\n        text-transform: capitalize;\n        color: ${theme.base.colors.gray.light};\n        font-weight: ${theme.base['font-weight'].bold};\n\n        &::before,\n        &::after {\n          margin-inline-end: calc(2 * ${theme.base.spacing});\n        }\n      }\n    }\n    & > ul {\n      list-style: none;\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n  return css`\n    &[aria-current='true'] {\n      background-color: rgba(0, 0, 0, 0.4);\n\n      & > ${StyledBareButton} {\n        color: ${theme.base.colors.blue.light};\n      }\n    }\n\n    ${StyledBareButton} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      color: ${theme.base.colors.white};\n      width: 100%;\n      height: 100%;\n      text-align: start;\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      &:focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n  `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    width: 14rem;\n    height: 100%;\n    opacity: 0;\n    transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    ${navState === 'collapsed' &&\n    css`\n      display: none;\n    `}\n\n    ${(navState === 'expanding' || navState === 'expanded') &&\n    css`\n      opacity: 1;\n    `}\n  `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n  return css`\n    position: relative;\n    min-height: calc(100vh - 3rem);\n    background-color: ${theme.base.palette['app-background']};\n    transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    position: relative;\n    z-index: 1;\n    height: ${drawerOpen ? '100%' : 'auto'};\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n  return css`\n    min-width: 2rem;\n    min-height: 2rem;\n    border-radius: 0.4rem;\n    background-color: ${bgColor};\n    margin-inline-end: ${theme.base.spacing};\n    color: ${theme.base.colors.white};\n    & svg {\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-inline-end: ${theme.base.spacing};\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    color: ${theme.base.colors.white};\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n    }\n  `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    height: 100%;\n    ${(navState === 'collapsing' || navState === 'expanding') &&\n    css`\n      overflow: hidden;\n    `}\n  `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    position: fixed;\n    z-index: 1;\n    height: calc(100vh - 3rem);\n    background: ${theme.components['app-shell'].nav['background-color']};\n\n    &,\n    ${StyledInnerNav} {\n      width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;\n      transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    ${theme.base['custom-scrollbar'] &&\n    css`\n      * {\n        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n        scrollbar-width: thin;\n      }\n\n      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n        /* stylelint-disable unit-allowed-list */\n\n        *::-webkit-scrollbar {\n          width: 12px;\n          height: 12px;\n        }\n\n        *::-webkit-scrollbar-track {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n\n        *::-webkit-scrollbar-corner {\n          background-color: rgba(0, 0, 0, 0.2);\n          border-bottom-right-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-thumb {\n          background-color: transparent;\n          border: 3px solid transparent;\n          border-radius: calc(1.125 * ${theme.base['border-radius']});\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n        }\n\n        *::-webkit-scrollbar-thumb:hover {\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n        }\n\n        *::-webkit-scrollbar-track:horizontal {\n          border-bottom-left-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-track:vertical {\n          border-top-right-radius: inherit;\n        }\n\n        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n        *::-webkit-scrollbar-track:not(:corner-present) {\n          border-bottom-right-radius: inherit;\n        }\n\n        /* stylelint-enable unit-allowed-list */\n      }\n    `}\n\n    &:not(:hover) {\n      ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n        ${hideVisually}\n      }\n    }\n\n    /*\n     * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n     * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n     */\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 100%;\n      width: calc(2 * ${theme.base.spacing});\n      height: 100%;\n    }\n\n    ${StyledStandardTree} {\n      color: ${theme.base.colors.white};\n\n      ${StyledNodeText} {\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n\n      ${StyledNodeInteraction} {\n        padding-block-start: calc(0.5 * ${theme.base.spacing});\n        padding-block-end: calc(0.5 * ${theme.base.spacing});\n        &:hover,\n        &[aria-current='true'] {\n          background-color: ${hoverBg};\n        }\n\n        &[aria-current='true'] {\n          ${StyledNodeIcon},\n          ${StyledNodeText} {\n            color: ${theme.base.colors.blue.light};\n          }\n        }\n      }\n    }\n\n    /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n    & + ${StyledMain} {\n      margin-inline-start: ${navState === 'expanding' || navState === 'expanded'\n        ? '14rem'\n        : '1.5rem'};\n    }\n  `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}

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

@@ -34,7 +34,7 @@ export interface AppShellContextValue {
         label: string;
         id: string;
     }) => void;
-    drawerData: {
+    drawerData?: {
         label: string;
         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,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}

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 { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n  main: ReactNode;\n  appInfo: AppInfoProps;\n  appHeader: AppBarProps;\n  navigation: StandardTreeProps;\n  hideNav?: boolean;\n  utils?: UtilsProps;\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n  items: UtilItem[];\n  currentItemId?: UtilItem['id'];\n  onItemClick: (id: UtilItem['id']) => void;\n  drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n  devMode?: boolean;\n}\n\nexport interface UtilItem {\n  id: string;\n  label: string;\n}\n\nexport interface AppInfoProps {\n  text: string;\n  visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n  setDrawerData: (data: { label: string; id: string }) => void;\n  drawerData: {\n    label: string;\n    id: string;\n  };\n  navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n  main: ReactNode;\n  appInfo: AppInfoProps;\n  appHeader: AppBarProps;\n  navigation: StandardTreeProps;\n  hideNav?: boolean;\n  utils?: UtilsProps;\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n  items: UtilItem[];\n  currentItemId?: UtilItem['id'];\n  onItemClick: (id: UtilItem['id']) => void;\n  drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n  devMode?: boolean;\n}\n\nexport interface UtilItem {\n  id: string;\n  label: string;\n}\n\nexport interface AppInfoProps {\n  text: string;\n  visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n  drawerOpen: boolean;\n  setDrawerOpen: (open: boolean) => void;\n  setDrawerData: (data: { label: string; id: string }) => void;\n  drawerData?: {\n    label: string;\n    id: string;\n  };\n  navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}

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,+CASnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"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,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}