@pega/cosmos-react-tools 4.0.0-dev.1.1 → 4.0.0-dev.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Clipboard/Clipboard.styles.js +1 -1
- package/lib/components/Clipboard/Clipboard.styles.js.map +1 -1
- package/lib/components/DevTools/DevTools.d.ts.map +1 -1
- package/lib/components/DevTools/DevTools.js +4 -5
- package/lib/components/DevTools/DevTools.js.map +1 -1
- package/lib/components/DevTools/DevTools.types.d.ts +5 -3
- package/lib/components/DevTools/DevTools.types.d.ts.map +1 -1
- package/lib/components/DevTools/DevTools.types.js.map +1 -1
- package/lib/components/PreviewShell/Footer.d.ts.map +1 -1
- package/lib/components/PreviewShell/Footer.js +21 -19
- 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 -2
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.js +28 -28
- package/lib/components/PreviewShell/PreviewShell.styles.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.types.d.ts +11 -5
- 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 +3 -3
- package/lib/components/DevTools/Content.d.ts +0 -9
- package/lib/components/DevTools/Content.d.ts.map +0 -1
- package/lib/components/DevTools/Content.js +0 -11
- package/lib/components/DevTools/Content.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clipboard.styles.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;2CACI,OAAO,CAAC,aAAa,CAAC;;0BAEvC,OAAO,CAAC,oBAAoB,CAAC;KAClD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,qBAAqB;QACrB,qBAAqB;
|
|
1
|
+
{"version":3,"file":"Clipboard.styles.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;2CACI,OAAO,CAAC,aAAa,CAAC;;0BAEvC,OAAO,CAAC,oBAAoB,CAAC;KAClD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,qBAAqB;QACrB,qBAAqB;sBACP,MAAM,CAAC,aAAa,CAAC;;KAEtC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EACnC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oBAEM,MAAM,CAAC,GAAG;iCACG,OAAO;oCACJ,OAAO,CAAC,aAAa,CAAC;0BAChC,OAAO,CAAC,oBAAoB,CAAC;;;KAGlD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAItC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;cAGE,KAAK,CAAC,IAAI,CAAC,OAAO;wBACR,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;yBACvC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;SAE9C,UAAU,IAAI,iBAAiB;;;QAGhC,UAAU;UACR,YAAY;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport { defaultThemeProp, StyledCard, StyledText, Text } from '@pega/cosmos-react-core';\nimport { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport const StyledContainer = styled.div`\n height: 100%;\n`;\n\nexport const StyledTreeContainer = styled.div(\n ({\n theme: {\n base,\n base: { palette }\n }\n }) => {\n return css`\n width: ${base['content-width'].sm};\n border-inline-end: 0.0625rem solid ${palette['border-line']};\n overflow: auto;\n background-color: ${palette['primary-background']};\n `;\n }\n);\n\nStyledTreeContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n ({\n theme: {\n base: { shadow }\n }\n }) => {\n return css`\n height: 100%;\n overflow: hidden;\n\n ${StyledNodeInteraction}:focus,\n ${StyledNodeInteraction}:focus-within {\n box-shadow: ${shadow['focus-inset']};\n }\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledClipboardFooter = styled.div(\n ({\n theme: {\n base: { shadow, spacing, palette }\n }\n }) => {\n return css`\n height: 1.75rem;\n box-shadow: ${shadow.low};\n padding-inline: calc(2 * ${spacing});\n border-top: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n overflow: hidden;\n width: 100%;\n `;\n }\n);\n\nStyledClipboardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledTitle = styled(Text)`\n &:focus-visible {\n outline: none;\n }\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n return css`\n overflow: auto;\n position: relative;\n margin: ${theme.base.spacing};\n background-color: ${theme.base.palette['primary-background']};\n width: calc(100% - ${theme.base['content-width'].sm});\n\n && ${StyledCard} ${StyledCardContent} {\n padding: 0;\n\n ${StyledText} {\n ${hideVisually}\n }\n }\n `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -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,
|
|
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,EAA0B,MAAM,yBAAyB,CAAC;AAI/E,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"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { registerIcon } from '@pega/cosmos-react-core';
|
|
3
|
+
import { registerIcon, TabPanel } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
|
|
5
|
-
import { StyledDevTools } from './DevTools.styles';
|
|
5
|
+
import { StyledDevTools, StyledToolsContent } from './DevTools.styles';
|
|
6
6
|
import Header from './Header';
|
|
7
|
-
import Content from './Content';
|
|
8
7
|
registerIcon(bugIcon);
|
|
9
|
-
const DevTools = forwardRef(({ tabs, currentTabId, onTabClick, onContinueDebug,
|
|
10
|
-
return (_jsxs(StyledDevTools, { ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(
|
|
8
|
+
const DevTools = forwardRef(({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref) => {
|
|
9
|
+
return (_jsxs(StyledDevTools, { ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(StyledToolsContent, { children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, children: tab.content }, tab.id))) })] }));
|
|
11
10
|
});
|
|
12
11
|
export default DevTools;
|
|
13
12
|
//# sourceMappingURL=DevTools.js.map
|
|
@@ -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;
|
|
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,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/E,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,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,kBAAkB,cAChB,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,GACiB,IACN,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { 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 <StyledDevTools ref={ref}>\n <Header\n tabs={tabs}\n onTabClick={onTabClick}\n onContinueDebug={onContinueDebug}\n currentTabId={currentTabId}\n utils={utils}\n />\n <StyledToolsContent>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>\n {tab.content}\n </TabPanel>\n ))}\n </StyledToolsContent>\n </StyledDevTools>\n );\n }\n);\n\nexport default DevTools;\n"]}
|
|
@@ -2,11 +2,9 @@ import { ReactNode, Ref, MouseEvent } from 'react';
|
|
|
2
2
|
import { BaseProps, Tab, TabsProps } from '@pega/cosmos-react-core';
|
|
3
3
|
export interface DevToolsProps extends BaseProps {
|
|
4
4
|
/** An array of Tab data used to render the individual footer tabs. */
|
|
5
|
-
tabs:
|
|
5
|
+
tabs: DevToolsTab[];
|
|
6
6
|
/** ID for making the corresponding tab active */
|
|
7
7
|
currentTabId: TabsProps['currentTabId'];
|
|
8
|
-
/** Content for the tabs. */
|
|
9
|
-
tabContent: ReactNode;
|
|
10
8
|
/** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */
|
|
11
9
|
onTabClick: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
12
10
|
/** Callback to shift the focus to the newly opened window. */
|
|
@@ -16,4 +14,8 @@ export interface DevToolsProps extends BaseProps {
|
|
|
16
14
|
/** Ref for the footer */
|
|
17
15
|
ref?: Ref<HTMLDivElement>;
|
|
18
16
|
}
|
|
17
|
+
export interface DevToolsTab extends Tab {
|
|
18
|
+
/** Content for the tabs. */
|
|
19
|
+
content: ReactNode;
|
|
20
|
+
}
|
|
19
21
|
//# sourceMappingURL=DevTools.types.d.ts.map
|
|
@@ -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,
|
|
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,8BAA8B;IAC9B,OAAO,EAAE,SAAS,CAAC;CACpB"}
|
|
@@ -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:
|
|
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"]}
|
|
@@ -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,
|
|
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"}
|
|
@@ -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
|
-
import { Flex, Button, Icon, MenuButton, useI18n, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
-
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
3
|
+
import { Flex, Button, Icon, MenuButton, useI18n, registerIcon, TabPanel } from '@pega/cosmos-react-core';
|
|
5
4
|
import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
|
|
6
5
|
import Header from '../DevTools/Header';
|
|
7
|
-
import
|
|
6
|
+
import { StyledToolsContent } from '../DevTools/DevTools.styles';
|
|
8
7
|
import PreviewShellContext from './PreviewShellContext';
|
|
9
|
-
import { footerExpanded } from './utils';
|
|
10
8
|
import { StyledFooter } from './PreviewShell.styles';
|
|
11
9
|
registerIcon(bugIcon);
|
|
12
|
-
const Footer = forwardRef(({ tabs, currentTabId,
|
|
13
|
-
const {
|
|
10
|
+
const Footer = forwardRef(({ tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
|
|
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(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))) })] }));
|
|
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,
|
|
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 { StyledFooter } 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 <StyledFooter>\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 </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;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"}
|
|
@@ -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 { 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,
|
|
10
|
-
const
|
|
11
|
-
const [headerEl, setHeaderEl] = useElement();
|
|
8
|
+
const PreviewShell = forwardRef(({ header, children, 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: children }) }), _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,EAAE,UAAU,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChG,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,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 { StyledMain, StyledPreviewContainer, StyledFooterWrapper } 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 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,10 @@ 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
|
-
export declare const StyledIframe: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
|
|
10
10
|
export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
11
|
export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
export declare const StyledFooterWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
13
|
//# 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,sBAAsB,yGAejC,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,30 +42,23 @@ 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
|
-
export const StyledIframe = styled.iframe `
|
|
67
|
-
width: 100%;
|
|
68
|
-
height: 100%;
|
|
69
|
-
border: none;
|
|
70
|
-
`;
|
|
71
62
|
export const StyledPreviewContainer = styled.div(({ theme }) => {
|
|
72
63
|
return css `
|
|
73
64
|
height: 100%;
|
|
@@ -77,24 +68,33 @@ export const StyledPreviewContainer = styled.div(({ theme }) => {
|
|
|
77
68
|
box-shadow: ${theme.base.shadow.focus};
|
|
78
69
|
outline: none;
|
|
79
70
|
}
|
|
71
|
+
> iframe {
|
|
72
|
+
width: 100%;
|
|
73
|
+
height: 100%;
|
|
74
|
+
border: none;
|
|
75
|
+
}
|
|
80
76
|
`;
|
|
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 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(\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;
|
|
@@ -35,10 +41,10 @@ export interface FooterProps extends OmitStrict<DevToolsProps, 'utils'> {
|
|
|
35
41
|
export interface PreviewShellProps {
|
|
36
42
|
/** Header of the shell */
|
|
37
43
|
header?: HeaderProps;
|
|
38
|
-
/**
|
|
39
|
-
|
|
44
|
+
/** A region to display main content. */
|
|
45
|
+
children: JSX.Element;
|
|
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,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"}
|
|
@@ -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 /**
|
|
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"]}
|
|
@@ -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.10.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.10.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",
|
|
@@ -40,6 +40,6 @@
|
|
|
40
40
|
"@storybook/theming": "^6.4.19",
|
|
41
41
|
"@testing-library/react": "^12.1.3",
|
|
42
42
|
"@testing-library/user-event": "^13.5.0",
|
|
43
|
-
"typescript": "~4.
|
|
43
|
+
"typescript": "~4.9.5"
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { FC, PropsWithoutRef, Ref } from 'react';
|
|
2
|
-
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
-
import { DevToolsProps } from './DevTools.types';
|
|
4
|
-
interface ContentProps extends Pick<DevToolsProps, 'tabContent' | 'currentTabId'> {
|
|
5
|
-
ref?: Ref<HTMLDivElement>;
|
|
6
|
-
}
|
|
7
|
-
declare const Content: FC<ForwardProps & PropsWithoutRef<ContentProps>>;
|
|
8
|
-
export default Content;
|
|
9
|
-
//# sourceMappingURL=Content.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { TabPanel, Flex, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
-
import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
|
|
5
|
-
import { StyledToolsContent } from './DevTools.styles';
|
|
6
|
-
registerIcon(bugIcon);
|
|
7
|
-
const Content = forwardRef(({ currentTabId, tabContent }, ref) => {
|
|
8
|
-
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 })) }));
|
|
9
|
-
});
|
|
10
|
-
export default Content;
|
|
11
|
-
//# sourceMappingURL=Content.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"]}
|