npm - @pega/cosmos-react-build - Versions diffs - 10.0.0-build.1.8 → 10.0.0-build.10.0 - Mend

@pega/cosmos-react-build 10.0.0-build.1.8 → 10.0.0-build.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

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

@@ -44,7 +44,7 @@ export const StyledMain = styled.main(({ navOpen, hideNav, theme: { base: { anim
     return css `
       position: relative;
       min-height: calc(100vh - 6rem);
-      background-color: ${palette['app-background']};
+      background: ${palette['app-background']};
       margin-inline-start: ${navWidth};
       transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};

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

	@@ -1 +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, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize,\n Icon\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n hideNav: boolean;\n}>(\n ({\n navOpen,\n hideNav,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background-color: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n min-height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n\n ${hideNav &&\n css`\n transition-duration: 0s;\n margin-inline-start: 0;\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' \|\| navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.s};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-width: thin;\n }\n `}\n\n @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(({\n nestedListCollapsed,\n theme\n}) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n});\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n ({ activeTreeRoot, theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 * ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${activeTreeRoot &&\n css`\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n `}\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}
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, rgba } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n tryCatch,\n defaultThemeProp,\n Button,\n StyledIcon,\n useDirection,\n calculateFontSize,\n Icon\n} from '@pega/cosmos-react-core';\nimport {\n StyledToggleIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst navWidth = '3rem';\nconst navOpenWidth = '14rem';\n\nexport const StyledUtils = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-block: ${theme.base.spacing};\n border-block-start: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellToggleButton = styled(Button)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette.dark};\n color: ${theme.base.palette.light};\n border: none;\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n font-weight: bold;\n }\n\n &:enabled:focus,\n :not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledAppShellToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n return css`\n height: 100%;\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{\n navOpen: boolean;\n hideNav: boolean;\n}>(\n ({\n navOpen,\n hideNav,\n theme: {\n base: { animation, breakpoints, palette }\n }\n }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 6rem);\n background: ${palette['app-background']};\n margin-inline-start: ${navWidth};\n transition: margin-inline-start ${`${animation.speed} ${animation.timing.ease}`};\n\n @media (pointer: coarse) {\n min-height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n min-height: calc(100vh - 3rem);\n }\n\n ${navOpen &&\n css`\n margin-inline-start: ${navOpenWidth};\n `}\n\n ${hideNav &&\n css`\n transition-duration: 0s;\n margin-inline-start: 0;\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(\n ({\n theme: {\n base: {\n breakpoints,\n colors,\n palette,\n animation,\n spacing,\n shadow,\n 'custom-scrollbar': customScrollbar,\n 'font-size': fontSize,\n 'font-scale': fontScale\n },\n components: { 'app-shell': appShell }\n }\n }) => {\n const { navState } = useContext(AppShellContext);\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 6rem);\n background: ${appShell.nav['background-color']};\n width: ${navState === 'opening' \|\| navState === 'open' ? navOpenWidth : navWidth};\n transition: width ${animation.speed} ${animation.timing.ease};\n display: flex;\n\n ${StyledStandardTree} {\n background-color: ${palette.dark};\n\n ${StyledNodeText}, ${StyledToggleIcon} {\n color: rgba(255, 255, 255, 0.7);\n font-size: ${fontSizes.s};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${spacing});\n padding-block-end: calc(0.5 * ${spacing});\n\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n\n ${StyledNodeText} {\n color: ${palette.light};\n }\n }\n\n &:focus {\n box-shadow: ${shadow['focus-inset']};\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background: rgba(255, 255, 255, 0.05);\n\n ${StyledNodeText} {\n color: ${colors.blue.light};\n }\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: inset 0 0 0 0.125rem #71c1ff99;\n }\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-width: thin;\n }\n `}\n\n @media (pointer: coarse) {\n height: calc(100vh - 8rem);\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: calc(100vh - 3rem);\n }\n `;\n }\n);\n\nStyledNav.defaultProps = defaultThemeProp;\n\nexport const StyledAppShellCaretIcon = styled(Icon)<{ nestedListCollapsed?: boolean }>(({\n nestedListCollapsed,\n theme\n}) => {\n const { rtl } = useDirection();\n\n return css`\n transition-property: transform;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n ${nestedListCollapsed === false &&\n css`\n transform: rotateZ(${rtl ? '-90deg' : '90deg'});\n `}\n `;\n});\n\nStyledAppShellCaretIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavListItem = styled.li<{ activeTreeRoot?: boolean }>(\n ({ activeTreeRoot, theme }) => {\n const { navOpen } = useContext(AppShellContext);\n const activeBackground = tryCatch(() =>\n rgba('#000000', theme.base.transparency['transparent-4'])\n );\n\n return css`\n display: block;\n position: relative;\n ${StyledIcon} {\n font-size: 1.25rem;\n }\n\n > :first-child {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n padding: calc(1.25 * ${theme.base.spacing}) 0;\n white-space: nowrap;\n color: rgba(255, 255, 255, 0.7);\n cursor: pointer;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n text-decoration: none;\n\n span {\n overflow: hidden;\n color: inherit;\n }\n\n &:hover,\n &:focus {\n color: ${theme.base.palette.light};\n background: rgba(255, 255, 255, 0.05);\n }\n\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow['focus-inset']};\n }\n\n ${activeTreeRoot &&\n css`\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n `}\n\n ${StyledAppShellCaretIcon}:last-child {\n position: absolute;\n left: ${navOpen ? 'auto' : '100%'};\n ${navOpen &&\n css`\n inset-inline-end: 1rem;\n `}\n margin: 0;\n opacity: ${navOpen ? '1' : '0'};\n transition-property: opacity;\n }\n\n ${StyledIcon}:first-child {\n margin: 0 calc((${navWidth} - 1.125rem) / 2);\n }\n }\n\n &[aria-current='page'] > :first-child,\n &[aria-current='true'] > :first-child {\n color: ${theme.base.colors.blue.light};\n background-color: ${activeBackground};\n }\n `;\n }\n);\n\nStyledNavListItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul``;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAoB,MAAM,yBAAyB,CAAC;AAmBjG,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;~~AAmJ~~/E,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CAkG7D,CAAC;AAEH,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAoB,MAAM,yBAAyB,CAAC;AAmBjG,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ/E,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CAkG7D,CAAC;AAEH,eAAe,SAAS,CAAC"}

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

@@ -33,7 +33,7 @@ const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }
             node.focus();
         }
     }, []);
-    return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledAppHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...restProps, ref: searchInputRef }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: () => {
+    return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledAppHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), children: _jsx(SearchInput, { ...restProps, ref: searchInputRef }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: () => {
                     setShowSearchButton(true);
                     focusSearchBtn.current = true;
                 }, label: t('collapse_search'), children: _jsx(Icon, { name: 'times' }) })] })) : (_jsx(Button, { variant: 'simple', icon: true, onClick: () => setShowSearchButton(false), ref: searchButtonRef, label: t('expand_search'), children: _jsx(Icon, { name: 'search' }) }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type { MouseEvent, FC, PropsWithoutRef, Dispatch, SetStateAction } from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SearchInputProps } from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n StyledAppHeaderSearchForm,\n StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledAppHeaderSearch,\n StyledAppName,\n StyledAppVersion,\n StyledBrandButton,\n StyledBrandImage,\n StyledContext\n} from './AppHeader.styles';\nimport type { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n useEffect(() => {\n setCurrentTabId(links[0].id);\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n SearchInputProps & {\n showSearchButton: boolean;\n setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n const searchInputRef = useCallback(\n (node: HTMLInputElement \| null) => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback((node: HTMLButtonElement \| null) => {\n if (node && focusSearchBtn.current) {\n node.focus();\n }\n }, []);\n\n return isMediumOrAbove \|\| !showSearchButton ? (\n <Flex\n as={StyledAppHeaderSearch}\n item={{ shrink: 0, grow: 1 }}\n md={{ item: { grow: 0, shrink: 1 } }}\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n >\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...restProps} ref={searchInputRef} />\n </StyledAppHeaderSearchForm>\n <Button\n variant='simple'\n icon\n onClick={() => {\n setShowSearchButton(true);\n focusSearchBtn.current = true;\n }}\n label={t('collapse_search')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n ) : (\n <Button\n variant='simple'\n icon\n onClick={() => setShowSearchButton(false)}\n ref={searchButtonRef}\n label={t('expand_search')}\n >\n <Icon name='search' />\n </Button>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [appInfoEl, setAppInfoEl] = useElement(null);\n\n return (\n <Flex\n container={{ justify: 'between', alignItems: 'center' }}\n md={{ container: { justify: 'end' } }}\n item={{ shrink: 1 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 1 }}\n ref={setAppInfoEl}\n >\n <Flex as={StyledAppName} item={{ shrink: 1 }}>\n {appInfo.name}\n </Flex>\n <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n <Tooltip target={appInfoEl} hideDelay='none'>\n {`${appInfo.name} ${appInfo.version}`}\n </Tooltip>\n </Flex>\n )}\n <Flex container={{ alignItems: 'center' }}>\n {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n icon={!isMediumOrAbove}\n label={isMediumOrAbove ? undefined : action.text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {isMediumOrAbove && action.text}\n </Flex>\n )}\n </Flex>\n {isMediumOrAbove && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-end' }}\n name={operator.name}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n );\n};\n\nconst AppHeader: ForwardRefForwardPropsComponent<AppHeaderProps> = forwardRef(function AppHeader(\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n) {\n const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n const isMediumOrAbove = useBreakpoint('md');\n const [showSearchButton, setShowSearchButton] = useState(true);\n\n useEffect(() => {\n if (isMediumOrAbove && !showSearchButton) {\n setShowSearchButton(true);\n }\n }, [isMediumOrAbove]);\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n colGap: 2,\n wrap: 'wrap',\n pad: [0, 1]\n }}\n md={{ container: { wrap: 'nowrap' } }}\n ref={ref}\n >\n {showSearchButton && (\n <Flex\n as={StyledBrandContainer}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1\n }}\n item={{ shrink: 0, alignSelf: 'stretch' }}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n <Flex\n as={brand.onClick \|\| brand.href ? StyledBrandButton : 'div'}\n variant='simple'\n container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n onClick={brand.onClick}\n href={brand.href}\n >\n <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n <StyledContext>{selectedContext.primary}</StyledContext>\n </Flex>\n </Flex>\n </Flex>\n )}\n {links && links.length > 0 && <Links links={links} />}\n\n <Flex\n container={{\n gap: 1,\n justify: 'center',\n alignItems: 'center'\n }}\n item={{ grow: showSearchButton ? 0 : 1 }}\n md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n >\n {utils?.search && (\n <AppHeaderSearch\n {...utils.search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && utils?.operator && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={utils.operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={utils.operator.name}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n});\n\nexport default AppHeader;\n"]}
1	+ {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type { MouseEvent, FC, PropsWithoutRef, Dispatch, SetStateAction } from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SearchInputProps } from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n StyledAppHeaderSearchForm,\n StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledAppHeaderSearch,\n StyledAppName,\n StyledAppVersion,\n StyledBrandButton,\n StyledBrandImage,\n StyledContext\n} from './AppHeader.styles';\nimport type { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ links }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id);\n\n useEffect(() => {\n setCurrentTabId(links[0].id);\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst AppHeaderSearch: FC<\n SearchInputProps & {\n showSearchButton: boolean;\n setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n const searchInputRef = useCallback(\n (node: HTMLInputElement \| null) => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback((node: HTMLButtonElement \| null) => {\n if (node && focusSearchBtn.current) {\n node.focus();\n }\n }, []);\n\n return isMediumOrAbove \|\| !showSearchButton ? (\n <Flex\n as={StyledAppHeaderSearch}\n item={{ shrink: 0, grow: 1 }}\n md={{ item: { grow: 0, shrink: 1 } }}\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n >\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n >\n <SearchInput {...restProps} ref={searchInputRef} />\n </StyledAppHeaderSearchForm>\n <Button\n variant='simple'\n icon\n onClick={() => {\n setShowSearchButton(true);\n focusSearchBtn.current = true;\n }}\n label={t('collapse_search')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n ) : (\n <Button\n variant='simple'\n icon\n onClick={() => setShowSearchButton(false)}\n ref={searchButtonRef}\n label={t('expand_search')}\n >\n <Icon name='search' />\n </Button>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [appInfoEl, setAppInfoEl] = useElement(null);\n\n return (\n <Flex\n container={{ justify: 'between', alignItems: 'center' }}\n md={{ container: { justify: 'end' } }}\n item={{ shrink: 1 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 1 }}\n ref={setAppInfoEl}\n >\n <Flex as={StyledAppName} item={{ shrink: 1 }}>\n {appInfo.name}\n </Flex>\n <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n <Tooltip target={appInfoEl} hideDelay='none'>\n {`${appInfo.name} ${appInfo.version}`}\n </Tooltip>\n </Flex>\n )}\n <Flex container={{ alignItems: 'center' }}>\n {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n icon={!isMediumOrAbove}\n label={isMediumOrAbove ? undefined : action.text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {isMediumOrAbove && action.text}\n </Flex>\n )}\n </Flex>\n {isMediumOrAbove && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-end' }}\n name={operator.name}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n );\n};\n\nconst AppHeader: ForwardRefForwardPropsComponent<AppHeaderProps> = forwardRef(function AppHeader(\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n) {\n const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n const isMediumOrAbove = useBreakpoint('md');\n const [showSearchButton, setShowSearchButton] = useState(true);\n\n useEffect(() => {\n if (isMediumOrAbove && !showSearchButton) {\n setShowSearchButton(true);\n }\n }, [isMediumOrAbove]);\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n colGap: 2,\n wrap: 'wrap',\n pad: [0, 1]\n }}\n md={{ container: { wrap: 'nowrap' } }}\n ref={ref}\n >\n {showSearchButton && (\n <Flex\n as={StyledBrandContainer}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1\n }}\n item={{ shrink: 0, alignSelf: 'stretch' }}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n <Flex\n as={brand.onClick \|\| brand.href ? StyledBrandButton : 'div'}\n variant='simple'\n container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n onClick={brand.onClick}\n href={brand.href}\n >\n <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n <StyledContext>{selectedContext.primary}</StyledContext>\n </Flex>\n </Flex>\n </Flex>\n )}\n {links && links.length > 0 && <Links links={links} />}\n\n <Flex\n container={{\n gap: 1,\n justify: 'center',\n alignItems: 'center'\n }}\n item={{ grow: showSearchButton ? 0 : 1 }}\n md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n >\n {utils?.search && (\n <AppHeaderSearch\n {...utils.search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && utils?.operator && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={utils.operator.actions}\n popover={{ placement: 'bottom-start' }}\n name={utils.operator.name}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n});\n\nexport default AppHeader;\n"]}

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

@@ -563,10 +563,10 @@ export declare const StyledTextWithEllipsis: import("styled-components/dist/type
 export declare const StyledPrimaryTextButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
 }, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledPrimaryTextLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+export declare const StyledPrimaryTextLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").LinkProps> & {
-    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab"]>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("@pega/cosmos-react-core").LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["preview-popover", "preview", "new-tab", "open"]>;
 }, keyof import("react").Component<any, {}, any>>;
 export declare const StyledTitlesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("@pega/cosmos-react-core/lib/components/Flex/Flex").BaseFlexProps & import("@pega/cosmos-react-core").BaseProps & import("@pega/cosmos-react-core").AsProp & {
     children?: import("react").ReactNode;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AuthoringPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,eAAe;;;;mBAoC1B,CAAC;AAGH,eAAO,MAAM,oBAAoB,sQAchC,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAEhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAQlC,CAAC;AAGH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAIzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;aAA2B,OAAO;kLAanE,CAAC;AAGH,eAAO,MAAM,uBAAuB;;2LAYlC,CAAC;AAGH,eAAO,MAAM,qBAAqB;;;~~2BAkC5B~~,CAAC;~~iDAvBL~~,CAAC;AAGH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAEjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,6NAIjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAsB9B,CAAC"}
1	+ {"version":3,"file":"AuthoringPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,eAAe;;;;mBAoC1B,CAAC;AAGH,eAAO,MAAM,oBAAoB,sQAchC,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAEhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAQlC,CAAC;AAGH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAIzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;aAA2B,OAAO;kLAanE,CAAC;AAGH,eAAO,MAAM,uBAAuB;;2LAYlC,CAAC;AAGH,eAAO,MAAM,qBAAqB;;;2BAsCM,CAAC;iDA3BvC,CAAC;AAGH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAEjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,6NAIjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAsB9B,CAAC"}

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

@@ -113,8 +113,8 @@ export const StyledPreviewDrawer = styled.div(({ theme }) => {
     max-width: ${resizeDrawerMaxWidth};
     width: var(--resize-drawer-width);
     background: ${theme.base.palette['app-background']};
-    height: calc(100vh - var(--appshell-offset, 0rem));
-    top: var(--appshell-offset, 0);
+    height: calc(100vh - var(--appshell-top-offset, 0rem));
+    top: var(--appshell-top-offset, 0);
     z-index: calc(${theme.base['z-index'].drawer} + 500);
     transition-property: transform, box-shadow, opacity, border-inline-start;
     transition-duration: max(${theme.base.animation.speed}, 0.0001s);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AuthoringPanel.styles.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n Text,\n StyledPageHeader,\n Link,\n defaultThemeProp,\n StyledButton,\n StyledVisual,\n Flex,\n readableHue\n} from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport {\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledPage } from '../PageTemplates/PageTemplates';\n\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\n\nexport const StyledPanelPage = styled(StyledPage)(({\n theme: {\n base: { spacing },\n components: {\n 'case-view': {\n header: { background }\n }\n }\n }\n}) => {\n return css`\n width: 100%;\n\n ${StyledPageHeader} {\n padding: calc(2 * ${spacing});\n background: ${background};\n }\n\n ${StyledVisual} {\n align-self: start;\n }\n\n ${StyledRegions} {\n padding: 0;\n\n & ${StyledPageHeader} {\n border-bottom: none;\n padding-block: 0;\n background: none;\n }\n\n ${StyledTabPanel} {\n padding-inline: calc(2 * ${spacing});\n }\n }\n `;\n});\nStyledPanelPage.defaultProps = defaultThemeProp;\n\nexport const StyledAuthoringPanel = styled.div<Pick<AuthoringPanelProps, 'open'>>(\n ({ open, theme }) => {\n const { animation, palette, spacing } = theme.base;\n const translate = open ? 0 : '100%';\n return css`\n height: calc(100vh - 3rem);\n position: relative;\n border-inline-start: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n transition-property: transform, opacity;\n transition-duration: calc(2 * ${animation.speed});\n transition-timing-function: ${animation.timing.ease};\n transform: ${open ? 'none' : `translateX(${translate})`};\n `;\n }\n);\nStyledAuthoringPanel.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContent = styled(Flex)`\n overflow: hidden;\n`;\n\nexport const StyledTitleContainer = styled(Flex)`\n overflow: hidden;\n`;\n\nexport const StyledProgressContainer = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n width: 100%;\n ${StyledButton} {\n z-index: ${theme.base['z-index'].drawer};\n }\n `;\n});\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled(Flex)`\n ${StyledButton} {\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledTextWithEllipsis = styled(Text)<{ isLink?: boolean }>(({\n theme: {\n base: { spacing }\n },\n isLink\n}) => {\n return css`\n ${ellipsisOverflow}\n ${isLink === false &&\n `\n margin: calc(0.5 * ${spacing});\n `}\n `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextButton = styled(Button)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n overflow: hidden;\n height: 100%;\n max-width: fit-content;\n text-overflow: ellipsis;\n margin: calc(0.5 * ${spacing});\n `;\n});\nStyledPrimaryTextButton.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextLink = styled(Link)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n margin: calc(0.5 * ${spacing});\n overflow: hidden;\n max-width: fit-content;\n ${ellipsisOverflow}\n `;\n});\nStyledPrimaryTextLink.defaultProps = defaultThemeProp;\n\nexport const StyledTitlesContainer = styled(Flex)`\n overflow: hidden;\n`;\n\nexport const StyledPrimaryContainer = styled.div(({ theme }) => {\n return css`\n margin-block-start: calc(-1 * ${theme.base.spacing});\n `;\n});\nStyledPrimaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewDrawer = styled.div(({ theme }) => {\n return css`\n min-width: ${resizeDrawerMinWidth};\n max-width: ${resizeDrawerMaxWidth};\n width: var(--resize-drawer-width);\n background: ${theme.base.palette['app-background']};\n height: calc(100vh - var(--appshell-offset, 0rem));\n top: var(--appshell-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n transition-property: transform, box-shadow, opacity, border-inline-start;\n transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n @media (min-width: ${theme.base.breakpoints.xl}) {\n box-shadow: none;\n border-inline-start: 0.0625rem solid\n ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n mode: 'both',\n level: 'AANonText'\n })};\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"AuthoringPanel.styles.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n Text,\n StyledPageHeader,\n Link,\n defaultThemeProp,\n StyledButton,\n StyledVisual,\n Flex,\n readableHue\n} from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport {\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledPage } from '../PageTemplates/PageTemplates';\n\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\n\nexport const StyledPanelPage = styled(StyledPage)(({\n theme: {\n base: { spacing },\n components: {\n 'case-view': {\n header: { background }\n }\n }\n }\n}) => {\n return css`\n width: 100%;\n\n ${StyledPageHeader} {\n padding: calc(2 * ${spacing});\n background: ${background};\n }\n\n ${StyledVisual} {\n align-self: start;\n }\n\n ${StyledRegions} {\n padding: 0;\n\n & ${StyledPageHeader} {\n border-bottom: none;\n padding-block: 0;\n background: none;\n }\n\n ${StyledTabPanel} {\n padding-inline: calc(2 * ${spacing});\n }\n }\n `;\n});\nStyledPanelPage.defaultProps = defaultThemeProp;\n\nexport const StyledAuthoringPanel = styled.div<Pick<AuthoringPanelProps, 'open'>>(\n ({ open, theme }) => {\n const { animation, palette, spacing } = theme.base;\n const translate = open ? 0 : '100%';\n return css`\n height: calc(100vh - 3rem);\n position: relative;\n border-inline-start: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n transition-property: transform, opacity;\n transition-duration: calc(2 * ${animation.speed});\n transition-timing-function: ${animation.timing.ease};\n transform: ${open ? 'none' : `translateX(${translate})`};\n `;\n }\n);\nStyledAuthoringPanel.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContent = styled(Flex)`\n overflow: hidden;\n`;\n\nexport const StyledTitleContainer = styled(Flex)`\n overflow: hidden;\n`;\n\nexport const StyledProgressContainer = styled.div(({ theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n width: 100%;\n ${StyledButton} {\n z-index: ${theme.base['z-index'].drawer};\n }\n `;\n});\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled(Flex)`\n ${StyledButton} {\n margin-inline-start: 0;\n }\n`;\n\nexport const StyledTextWithEllipsis = styled(Text)<{ isLink?: boolean }>(({\n theme: {\n base: { spacing }\n },\n isLink\n}) => {\n return css`\n ${ellipsisOverflow}\n ${isLink === false &&\n `\n margin: calc(0.5 * ${spacing});\n `}\n `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextButton = styled(Button)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n overflow: hidden;\n height: 100%;\n max-width: fit-content;\n text-overflow: ellipsis;\n margin: calc(0.5 * ${spacing});\n `;\n});\nStyledPrimaryTextButton.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextLink = styled(Link)(({\n theme: {\n base: { spacing }\n }\n}) => {\n return css`\n margin: calc(0.5 * ${spacing});\n overflow: hidden;\n max-width: fit-content;\n ${ellipsisOverflow}\n `;\n});\nStyledPrimaryTextLink.defaultProps = defaultThemeProp;\n\nexport const StyledTitlesContainer = styled(Flex)`\n overflow: hidden;\n`;\n\nexport const StyledPrimaryContainer = styled.div(({ theme }) => {\n return css`\n margin-block-start: calc(-1 * ${theme.base.spacing});\n `;\n});\nStyledPrimaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewDrawer = styled.div(({ theme }) => {\n return css`\n min-width: ${resizeDrawerMinWidth};\n max-width: ${resizeDrawerMaxWidth};\n width: var(--resize-drawer-width);\n background: ${theme.base.palette['app-background']};\n height: calc(100vh - var(--appshell-top-offset, 0rem));\n top: var(--appshell-top-offset, 0);\n z-index: calc(${theme.base['z-index'].drawer} + 500);\n transition-property: transform, box-shadow, opacity, border-inline-start;\n transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n\n @media (min-width: ${theme.base.breakpoints.xl}) {\n box-shadow: none;\n border-inline-start: 0.0625rem solid\n ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n mode: 'both',\n level: 'AANonText'\n })};\n }\n `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Automation.d.ts","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"~~AAcA~~,OAAO,KAAK,EAAa,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAS1F,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,oBAAoB,CAAC;;;;~~AAyL5E~~,wBAA6D"}
1	+ {"version":3,"file":"Automation.d.ts","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAa,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAS1F,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,oBAAoB,CAAC;;;;AA6L5E,wBAA6D"}

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useMemo, forwardRef } from 'react';
-import { Flex, Button, Icon, useTestIds, withTestIds, useDirection, useEvent, useI18n, registerIcon } from '@pega/cosmos-react-core';
+import { Flex, Button, Icon, useTestIds, withTestIds, useDirection, useEvent, useI18n, registerIcon, isInstance } from '@pega/cosmos-react-core';
 import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
 import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
 import RuleStep from './RuleStep';
 import { getAutomationTestIds } from './Automation.test-ids';
 import { automationTreeHelpers } from './Automation.utils';
-import { StyledAIButton, StyledAutomation, StyledBaseTree } from './Automation.styles';
+import { StyledAIButton, StyledBaseTree } from './Automation.styles';
 import AutomationContext from './AutomationContext';
 registerIcon(caretDownIcon, caretLeftIcon, caretRightIcon);
 const NodeRenderer = ({ subTree, ...restProps }) => {
@@ -21,6 +21,7 @@ const Automation = forwardRef(({ testId, nodes, onExpandAll, onCollapseAll, focu
     const [focusedNode, setFocusedNode] = useState('');
     const [focusInsideNode, setFocusInsideNode] = useState(false);
     const [focusInsideTree, setFocusInsideTree] = useState(false);
+    const focusInsideTreeRef = useRef(false);
     // handle key strokes on tree
     const handlekeyDown = (e) => {
         if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) && focusInsideNode) {
@@ -62,15 +63,20 @@ const Automation = forwardRef(({ testId, nodes, onExpandAll, onCollapseAll, focu
         switch (e.type) {
             case 'focusin': {
                 if (!focusedNode) {
-                    setFocusedNode(nodes[0].stepId);
+                    const clickedNodeId = isInstance(e.target, Element)
+                        ? e.target.closest('[role="treeitem"]')?.getAttribute('id')
+                        : null;
+                    setFocusedNode(clickedNodeId || nodes[0].stepId);
                 }
                 if (!focusInsideTree) {
+                    focusInsideTreeRef.current = true;
                     setFocusInsideTree(true);
                 }
                 break;
             }
             case 'focusout': {
                 if (focusInsideTree) {
+                    focusInsideTreeRef.current = false;
                     setFocusInsideTree(false);
                 }
                 break;
@@ -83,7 +89,7 @@ const Automation = forwardRef(({ testId, nodes, onExpandAll, onCollapseAll, focu
         const currentNodeId = e.target instanceof Element
             ? e.target.closest('[role="treeitem"]')?.getAttribute('id')
             : null;
-        if (focusInsideTree && !focusInsideNode && currentNodeId) {
+        if (focusInsideTreeRef.current && !focusInsideNode && currentNodeId) {
             setFocusInsideNode(true);
             setFocusedNode(currentNodeId);
         }
@@ -107,7 +113,7 @@ const Automation = forwardRef(({ testId, nodes, onExpandAll, onCollapseAll, focu
         focusInsideTree,
         firstNodeId: nodes[0]?.stepId
     }), [focusedNode, focusInsideNode, focusInsideTree, nodes]);
-    return (_jsx(AutomationContext.Provider, { value: automationCtxValue, children: _jsxs(StyledAutomation, { children: [_jsxs(Flex, { container: { pad: [0, 0, 2, 2] }, justify: 'space-between', "data-testid": testIds.root, alignItems: 'center', children: [onExpandAll && (_jsxs(Button, { "aria-label": t('expand_steps'), "data-testid": testIds.expandAll, onClick: onExpandAll, children: [_jsx(Icon, { name: 'caret-down' }), t('expand_all')] })), onCollapseAll && (_jsxs(Button, { "aria-label": t('collapse_steps'), "data-testid": testIds.collapseAll, onClick: onCollapseAll, children: [_jsx(Icon, { name: `caret-${rtl ? 'left' : 'right'}` }), t('collapse_all')] })), onGenerateCommentsUsingGenAI && (_jsx(StyledAIButton, { label: t('generate_comments'), variant: 'secondary', onClick: onGenerateCommentsUsingGenAI, "data-testid": testIds.generateComments }))] }), _jsx(StyledBaseTree, { ref: treeRef, testId: testIds.steps, nodes: indexedNodes, nodeRenderer: NodeRenderer })] }) }));
+    return (_jsxs(AutomationContext.Provider, { value: automationCtxValue, children: [_jsxs(Flex, { container: { pad: [2, 2, 2, 0] }, justify: 'space-between', "data-testid": testIds.root, alignItems: 'center', children: [onExpandAll && (_jsxs(Button, { "aria-label": t('expand_steps'), "data-testid": testIds.expandAll, onClick: onExpandAll, children: [_jsx(Icon, { name: 'caret-down' }), t('expand_all')] })), onCollapseAll && (_jsxs(Button, { "aria-label": t('collapse_steps'), "data-testid": testIds.collapseAll, onClick: onCollapseAll, children: [_jsx(Icon, { name: `caret-${rtl ? 'left' : 'right'}` }), t('collapse_all')] })), onGenerateCommentsUsingGenAI && (_jsx(StyledAIButton, { label: t('generate_comments'), variant: 'secondary', onClick: onGenerateCommentsUsingGenAI, "data-testid": testIds.generateComments }))] }), _jsx(StyledBaseTree, { ref: treeRef, testId: testIds.steps, nodes: indexedNodes, nodeRenderer: NodeRenderer })] }));
 });
 export default withTestIds(Automation, getAutomationTestIds);
 //# sourceMappingURL=Automation.js.map

package/lib/components/Automation/Automation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Automation.js","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useMemo, forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Flex,\n Button,\n Icon,\n useTestIds,\n withTestIds,\n useDirection,\n useEvent,\n useI18n,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { TreeProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport RuleStep from './RuleStep';\nimport { getAutomationTestIds } from './Automation.test-ids';\nimport { automationTreeHelpers } from './Automation.utils';\nimport { StyledAIButton, StyledAutomation, StyledBaseTree } from './Automation.styles';\nimport type { AutomationProps, RuleStepTreeNode } from './Automation.types';\nimport AutomationContext from './AutomationContext';\n\nregisterIcon(caretDownIcon, caretLeftIcon, caretRightIcon);\n\nconst NodeRenderer: TreeProps<RuleStepTreeNode>['nodeRenderer'] = ({ subTree, ...restProps }) => {\n return (\n <>\n <RuleStep {...restProps} />\n {subTree}\n </>\n );\n};\n\nconst Automation: ForwardRefForwardPropsComponent<AutomationProps> = forwardRef(\n ({\n testId,\n nodes,\n onExpandAll,\n onCollapseAll,\n focusedNodeId,\n onGenerateCommentsUsingGenAI\n }: PropsWithoutRef<AutomationProps>) => {\n const t = useI18n();\n const { rtl } = useDirection();\n const testIds = useTestIds(testId, getAutomationTestIds);\n\n const treeRef = useRef<HTMLUListElement>(null);\n\n const [focusedNode, setFocusedNode] = useState<RuleStepTreeNode['stepId']>('');\n const [focusInsideNode, setFocusInsideNode] = useState(false);\n const [focusInsideTree, setFocusInsideTree] = useState(false);\n\n // handle key strokes on tree\n const handlekeyDown = (e: KeyboardEvent) => {\n if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) && focusInsideNode) {\n return;\n }\n switch (e.key) {\n case 'ArrowDown': {\n const nextNode = automationTreeHelpers.getNextNode(nodes, focusedNode);\n setFocusedNode(nextNode.stepId);\n break;\n }\n case 'ArrowUp': {\n const previousNode = automationTreeHelpers.getPreviousNode(nodes, focusedNode);\n setFocusedNode(previousNode.stepId);\n break;\n }\n case 'Enter': {\n setFocusInsideNode(true);\n break;\n }\n case 'Escape': {\n if (focusInsideNode) {\n const currentFocussedNodeId = document.activeElement\n ?.closest('[role=\"treeitem\"]')\n ?.getAttribute('id');\n if (currentFocussedNodeId) {\n setFocusedNode(currentFocussedNodeId);\n }\n setFocusInsideNode(false);\n }\n\n break;\n }\n default:\n break;\n }\n };\n\n // handle focus movements in and out of tree\n const handleFocusEvent = (e: FocusEvent) => {\n switch (e.type) {\n case 'focusin': {\n if (!focusedNode) {\n setFocusedNode(nodes[0].stepId);\n }\n if (!focusInsideTree) {\n setFocusInsideTree(true);\n }\n\n break;\n }\n case 'focusout': {\n if (focusInsideTree) {\n setFocusInsideTree(false);\n }\n break;\n }\n default:\n break;\n }\n };\n\n const handleClick = (e: Event) => {\n const currentNodeId =\n e.target instanceof Element\n ? e.target.closest('[role=\"treeitem\"]')?.getAttribute('id')\n : null;\n if (focusInsideTree && !focusInsideNode && currentNodeId) {\n setFocusInsideNode(true);\n setFocusedNode(currentNodeId);\n }\n };\n\n // event handlers for focus management.\n useEvent('keydown', handlekeyDown, { target: treeRef });\n useEvent('focusin', handleFocusEvent, { target: treeRef });\n useEvent('focusout', handleFocusEvent, { target: treeRef });\n useEvent('click', handleClick, { target: treeRef });\n\n // To capture focusNode from story\n useEffect(() => {\n if (focusedNodeId) {\n setFocusInsideNode(false);\n setFocusedNode(focusedNodeId);\n }\n }, [focusedNodeId]);\n\n const indexedNodes = useMemo(() => automationTreeHelpers.calculateStepIndices(nodes), [nodes]);\n\n const automationCtxValue = useMemo(\n () => ({\n focusedNodeId: focusedNode,\n focusInsideNode,\n focusInsideTree,\n firstNodeId: nodes[0]?.stepId\n }),\n [focusedNode, focusInsideNode, focusInsideTree, nodes]\n );\n\n return (\n <AutomationContext.Provider value={automationCtxValue}>\n <StyledAutomation>\n <Flex\n container={{ pad: [0, 0, 2, 2] }}\n justify='space-between'\n data-testid={testIds.root}\n alignItems='center'\n >\n {onExpandAll && (\n <Button\n aria-label={t('expand_steps')}\n data-testid={testIds.expandAll}\n onClick={onExpandAll}\n >\n <Icon name='caret-down' />\n {t('expand_all')}\n </Button>\n )}\n\n {onCollapseAll && (\n <Button\n aria-label={t('collapse_steps')}\n data-testid={testIds.collapseAll}\n onClick={onCollapseAll}\n >\n <Icon name={`caret-${rtl ? 'left' : 'right'}`} />\n {t('collapse_all')}\n </Button>\n )}\n\n {onGenerateCommentsUsingGenAI && (\n <StyledAIButton\n label={t('generate_comments')}\n variant='secondary'\n onClick={onGenerateCommentsUsingGenAI}\n data-testid={testIds.generateComments}\n />\n )}\n </Flex>\n\n <StyledBaseTree\n ref={treeRef}\n testId={testIds.steps}\n nodes={indexedNodes}\n nodeRenderer={NodeRenderer}\n />\n </StyledAutomation>\n </AutomationContext.Provider>\n );\n }\n);\n\nexport default withTestIds(Automation, getAutomationTestIds);\n"]}
1	+ {"version":3,"file":"Automation.js","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useMemo, forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Flex,\n Button,\n Icon,\n useTestIds,\n withTestIds,\n useDirection,\n useEvent,\n useI18n,\n registerIcon,\n isInstance\n} from '@pega/cosmos-react-core';\nimport type { TreeProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport RuleStep from './RuleStep';\nimport { getAutomationTestIds } from './Automation.test-ids';\nimport { automationTreeHelpers } from './Automation.utils';\nimport { StyledAIButton, StyledBaseTree } from './Automation.styles';\nimport type { AutomationProps, RuleStepTreeNode } from './Automation.types';\nimport AutomationContext from './AutomationContext';\n\nregisterIcon(caretDownIcon, caretLeftIcon, caretRightIcon);\n\nconst NodeRenderer: TreeProps<RuleStepTreeNode>['nodeRenderer'] = ({ subTree, ...restProps }) => {\n return (\n <>\n <RuleStep {...restProps} />\n {subTree}\n </>\n );\n};\n\nconst Automation: ForwardRefForwardPropsComponent<AutomationProps> = forwardRef(\n ({\n testId,\n nodes,\n onExpandAll,\n onCollapseAll,\n focusedNodeId,\n onGenerateCommentsUsingGenAI\n }: PropsWithoutRef<AutomationProps>) => {\n const t = useI18n();\n const { rtl } = useDirection();\n const testIds = useTestIds(testId, getAutomationTestIds);\n\n const treeRef = useRef<HTMLUListElement>(null);\n\n const [focusedNode, setFocusedNode] = useState<RuleStepTreeNode['stepId']>('');\n const [focusInsideNode, setFocusInsideNode] = useState(false);\n const [focusInsideTree, setFocusInsideTree] = useState(false);\n const focusInsideTreeRef = useRef(false);\n\n // handle key strokes on tree\n const handlekeyDown = (e: KeyboardEvent) => {\n if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) && focusInsideNode) {\n return;\n }\n switch (e.key) {\n case 'ArrowDown': {\n const nextNode = automationTreeHelpers.getNextNode(nodes, focusedNode);\n setFocusedNode(nextNode.stepId);\n break;\n }\n case 'ArrowUp': {\n const previousNode = automationTreeHelpers.getPreviousNode(nodes, focusedNode);\n setFocusedNode(previousNode.stepId);\n break;\n }\n case 'Enter': {\n setFocusInsideNode(true);\n break;\n }\n case 'Escape': {\n if (focusInsideNode) {\n const currentFocussedNodeId = document.activeElement\n ?.closest('[role=\"treeitem\"]')\n ?.getAttribute('id');\n if (currentFocussedNodeId) {\n setFocusedNode(currentFocussedNodeId);\n }\n setFocusInsideNode(false);\n }\n\n break;\n }\n default:\n break;\n }\n };\n\n // handle focus movements in and out of tree\n const handleFocusEvent = (e: FocusEvent) => {\n switch (e.type) {\n case 'focusin': {\n if (!focusedNode) {\n const clickedNodeId = isInstance(e.target, Element)\n ? e.target.closest('[role=\"treeitem\"]')?.getAttribute('id')\n : null;\n setFocusedNode(clickedNodeId \|\| nodes[0].stepId);\n }\n if (!focusInsideTree) {\n focusInsideTreeRef.current = true;\n setFocusInsideTree(true);\n }\n\n break;\n }\n case 'focusout': {\n if (focusInsideTree) {\n focusInsideTreeRef.current = false;\n setFocusInsideTree(false);\n }\n break;\n }\n default:\n break;\n }\n };\n\n const handleClick = (e: Event) => {\n const currentNodeId =\n e.target instanceof Element\n ? e.target.closest('[role=\"treeitem\"]')?.getAttribute('id')\n : null;\n if (focusInsideTreeRef.current && !focusInsideNode && currentNodeId) {\n setFocusInsideNode(true);\n setFocusedNode(currentNodeId);\n }\n };\n\n // event handlers for focus management.\n useEvent('keydown', handlekeyDown, { target: treeRef });\n useEvent('focusin', handleFocusEvent, { target: treeRef });\n useEvent('focusout', handleFocusEvent, { target: treeRef });\n useEvent('click', handleClick, { target: treeRef });\n\n // To capture focusNode from story\n useEffect(() => {\n if (focusedNodeId) {\n setFocusInsideNode(false);\n setFocusedNode(focusedNodeId);\n }\n }, [focusedNodeId]);\n\n const indexedNodes = useMemo(() => automationTreeHelpers.calculateStepIndices(nodes), [nodes]);\n\n const automationCtxValue = useMemo(\n () => ({\n focusedNodeId: focusedNode,\n focusInsideNode,\n focusInsideTree,\n firstNodeId: nodes[0]?.stepId\n }),\n [focusedNode, focusInsideNode, focusInsideTree, nodes]\n );\n\n return (\n <AutomationContext.Provider value={automationCtxValue}>\n <Flex\n container={{ pad: [2, 2, 2, 0] }}\n justify='space-between'\n data-testid={testIds.root}\n alignItems='center'\n >\n {onExpandAll && (\n <Button\n aria-label={t('expand_steps')}\n data-testid={testIds.expandAll}\n onClick={onExpandAll}\n >\n <Icon name='caret-down' />\n {t('expand_all')}\n </Button>\n )}\n\n {onCollapseAll && (\n <Button\n aria-label={t('collapse_steps')}\n data-testid={testIds.collapseAll}\n onClick={onCollapseAll}\n >\n <Icon name={`caret-${rtl ? 'left' : 'right'}`} />\n {t('collapse_all')}\n </Button>\n )}\n\n {onGenerateCommentsUsingGenAI && (\n <StyledAIButton\n label={t('generate_comments')}\n variant='secondary'\n onClick={onGenerateCommentsUsingGenAI}\n data-testid={testIds.generateComments}\n />\n )}\n </Flex>\n\n <StyledBaseTree\n ref={treeRef}\n testId={testIds.steps}\n nodes={indexedNodes}\n nodeRenderer={NodeRenderer}\n />\n </AutomationContext.Provider>\n );\n }\n);\n\nexport default withTestIds(Automation, getAutomationTestIds);\n"]}