npm - @pega/cosmos-react-tools - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.21.0 - Mend

@pega/cosmos-react-tools 4.0.0-dev.2.0 → 4.0.0-dev.21.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 (52) hide show

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

	@@ -1 +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;~~AA6D7E~~,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAyB/D,CAAC;AACF,eAAe,SAAS,CAAC"}
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"}

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

@@ -3,7 +3,7 @@ import { forwardRef, useMemo, useEffect, useRef } from 'react';
 import { Button, Flex, MetaList, Progress, StandardTree, SummaryItem, Text, Table, useI18n, EmptyState } from '@pega/cosmos-react-core';
 import { StyledClipboardFooter, StyledContainer, StyledContent, StyledMain, StyledTitle, StyledTreeContainer } from './Clipboard.styles';
 const FieldRenderer = (cell) => {
-    return (_jsx(_Fragment, { children: cell.onClick ? (_jsx(Button, { variant: 'link', onClick: (e) => cell.onClick?.(cell.id, e), children: cell.name })) : (cell.name) }));
+    return cell.onClick ? (_jsx(Button, { variant: 'link', onClick: (e) => cell.onClick?.(cell.id, e), children: cell.name })) : (_jsx(_Fragment, { children: cell.name }));
 };
 const FieldSummary = ({ primary, secondary, fields, actions }) => {
     const headingRef = useRef(null);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EAEP,SAAS,EACT,MAAM,EACP,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,UAAU,EACV,WAAW,EACX,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,aAAa,GAAc,CAAC,IAAW,EAAE,EAAE;IAC/C,OAAO,~~CACL,4BACG,~~IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,~~CACd~~,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,YAC1E,IAAI,CAAC,IAAI,GACH,CACV,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,IAAI,~~CACV~~,~~GACA~~,~~CACJ,~~CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAA0B,CAAC,EAC3C,OAAO,EACP,SAAS,EACT,MAAM,EACN,OAAO,EACW,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC;IAE/E,MAAM,OAAO,GAAyB;QACpC;YACE,QAAQ,EAAE,aAAa;YACvB,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC;SAC1C;QACD,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,+BAA+B,CAAC,EAAE;KACjE,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAEjD,OAAO,CACL,8BACE,KAAC,WAAW,IACV,OAAO,EACL,KAAC,WAAW,IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAC,IAAI,EAAC,GAAG,EAAE,UAAU,YACpD,OAAO,GACI,EAEhB,SAAS,EAAE,aAAa,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,GAAI,EAC9D,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,KAAK,IAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAI,IACxD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAqD,UAAU,CAC5E,CACE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAmC,EACrE,GAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAC,YAAY,OAAK,UAAU,GAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACrE,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,mBAC7B,KAAC,mBAAmB,cAAE,UAAU,GAAuB,EACvD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,aAClF,CAAC,OAAO,IAAI,KAAC,UAAU,KAAG,EAC1B,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,EACnF,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,KAAC,YAAY,OAAK,OAAO,GAAI,IACxD,IACF,EAEP,KAAC,IAAI,IAAC,EAAE,EAAE,qBAAqB,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACjE,WAAW,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,GAAQ,GACzD,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,SAAS,CAAC","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 ~~(\n <>\n {~~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 );\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"]}
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"]}

package/lib/components/Clipboard/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './Clipboard';
-export { ClipboardProps, FieldSummaryProps } from './Clipboard.types';
+export type { ClipboardProps, FieldSummaryProps } from './Clipboard.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Clipboard/index.d.ts.map CHANGED Viewed

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

package/lib/components/Clipboard/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './Clipboard';\nexport { ClipboardProps, FieldSummaryProps } from './Clipboard.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './Clipboard';\nexport type { ClipboardProps, FieldSummaryProps } from './Clipboard.types';\n"]}

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

	@@ -1 +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,~~EAAE~~,YAAY,~~EAAgB~~,MAAM,yBAAyB,CAAC;~~AAIrE~~,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;~~AAMjD~~,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,~~CAkB~~/D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
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"}

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

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { registerIcon } from '@pega/cosmos-react-core';
+import { Flex, registerIcon, TabPanel } from '@pega/cosmos-react-core';
 import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
-import { StyledDevTools } from './DevTools.styles';
+import { StyledDevTools, StyledToolsContent } from './DevTools.styles';
 import Header from './Header';
-import Content from './Content';
 registerIcon(bugIcon);
-const DevTools = forwardRef(({ tabs, currentTabId, onTabClick, onContinueDebug, tabContent, utils }, ref) => {
-    return (_jsxs(StyledDevTools, { ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Content, { tabContent: tabContent, currentTabId: currentTabId })] }));
+const DevTools = forwardRef(({ 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;
 //# sourceMappingURL=DevTools.js.map

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

	@@ -1 +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,EAAgB,YAAY,EAAE,MAAM,yBAAyB,CAAC;~~AACrE~~,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;~~AAEnD~~,OAAO,MAAM,MAAM,UAAU,CAAC;~~AAC9B~~,~~OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,~~YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,QAAQ,GAAsD,UAAU,CAC5E,~~CACE~~,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,~~UAAU~~,EAAE,~~KAAK,~~EAAE,~~EACtE,~~GAAyB,~~EACzB~~,EAAE;~~IACF~~,OAAO,CACL,MAAC,~~cAAc~~,IAAC,GAAG,EAAE,GAAG,~~aACtB~~,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,~~OAAO~~,IAAC,~~UAAU~~,EAAE,~~UAAU~~,EAAE,YAAY,EAAE,YAAY,~~GAAI~~,~~IAChD~~,~~CAClB~~,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { ForwardProps, registerIcon } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledDevTools } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\nimport Header from './Header';\~~nimport Content from './Content';\~~n\nregisterIcon(bugIcon);\n\nconst DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>> = forwardRef(\n (\n { tabs, currentTabId, onTabClick, onContinueDebug, ~~tabContent,~~ utils }~~,\n~~ ref: DevToolsProps['ref']\n ) => {\n return (\n <StyledDevTools ref={ref}>\n <Header\n tabs={tabs}\n onTabClick={onTabClick}\n onContinueDebug={onContinueDebug}\n currentTabId={currentTabId}\n utils={utils}\n />\n <~~Content~~ ~~tabContent~~={~~tabContent~~} currentTabId={currentTabId} ~~/>\~~n </~~StyledDevTools~~>\n );\n }\n);\n\nexport default DevTools;\n"]}
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"]}

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

@@ -1,6 +1,6 @@
 import { DevToolsProps } from './DevTools.types';
 export declare const StyledDevTools: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DevToolsProps>, never>;
 export declare const StyledTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledToolsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DevToolsProps>, never>;
+export declare const StyledToolsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=DevTools.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DevTools.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,6HAMzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAuB9B,CAAC;AAIF,eAAO,MAAM,kBAAkB,~~6HAiB9B~~,CAAC;~~AAIF~~,eAAO,MAAM,UAAU,mOAGtB,CAAC"}
1	+ {"version":3,"file":"DevTools.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,6HAMzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAuB9B,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,eAAO,MAAM,UAAU,mOAGtB,CAAC"}

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

@@ -29,19 +29,15 @@ export const StyledTabContainer = styled.div(({ theme: { base: { palette } } })
     `;
 });
 StyledTabContainer.defaultProps = defaultThemeProp;
-export const StyledToolsContent = styled.div(({ theme: { base: { palette } } }) => {
-    return css `
-      height: calc(100% - 2.5rem);
-      padding: 0;
-      overflow: auto;
-      background-color: ${palette['primary-background']};
+export const StyledToolsContent = styled.div `
+  padding: 0;
+  overflow: auto;
-      ${StyledTabPanel} {
-        width: 100%;
-      }
-    `;
-});
-StyledToolsContent.defaultProps = defaultThemeProp;
+  ${StyledTabPanel} {
+    width: 100%;
+    height: 100%;
+  }
+`;
 export const StyledIcon = styled(Icon) `
   height: 100%;
   width: 1.5em;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DevTools.styles.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAI9E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oCAEsB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;0BAEnC,OAAO,CAAC,oBAAoB,CAAC;;UAE7C,UAAU;;;;;;;;KAQf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,~~CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,~~CAAA;;;;~~0BAIY~~,~~OAAO,CAAC,oBAAoB,CAAC;;QAE/C,~~cAAc~~;;;KAGjB~~,CAAC;~~AACJ,CAAC,CACF,CAAC;~~AAEF,~~kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,~~MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGrC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Icon } from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { DevToolsProps } from './DevTools.types';\n\nexport const StyledDevTools = styled.div<Partial<DevToolsProps>>(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n overflow: hidden;\n height: 100vh;\n `;\n});\n\nStyledDevTools.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 2.5rem;\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\n text-decoration: none;\n background-color: ${palette['primary-background']};\n\n & ${StyledTabs} {\n height: 100%;\n border-bottom: none;\n\n button {\n height: 100%;\n }\n }\n `;\n }\n);\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContent = styled.div~~<Partial<DevToolsProps>>(\~~n ~~({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: calc(100% - 2.5rem);\n~~ padding: 0;\n overflow: auto;\n ~~background-color: ${palette['primary-background']};\n~~\n ${StyledTabPanel} {\n width: 100%;\n ~~}\n~~ ~~`;\~~n }\n~~);\~~n\~~nStyledToolsContent.defaultProps = defaultThemeProp;\n\~~nexport const StyledIcon = styled(Icon)`\n height: 100%;\n width: 1.5em;\n`;\n"]}
1	+ {"version":3,"file":"DevTools.styles.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAI9E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oCAEsB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;0BAEnC,OAAO,CAAC,oBAAoB,CAAC;;UAE7C,UAAU;;;;;;;;KAQf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAIxC,cAAc;;;;CAIjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGrC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Icon } from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { DevToolsProps } from './DevTools.types';\n\nexport const StyledDevTools = styled.div<Partial<DevToolsProps>>(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n overflow: hidden;\n height: 100vh;\n `;\n});\n\nStyledDevTools.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 2.5rem;\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\n text-decoration: none;\n background-color: ${palette['primary-background']};\n\n & ${StyledTabs} {\n height: 100%;\n border-bottom: none;\n\n button {\n height: 100%;\n }\n }\n `;\n }\n);\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContent = styled.div`\n padding: 0;\n overflow: auto;\n\n ${StyledTabPanel} {\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const StyledIcon = styled(Icon)`\n height: 100%;\n width: 1.5em;\n`;\n"]}

package/lib/components/DevTools/DevTools.types.d.ts CHANGED Viewed

@@ -2,11 +2,9 @@ import { ReactNode, Ref, MouseEvent } from 'react';
 import { BaseProps, Tab, TabsProps } from '@pega/cosmos-react-core';
 export interface DevToolsProps extends BaseProps {
     /** An array of Tab data used to render the individual footer tabs. */
-    tabs: Tab[];
+    tabs: DevToolsTab[];
     /** ID for making the corresponding tab active */
     currentTabId: TabsProps['currentTabId'];
-    /**  Content for the tabs.  */
-    tabContent: ReactNode;
     /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */
     onTabClick: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /** Callback to shift the focus to the newly opened window. */
@@ -16,4 +14,8 @@ export interface DevToolsProps extends BaseProps {
     /** Ref for the footer */
     ref?: Ref<HTMLDivElement>;
 }
+export interface DevToolsTab extends Tab {
+    /** Content for the tabs. */
+    content: ReactNode;
+}
 //# sourceMappingURL=DevTools.types.d.ts.map

package/lib/components/DevTools/DevTools.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevTools.types.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,sEAAsE;IACtE,IAAI,EAAE,~~GAAG~~,EAAE,CAAC;~~IACZ~~,iDAAiD;IACjD,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,~~8BAA8B;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,~~uGAAuG;IACvG,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACxF,8DAA8D;IAC9D,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
1	+ {"version":3,"file":"DevTools.types.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,sEAAsE;IACtE,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,uGAAuG;IACvG,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACxF,8DAA8D;IAC9D,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,GAAG;IACtC,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;CACpB"}

package/lib/components/DevTools/DevTools.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevTools.types.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref, MouseEvent } from 'react';\n\nimport { BaseProps, Tab, TabsProps } from '@pega/cosmos-react-core';\n\nexport interface DevToolsProps extends BaseProps {\n /** An array of Tab data used to render the individual footer tabs. /\n tabs: ~~Tab~~[];\n /* ID for making the corresponding tab active /\n currentTabId: TabsProps['currentTabId'];\n /* ~~Content~~ for the tabs. /\n tabContent: ReactNode;\n /* Callback triggered every time a new tab is clicked and returns an id as well as the click event. /\n onTabClick: (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n /* Callback to shift the focus to the newly opened window. /\n onContinueDebug?: (e?: MouseEvent<HTMLButtonElement>) => void;\n /* Actions on the tools header /\n utils?: ReactNode;\n /* Ref for the footer */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1	+ {"version":3,"file":"DevTools.types.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref, MouseEvent } from 'react';\n\nimport { BaseProps, Tab, TabsProps } from '@pega/cosmos-react-core';\n\nexport interface DevToolsProps extends BaseProps {\n /** An array of Tab data used to render the individual footer tabs. /\n tabs: DevToolsTab[];\n /* ID for making the corresponding tab active /\n currentTabId: TabsProps['currentTabId'];\n /* Callback triggered every time a new tab is clicked and returns an id as well as the click event. /\n onTabClick: (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void;\n /* Callback to shift the focus to the newly opened window. /\n onContinueDebug?: (e?: MouseEvent<HTMLButtonElement>) => void;\n /* Actions on the tools header /\n utils?: ReactNode;\n /* Ref for the footer /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DevToolsTab extends Tab {\n /* Content for the tabs. */\n content: ReactNode;\n}\n"]}

package/lib/components/DevTools/Header.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,WACR,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,iBAAiB,CAAC;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,~~CAgC3B~~,CAAC;AACF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,WACR,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,iBAAiB,CAAC;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAiC3B,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/DevTools/Header.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { StyledTabContainer, StyledIcon } from './DevTools.styles';
 registerIcon(bugIcon);
 const Header = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {
     const t = useI18n();
-    return (_jsxs(Flex, { as: StyledTabContainer, container: { justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }, children: [_jsx(Flex, { container: { pad: [0, 1], alignItems: 'center' }, children: _jsx(StyledIcon, { name: 'bug' }) }), onContinueDebug ? (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { variant: 'secondary', children: t('active_session_info') }), _jsx(Button, { variant: 'link', onClick: onContinueDebug, children: t('continue_debugging') })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: onTabClick }), utils] }))] }));
+    return (_jsxs(Flex, { as: StyledTabContainer, item: { shrink: 0 }, container: { justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }, children: [_jsx(Flex, { container: { pad: [0, 1], alignItems: 'center' }, children: _jsx(StyledIcon, { name: 'bug' }) }), onContinueDebug ? (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { variant: 'secondary', children: t('active_session_info') }), _jsx(Button, { variant: 'link', onClick: onContinueDebug, children: t('continue_debugging') })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: onTabClick }), utils] }))] }));
 };
 export default Header;
 //# sourceMappingURL=Header.js.map

package/lib/components/DevTools/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGnE,YAAY,CAAC,OAAO,CAAC,CAAC;AAOtB,MAAM,MAAM,GAAoB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAEnF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpD,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,GACpB,EACN,eAAe,CAAC,CAAC,CAAC,CACjB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,qBAAqB,CAAC,GAAQ,EAC3D,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,YAC5C,CAAC,CAAC,oBAAoB,CAAC,GACjB,IACJ,CACR,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,EACD,KAAK,IACL,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\n\nimport { Flex, Button, Tabs, Text, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledTabContainer, StyledIcon } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface HeaderProps\n extends Pick<DevToolsProps, 'tabs' \| 'currentTabId' \| 'onTabClick' \| 'onContinueDebug'> {\n utils?: ReactNode;\n}\n\nconst Header: FC<HeaderProps> = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {\n const t = useI18n();\n\n return (\n <Flex\n as={StyledTabContainer}\n container={{ justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }}\n >\n <Flex container={{ pad: [0, 1], alignItems: 'center' }}>\n <StyledIcon name='bug' />\n </Flex>\n {onContinueDebug ? (\n <Flex container={{ gap: 1 }}>\n <Text variant='secondary'>{t('active_session_info')}</Text>\n <Button variant='link' onClick={onContinueDebug}>\n {t('continue_debugging')}\n </Button>\n </Flex>\n ) : (\n <>\n <Flex\n item={{ grow: 1 }}\n as={Tabs}\n tabs={tabs}\n currentTabId={currentTabId}\n onTabClick={onTabClick}\n />\n {utils}\n </>\n )}\n </Flex>\n );\n};\nexport default Header;\n"]}
1	+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGnE,YAAY,CAAC,OAAO,CAAC,CAAC;AAOtB,MAAM,MAAM,GAAoB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,SAAS,EAAE,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAEnF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpD,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,GACpB,EACN,eAAe,CAAC,CAAC,CAAC,CACjB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,qBAAqB,CAAC,GAAQ,EAC3D,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,YAC5C,CAAC,CAAC,oBAAoB,CAAC,GACjB,IACJ,CACR,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,EACD,KAAK,IACL,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\n\nimport { Flex, Button, Tabs, Text, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledTabContainer, StyledIcon } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface HeaderProps\n extends Pick<DevToolsProps, 'tabs' \| 'currentTabId' \| 'onTabClick' \| 'onContinueDebug'> {\n utils?: ReactNode;\n}\n\nconst Header: FC<HeaderProps> = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {\n const t = useI18n();\n\n return (\n <Flex\n as={StyledTabContainer}\n item={{ shrink: 0 }}\n container={{ justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }}\n >\n <Flex container={{ pad: [0, 1], alignItems: 'center' }}>\n <StyledIcon name='bug' />\n </Flex>\n {onContinueDebug ? (\n <Flex container={{ gap: 1 }}>\n <Text variant='secondary'>{t('active_session_info')}</Text>\n <Button variant='link' onClick={onContinueDebug}>\n {t('continue_debugging')}\n </Button>\n </Flex>\n ) : (\n <>\n <Flex\n item={{ grow: 1 }}\n as={Tabs}\n tabs={tabs}\n currentTabId={currentTabId}\n onTabClick={onTabClick}\n />\n {utils}\n </>\n )}\n </Flex>\n );\n};\nexport default Header;\n"]}

package/lib/components/DevTools/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './DevTools';
-export { DevToolsProps } from './DevTools.types';
+export type { DevToolsProps } from './DevTools.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/DevTools/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,~~OAAO~~,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/DevTools/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './DevTools';\nexport { DevToolsProps } from './DevTools.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './DevTools';\nexport type { DevToolsProps } from './DevTools.types';\n"]}

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

	@@ -1 +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,~~EAMb~~,MAAM,yBAAyB,CAAC;~~AASjC~~,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,~~CAkF3D~~,CAAC;AACF,eAAe,MAAM,CAAC"}
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"}

package/lib/components/PreviewShell/Footer.js CHANGED Viewed

@@ -1,38 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useMemo } from 'react';
-import { Flex, Button, Icon, MenuButton, useI18n, registerIcon } from '@pega/cosmos-react-core';
-import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import { Flex, Button, Icon, MenuButton, useI18n, registerIcon, TabPanel } from '@pega/cosmos-react-core';
 import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
 import Header from '../DevTools/Header';
-import Content from '../DevTools/Content';
+import { StyledToolsContent } from '../DevTools/DevTools.styles';
 import PreviewShellContext from './PreviewShellContext';
-import { footerExpanded } from './utils';
-import { StyledFooter } from './PreviewShell.styles';
+import { StyledFooterContent } from './PreviewShell.styles';
 registerIcon(bugIcon);
-const Footer = forwardRef(({ tabs, currentTabId, tabContent, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
-    const { footerState, toggleFooter } = useContext(PreviewShellContext);
+const Footer = forwardRef(({ tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
+    const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);
     const t = useI18n();
-    const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');
-    const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_noun' : 'expand_noun', [
-        t('dev_tools')
-    ]);
+    const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');
+    const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);
     const handleTabChange = (id, e) => {
-        if (!footerExpanded(footerState)) {
-            toggleFooter();
+        if (!footerExpanded) {
+            toggleFooter(true);
         }
         onTabClick(id, e);
     };
     const utils = useMemo(() => {
         return (_jsxs(Flex, { container: { alignItems: 'center', pad: [0, 2] }, children: [menu && (_jsx(MenuButton, { text: t('more_options'), variant: 'simple', icon: 'more', iconOnly: true, menu: menu })), onNewWindowClick && (_jsx(Button, { variant: 'simple', label: t('open_in_new_window_text'), icon: true, onClick: (e) => {
-                        if (footerExpanded(footerState)) {
-                            toggleFooter();
+                        if (footerExpanded) {
+                            toggleFooter(prev => !prev);
                         }
                         onNewWindowClick(e);
-                    }, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded(footerState), label: footerState === expandCollapseStates.high || footerState === expandCollapseStates.low
-                        ? toggleButtonLabel
-                        : undefined, "aria-label": toggleButtonA11y, onClick: toggleFooter, children: _jsx(Icon, { name: footerExpanded(footerState) ? 'caret-down' : 'caret-up' }) })] }));
-    }, [t, toggleButtonLabel, toggleButtonA11y, menu, onNewWindowClick, footerState, toggleFooter]);
-    return (_jsxs(StyledFooter, { children: [_jsx(Header, { tabs: tabs, onTabClick: handleTabChange, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Content, { tabContent: footerState !== expandCollapseStates.low ? tabContent : undefined, currentTabId: currentTabId, ref: ref })] }));
+                    }, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded, label: toggleButtonLabel, "aria-label": toggleButtonA11y, onClick: () => toggleFooter(prev => !prev), children: _jsx(Icon, { name: footerExpanded ? 'caret-down' : 'caret-up' }) })] }));
+    }, [
+        t,
+        toggleButtonLabel,
+        toggleButtonA11y,
+        menu,
+        onNewWindowClick,
+        footerExpanded,
+        toggleFooter
+    ]);
+    return (_jsxs(Flex, { as: StyledFooterContent, container: { direction: 'column' }, children: [_jsx(Header, { tabs: tabs, onTabClick: handleTabChange, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Flex, { as: StyledToolsContent, ref: ref, container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, current: currentTabId && tab.id ? currentTabId === tab.id : true, children: tab.content }, tab.id))) })] }));
 });
 export default Footer;
 //# sourceMappingURL=Footer.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAA+B,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,EACL,IAAI,EAEJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,~~EACb~~,MAAM,yBAAyB,CAAC;AACjC,OAAO,~~EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,~~KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,~~OAAO~~,MAAM,~~qBAAqB~~,CAAC;~~AAE1C~~,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;~~AACxD~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~SAAS,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,~~uBAAuB,CAAC;~~AAErD~~,YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,MAAM,GAAoD,UAAU,CACxE,CACE,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,~~UAAU,EAAE,~~gBAAgB,EAAE,eAAe,EAAE,IAAI,EAAE,~~EACvF~~,GAAuB,EACvB,EAAE;IACF,MAAM,EAAE,~~WAAW~~,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;~~IACtE~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,CAAC,cAAc,CAAC,~~WAAW,~~CAAC,CAAC,~~CAAC,CAAC,~~UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;~~IACjF~~,MAAM,gBAAgB,GAAG,CAAC,CAAC,cAAc,CAAC,~~WAAW,~~CAAC,CAAC,~~CAAC,CAAC,~~eAAe,CAAC,CAAC,CAAC,aAAa,EAAE~~;QACxF~~,CAAC,CAAC,WAAW,CAAC~~;KACf~~,CAAC,CAAC;~~IAEH~~,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,CAAqD,EAAE,EAAE;QAC5F,IAAI,CAAC,cAAc,~~CAAC,WAAW,CAAC,~~EAAE;~~YAChC~~,YAAY,~~EAAE~~,CAAC;~~SAChB~~;QACD,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,aACnD,IAAI,IAAI,CACP,KAAC,UAAU,IACT,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC,EACvB,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE,IAAI,GACV,CACH,EACA,gBAAgB,IAAI,CACnB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,yBAAyB,CAAC,EACnC,IAAI,QACJ,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,IAAI,cAAc,CAAC,~~WAAW~~,CAAC,EAAE~~;4BAC/B~~,~~YAAY~~,~~EAAE~~,CAAC;~~yBAChB~~;wBACD,gBAAgB,CAAC,CAAC,CAAC,CAAC;oBACtB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,EACD,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,yBACW,cAAc,~~CAAC~~,~~WAAW,CAAC,EAC1C,~~KAAK,~~EACH~~,~~WAAW~~,~~KAAK~~,~~oBAAoB~~,~~CAAC~~,~~IAAI~~,~~IAAI~~,~~WAAW~~,~~KAAK~~,~~oBAAoB,~~CAAC,~~GAAG;wBACnF~~,CAAC,CAAC,~~iBAAiB;wBACnB~~,CAAC,CAAC,~~SAAS~~,~~gBAEH~~,~~gBAAgB~~,~~EAC5B,OAAO,EAAE,YAAY,YAErB,~~KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,CAAC,~~WAAW,~~CAAC,CAAC,~~CAAC,CAAC,~~YAAY,CAAC,CAAC,CAAC,UAAU,GAAI,~~GAChE~~,IACJ,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,~~CAAC,EAAE,~~iBAAiB,~~EAAE,~~gBAAgB,~~EAAE,~~IAAI,~~EAAE,~~gBAAgB,~~EAAE~~,~~WAAW,EAAE,~~YAAY,CAAC,CAAC~~,CAAC~~;~~IAEhG~~,OAAO,CACL,MAAC,~~YAAY~~,~~eACX~~,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,EACF,KAAC,~~OAAO~~,~~IACN~~,~~UAAU~~,EAAE,~~WAAW~~,~~KAAK~~,~~oBAAoB~~,~~CAAC~~,GAAG,CAAC,CAAC,CAAC,~~UAAU~~,CAAC,CAAC,CAAC,~~SAAS~~,~~EAC7E~~,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,~~GACR~~,~~IACW~~,~~CAChB~~,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,MAAM,CAAC","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} from '@pega/cosmos-react-core';\nimport ~~{ expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport~~ * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport Header from '../DevTools/Header';\nimport ~~Content~~ from '../DevTools/~~Content~~';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport { ~~footerExpanded } from './utils';\nimport {~~ FooterProps } from './PreviewShell.types';\nimport { ~~StyledFooter~~ } from './PreviewShell.styles';\n\nregisterIcon(bugIcon);\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n (\n { tabs, currentTabId, ~~tabContent,~~ onTabClick, onNewWindowClick, onContinueDebug, menu },\n ref: FooterProps['ref']\n ) => {\n const { ~~footerState~~, toggleFooter } = useContext(PreviewShellContext);\n const t = useI18n();\n\n const toggleButtonLabel = t(footerExpanded~~(footerState)~~ ? 'collapse' : 'expand');\n const toggleButtonA11y = t(footerExpanded~~(footerState)~~ ? 'collapse_noun' : 'expand_noun', [\n t('dev_tools')\n ]);\n\n const handleTabChange = (id: string, e?: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n if (!footerExpanded~~(footerState~~)) {\n toggleFooter();\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~~(footerState~~)) {\n toggleFooter();\n }\n onNewWindowClick(e);\n }}\n >\n <Icon name='open' />\n </Button>\n )}\n <Button\n variant='simple'\n icon\n aria-expanded={footerExpanded~~(footerState)~~}\n label={~~\n footerState === expandCollapseStates.high \|\| footerState === expandCollapseStates.low\n ?~~ toggleButtonLabel~~\n : undefined\n~~ }\n aria-label={toggleButtonA11y}\n onClick={toggleFooter}\n >\n <Icon name={footerExpanded~~(footerState)~~ ? 'caret-down' : 'caret-up'} />\n </Button>\n </Flex>\n );\n }, [t, toggleButtonLabel, toggleButtonA11y, menu, onNewWindowClick~~, footerState,~~ toggleFooter]);\n\n return (\n <~~StyledFooter~~>\n <Header\n tabs={tabs}\n onTabClick={handleTabChange}\n onContinueDebug={onContinueDebug}\n currentTabId={currentTabId}\n utils={utils}\n />\n <~~Content~~\n ~~tabContent~~={~~footerState~~ ~~!==~~ ~~expandCollapseStates~~.~~low~~ ? ~~tabContent~~ : ~~undefined~~}\n ~~currentTabId~~={~~currentTabId~~}\n ~~ref=~~{~~ref~~}\n ~~/>\~~n </~~StyledFooter~~>\n );\n }\n);\nexport default Footer;\n"]}
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"]}

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

	@@ -1 +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,~~EAAwB~~,MAAM,yBAAyB,CAAC;~~AAInF~~,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,~~CA2B1C~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
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"}

package/lib/components/PreviewShell/Header.js CHANGED Viewed

@@ -1,10 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Flex, Status, Avatar, Text } from '@pega/cosmos-react-core';
+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 }, ref) => {
-    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 })] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
+const Header = forwardRef(({ 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',
+                            items: channels,
+                            onItemClick: onChannelClick
+                        } }))] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
 });
 export default Header;
 //# sourceMappingURL=Header.js.map

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

	@@ -1 +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,MAAM,yBAAyB,CAAC;~~AACnF~~,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,~~EAAE~~,OAAO,~~EAAE~~,OAAO,~~EAAE~~,IAAI,~~EAAE~~,MAAM,~~EAAE~~,QAAQ,~~EAAgC~~,~~EAC1E~~,GAAuB,EACvB,EAAE;IACF,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,~~IACjE~~,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 } 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 { appName, onClick, href, status, operator }: PropsWithoutRef<HeaderProps>,\n ref: HeaderProps['ref']\n ) => {\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 </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"]}
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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAA+B~~,iBAAiB,~~EAA8B~~,MAAM,OAAO,CAAC;~~AAEnG~~,OAAO,EACL,YAAY,~~EAMb~~,MAAM,yBAAyB,CAAC;~~AAKjC~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,~~CAuFrE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+DrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,58 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useMemo } from 'react';
-import { useI18n, useTransitionState, SkipLinks, useElement } from '@pega/cosmos-react-core';
-import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
-import { StyledIframe, StyledMain, StyledPreviewContainer } from './PreviewShell.styles';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { useI18n, SkipLinks, ExpandCollapse } from '@pega/cosmos-react-core';
+import { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';
 import Header from './Header';
 import PreviewShellContext from './PreviewShellContext';
 import Footer from './Footer';
-const PreviewShell = forwardRef(({ header, frameurl, footer: { expanded, onBeforeExpand, onAfterExpand, onBeforeCollapse, onAfterCollapse, ...footerRestProps } }, ref) => {
-    const footerEl = useRef(null);
-    const [headerEl, setHeaderEl] = useElement();
+const PreviewShell = forwardRef(({ header, children, footer }, ref) => {
+    const [expanded, setExpanded] = useState(!!footer?.expanded);
     const t = useI18n();
-    const skipLinks = useMemo(() => [
-        {
-            label: t('go_to_main_content'),
-            target: {
-                ariaLabel: t('main_content'),
-                selector: 'main'
-            }
-        },
-        {
-            label: t('go_to_noun', [t('dev_tools')]),
-            target: {
-                ariaLabel: t('dev_tools'),
-                selector: 'footer'
-            }
-        }
-    ], [t]);
-    const { state: footerState, toggle: toggleFooter, set: setFooterState } = useTransitionState({
-        ref: footerEl,
-        property: 'height',
-        states: expandCollapseStates,
-        defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low
-    });
-    useEffect(() => {
-        setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);
-    }, [expanded]);
     useEffect(() => {
-        if (footerState === expandCollapseStates.rising) {
-            onBeforeExpand?.();
-        }
-        else if (footerState === expandCollapseStates.falling) {
-            onBeforeCollapse?.();
-        }
-        else if (footerState === expandCollapseStates.low) {
-            onAfterCollapse?.();
-        }
-        else {
-            onAfterExpand?.();
+        setExpanded(!!footer?.expanded);
+    }, [footer?.expanded]);
+    const skipLinks = useMemo(() => {
+        const skipLinksItems = [
+            {
+                label: t('go_to_main_content'),
+                target: {
+                    ariaLabel: t('main_content'),
+                    selector: 'main'
+                }
+            }
+        ];
+        if (footer) {
+            skipLinksItems.push({
+                label: t('go_to_noun', [t('dev_tools')]),
+                target: {
+                    ariaLabel: t('dev_tools'),
+                    selector: 'footer'
+                }
+            });
         }
-    }, [footerState]);
+        return skipLinksItems;
+    }, [t, header?.channels]);
     return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
-            footerState,
-            toggleFooter
-        }), [footerState, toggleFooter]), children: [_jsx(SkipLinks, { items: skipLinks }), header && _jsx(Header, { ...header, ref: setHeaderEl }), _jsx(StyledMain, { ref: ref, headerOffset: headerEl?.offsetHeight, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: _jsx(StyledIframe, { src: frameurl, title: t('preview_frame') }) }) }), _jsx(Footer, { ...footerRestProps, ref: footerEl })] }));
+            footerExpanded: expanded,
+            toggleFooter: setExpanded
+        }), [expanded]), children: [_jsx(SkipLinks, { items: skipLinks }), header && _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, footer: !!footer, header: !!header, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: children }) }), _jsx(ExpandCollapse, { as: StyledFooter, min: footer ? '2.5rem' : '0rem', max: '50vh', collapsed: footer ? !expanded : true, children: footer && _jsx(Footer, { ...footer }) })] }));
 });
 export default PreviewShell;
 //# sourceMappingURL=PreviewShell.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,~~EAAE~~,UAAU,~~EAAsC~~,~~MAAM,EAAE,~~SAAS,~~EAAE~~,OAAO,~~EAAE~~,MAAM,OAAO,CAAC;~~AAEnG~~,OAAO,EAEL,OAAO,~~EACP~~,~~kBAAkB,EAElB,~~SAAS,EACT,~~UAAU~~,~~EACX~~,MAAM,yBAAyB,CAAC;~~AACjC~~,OAAO,EAAE,~~oBAAoB~~,EAAE,~~MAAM~~,~~sDAAsD,CAAC;AAE5F,OAAO,~~EAAE,YAAY,EAAE,~~UAAU,EAAE,sBAAsB,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,~~EACE~~,MAAM,~~EACN~~,QAAQ,~~EACR~~,MAAM,~~EAAE~~,~~EACN~~,~~QAAQ,EACR,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,GAAG,eAAe,EACnB,EACkC,EACrC,~~GAA6B,EAC7B,EAAE;IACF,MAAM,QAAQ,~~GAAG~~,~~MAAM~~,~~CAAiB~~,~~IAAI~~,CAAC,CAAC~~;IAC9C~~,~~MAAM,~~CAAC,~~QAAQ~~,EAAE,~~WAAW~~,CAAC,~~GAAG,UAAU,EAAsB,~~CAAC;~~IACjE~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;~~IACpB~~,~~MAAM,~~SAAS,~~GAA4B~~,~~OAAO,CAChD,~~GAAG,EAAE~~,CAAC~~;~~QACJ;YACE~~,~~KAAK~~,~~EAAE,~~CAAC,CAAC,~~oBAAoB,~~CAAC~~;YAC9B~~,MAAM,EAAE~~;gBACN~~,~~SAAS~~,~~EAAE,~~CAAC,CAAC,~~cAAc,~~CAAC~~;gBAC5B~~,~~QAAQ,~~EAAE,~~MAAM;aACjB;SACF;QACD;YACE,KAAK,EAAE,~~CAAC,~~CAAC~~,~~YAAY,~~EAAE,~~CAAC~~,CAAC,CAAC,~~WAAW,~~CAAC~~,CAAC,CAAC~~;~~YACxC~~,MAAM,~~EAAE;gBACN,~~SAAS,~~EAAE~~,~~CAAC~~,CAAC,~~WAAW~~,~~CAAC~~;~~gBACzB~~,~~QAAQ~~,~~EAAE~~,~~QAAQ~~;~~aACnB~~;~~SACF;KACF~~,~~EACD~~,~~CAAC~~,CAAC,CAAC,~~CACJ~~,CAAC;~~IAEF~~,MAAM,~~EACJ,KAAK,~~EAAE,~~WAAW~~,~~EAClB,MAAM,~~EAAE,~~YAAY~~,~~EACpB~~,~~GAAG,EAAE,~~cAAc,~~EACpB,GAAG,kBAAkB,~~CAAC;~~QACrB~~,~~GAAG,EAAE,~~QAAQ~~;QACb~~,~~QAAQ,~~EAAE,~~QAAQ;QAClB,~~MAAM~~,EAAE,oBAAoB~~;~~QAC5B,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,GAAG~~;~~KAC9E~~,CAAC~~,CAAC~~;~~IAEH~~,~~SAAS~~,~~CAAC~~,~~GAAG,~~EAAE;~~QACb~~,cAAc,CAAC,~~QAAQ~~,CAAC,~~CAAC~~,~~CAAC~~,~~oBAAoB,~~CAAC,~~IAAI,~~CAAC,~~CAAC~~,~~CAAC~~,~~oBAAoB,~~CAAC,~~GAAG,~~CAAC,CAAC~~;IAClF~~,~~CAAC~~,~~EAAE,~~CAAC,~~QAAQ,~~CAAC,CAAC~~,CAAC~~;~~IAEf~~,~~SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,oBAAoB,CAAC,~~MAAM,EAAE;~~YAC/C~~,~~cAAc~~,EAAE,~~EAAE~~,CAAC~~;SACpB;aAAM~~,~~IAAI,~~WAAW,~~KAAK,oBAAoB,~~CAAC~~,OAAO,EAAE~~;~~YACvD~~,~~gBAAgB~~,EAAE,~~EAAE,CAAC~~;~~SACtB~~;~~aAAM~~,~~IAAI~~,~~WAAW,KAAK,oBAAoB,~~CAAC~~,GAAG,EAAE~~;~~YACnD~~,~~eAAe~~,~~EAAE~~,~~EAAE,~~CAAC;~~SACrB;aAAM;YACL~~,~~aAAa~~,EAAE,~~EAAE,~~CAAC~~;SACnB;IACH~~,CAAC,EAAE,~~CAAC~~,~~WAAW~~,CAAC,CAAC,CAAC;~~IAElB~~,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,~~WAAW~~;~~YACX~~,YAAY;~~SACb~~,CAAC,EACF,CAAC,~~WAAW~~,~~EAAE,YAAY,~~CAAC,~~CAC5B~~,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,~~EAAE,GAAG,EAAE,WAAW,~~GAAI,~~EACnD~~,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,~~YAAY~~,EAAE,~~QAAQ~~,EAAE,~~YAAY~~,~~YACxD~~,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,~~YACjE~~,KAAC,YAAY,~~IAAC~~,GAAG,EAAE,QAAQ,~~EAAE~~,~~KAAK~~,EAAE,CAAC,CAAC,~~eAAe~~,CAAC,~~GAAI~~,~~GACnC~~,~~GACd~~,~~EACb~~,~~KAAC~~,MAAM,~~OAAK~~,~~eAAe~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~QAAQ,~~GAAI,~~IACjB~~,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FunctionComponent~~, useRef,~~ useEffect, useMemo } from 'react';\n\nimport {\n ForwardProps,\n useI18n,\n ~~useTransitionState,\n~~ SkipLinksProps,\n SkipLinks,\n ~~useElement~~\n} from '@pega/cosmos-react-core';\~~nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\~~n\nimport { ~~StyledIframe,~~ StyledMain, StyledPreviewContainer } 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 {\n header~~,\n frameurl,\n~~ footer: ~~{\n expanded,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse,\n ...footerRestProps\n~~ }~~\n }~~: PropsWithoutRef<PreviewShellProps>,\n ref: PreviewShellProps['ref']\n ) => {\n const ~~footerEl~~ = ~~useRef<HTMLDivElement>~~(~~null~~);\n const ~~[headerEl,~~ ~~setHeaderEl]~~ = ~~useElement<HTMLHeadingElement>~~();\n ~~const~~ t ~~= useI18n~~();\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: {\n ariaLabel: t('main_content'),\n selector: 'main'\n }\n },\n {\n label: t('go_to_noun', [t('dev_tools')]),\n target: {\n ariaLabel: t('dev_tools'),\n selector: 'footer'\n }\n }~~\n ],\n [t]\n~~ );\n~~\n const {\n~~ ~~state: footerState,\n toggle: toggleFooter,\n set: setFooterState\n~~ } ~~= useTransitionState({~~\n ~~ref:~~ ~~footerEl,\n property: 'height',\n states: expandCollapseStates,\n defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low\n })~~;\n\n ~~useEffect(() => {\n setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);\n~~ }, [~~expanded]);\n\n useEffect(()~~ ~~=> {\n if (footerState === expandCollapseStates.rising) {\n onBeforeExpand~~?.();\n } else if (footerState === expandCollapseStates.falling) {\n onBeforeCollapse?.();\n } else if (footerState === expandCollapseStates.low) {\n onAfterCollapse?.();\n } else {\n onAfterExpand?.();\n }\n }, [footerState]);\n\n return (\n <PreviewShellContext.Provider\n value={useMemo(\n () => ({\n ~~footerState~~,\n toggleFooter\n }),\n [~~footerState, toggleFooter~~]\n )}\n >\n <SkipLinks items={skipLinks} />\n {header && <Header {...header} ~~ref={setHeaderEl}~~ />}\n <StyledMain ref={ref} ~~headerOffset~~={~~headerEl?.offsetHeight~~}>\n <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n <~~StyledIframe src~~={~~frameurl~~} ~~title~~={t('~~preview_frame~~')} ~~/>\~~n ~~</StyledPreviewContainer>\~~n ~~</StyledMain~~>\n <Footer {...~~footerRestProps~~} ~~ref={footerEl~~} ~~/>\~~n </PreviewShellContext.Provider>\n );\n }\n);\n\nexport default PreviewShell;\n"]}
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"]}

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

@@ -4,9 +4,10 @@ export declare const StyledTitle: typeof Text;
 export declare const StyledBareButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
-    headerOffset?: number | undefined;
+    header: boolean;
+    footer: boolean;
 }, never>;
-export declare const StyledIframe: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFooterContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=PreviewShell.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;~~AAYjE~~,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU~~;;SAkBrB~~,CAAC;~~AAIH~~,eAAO,MAAM,~~YAAY~~,~~4GAIxB~~,CAAC;~~AAEF~~,eAAO,MAAM,~~sBAAsB~~,~~yGAUjC~~,CAAC;AAIH,eAAO,MAAM,~~YAAY~~,~~4GAsBxB~~,CAAC"}
1	+ {"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAQjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU;YAAyB,OAAO;YAAU,OAAO;SAkBvE,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAejC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIvB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC"}

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

@@ -2,15 +2,12 @@ import styled, { css } from 'styled-components';
 import { useContext } from 'react';
 import { defaultThemeProp, Text } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
-import { StyledToolsContent } from '../DevTools/DevTools.styles';
 import PreviewShellContext from './PreviewShellContext';
-import footerexpanded from './utils';
 const footerExpandedHeight = '50vh';
-const footerOffset = '2.5rem';
-const headerHeight = '3rem';
+const footerCollapsedHeight = '2.5rem';
 export const StyledHeader = styled.header(({ theme }) => {
     return css `
-    height: ${headerHeight};
+    height: 3rem;
     padding: 0 calc(2 * ${theme.base.spacing});
     border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
     background-color: ${theme.base.palette['primary-background']};
@@ -44,30 +41,23 @@ export const StyledOperator = styled.button(({ theme }) => css `
     }
   `);
 StyledOperator.defaultProps = defaultThemeProp;
-export const StyledMain = styled.main(({ theme, headerOffset }) => {
-    const { footerState } = useContext(PreviewShellContext);
-    const heightDelta = footerexpanded(footerState)
-        ? `${footerExpandedHeight} - ${headerOffset ?? 0}px`
-        : `${footerOffset} - ${headerOffset ?? 0}px`;
+export const StyledMain = styled.main(({ theme, header, footer }) => {
+    const { footerExpanded } = useContext(PreviewShellContext);
+    const footerHeight = footerExpanded ? footerExpandedHeight : footerCollapsedHeight;
     return css `
-    height: calc(100vh - ${heightDelta});
-    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
-    width: 100%;
-    background-color: ${theme.base.colors.slate.medium};
-    overflow: hidden;
+      height: calc(100vh - ${footer ? footerHeight : '0rem'} - ${header ? '3rem' : '0rem'});
+      transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+      width: 100%;
+      background-color: ${theme.base.colors.slate.medium};
+      overflow: hidden;
-    ${headerOffset &&
+      ${header &&
         css `
-      padding: calc(2 * ${theme.base.spacing});
-    `}
-  `;
+        padding: calc(2 * ${theme.base.spacing});
+      `}
+    `;
 });
 StyledMain.defaultProps = defaultThemeProp;
-export const StyledIframe = styled.iframe `
-  width: 100%;
-  height: 100%;
-  border: none;
-`;
 export const StyledPreviewContainer = styled.div(({ theme }) => {
     return css `
     height: 100%;
@@ -77,24 +67,23 @@ export const StyledPreviewContainer = styled.div(({ theme }) => {
       box-shadow: ${theme.base.shadow.focus};
       outline: none;
     }
+    > iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
   `;
 });
 StyledPreviewContainer.defaultProps = defaultThemeProp;
-export const StyledFooter = styled.footer(({ theme: { base: { palette, animation } } }) => {
-    const { footerState } = useContext(PreviewShellContext);
-    const containerHeight = footerexpanded(footerState)
-        ? `calc(${footerExpandedHeight} - ${footerOffset})`
-        : 0;
+export const StyledFooter = styled.footer(({ theme }) => {
     return css `
-      background-color: ${palette['primary-background']};
-      overflow: hidden;
-      height: auto;
-      ${StyledToolsContent} {
-        height: ${containerHeight};
-        transition: height ${animation.speed} ${animation.timing.ease};
-      }
-    `;
+    background-color: ${theme.base.palette['primary-background']};
+  `;
 });
 StyledFooter.defaultProps = defaultThemeProp;
+export const StyledFooterContent = styled.div `
+  height: 100%;
+  overflow: hidden;
+`;
+StyledFooterContent.defaultProps = defaultThemeProp;
 //# sourceMappingURL=PreviewShell.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,~~EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,~~mBAAmB,MAAM,uBAAuB,CAAC;~~AACxD~~,~~OAAO,cAAc,~~MAAM,~~SAAS,CAAC;AAErC,MAAM,~~oBAAoB,GAAG,MAAM,CAAC;AACpC,MAAM,~~YAAY~~,GAAG,QAAQ,CAAC;~~AAC9B~~,MAAM,~~YAAY,GAAG,MAAM,~~CAAC~~;AAE5B~~,MAAM,~~CAAC,MAAM,~~YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA~~;cACE~~,~~YAAY;0BACA,~~KAAK,CAAC,IAAI,CAAC,OAAO;qCACP,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;wBAC9C,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GAC7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;aAIlC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO,GAAG,CAAA;;oBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;oBAIA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,~~CAA4B~~,CAAC,EAAE,KAAK,EAAE,~~YAAY~~,EAAE,EAAE,EAAE;~~IAC3F~~,MAAM,EAAE,~~WAAW~~,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;~~IACxD~~,MAAM,~~WAAW~~,GAAG,cAAc,CAAC,~~WAAW~~,CAAC~~;QAC7C~~,CAAC,CAAC,GAAG,~~oBAAoB~~,MAAM,~~YAAY~~,~~IAAI~~,CAAC,~~IAAI;QACpD~~,CAAC,CAAC,~~GAAG~~,~~YAAY~~,MAAM,~~YAAY~~,~~IAAI~~,CAAC,~~IAAI~~,CAAC~~;IAE/C~~,~~OAAO~~,~~GAAG~~,~~CAAA~~;~~2BACe~~,~~WAAW;yBACb,~~KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;~~wBAE~~/D,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;;;~~MAGhD~~,~~YAAY~~;~~QACd~~,GAAG,CAAA;~~0BACmB~~,KAAK,CAAC,IAAI,CAAC,OAAO;~~KACvC~~;~~GACF~~,CAAC;AACJ,CAAC,~~CAAC~~,CAAC;~~AAEH~~,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,~~YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;;;;CAIxC,CAAC;AAEF,MAAM,CAAC,MAAM,~~sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK~~;;;GAGxC~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,~~CACvC~~,CAAC,~~EACC~~,KAAK,EAAE,~~EACL,IAAI,~~EAAE,EAAE,OAAO,~~EAAE~~,~~SAAS,EAAE,EAC7B,EACF,EAAE,EAAE~~;~~IACH~~,~~MAAM~~,~~EAAE,WAAW,EAAE,GAAG,UAAU,~~CAAC,~~mBAAmB~~,CAAC,~~CAAC;IACxD~~,~~MAAM,eAAe,GAAG,cAAc,~~CAAC,~~WAAW~~,CAAC;~~QACjD~~,CAAC~~,CAAC,QAAQ,oBAAoB,MAAM,YAAY,GAAG~~;~~QACnD~~,CAAC,CAAC,CAAC,CAAC~~;IAEN~~,~~OAAO~~,GAAG,~~CAAA;0BACY~~,~~OAAO,~~CAAC~~,oBAAoB,CAAC;;;;QAI/C,kBAAkB~~;~~kBACR~~,~~eAAe;6BACJ~~,~~SAAS,~~CAAC,~~KAAK~~,~~IAAI~~,~~SAAS~~,~~CAAC,~~MAAM,CAAC,~~IAAI;;KAEhE~~,~~CAAC;AACJ~~,CAAC~~,CACF,CAAC~~;AAEF,~~YAAY~~,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp, Text } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport ~~{ StyledToolsContent } from '../DevTools/DevTools.styles';\n\nimport~~ PreviewShellContext from './PreviewShellContext';\~~nimport footerexpanded from './utils';\~~n\nconst footerExpandedHeight = '50vh';\nconst ~~footerOffset~~ = '2.5rem';\~~nconst headerHeight = '3rem';\~~n\nexport const StyledHeader = styled.header(({ theme }) => {\n return css`\n height: ~~${headerHeight}~~;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].xs};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ ~~headerOffset?:~~ ~~number~~ }>(({ theme, ~~headerOffset~~ }) => {\n const { ~~footerState~~ } = useContext(PreviewShellContext);\n const ~~heightDelta~~ = ~~footerexpanded(footerState)\n~~ ? ~~`${~~footerExpandedHeight} ~~- ${headerOffset ?? 0}px`\n~~ : ~~`${footerOffset} - ${headerOffset ?? 0}px`;\~~n\n return css`\n height: calc(100vh - ${~~heightDelta~~});\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 100%;\n background-color: ${theme.base.colors.slate.medium};\n overflow: hidden;\n\n ${~~headerOffset~~ &&\n css`\n padding: calc(2 * ${theme.base.spacing});\n `}\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const ~~StyledIframe = styled.iframe`\n width: 100%;\n height: 100%;\n border: none;\n`;\n\nexport const~~ StyledPreviewContainer = styled.div(({ theme }) => {\n return css`\n height: 100%;\n width: 100%;\n &:focus,\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFooter = styled.footer(\n ({\n theme: ~~{\n base: { palette, animation~~ }~~\n }\n }~~) => {\n ~~const { footerState } = useContext(PreviewShellContext);\n const containerHeight = footerexpanded(footerState)\n ? `calc(${footerExpandedHeight} - ${footerOffset})`\n : 0;\n\n~~ return css`\n background-color: ${palette['primary-background']};\n ~~overflow: hidden~~;\n ~~height:~~ ~~auto~~;\n\~~n ${StyledToolsContent}~~ {\n height: ~~${containerHeight};\~~n ~~transition~~: ~~height ${animation.speed} ${animation.timing.ease}~~;\n ~~}\n~~ `;\n }\~~n);\n\nStyledFooter~~.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp, Text } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport PreviewShellContext from './PreviewShellContext';\n\nconst footerExpandedHeight = '50vh';\nconst footerCollapsedHeight = '2.5rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].xs};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ header: boolean; footer: boolean }>(\n ({ theme, header, footer }) => {\n const { footerExpanded } = useContext(PreviewShellContext);\n const footerHeight = footerExpanded ? footerExpandedHeight : footerCollapsedHeight;\n\n return css`\n height: calc(100vh - ${footer ? footerHeight : '0rem'} - ${header ? '3rem' : '0rem'});\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 100%;\n background-color: ${theme.base.colors.slate.medium};\n overflow: hidden;\n\n ${header &&\n css`\n padding: calc(2 * ${theme.base.spacing});\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewContainer = styled.div(({ theme }) => {\n return css`\n height: 100%;\n width: 100%;\n &:focus,\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n > iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFooter = styled.footer(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledFooterContent = styled.div`\n height: 100%;\n overflow: hidden;\n`;\n\nStyledFooterContent.defaultProps = defaultThemeProp;\n"]}

package/lib/components/PreviewShell/PreviewShell.types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { MouseEvent, Ref } from 'react';
-import { AppShellProps, AvatarProps, BaseProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
+import { AppShellProps, AvatarProps, BaseProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps, MenuItemProps } from '@pega/cosmos-react-core';
 import { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
 import { DevToolsProps } from '../DevTools';
 interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
@@ -12,22 +12,28 @@ export interface HeaderProps extends BaseProps, NoChildrenProp, Pick<AppInfoProp
     operator: OperatorProps;
     /** Ref for the header */
     ref?: Ref<HTMLDivElement>;
+    /** Application channels like Browser, mobile */
+    channels: (Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'selected'> & {
+        icon?: string;
+    })[];
+    /** Click action on selected channel */
+    onChannelClick: MenuProps['onItemClick'];
 }
 export interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {
     /**
-     * If true, the footer will be expanded.
+     * If true, the footer will be expanded by default on render.
      * @default false
      */
     expanded?: boolean;
     /** Menu items to be shown on more options button */
     menu?: MenuProps;
-    /**  Callback fired before footer expands.  */
+    /** Callback fired before footer expands. */
     onBeforeExpand?: () => void;
-    /**  Callback fired after footer expands.  */
+    /** Callback fired after footer expands. */
     onAfterExpand?: () => void;
-    /** Callback fired before footer collapses.  */
+    /** Callback fired before footer collapses. */
     onBeforeCollapse?: () => void;
-    /** Callback fired after footer collapses.  */
+    /** Callback fired after footer collapses. */
     onAfterCollapse?: () => void;
     /** Callback to open footer in a new window. */
     onNewWindowClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
@@ -35,10 +41,10 @@ export interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {
 export interface PreviewShellProps {
     /** Header of the shell */
     header?: HeaderProps;
-    /** src for the main content iframe */
-    frameurl: string;
+    /** A region to display main content. */
+    children: JSX.Element;
     /** Footer of the shell */
-    footer: FooterProps;
+    footer?: FooterProps;
     /** Ref for the shell */
     ref?: Ref<HTMLElement>;
 }

package/lib/components/PreviewShell/PreviewShell.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,~~EACZ~~,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IAC7E,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,WACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;~~CAC3B~~;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC;IACrE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,~~8CAA8C~~;~~IAC9C~~,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,~~6CAA6C~~;~~IAC7C~~,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B~~,+CAA+C~~;~~IAC/C~~,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,~~8CAA8C~~;~~IAC9C~~,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,~~sCAAsC~~;~~IACtC~~,QAAQ,EAAE,~~MAAM~~,CAAC;~~IACjB~~,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;~~IACpB~~,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}
1	+ {"version":3,"file":"PreviewShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,UAAU,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IAC7E,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,WACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAC9F,uCAAuC;IACvC,cAAc,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC;IACrE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}

package/lib/components/PreviewShell/PreviewShell.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShell.types.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref } from 'react';\n\nimport {\n AppShellProps,\n AvatarProps,\n BaseProps,\n MenuProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { DevToolsProps } from '../DevTools';\n\ninterface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n avatar: AvatarProps;\n}\n\nexport interface HeaderProps\n extends BaseProps,\n NoChildrenProp,\n Pick<AppInfoProps, 'appName' \| 'href' \| 'onClick'> {\n /** Represents the current status of the application /\n status?: StatusProps;\n /* The active user of the application. /\n operator: OperatorProps;\n /* Ref for the header /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {\n /\n If true, the footer will be expanded.\n * @default false\n /\n expanded?: boolean;\n /* Menu items to be shown on more options button /\n menu?: MenuProps;\n /* Callback fired before footer expands. /\n onBeforeExpand?: () => void;\n /* Callback fired after footer expands. /\n onAfterExpand?: () => void;\n /* Callback fired before footer collapses. /\n onBeforeCollapse?: () => void;\n /* Callback fired after footer collapses. /\n onAfterCollapse?: () => void;\n /* Callback to open footer in a new window. /\n onNewWindowClick?: (e?: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface PreviewShellProps {\n /* Header of the shell /\n header?: HeaderProps;\n /* ~~src~~ ~~for~~ ~~the~~ main content ~~iframe~~ /\n ~~frameurl~~: ~~string~~;\n /* Footer of the shell /\n footer: FooterProps;\n /* Ref for the shell */\n ref?: Ref<HTMLElement>;\n}\n"]}
1	+ {"version":3,"file":"PreviewShell.types.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, Ref } from 'react';\n\nimport {\n AppShellProps,\n AvatarProps,\n BaseProps,\n MenuProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps,\n MenuItemProps\n} from '@pega/cosmos-react-core';\nimport { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nimport { DevToolsProps } from '../DevTools';\n\ninterface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n avatar: AvatarProps;\n}\n\nexport interface HeaderProps\n extends BaseProps,\n NoChildrenProp,\n Pick<AppInfoProps, 'appName' \| 'href' \| 'onClick'> {\n /** Represents the current status of the application /\n status?: StatusProps;\n /* The active user of the application. /\n operator: OperatorProps;\n /* Ref for the header /\n ref?: Ref<HTMLDivElement>;\n /* Application channels like Browser, mobile /\n channels: (Pick<MenuItemProps, 'id' \| 'primary' \| 'href' \| 'selected'> & { icon?: string })[];\n /* Click action on selected channel /\n onChannelClick: MenuProps['onItemClick'];\n}\n\nexport interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {\n /\n If true, the footer will be expanded by default on render.\n * @default false\n /\n expanded?: boolean;\n /* Menu items to be shown on more options button /\n menu?: MenuProps;\n /* Callback fired before footer expands. /\n onBeforeExpand?: () => void;\n /* Callback fired after footer expands. /\n onAfterExpand?: () => void;\n /* Callback fired before footer collapses. /\n onBeforeCollapse?: () => void;\n /* Callback fired after footer collapses. /\n onAfterCollapse?: () => void;\n /* Callback to open footer in a new window. /\n onNewWindowClick?: (e?: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface PreviewShellProps {\n /* Header of the shell /\n header?: HeaderProps;\n /* A region to display main content. /\n children: JSX.Element;\n /* Footer of the shell /\n footer?: FooterProps;\n /* Ref for the shell */\n ref?: Ref<HTMLElement>;\n}\n"]}

package/lib/components/PreviewShell/PreviewShellContext.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import { Dispatch, SetStateAction } from 'react';
 export interface PreviewShellContextValue {
-    footerState: typeof expandCollapseStates[keyof typeof expandCollapseStates];
-    toggleFooter: () => void;
+    footerExpanded: boolean;
+    toggleFooter: Dispatch<SetStateAction<boolean>>;
 }
 declare const PreviewShellContext: import("react").Context<PreviewShellContextValue>;
 export default PreviewShellContext;

package/lib/components/PreviewShell/PreviewShellContext.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"~~AAEA~~,OAAO,EAAE,~~oBAAoB~~,EAAE,MAAM,~~sDAAsD~~,CAAC;~~AAE5F~~,MAAM,WAAW,wBAAwB;IACvC,~~WAAW~~,EAAE,OAAO,~~oBAAoB,~~CAAC,~~MAAM~~,~~OAAO~~,~~oBAAoB~~,CAAC,CAAC~~;IAC5E~~,~~YAAY~~,~~EAAE~~,~~MAAM~~,~~IAAI,~~CAAC;~~CAC1B~~;AAED,QAAA,MAAM,mBAAmB,mDAGvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}
1	+ {"version":3,"file":"PreviewShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,QAAA,MAAM,mBAAmB,mDAGvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/components/PreviewShell/PreviewShellContext.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { createContext } from 'react';
-import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
 const PreviewShellContext = createContext({
-    footerState: expandCollapseStates.low,
+    footerExpanded: false,
     toggleFooter: () => { }
 });
 export default PreviewShellContext;

package/lib/components/PreviewShell/PreviewShellContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewShellContext.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,~~EAAE~~,MAAM,OAAO,CAAC;~~AAEtC~~,~~OAAO,EAAE,oBAAoB,EAAE,~~MAAM,~~sDAAsD,CAAC;AAO5F,MAAM,~~mBAAmB,GAAG,aAAa,CAA2B;IAClE,~~WAAW~~,EAAE,~~oBAAoB,CAAC,GAAG~~;~~IACrC~~,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;CACvB,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } ~~from~~ ~~'react';\n\nimport { expandCollapseStates~~ } from '~~@pega/cosmos-~~react~~-core/lib/hooks/useTransitionState~~';\n\nexport interface PreviewShellContextValue {\n ~~footerState~~: ~~typeof expandCollapseStates[keyof typeof expandCollapseStates]~~;\n toggleFooter: ~~() => void;\~~n}\n\nconst PreviewShellContext = createContext<PreviewShellContextValue>({\n ~~footerState~~: ~~expandCollapseStates.low~~,\n toggleFooter: () => {}\n});\n\nexport default PreviewShellContext;\n"]}
1	+ {"version":3,"file":"PreviewShellContext.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAOhE,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,cAAc,EAAE,KAAK;IACrB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;CACvB,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nexport interface PreviewShellContextValue {\n footerExpanded: boolean;\n toggleFooter: Dispatch<SetStateAction<boolean>>;\n}\n\nconst PreviewShellContext = createContext<PreviewShellContextValue>({\n footerExpanded: false,\n toggleFooter: () => {}\n});\n\nexport default PreviewShellContext;\n"]}

package/lib/components/PreviewShell/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './PreviewShell';
-export { PreviewShellProps } from './PreviewShell.types';
+export type { PreviewShellProps } from './PreviewShell.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/PreviewShell/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,~~OAAO~~,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/PreviewShell/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './PreviewShell';\nexport { PreviewShellProps } from './PreviewShell.types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './PreviewShell';\nexport type { PreviewShellProps } from './PreviewShell.types';\n"]}

package/lib/components/PreviewShell/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,eAAO,MAAM,cAAc,oBACR,~~CAAA~~,2BAA2B,~~EAAC~~,MAAM,2BAA2B,CAAC,~~YAEiB~~,CAAC;AAEnG,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,eAAO,MAAM,cAAc,oBACR,CAAC,2BAA2B,CAAC,CAAC,MAAM,2BAA2B,CAAC,YAEe,CAAC;AAEnG,eAAe,cAAc,CAAC"}

package/lib/components/PreviewShell/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,~~eAA+E~~,~~EAC/E~~,EAAE,CACF,eAAe,KAAK,oBAAoB,CAAC,MAAM,IAAI,eAAe,KAAK,oBAAoB,CAAC,IAAI,CAAC;AAEnG,eAAe,cAAc,CAAC","sourcesContent":["import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nexport const footerExpanded = (\n transitionState: typeof expandCollapseStates[keyof typeof expandCollapseStates]\n) =>\n transitionState === expandCollapseStates.rising \|\| transitionState === expandCollapseStates.high;\n\nexport default footerExpanded;\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,eAAiF,EACjF,EAAE,CACF,eAAe,KAAK,oBAAoB,CAAC,MAAM,IAAI,eAAe,KAAK,oBAAoB,CAAC,IAAI,CAAC;AAEnG,eAAe,cAAc,CAAC","sourcesContent":["import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nexport const footerExpanded = (\n transitionState: (typeof expandCollapseStates)[keyof typeof expandCollapseStates]\n) =>\n transitionState === expandCollapseStates.rising \|\| transitionState === expandCollapseStates.high;\n\nexport default footerExpanded;\n"]}

package/package.json CHANGED Viewed

@@ -1,13 +1,14 @@
 {
   "name": "@pega/cosmos-react-tools",
-  "version": "4.0.0-dev.2.0",
-  "author": "Pegasystems",
-  "license": "SEE LICENSE IN LICENSE",
+  "version": "4.0.0-dev.21.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/pegasystems/cosmos-react.git",
     "directory": "packages/cosmos-tools"
   },
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Pegasystems",
+  "sideEffects": false,
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -15,12 +16,11 @@
     "README.md",
     "lib"
   ],
-  "sideEffects": false,
   "scripts": {
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.2.0",
+    "@pega/cosmos-react-core": "4.0.0-dev.21.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.26",
@@ -30,16 +30,14 @@
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-storysource": "^6.4.19",
-    "@storybook/addon-toolbars": "^6.4.19",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-react": "^1.2.4",
-    "@storybook/theming": "^6.4.19",
+    "@storybook/addon-a11y": "^7.0.24",
+    "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addon-storysource": "^7.0.24",
+    "@storybook/addon-toolbars": "^7.0.24",
+    "@storybook/react": "^7.0.24",
+    "@storybook/theming": "^7.0.24",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "typescript": "~4.7.2"
+    "typescript": "~5.0.2"
   }
 }

package/lib/components/DevTools/Content.d.ts DELETED Viewed

@@ -1,9 +0,0 @@
-import { FC, PropsWithoutRef, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { DevToolsProps } from './DevTools.types';
-interface ContentProps extends Pick<DevToolsProps, 'tabContent' | 'currentTabId'> {
-    ref?: Ref<HTMLDivElement>;
-}
-declare const Content: FC<ForwardProps & PropsWithoutRef<ContentProps>>;
-export default Content;
-//# sourceMappingURL=Content.d.ts.map

package/lib/components/DevTools/Content.d.ts.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAkB,YAAY,EAAgB,MAAM,yBAAyB,CAAC;AAIrF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,cAAc,CAAC;IAC/E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,YAAY,CAAC,CAkB7D,CAAC;AACF,eAAe,OAAO,CAAC"}

package/lib/components/DevTools/Content.js DELETED Viewed

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { TabPanel, Flex, registerIcon } from '@pega/cosmos-react-core';
-import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
-import { StyledToolsContent } from './DevTools.styles';
-registerIcon(bugIcon);
-const Content = forwardRef(({ currentTabId, tabContent }, ref) => {
-    return (_jsx(Flex, { as: StyledToolsContent, ref: ref, "aria-hidden": !tabContent, container: { pad: [1, 2] }, item: { grow: 1 }, children: tabContent && currentTabId && (_jsx(TabPanel, { tabId: currentTabId, currentTabId: currentTabId, children: tabContent })) }));
-});
-export default Content;
-//# sourceMappingURL=Content.js.map

package/lib/components/DevTools/Content.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/components/DevTools/Content.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAwB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAgB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,YAAY,CAAC,OAAO,CAAC,CAAC;AAMtB,MAAM,OAAO,GAAqD,UAAU,CAC1E,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,GAAwB,EAAE,EAAE;IACzD,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,GAAG,iBACK,CAAC,UAAU,EACxB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAEhB,UAAU,IAAI,YAAY,IAAI,CAC7B,KAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,YACtD,UAAU,GACF,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,OAAO,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef, Ref } from 'react';\n\nimport { TabPanel, Flex, ForwardProps, registerIcon } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledToolsContent } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface ContentProps extends Pick<DevToolsProps, 'tabContent' | 'currentTabId'> {\n ref?: Ref<HTMLDivElement>;\n}\n\nconst Content: FC<ForwardProps & PropsWithoutRef<ContentProps>> = forwardRef(\n ({ currentTabId, tabContent }, ref: ContentProps['ref']) => {\n return (\n <Flex\n as={StyledToolsContent}\n ref={ref}\n aria-hidden={!tabContent}\n container={{ pad: [1, 2] }}\n item={{ grow: 1 }}\n >\n {tabContent && currentTabId && (\n <TabPanel tabId={currentTabId} currentTabId={currentTabId}>\n {tabContent}\n </TabPanel>\n )}\n </Flex>\n );\n }\n);\nexport default Content;\n"]}