@pega/cosmos-react-tools 4.0.0-dev.6.1 → 4.0.0-dev.7.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.
- package/lib/components/PreviewShell/Footer.d.ts.map +1 -1
- package/lib/components/PreviewShell/Footer.js +18 -16
- package/lib/components/PreviewShell/Footer.js.map +1 -1
- package/lib/components/PreviewShell/Header.d.ts.map +1 -1
- package/lib/components/PreviewShell/Header.js +8 -3
- package/lib/components/PreviewShell/Header.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.js +30 -47
- package/lib/components/PreviewShell/PreviewShell.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts +3 -1
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.js +23 -23
- package/lib/components/PreviewShell/PreviewShell.styles.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.types.d.ts +9 -3
- package/lib/components/PreviewShell/PreviewShell.types.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.types.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShellContext.d.ts +3 -3
- package/lib/components/PreviewShell/PreviewShellContext.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShellContext.js +1 -2
- package/lib/components/PreviewShell/PreviewShellContext.js.map +1 -1
- package/package.json +2 -2
|
@@ -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;
|
|
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;AAOjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAoF3D,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -1,38 +1,40 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useContext, useMemo } from 'react';
|
|
3
3
|
import { Flex, Button, Icon, MenuButton, useI18n, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
-
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
5
4
|
import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
|
|
6
5
|
import Header from '../DevTools/Header';
|
|
7
6
|
import Content from '../DevTools/Content';
|
|
8
7
|
import PreviewShellContext from './PreviewShellContext';
|
|
9
|
-
import { footerExpanded } from './utils';
|
|
10
8
|
import { StyledFooter } from './PreviewShell.styles';
|
|
11
9
|
registerIcon(bugIcon);
|
|
12
10
|
const Footer = forwardRef(({ tabs, currentTabId, tabContent, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
|
|
13
|
-
const {
|
|
11
|
+
const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);
|
|
14
12
|
const t = useI18n();
|
|
15
|
-
const toggleButtonLabel = t(footerExpanded
|
|
16
|
-
const toggleButtonA11y = t(footerExpanded
|
|
17
|
-
t('dev_tools')
|
|
18
|
-
]);
|
|
13
|
+
const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');
|
|
14
|
+
const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);
|
|
19
15
|
const handleTabChange = (id, e) => {
|
|
20
|
-
if (!footerExpanded
|
|
21
|
-
toggleFooter();
|
|
16
|
+
if (!footerExpanded) {
|
|
17
|
+
toggleFooter(true);
|
|
22
18
|
}
|
|
23
19
|
onTabClick(id, e);
|
|
24
20
|
};
|
|
25
21
|
const utils = useMemo(() => {
|
|
26
22
|
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) => {
|
|
27
|
-
if (footerExpanded
|
|
28
|
-
toggleFooter();
|
|
23
|
+
if (footerExpanded) {
|
|
24
|
+
toggleFooter(prev => !prev);
|
|
29
25
|
}
|
|
30
26
|
onNewWindowClick(e);
|
|
31
|
-
}, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
27
|
+
}, 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' }) })] }));
|
|
28
|
+
}, [
|
|
29
|
+
t,
|
|
30
|
+
toggleButtonLabel,
|
|
31
|
+
toggleButtonA11y,
|
|
32
|
+
menu,
|
|
33
|
+
onNewWindowClick,
|
|
34
|
+
footerExpanded,
|
|
35
|
+
toggleFooter
|
|
36
|
+
]);
|
|
37
|
+
return (_jsxs(StyledFooter, { children: [_jsx(Header, { tabs: tabs, onTabClick: handleTabChange, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Content, { tabContent: footerExpanded ? tabContent : undefined, currentTabId: currentTabId, ref: ref })] }));
|
|
36
38
|
});
|
|
37
39
|
export default Footer;
|
|
38
40
|
//# sourceMappingURL=Footer.js.map
|
|
@@ -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,
|
|
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} 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 Content from '../DevTools/Content';\n\nimport PreviewShellContext from './PreviewShellContext';\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 { 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 <StyledFooter>\n <Header\n tabs={tabs}\n onTabClick={handleTabChange}\n onContinueDebug={onContinueDebug}\n currentTabId={currentTabId}\n utils={utils}\n />\n <Content\n tabContent={footerExpanded ? tabContent : undefined}\n currentTabId={currentTabId}\n ref={ref}\n />\n </StyledFooter>\n );\n }\n);\nexport default Footer;\n"]}
|
|
@@ -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,
|
|
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"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { Flex, Status, Avatar, Text } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Flex, Status, Avatar, Text, MenuButton } from '@pega/cosmos-react-core';
|
|
4
4
|
import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
|
|
5
5
|
import { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';
|
|
6
|
-
const Header = forwardRef(({ appName, onClick, href, status, operator }, ref) => {
|
|
7
|
-
|
|
6
|
+
const Header = forwardRef(({ appName, onClick, href, status, operator, channels, onChannelClick }, ref) => {
|
|
7
|
+
const selectedChannel = channels.find(ch => ch.selected) ?? channels[0];
|
|
8
|
+
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: {
|
|
9
|
+
mode: 'single-select',
|
|
10
|
+
items: channels,
|
|
11
|
+
onItemClick: onChannelClick
|
|
12
|
+
} }))] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
|
|
8
13
|
});
|
|
9
14
|
export default Header;
|
|
10
15
|
//# sourceMappingURL=Header.js.map
|
|
@@ -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;
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
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;AASjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA+DrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,58 +1,41 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef,
|
|
3
|
-
import { useI18n,
|
|
4
|
-
import {
|
|
5
|
-
import { StyledIframe, StyledMain, StyledPreviewContainer } from './PreviewShell.styles';
|
|
2
|
+
import { forwardRef, useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { useI18n, SkipLinks, ExpandCollapse } from '@pega/cosmos-react-core';
|
|
4
|
+
import { StyledIframe, StyledMain, StyledPreviewContainer, StyledFooterWrapper } from './PreviewShell.styles';
|
|
6
5
|
import Header from './Header';
|
|
7
6
|
import PreviewShellContext from './PreviewShellContext';
|
|
8
7
|
import Footer from './Footer';
|
|
9
|
-
const PreviewShell = forwardRef(({ header, frameurl, footer
|
|
10
|
-
const
|
|
11
|
-
const [headerEl, setHeaderEl] = useElement();
|
|
8
|
+
const PreviewShell = forwardRef(({ header, frameurl, footer }, ref) => {
|
|
9
|
+
const [expanded, setExpanded] = useState(!!footer?.expanded);
|
|
12
10
|
const t = useI18n();
|
|
13
|
-
const skipLinks = useMemo(() => [
|
|
14
|
-
{
|
|
15
|
-
label: t('go_to_main_content'),
|
|
16
|
-
target: {
|
|
17
|
-
ariaLabel: t('main_content'),
|
|
18
|
-
selector: 'main'
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
label: t('go_to_noun', [t('dev_tools')]),
|
|
23
|
-
target: {
|
|
24
|
-
ariaLabel: t('dev_tools'),
|
|
25
|
-
selector: 'footer'
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
], [t]);
|
|
29
|
-
const { state: footerState, toggle: toggleFooter, set: setFooterState } = useTransitionState({
|
|
30
|
-
ref: footerEl,
|
|
31
|
-
property: 'height',
|
|
32
|
-
states: expandCollapseStates,
|
|
33
|
-
defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low
|
|
34
|
-
});
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);
|
|
37
|
-
}, [expanded]);
|
|
38
11
|
useEffect(() => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
12
|
+
setExpanded(!!footer?.expanded);
|
|
13
|
+
}, [footer?.expanded]);
|
|
14
|
+
const skipLinks = useMemo(() => {
|
|
15
|
+
const skipLinksItems = [
|
|
16
|
+
{
|
|
17
|
+
label: t('go_to_main_content'),
|
|
18
|
+
target: {
|
|
19
|
+
ariaLabel: t('main_content'),
|
|
20
|
+
selector: 'main'
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
if (footer) {
|
|
25
|
+
skipLinksItems.push({
|
|
26
|
+
label: t('go_to_noun', [t('dev_tools')]),
|
|
27
|
+
target: {
|
|
28
|
+
ariaLabel: t('dev_tools'),
|
|
29
|
+
selector: 'footer'
|
|
30
|
+
}
|
|
31
|
+
});
|
|
50
32
|
}
|
|
51
|
-
|
|
33
|
+
return skipLinksItems;
|
|
34
|
+
}, [t, header?.channels]);
|
|
52
35
|
return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
|
|
53
|
-
|
|
54
|
-
toggleFooter
|
|
55
|
-
}), [
|
|
36
|
+
footerExpanded: expanded,
|
|
37
|
+
toggleFooter: setExpanded
|
|
38
|
+
}), [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: _jsx(StyledIframe, { src: frameurl, title: t('preview_frame') }) }) }), _jsx(ExpandCollapse, { min: footer ? '2.5rem' : '0rem', max: '50vh', collapsed: !expanded, as: 'footer', children: _jsx(StyledFooterWrapper, { children: footer && _jsx(Footer, { ...footer, expanded: true }) }) })] }));
|
|
56
39
|
});
|
|
57
40
|
export default PreviewShell;
|
|
58
41
|
//# sourceMappingURL=PreviewShell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
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,EACL,YAAY,EACZ,UAAU,EACV,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,uBAAuB,CAAC;AAC/B,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,YACjE,KAAC,YAAY,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,GAAI,GACnC,GACd,EACb,KAAC,cAAc,IACb,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,CAAC,QAAQ,EACpB,EAAE,EAAC,QAAQ,YAEX,KAAC,mBAAmB,cAAE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,QAAQ,SAAG,GAAuB,GACvE,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 {\n StyledIframe,\n StyledMain,\n StyledPreviewContainer,\n StyledFooterWrapper\n} 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, frameurl, 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 <StyledIframe src={frameurl} title={t('preview_frame')} />\n </StyledPreviewContainer>\n </StyledMain>\n <ExpandCollapse\n min={footer ? '2.5rem' : '0rem'}\n max='50vh'\n collapsed={!expanded}\n as='footer'\n >\n <StyledFooterWrapper>{footer && <Footer {...footer} expanded />}</StyledFooterWrapper>\n </ExpandCollapse>\n </PreviewShellContext.Provider>\n );\n }\n);\n\nexport default PreviewShell;\n"]}
|
|
@@ -4,9 +4,11 @@ export declare const StyledTitle: typeof Text;
|
|
|
4
4
|
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>;
|
|
5
5
|
export declare const StyledOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
6
6
|
export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {
|
|
7
|
-
|
|
7
|
+
header: boolean;
|
|
8
|
+
footer: boolean;
|
|
8
9
|
}, never>;
|
|
9
10
|
export declare const StyledIframe: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
|
|
10
11
|
export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
12
|
export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
+
export declare const StyledFooterWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
14
|
//# sourceMappingURL=PreviewShell.styles.d.ts.map
|
|
@@ -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;
|
|
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;AAUjE,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,YAAY,4GAIxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAiBxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAM9B,CAAC"}
|
|
@@ -4,13 +4,11 @@ import { defaultThemeProp, Text } from '@pega/cosmos-react-core';
|
|
|
4
4
|
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
5
5
|
import { StyledToolsContent } from '../DevTools/DevTools.styles';
|
|
6
6
|
import PreviewShellContext from './PreviewShellContext';
|
|
7
|
-
import footerexpanded from './utils';
|
|
8
7
|
const footerExpandedHeight = '50vh';
|
|
9
|
-
const
|
|
10
|
-
const headerHeight = '3rem';
|
|
8
|
+
const footerCollapsedHeight = '2.5rem';
|
|
11
9
|
export const StyledHeader = styled.header(({ theme }) => {
|
|
12
10
|
return css `
|
|
13
|
-
height:
|
|
11
|
+
height: 3rem;
|
|
14
12
|
padding: 0 calc(2 * ${theme.base.spacing});
|
|
15
13
|
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
16
14
|
background-color: ${theme.base.palette['primary-background']};
|
|
@@ -44,23 +42,21 @@ export const StyledOperator = styled.button(({ theme }) => css `
|
|
|
44
42
|
}
|
|
45
43
|
`);
|
|
46
44
|
StyledOperator.defaultProps = defaultThemeProp;
|
|
47
|
-
export const StyledMain = styled.main(({ theme,
|
|
48
|
-
const {
|
|
49
|
-
const
|
|
50
|
-
? `${footerExpandedHeight} - ${headerOffset ?? 0}px`
|
|
51
|
-
: `${footerOffset} - ${headerOffset ?? 0}px`;
|
|
45
|
+
export const StyledMain = styled.main(({ theme, header, footer }) => {
|
|
46
|
+
const { footerExpanded } = useContext(PreviewShellContext);
|
|
47
|
+
const footerHeight = footerExpanded ? footerExpandedHeight : footerCollapsedHeight;
|
|
52
48
|
return css `
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
height: calc(100vh - ${footer ? footerHeight : '0rem'} - ${header ? '3rem' : '0rem'});
|
|
50
|
+
transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
|
|
51
|
+
width: 100%;
|
|
52
|
+
background-color: ${theme.base.colors.slate.medium};
|
|
53
|
+
overflow: hidden;
|
|
58
54
|
|
|
59
|
-
|
|
55
|
+
${header &&
|
|
60
56
|
css `
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
padding: calc(2 * ${theme.base.spacing});
|
|
58
|
+
`}
|
|
59
|
+
`;
|
|
64
60
|
});
|
|
65
61
|
StyledMain.defaultProps = defaultThemeProp;
|
|
66
62
|
export const StyledIframe = styled.iframe `
|
|
@@ -81,20 +77,24 @@ export const StyledPreviewContainer = styled.div(({ theme }) => {
|
|
|
81
77
|
});
|
|
82
78
|
StyledPreviewContainer.defaultProps = defaultThemeProp;
|
|
83
79
|
export const StyledFooter = styled.footer(({ theme: { base: { palette, animation } } }) => {
|
|
84
|
-
const { footerState } = useContext(PreviewShellContext);
|
|
85
|
-
const containerHeight = footerexpanded(footerState)
|
|
86
|
-
? `calc(${footerExpandedHeight} - ${footerOffset})`
|
|
87
|
-
: 0;
|
|
88
80
|
return css `
|
|
89
81
|
background-color: ${palette['primary-background']};
|
|
90
82
|
overflow: hidden;
|
|
91
83
|
height: auto;
|
|
92
84
|
|
|
93
85
|
${StyledToolsContent} {
|
|
94
|
-
height: ${
|
|
86
|
+
height: calc(${footerExpandedHeight} - ${footerCollapsedHeight});
|
|
95
87
|
transition: height ${animation.speed} ${animation.timing.ease};
|
|
96
88
|
}
|
|
97
89
|
`;
|
|
98
90
|
});
|
|
99
91
|
StyledFooter.defaultProps = defaultThemeProp;
|
|
92
|
+
export const StyledFooterWrapper = styled.div(({ theme }) => {
|
|
93
|
+
return css `
|
|
94
|
+
height: 100%;
|
|
95
|
+
width: 100%;
|
|
96
|
+
background: ${theme.base.palette['primary-background']};
|
|
97
|
+
`;
|
|
98
|
+
});
|
|
99
|
+
StyledFooterWrapper.defaultProps = defaultThemeProp;
|
|
100
100
|
//# sourceMappingURL=PreviewShell.styles.js.map
|
|
@@ -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;
|
|
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 { StyledToolsContent } from '../DevTools/DevTools.styles';\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 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 return css`\n background-color: ${palette['primary-background']};\n overflow: hidden;\n height: auto;\n\n ${StyledToolsContent} {\n height: calc(${footerExpandedHeight} - ${footerCollapsedHeight});\n transition: height ${animation.speed} ${animation.timing.ease};\n }\n `;\n }\n);\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledFooterWrapper = styled.div(({ theme }) => {\n return css`\n height: 100%;\n width: 100%;\n background: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledFooterWrapper.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MouseEvent, Ref } from 'react';
|
|
2
|
-
import { AppShellProps, AvatarProps, BaseProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
|
|
2
|
+
import { AppShellProps, AvatarProps, BaseProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps, MenuItemProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
|
|
4
4
|
import { DevToolsProps } from '../DevTools';
|
|
5
5
|
interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
|
|
@@ -12,10 +12,16 @@ export interface HeaderProps extends BaseProps, NoChildrenProp, Pick<AppInfoProp
|
|
|
12
12
|
operator: OperatorProps;
|
|
13
13
|
/** Ref for the header */
|
|
14
14
|
ref?: Ref<HTMLDivElement>;
|
|
15
|
+
/** Application channels like Browser, mobile */
|
|
16
|
+
channels: (Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'selected'> & {
|
|
17
|
+
icon?: string;
|
|
18
|
+
})[];
|
|
19
|
+
/** Click action on selected channel */
|
|
20
|
+
onChannelClick: MenuProps['onItemClick'];
|
|
15
21
|
}
|
|
16
22
|
export interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {
|
|
17
23
|
/**
|
|
18
|
-
* If true, the footer will be expanded.
|
|
24
|
+
* If true, the footer will be expanded by default on render.
|
|
19
25
|
* @default false
|
|
20
26
|
*/
|
|
21
27
|
expanded?: boolean;
|
|
@@ -38,7 +44,7 @@ export interface PreviewShellProps {
|
|
|
38
44
|
/** src for the main content iframe */
|
|
39
45
|
frameurl: string;
|
|
40
46
|
/** Footer of the shell */
|
|
41
|
-
footer
|
|
47
|
+
footer?: FooterProps;
|
|
42
48
|
/** Ref for the shell */
|
|
43
49
|
ref?: Ref<HTMLElement>;
|
|
44
50
|
}
|
|
@@ -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,
|
|
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,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,CAAC,EAAE,WAAW,CAAC;IACrB,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}
|
|
@@ -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
|
|
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 /** 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,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
2
|
export interface PreviewShellContextValue {
|
|
3
|
-
|
|
4
|
-
toggleFooter:
|
|
3
|
+
footerExpanded: boolean;
|
|
4
|
+
toggleFooter: Dispatch<SetStateAction<boolean>>;
|
|
5
5
|
}
|
|
6
6
|
declare const PreviewShellContext: import("react").Context<PreviewShellContextValue>;
|
|
7
7
|
export default PreviewShellContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
|
-
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
3
2
|
const PreviewShellContext = createContext({
|
|
4
|
-
|
|
3
|
+
footerExpanded: false,
|
|
5
4
|
toggleFooter: () => { }
|
|
6
5
|
});
|
|
7
6
|
export default PreviewShellContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShellContext.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-tools",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.7.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.7.0",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|