@pega/cosmos-react-tools 4.0.0-dev.23.1 → 4.0.0-dev.24.1

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

@@ -1 +1 @@
-{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAA4B,MAAM,mBAAmB,CAAC;AAyD7E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAyB/D,CAAC;AACF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAA4B,MAAM,mBAAmB,CAAC;AAyD7E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAuB9D,CAAC;AACH,eAAe,SAAS,CAAC"}

package/lib/components/Clipboard/Clipboard.js

@@ -19,7 +19,7 @@ const FieldSummary = ({ primary, secondary, fields, actions }) => {
     useEffect(() => headingRef.current?.focus(), []);
     return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: _jsx(StyledTitle, { tabIndex: -1, variant: 'h3', ref: headingRef, children: primary }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }), _jsx(Table, { title: primary, columns: columns, data: fields })] }));
 };
-const Clipboard = forwardRef(({ navigation, content, lastUpdated }, ref) => {
+const Clipboard = forwardRef(function Clipboard({ navigation, content, lastUpdated }, ref) {
     const t = useI18n();
     const navContent = useMemo(() => _jsx(StandardTree, { ...navigation }), [navigation]);
     return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsxs(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: [!content && _jsx(EmptyState, {}), content && content.loading && _jsx(Progress, { placement: 'local', message: t('loading') }), content && !content.loading && _jsx(FieldSummary, { ...content })] })] }), _jsx(Flex, { as: StyledClipboardFooter, container: { alignItems: 'center' }, children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));

package/lib/components/Clipboard/Clipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  useMemo,\n  FC,\n  useEffect,\n  useRef\n} from 'react';\n\nimport {\n  Button,\n  ColumnProps,\n  Flex,\n  ForwardProps,\n  MetaList,\n  Progress,\n  StandardTree,\n  SummaryItem,\n  Text,\n  Table,\n  useI18n,\n  EmptyState\n} from '@pega/cosmos-react-core';\n\nimport { ClipboardProps, FieldSummaryProps, Field } from './Clipboard.types';\nimport {\n  StyledClipboardFooter,\n  StyledContainer,\n  StyledContent,\n  StyledMain,\n  StyledTitle,\n  StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n  return cell.onClick ? (\n    <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n      {cell.name}\n    </Button>\n  ) : (\n    <>{cell.name}</>\n  );\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n  primary,\n  secondary,\n  fields,\n  actions\n}: FieldSummaryProps) => {\n  const headingRef = useRef<HTMLSpanElement>(null);\n  const t = useI18n();\n\n  const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);\n\n  const columns: ColumnProps<Field>[] = [\n    {\n      renderer: FieldRenderer,\n      label: t('condition_builder_field_label')\n    },\n    { renderer: 'value', label: t('condition_builder_value_label') }\n  ];\n\n  useEffect(() => headingRef.current?.focus(), []);\n\n  return (\n    <>\n      <SummaryItem\n        primary={\n          <StyledTitle tabIndex={-1} variant='h3' ref={headingRef}>\n            {primary}\n          </StyledTitle>\n        }\n        secondary={metaListItems && <MetaList items={metaListItems} />}\n        actions={actions}\n      />\n      <Table title={primary} columns={columns} data={fields} />\n    </>\n  );\n};\n\nconst Clipboard: FunctionComponent<ClipboardProps & ForwardProps> = forwardRef(\n  (\n    { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n    ref: ClipboardProps['ref']\n  ) => {\n    const t = useI18n();\n    const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n    return (\n      <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n        <Flex as={StyledMain} container>\n          <StyledTreeContainer>{navContent}</StyledTreeContainer>\n          <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n            {!content && <EmptyState />}\n            {content && content.loading && <Progress placement='local' message={t('loading')} />}\n            {content && !content.loading && <FieldSummary {...content} />}\n          </Flex>\n        </Flex>\n\n        <Flex as={StyledClipboardFooter} container={{ alignItems: 'center' }}>\n          {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n        </Flex>\n      </Flex>\n    );\n  }\n);\nexport default Clipboard;\n"]}
+{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  forwardRef,\n  useMemo,\n  FC,\n  useEffect,\n  useRef\n} from 'react';\n\nimport {\n  Button,\n  ColumnProps,\n  Flex,\n  ForwardProps,\n  MetaList,\n  Progress,\n  StandardTree,\n  SummaryItem,\n  Text,\n  Table,\n  useI18n,\n  EmptyState\n} from '@pega/cosmos-react-core';\n\nimport { ClipboardProps, FieldSummaryProps, Field } from './Clipboard.types';\nimport {\n  StyledClipboardFooter,\n  StyledContainer,\n  StyledContent,\n  StyledMain,\n  StyledTitle,\n  StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n  return cell.onClick ? (\n    <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n      {cell.name}\n    </Button>\n  ) : (\n    <>{cell.name}</>\n  );\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n  primary,\n  secondary,\n  fields,\n  actions\n}: FieldSummaryProps) => {\n  const headingRef = useRef<HTMLSpanElement>(null);\n  const t = useI18n();\n\n  const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);\n\n  const columns: ColumnProps<Field>[] = [\n    {\n      renderer: FieldRenderer,\n      label: t('condition_builder_field_label')\n    },\n    { renderer: 'value', label: t('condition_builder_value_label') }\n  ];\n\n  useEffect(() => headingRef.current?.focus(), []);\n\n  return (\n    <>\n      <SummaryItem\n        primary={\n          <StyledTitle tabIndex={-1} variant='h3' ref={headingRef}>\n            {primary}\n          </StyledTitle>\n        }\n        secondary={metaListItems && <MetaList items={metaListItems} />}\n        actions={actions}\n      />\n      <Table title={primary} columns={columns} data={fields} />\n    </>\n  );\n};\n\nconst Clipboard: FunctionComponent<ClipboardProps & ForwardProps> = forwardRef(function Clipboard(\n  { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n  ref: ClipboardProps['ref']\n) {\n  const t = useI18n();\n  const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n  return (\n    <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n      <Flex as={StyledMain} container>\n        <StyledTreeContainer>{navContent}</StyledTreeContainer>\n        <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n          {!content && <EmptyState />}\n          {content && content.loading && <Progress placement='local' message={t('loading')} />}\n          {content && !content.loading && <FieldSummary {...content} />}\n        </Flex>\n      </Flex>\n\n      <Flex as={StyledClipboardFooter} container={{ alignItems: 'center' }}>\n        {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n      </Flex>\n    </Flex>\n  );\n});\nexport default Clipboard;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAIrF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,CAqB/D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAIrF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,CAsB9D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/DevTools/DevTools.js

@@ -5,7 +5,7 @@ import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.
 import { StyledDevTools, StyledToolsContent } from './DevTools.styles';
 import Header from './Header';
 registerIcon(bugIcon);
-const DevTools = forwardRef(({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref) => {
+const DevTools = forwardRef(function DevTools({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref) {
     return (_jsxs(Flex, { as: StyledDevTools, container: { direction: 'column' }, ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Flex, { as: StyledToolsContent, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, children: tab.content }, tab.id))) })] }));
 });
 export default DevTools;

package/lib/components/DevTools/DevTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevTools.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,QAAQ,GAAsD,UAAU,CAC5E,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,GAAyB,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACpE,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,EACF,KAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC5C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,YAChD,GAAG,CAAC,OAAO,IAD4C,GAAG,CAAC,EAAE,CAErD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, registerIcon, TabPanel } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledDevTools, StyledToolsContent } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\nimport Header from './Header';\n\nregisterIcon(bugIcon);\n\nconst DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>> = forwardRef(\n  ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref: DevToolsProps['ref']) => {\n    return (\n      <Flex as={StyledDevTools} container={{ direction: 'column' }} ref={ref}>\n        <Header\n          tabs={tabs}\n          onTabClick={onTabClick}\n          onContinueDebug={onContinueDebug}\n          currentTabId={currentTabId}\n          utils={utils}\n        />\n        <Flex as={StyledToolsContent} item={{ grow: 1 }}>\n          {tabs.map(tab => (\n            <TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>\n              {tab.content}\n            </TabPanel>\n          ))}\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default DevTools;\n"]}
+{"version":3,"file":"DevTools.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,QAAQ,GAAsD,UAAU,CAAC,SAAS,QAAQ,CAC9F,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAC1D,GAAyB;IAEzB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACpE,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,EACF,KAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC5C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,YAChD,GAAG,CAAC,OAAO,IAD4C,GAAG,CAAC,EAAE,CAErD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, registerIcon, TabPanel } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledDevTools, StyledToolsContent } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\nimport Header from './Header';\n\nregisterIcon(bugIcon);\n\nconst DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>> = forwardRef(function DevTools(\n  { tabs, currentTabId, onTabClick, onContinueDebug, utils },\n  ref: DevToolsProps['ref']\n) {\n  return (\n    <Flex as={StyledDevTools} container={{ direction: 'column' }} ref={ref}>\n      <Header\n        tabs={tabs}\n        onTabClick={onTabClick}\n        onContinueDebug={onContinueDebug}\n        currentTabId={currentTabId}\n        utils={utils}\n      />\n      <Flex as={StyledToolsContent} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>\n            {tab.content}\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n});\n\nexport default DevTools;\n"]}

package/lib/components/PreviewShell/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAuB,MAAM,OAAO,CAAC;AAEzF,OAAO,EAEL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CA2F3D,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAuB,MAAM,OAAO,CAAC;AAEzF,OAAO,EAEL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAmF1D,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Footer.js

@@ -7,7 +7,7 @@ import { StyledToolsContent } from '../DevTools/DevTools.styles';
 import PreviewShellContext from './PreviewShellContext';
 import { StyledFooterContent } from './PreviewShell.styles';
 registerIcon(bugIcon);
-const Footer = forwardRef(({ tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
+const Footer = forwardRef(function Footer({ tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) {
     const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);
     const t = useI18n();
     const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');

package/lib/components/PreviewShell/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, MouseEvent, PropsWithoutRef, useContext, useMemo } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  Button,\n  Icon,\n  MenuButton,\n  useI18n,\n  registerIcon,\n  TabPanel\n} from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport Header from '../DevTools/Header';\nimport { StyledToolsContent } from '../DevTools/DevTools.styles';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\nimport { StyledFooterContent } from './PreviewShell.styles';\n\nregisterIcon(bugIcon);\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n  (\n    { tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu },\n    ref: FooterProps['ref']\n  ) => {\n    const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);\n    const t = useI18n();\n\n    const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);\n\n    const handleTabChange = (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!footerExpanded) {\n        toggleFooter(true);\n      }\n      onTabClick(id, e);\n    };\n\n    const utils = useMemo(() => {\n      return (\n        <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n          {menu && (\n            <MenuButton\n              text={t('more_options')}\n              variant='simple'\n              icon='more'\n              iconOnly\n              menu={menu}\n            />\n          )}\n          {onNewWindowClick && (\n            <Button\n              variant='simple'\n              label={t('open_in_new_window_text')}\n              icon\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                if (footerExpanded) {\n                  toggleFooter(prev => !prev);\n                }\n                onNewWindowClick(e);\n              }}\n            >\n              <Icon name='open' />\n            </Button>\n          )}\n          <Button\n            variant='simple'\n            icon\n            aria-expanded={footerExpanded}\n            label={toggleButtonLabel}\n            aria-label={toggleButtonA11y}\n            onClick={() => toggleFooter(prev => !prev)}\n          >\n            <Icon name={footerExpanded ? 'caret-down' : 'caret-up'} />\n          </Button>\n        </Flex>\n      );\n    }, [\n      t,\n      toggleButtonLabel,\n      toggleButtonA11y,\n      menu,\n      onNewWindowClick,\n      footerExpanded,\n      toggleFooter\n    ]);\n\n    return (\n      <Flex as={StyledFooterContent} container={{ direction: 'column' }}>\n        <Header\n          tabs={tabs}\n          onTabClick={handleTabChange}\n          onContinueDebug={onContinueDebug}\n          currentTabId={currentTabId}\n          utils={utils}\n        />\n        <Flex as={StyledToolsContent} ref={ref} container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n          {tabs.map(tab => (\n            <TabPanel\n              tabId={tab.id}\n              currentTabId={currentTabId}\n              current={currentTabId && tab.id ? currentTabId === tab.id : true}\n              key={tab.id}\n            >\n              {tab.content}\n            </TabPanel>\n          ))}\n        </Flex>\n      </Flex>\n    );\n  }\n);\nexport default Footer;\n"]}
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, MouseEvent, PropsWithoutRef, useContext, useMemo } from 'react';\n\nimport {\n  Flex,\n  ForwardProps,\n  Button,\n  Icon,\n  MenuButton,\n  useI18n,\n  registerIcon,\n  TabPanel\n} from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport Header from '../DevTools/Header';\nimport { StyledToolsContent } from '../DevTools/DevTools.styles';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\nimport { StyledFooterContent } from './PreviewShell.styles';\n\nregisterIcon(bugIcon);\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(function Footer(\n  { tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu },\n  ref: FooterProps['ref']\n) {\n  const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);\n  const t = useI18n();\n\n  const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');\n  const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);\n\n  const handleTabChange = (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    if (!footerExpanded) {\n      toggleFooter(true);\n    }\n    onTabClick(id, e);\n  };\n\n  const utils = useMemo(() => {\n    return (\n      <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n        {menu && (\n          <MenuButton text={t('more_options')} variant='simple' icon='more' iconOnly menu={menu} />\n        )}\n        {onNewWindowClick && (\n          <Button\n            variant='simple'\n            label={t('open_in_new_window_text')}\n            icon\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              if (footerExpanded) {\n                toggleFooter(prev => !prev);\n              }\n              onNewWindowClick(e);\n            }}\n          >\n            <Icon name='open' />\n          </Button>\n        )}\n        <Button\n          variant='simple'\n          icon\n          aria-expanded={footerExpanded}\n          label={toggleButtonLabel}\n          aria-label={toggleButtonA11y}\n          onClick={() => toggleFooter(prev => !prev)}\n        >\n          <Icon name={footerExpanded ? 'caret-down' : 'caret-up'} />\n        </Button>\n      </Flex>\n    );\n  }, [\n    t,\n    toggleButtonLabel,\n    toggleButtonA11y,\n    menu,\n    onNewWindowClick,\n    footerExpanded,\n    toggleFooter\n  ]);\n\n  return (\n    <Flex as={StyledFooterContent} container={{ direction: 'column' }}>\n      <Header\n        tabs={tabs}\n        onTabClick={handleTabChange}\n        onContinueDebug={onContinueDebug}\n        currentTabId={currentTabId}\n        utils={utils}\n      />\n      <Flex as={StyledToolsContent} ref={ref} container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel\n            tabId={tab.id}\n            currentTabId={currentTabId}\n            current={currentTabId && tab.id ? currentTabId === tab.id : true}\n            key={tab.id}\n          >\n            {tab.content}\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n});\nexport default Footer;\n"]}

package/lib/components/PreviewShell/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAAoC,MAAM,yBAAyB,CAAC;AAI/F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CAgD1C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAAoC,MAAM,yBAAyB,CAAC;AAI/F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CA8CzC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Header.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Flex, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';
 import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
 import { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';
-const Header = forwardRef(({ appName, onClick, href, status, operator, channels, onChannelClick }, ref) => {
+const Header = forwardRef(function Header({ appName, onClick, href, status, operator, channels, onChannelClick }, ref) {
     const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];
     return (_jsxs(Flex, { as: StyledHeader, container: { justify: 'between', alignItems: 'center' }, ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(StyledTitle, { onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBareButton : Text, children: appName }), status && _jsx(Status, { variant: status.variant, children: status.children }), channels && (_jsx(MenuButton, { text: selectedChannel.primary, icon: selectedChannel.icon, showIcon: true, menu: {
                             mode: 'single-select',

package/lib/components/PreviewShell/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpG,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EACE,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACe,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAErD,OAAO,GACI,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,EACrE,QAAQ,IAAI,CACX,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,OAAO,EAC7B,IAAI,EAAE,eAAe,CAAC,IAAI,EAC1B,QAAQ,QACR,IAAI,EAAE;4BACJ,IAAI,EAAE,eAAe;4BACrB,KAAK,EAAE,QAAQ;4BACf,WAAW,EAAE,cAAc;yBAC5B,GACD,CACH,IACI,EACP,KAAC,QAAQ,IACP,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAEtC,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,IACN,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\n\nimport { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';\nimport { HeaderProps } from './PreviewShell.types';\n\nconst Header: FC<HeaderProps & ForwardProps> = forwardRef(\n  (\n    {\n      appName,\n      onClick,\n      href,\n      status,\n      operator,\n      channels,\n      onChannelClick\n    }: PropsWithoutRef<HeaderProps>,\n    ref: HeaderProps['ref']\n  ) => {\n    const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];\n    return (\n      <Flex as={StyledHeader} container={{ justify: 'between', alignItems: 'center' }} ref={ref}>\n        <Flex container={{ alignItems: 'center', gap: 1 }}>\n          <StyledTitle\n            onClick={onClick}\n            href={href}\n            forwardedAs={onClick || href ? StyledBareButton : Text}\n          >\n            {appName}\n          </StyledTitle>\n          {status && <Status variant={status.variant}>{status.children}</Status>}\n          {channels && (\n            <MenuButton\n              text={selectedChannel.primary}\n              icon={selectedChannel.icon}\n              showIcon\n              menu={{\n                mode: 'single-select',\n                items: channels,\n                onItemClick: onChannelClick\n              }}\n            />\n          )}\n        </Flex>\n        <Operator\n          as={StyledOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          <Avatar {...operator.avatar} />\n        </Operator>\n      </Flex>\n    );\n  }\n);\n\nexport default Header;\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/F,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpG,MAAM,MAAM,GAAmC,UAAU,CAAC,SAAS,MAAM,CACvE,EACE,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EACe,EAC/B,GAAuB;IAEvB,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAErD,OAAO,GACI,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,EACrE,QAAQ,IAAI,CACX,KAAC,UAAU,IACT,IAAI,EAAE,eAAe,CAAC,OAAO,EAC7B,IAAI,EAAE,eAAe,CAAC,IAAI,EAC1B,QAAQ,QACR,IAAI,EAAE;4BACJ,IAAI,EAAE,eAAe;4BACrB,KAAK,EAAE,QAAQ;4BACf,WAAW,EAAE,cAAc;yBAC5B,GACD,CACH,IACI,EACP,KAAC,QAAQ,IACP,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAEtC,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,IACN,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\n\nimport { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';\nimport { HeaderProps } from './PreviewShell.types';\n\nconst Header: FC<HeaderProps & ForwardProps> = forwardRef(function Header(\n  {\n    appName,\n    onClick,\n    href,\n    status,\n    operator,\n    channels,\n    onChannelClick\n  }: PropsWithoutRef<HeaderProps>,\n  ref: HeaderProps['ref']\n) {\n  const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];\n  return (\n    <Flex as={StyledHeader} container={{ justify: 'between', alignItems: 'center' }} ref={ref}>\n      <Flex container={{ alignItems: 'center', gap: 1 }}>\n        <StyledTitle\n          onClick={onClick}\n          href={href}\n          forwardedAs={onClick || href ? StyledBareButton : Text}\n        >\n          {appName}\n        </StyledTitle>\n        {status && <Status variant={status.variant}>{status.children}</Status>}\n        {channels && (\n          <MenuButton\n            text={selectedChannel.primary}\n            icon={selectedChannel.icon}\n            showIcon\n            menu={{\n              mode: 'single-select',\n              items: channels,\n              onItemClick: onChannelClick\n            }}\n          />\n        )}\n      </Flex>\n      <Operator\n        as={StyledOperator}\n        actions={operator.actions}\n        popover={{ placement: 'bottom-start' }}\n      >\n        <Avatar {...operator.avatar} />\n      </Operator>\n    </Flex>\n  );\n});\n\nexport default Header;\n"]}

package/lib/components/PreviewShell/PreviewShell.js

@@ -5,7 +5,7 @@ import { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell
 import Header from './Header';
 import PreviewShellContext from './PreviewShellContext';
 import Footer from './Footer';
-const PreviewShell = forwardRef(({ header, children, footer }, ref) => {
+const PreviewShell = forwardRef(function PreviewShell({ header, children, footer }, ref) {
     const [expanded, setExpanded] = useState(!!footer?.expanded);
     const t = useI18n();
     useEffect(() => {

package/lib/components/PreviewShell/PreviewShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EAEP,SAAS,EACT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAsC,EAChE,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAA4B,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;gBAC9B,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;oBAC5B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;QAEF,IAAI,MAAM,EAAE;YACV,cAAc,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBACxC,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC;oBACzB,QAAQ,EAAE,QAAQ;iBACnB;aACF,CAAC,CAAC;SACJ;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,WAAW;SAC1B,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,YACtD,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YAChE,QAAQ,GACc,GACd,EACb,KAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAEnC,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,GAClB,IACY,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  FunctionComponent,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  useI18n,\n  SkipLinksProps,\n  SkipLinks,\n  ExpandCollapse\n} from '@pega/cosmos-react-core';\n\nimport { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\nimport PreviewShellContext from './PreviewShellContext';\nimport Footer from './Footer';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n  (\n    { header, children, footer }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) => {\n    const [expanded, setExpanded] = useState(!!footer?.expanded);\n    const t = useI18n();\n\n    useEffect(() => {\n      setExpanded(!!footer?.expanded);\n    }, [footer?.expanded]);\n\n    const skipLinks: SkipLinksProps['items'] = useMemo(() => {\n      const skipLinksItems = [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        }\n      ];\n\n      if (footer) {\n        skipLinksItems.push({\n          label: t('go_to_noun', [t('dev_tools')]),\n          target: {\n            ariaLabel: t('dev_tools'),\n            selector: 'footer'\n          }\n        });\n      }\n      return skipLinksItems;\n    }, [t, header?.channels]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerExpanded: expanded,\n            toggleFooter: setExpanded\n          }),\n          [expanded]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        {header && <Header {...header} />}\n        <StyledMain ref={ref} footer={!!footer} header={!!header}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            {children}\n          </StyledPreviewContainer>\n        </StyledMain>\n        <ExpandCollapse\n          as={StyledFooter}\n          min={footer ? '2.5rem' : '0rem'}\n          max='50vh'\n          collapsed={footer ? !expanded : true}\n        >\n          {footer && <Footer {...footer} />}\n        </ExpandCollapse>\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}
+{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EAEP,SAAS,EACT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAsC,EAChE,GAA6B;IAE7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAA4B,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;gBAC9B,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;oBAC5B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;QAEF,IAAI,MAAM,EAAE;YACV,cAAc,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBACxC,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC;oBACzB,QAAQ,EAAE,QAAQ;iBACnB;aACF,CAAC,CAAC;SACJ;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,WAAW;SAC1B,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,YACtD,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YAChE,QAAQ,GACc,GACd,EACb,KAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,YAEnC,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,GAClB,IACY,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  PropsWithoutRef,\n  FunctionComponent,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  useI18n,\n  SkipLinksProps,\n  SkipLinks,\n  ExpandCollapse\n} from '@pega/cosmos-react-core';\n\nimport { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\nimport PreviewShellContext from './PreviewShellContext';\nimport Footer from './Footer';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n  function PreviewShell(\n    { header, children, footer }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) {\n    const [expanded, setExpanded] = useState(!!footer?.expanded);\n    const t = useI18n();\n\n    useEffect(() => {\n      setExpanded(!!footer?.expanded);\n    }, [footer?.expanded]);\n\n    const skipLinks: SkipLinksProps['items'] = useMemo(() => {\n      const skipLinksItems = [\n        {\n          label: t('go_to_main_content'),\n          target: {\n            ariaLabel: t('main_content'),\n            selector: 'main'\n          }\n        }\n      ];\n\n      if (footer) {\n        skipLinksItems.push({\n          label: t('go_to_noun', [t('dev_tools')]),\n          target: {\n            ariaLabel: t('dev_tools'),\n            selector: 'footer'\n          }\n        });\n      }\n      return skipLinksItems;\n    }, [t, header?.channels]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerExpanded: expanded,\n            toggleFooter: setExpanded\n          }),\n          [expanded]\n        )}\n      >\n        <SkipLinks items={skipLinks} />\n        {header && <Header {...header} />}\n        <StyledMain ref={ref} footer={!!footer} header={!!header}>\n          <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n            {children}\n          </StyledPreviewContainer>\n        </StyledMain>\n        <ExpandCollapse\n          as={StyledFooter}\n          min={footer ? '2.5rem' : '0rem'}\n          max='50vh'\n          collapsed={footer ? !expanded : true}\n        >\n          {footer && <Footer {...footer} />}\n        </ExpandCollapse>\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-tools",
-  "version": "4.0.0-dev.23.1",
+  "version": "4.0.0-dev.24.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
@@ -20,7 +20,7 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.23.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.24.1",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",