@pega/cosmos-react-tools 3.0.0-dev.25.0 → 3.0.0-dev.26.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.d.ts.map +1 -1
- package/lib/components/Clipboard/Clipboard.js +12 -12
- package/lib/components/Clipboard/Clipboard.js.map +1 -1
- package/lib/components/Clipboard/Clipboard.styles.d.ts +1 -0
- package/lib/components/Clipboard/Clipboard.styles.d.ts.map +1 -1
- package/lib/components/Clipboard/Clipboard.styles.js +11 -1
- package/lib/components/Clipboard/Clipboard.styles.js.map +1 -1
- package/lib/components/Clipboard/Clipboard.types.d.ts +2 -2
- package/lib/components/Clipboard/Clipboard.types.d.ts.map +1 -1
- package/lib/components/Clipboard/Clipboard.types.js.map +1 -1
- package/lib/components/Clipboard/index.d.ts +1 -1
- package/lib/components/Clipboard/index.d.ts.map +1 -1
- package/lib/components/Clipboard/index.js.map +1 -1
- package/lib/components/PreviewShell/Footer.d.ts.map +1 -1
- package/lib/components/PreviewShell/Footer.js +6 -1
- package/lib/components/PreviewShell/Footer.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.js +19 -3
- package/lib/components/PreviewShell/PreviewShell.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts +1 -0
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.js +12 -0
- package/lib/components/PreviewShell/PreviewShell.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAA4B,MAAM,mBAAmB,CAAC;AA6D7E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAyB/D,CAAC;AACF,eAAe,SAAS,CAAC"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useMemo } from 'react';
|
|
3
|
-
import { Button, Flex, MetaList, Progress, StandardTree, SummaryItem,
|
|
4
|
-
import { StyledClipboardFooter, StyledContainer, StyledContent, StyledMain, StyledTreeContainer } from './Clipboard.styles';
|
|
2
|
+
import { forwardRef, useMemo, useEffect, useRef } from 'react';
|
|
3
|
+
import { Button, Flex, MetaList, Progress, StandardTree, SummaryItem, Text, Table, useI18n, EmptyState } from '@pega/cosmos-react-core';
|
|
4
|
+
import { StyledClipboardFooter, StyledContainer, StyledContent, StyledMain, StyledTitle, StyledTreeContainer } from './Clipboard.styles';
|
|
5
5
|
const FieldRenderer = (cell) => {
|
|
6
6
|
return (_jsx(_Fragment, { children: cell.onClick ? (_jsx(Button, { variant: 'link', onClick: (e) => cell.onClick?.(cell.id, e), children: cell.name })) : (cell.name) }));
|
|
7
7
|
};
|
|
8
|
-
const
|
|
8
|
+
const FieldSummary = ({ primary, secondary, fields, actions }) => {
|
|
9
|
+
const headingRef = useRef(null);
|
|
9
10
|
const t = useI18n();
|
|
11
|
+
const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);
|
|
10
12
|
const columns = [
|
|
11
13
|
{
|
|
12
14
|
renderer: FieldRenderer,
|
|
@@ -14,15 +16,13 @@ const Clipboard = forwardRef(({ navigation, content, lastUpdated }, ref) => {
|
|
|
14
16
|
},
|
|
15
17
|
{ renderer: 'value', label: t('condition_builder_value_label') }
|
|
16
18
|
];
|
|
19
|
+
useEffect(() => headingRef.current?.focus(), []);
|
|
20
|
+
return (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: _jsx(StyledTitle, { tabIndex: -1, variant: 'h3', ref: headingRef, children: primary }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: actions }), _jsx(Table, { title: primary, columns: columns, data: fields })] }));
|
|
21
|
+
};
|
|
22
|
+
const Clipboard = forwardRef(({ navigation, content, lastUpdated }, ref) => {
|
|
23
|
+
const t = useI18n();
|
|
17
24
|
const navContent = useMemo(() => _jsx(StandardTree, { ...navigation }), [navigation]);
|
|
18
|
-
|
|
19
|
-
if (content) {
|
|
20
|
-
const metaListItems = content.secondary?.map(({ name, value }) => `${name}: ${value}`);
|
|
21
|
-
return content.loading ? (_jsx(Progress, { placement: 'local', message: t('loading') })) : (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: _jsx(Text, { variant: 'h3', children: content.primary }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: content.actions }), _jsx(Table, { columns: columns, data: content.fields })] }));
|
|
22
|
-
}
|
|
23
|
-
return _jsx(EmptyState, {});
|
|
24
|
-
}, [content]);
|
|
25
|
-
return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsx(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: mainContent })] }), _jsx(StyledClipboardFooter, { children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));
|
|
25
|
+
return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsxs(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: [!content && _jsx(EmptyState, {}), content && content.loading && _jsx(Progress, { placement: 'local', message: t('loading') }), content && !content.loading && _jsx(FieldSummary, { ...content })] })] }), _jsx(StyledClipboardFooter, { children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));
|
|
26
26
|
});
|
|
27
27
|
export default Clipboard;
|
|
28
28
|
//# sourceMappingURL=Clipboard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n forwardRef,\n useMemo,\n FC,\n useEffect,\n useRef\n} from 'react';\n\nimport {\n Button,\n ColumnProps,\n Flex,\n ForwardProps,\n MetaList,\n Progress,\n StandardTree,\n SummaryItem,\n Text,\n Table,\n useI18n,\n EmptyState\n} from '@pega/cosmos-react-core';\n\nimport { ClipboardProps, FieldSummaryProps, Field } from './Clipboard.types';\nimport {\n StyledClipboardFooter,\n StyledContainer,\n StyledContent,\n StyledMain,\n StyledTitle,\n StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n return (\n <>\n {cell.onClick ? (\n <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n {cell.name}\n </Button>\n ) : (\n cell.name\n )}\n </>\n );\n};\n\nconst FieldSummary: FC<FieldSummaryProps> = ({\n primary,\n secondary,\n fields,\n actions\n}: FieldSummaryProps) => {\n const headingRef = useRef<HTMLSpanElement>(null);\n const t = useI18n();\n\n const metaListItems = secondary?.map(({ name, value }) => `${name}: ${value}`);\n\n const columns: ColumnProps<Field>[] = [\n {\n renderer: FieldRenderer,\n label: t('condition_builder_field_label')\n },\n { renderer: 'value', label: t('condition_builder_value_label') }\n ];\n\n useEffect(() => headingRef.current?.focus(), []);\n\n return (\n <>\n <SummaryItem\n primary={\n <StyledTitle tabIndex={-1} variant='h3' ref={headingRef}>\n {primary}\n </StyledTitle>\n }\n secondary={metaListItems && <MetaList items={metaListItems} />}\n actions={actions}\n />\n <Table title={primary} columns={columns} data={fields} />\n </>\n );\n};\n\nconst Clipboard: FunctionComponent<ClipboardProps & ForwardProps> = forwardRef(\n (\n { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n ref: ClipboardProps['ref']\n ) => {\n const t = useI18n();\n const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n return (\n <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n <Flex as={StyledMain} container>\n <StyledTreeContainer>{navContent}</StyledTreeContainer>\n <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n {!content && <EmptyState />}\n {content && content.loading && <Progress placement='local' message={t('loading')} />}\n {content && !content.loading && <FieldSummary {...content} />}\n </Flex>\n </Flex>\n\n <StyledClipboardFooter>\n {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n </StyledClipboardFooter>\n </Flex>\n );\n }\n);\nexport default Clipboard;\n"]}
|
|
@@ -2,5 +2,6 @@ export declare const StyledContainer: import("styled-components").StyledComponen
|
|
|
2
2
|
export declare const StyledTreeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
4
|
export declare const StyledClipboardFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const StyledTitle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
5
6
|
export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
7
|
//# sourceMappingURL=Clipboard.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clipboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Clipboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAc/B,CAAC;AAIF,eAAO,MAAM,UAAU,yGAgBtB,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAgBjC,CAAC;AAIF,eAAO,MAAM,WAAW,mOAIvB,CAAC;AAEF,eAAO,MAAM,aAAa,yGAgBxB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import {
|
|
2
|
+
import { hideVisually } from 'polished';
|
|
3
|
+
import { defaultThemeProp, StyledCard, StyledText, Text } from '@pega/cosmos-react-core';
|
|
3
4
|
import { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
|
|
4
5
|
import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
|
|
5
6
|
export const StyledContainer = styled.div `
|
|
@@ -38,6 +39,11 @@ export const StyledClipboardFooter = styled.div(({ theme: { base: { shadow, spac
|
|
|
38
39
|
`;
|
|
39
40
|
});
|
|
40
41
|
StyledClipboardFooter.defaultProps = defaultThemeProp;
|
|
42
|
+
export const StyledTitle = styled(Text) `
|
|
43
|
+
&:focus-visible {
|
|
44
|
+
outline: none;
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
41
47
|
export const StyledContent = styled.div(({ theme }) => {
|
|
42
48
|
return css `
|
|
43
49
|
overflow: auto;
|
|
@@ -48,6 +54,10 @@ export const StyledContent = styled.div(({ theme }) => {
|
|
|
48
54
|
|
|
49
55
|
&& ${StyledCard} ${StyledCardContent} {
|
|
50
56
|
padding: 0;
|
|
57
|
+
|
|
58
|
+
${StyledText} {
|
|
59
|
+
${hideVisually}
|
|
60
|
+
}
|
|
51
61
|
}
|
|
52
62
|
`;
|
|
53
63
|
});
|
|
@@ -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;
|
|
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;4BACD,MAAM,CAAC,KAAK;;KAEnC,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: inset ${shadow.focus};\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"]}
|
|
@@ -13,7 +13,7 @@ export interface Field {
|
|
|
13
13
|
*/
|
|
14
14
|
onClick?: (id: string, e: MouseEvent) => void;
|
|
15
15
|
}
|
|
16
|
-
export interface
|
|
16
|
+
export interface FieldSummaryProps {
|
|
17
17
|
/** Title the field list */
|
|
18
18
|
primary: SummaryItemProps['primary'];
|
|
19
19
|
/** Metadata for field list */
|
|
@@ -29,7 +29,7 @@ export interface ClipboardProps extends BaseProps {
|
|
|
29
29
|
/** content for tree navigation */
|
|
30
30
|
navigation: StandardTreeProps;
|
|
31
31
|
/** content for the field list */
|
|
32
|
-
content?:
|
|
32
|
+
content?: FieldSummaryProps;
|
|
33
33
|
/** content for footer info */
|
|
34
34
|
lastUpdated?: DateTimeDisplayProps['value'];
|
|
35
35
|
/** Ref for the component */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clipboard.types.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Clipboard.types.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,iBAAiB;IAChC,2BAA2B;IAC3B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACrC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC1C,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,kCAAkC;IAClC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC5C,4BAA4B;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Clipboard.types.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n StandardTreeProps,\n BaseProps,\n SummaryItemProps,\n FieldValueListProps,\n DateTimeDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport interface Field {\n /** Unique id for the field */\n id: string;\n /** label for the field */\n name: string;\n /** value for the field */\n value?: string;\n /**\n * callback to be invoked on click of the field name\n * if passed, field name will be rendered as a simple button\n */\n onClick?: (id: string, e: MouseEvent) => void;\n}\n\nexport interface
|
|
1
|
+
{"version":3,"file":"Clipboard.types.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n StandardTreeProps,\n BaseProps,\n SummaryItemProps,\n FieldValueListProps,\n DateTimeDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport interface Field {\n /** Unique id for the field */\n id: string;\n /** label for the field */\n name: string;\n /** value for the field */\n value?: string;\n /**\n * callback to be invoked on click of the field name\n * if passed, field name will be rendered as a simple button\n */\n onClick?: (id: string, e: MouseEvent) => void;\n}\n\nexport interface FieldSummaryProps {\n /** Title the field list */\n primary: SummaryItemProps['primary'];\n /** Metadata for field list */\n secondary?: FieldValueListProps['fields'];\n /** Action buttons for field list */\n actions?: SummaryItemProps['actions'];\n /** content for the Field list */\n fields: Field[];\n /** Boolean to show loading indicator in field list */\n loading?: boolean;\n}\n\nexport interface ClipboardProps extends BaseProps {\n /** content for tree navigation */\n navigation: StandardTreeProps;\n /** content for the field list */\n content?: FieldSummaryProps;\n // TODO: Make it a separate component and accept timestamp or standard date format\n /** content for footer info */\n lastUpdated?: DateTimeDisplayProps['value'];\n /** Ref for the component */\n ref?: Ref<HTMLUListElement>;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './Clipboard';\nexport { ClipboardProps,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './Clipboard';\nexport { ClipboardProps, FieldSummaryProps } from './Clipboard.types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAwB,MAAM,OAAO,CAAC;AAE1F,OAAO,EAIL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAwB,MAAM,OAAO,CAAC;AAE1F,OAAO,EAIL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAmF3D,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -10,8 +10,13 @@ const Footer = forwardRef(({ tabs, tabContent, onTabClick, newTabHref, menu }, r
|
|
|
10
10
|
const [currentTabId, setCurrentTabId] = useState(tabs[0].id);
|
|
11
11
|
const t = useI18n();
|
|
12
12
|
const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');
|
|
13
|
-
const toggleButtonA11y = t(footerExpanded(footerState) ? '
|
|
13
|
+
const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_noun' : 'expand_noun', [
|
|
14
|
+
t('debug_tools')
|
|
15
|
+
]);
|
|
14
16
|
const handleTabChange = (id, e) => {
|
|
17
|
+
if (!footerExpanded(footerState)) {
|
|
18
|
+
toggleFooter();
|
|
19
|
+
}
|
|
15
20
|
setCurrentTabId(id);
|
|
16
21
|
onTabClick(id, e);
|
|
17
22
|
};
|
|
@@ -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,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EACL,QAAQ,EACR,IAAI,EACJ,IAAI,EAEJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAGxD,MAAM,MAAM,GAAoD,UAAU,CACxE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,GAAuB,EAAE,EAAE;IAC9E,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACtE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjF,MAAM,gBAAgB,GAAG,CAAC,
|
|
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, useState } from 'react';\n\nimport {\n TabPanel,\n Tabs,\n Flex,\n ForwardProps,\n Button,\n Icon,\n MenuButton,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledTabContainer, StyledToolsContainer, StyledFooter } from './PreviewShell.styles';\nimport { footerExpanded } from './utils';\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n ({ tabs, tabContent, onTabClick, newTabHref, menu }, ref: FooterProps['ref']) => {\n const { footerState, toggleFooter } = useContext(PreviewShellContext);\n const [currentTabId, setCurrentTabId] = useState(tabs[0].id);\n const t = useI18n();\n\n const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');\n const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_noun' : 'expand_noun', [\n t('debug_tools')\n ]);\n\n const handleTabChange = (id: string, e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (!footerExpanded(footerState)) {\n toggleFooter();\n }\n setCurrentTabId(id);\n onTabClick(id, e);\n };\n\n return (\n <Flex as={StyledFooter} container={{ direction: 'column' }}>\n <Flex as={StyledTabContainer} container={{ justify: 'between' }}>\n <Flex\n item={{ grow: 1 }}\n as={Tabs}\n tabs={tabs}\n currentTabId={currentTabId}\n onTabClick={handleTabChange}\n />\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 {newTabHref && (\n <Button\n variant='simple'\n href={newTabHref}\n target='_blank'\n label={t('open_in_new_window_text')}\n icon\n >\n <Icon name='open' />\n </Button>\n )}\n <Button\n variant='simple'\n icon\n aria-expanded={footerExpanded(footerState)}\n label={\n footerState === expandCollapseStates.high ||\n footerState === expandCollapseStates.low\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonA11y}\n onClick={toggleFooter}\n >\n <Icon name={footerExpanded(footerState) ? 'caret-down' : 'caret-up'} />\n </Button>\n </Flex>\n </Flex>\n <Flex\n as={StyledToolsContainer}\n ref={ref}\n aria-hidden={!footerExpanded(footerState)}\n container={{ pad: [1, 2] }}\n item={{ grow: 1 }}\n >\n {footerState !== expandCollapseStates.low && (\n <TabPanel tabId={currentTabId} currentTabId={currentTabId}>\n {tabContent}\n </TabPanel>\n )}\n </Flex>\n </Flex>\n );\n }\n);\nexport default Footer;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAEnG,OAAO,
|
|
1
|
+
{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAEnG,OAAO,EACL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiGrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,14 +1,30 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useRef, useEffect, useMemo } from 'react';
|
|
3
|
-
import { useI18n, useTransitionState } from '@pega/cosmos-react-core';
|
|
3
|
+
import { useI18n, useTransitionState, SkipLinks } from '@pega/cosmos-react-core';
|
|
4
4
|
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
5
|
-
import { StyledIframe, StyledMain } from './PreviewShell.styles';
|
|
5
|
+
import { StyledIframe, StyledMain, StyledPreviewContainer } from './PreviewShell.styles';
|
|
6
6
|
import Footer from './Footer';
|
|
7
7
|
import PreviewShellContext from './PreviewShellContext';
|
|
8
8
|
import Header from './Header';
|
|
9
9
|
const PreviewShell = forwardRef(({ header, frameurl, footer: { tabs, tabContent, onTabClick, newTabHref, menu, expanded, onBeforeExpand, onAfterExpand, onBeforeCollapse, onAfterCollapse } }, ref) => {
|
|
10
10
|
const footerEl = useRef(null);
|
|
11
11
|
const t = useI18n();
|
|
12
|
+
const skipLinks = useMemo(() => [
|
|
13
|
+
{
|
|
14
|
+
label: t('go_to_main_content'),
|
|
15
|
+
target: {
|
|
16
|
+
ariaLabel: t('main_content'),
|
|
17
|
+
selector: 'main'
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
label: t('go_to_noun', [t('debug_tools')]),
|
|
22
|
+
target: {
|
|
23
|
+
ariaLabel: t('debug_tools'),
|
|
24
|
+
selector: 'footer'
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
], [t]);
|
|
12
28
|
const { state: footerState, toggle: toggleFooter, set: setFooterState } = useTransitionState({
|
|
13
29
|
ref: footerEl,
|
|
14
30
|
property: 'height',
|
|
@@ -35,7 +51,7 @@ const PreviewShell = forwardRef(({ header, frameurl, footer: { tabs, tabContent,
|
|
|
35
51
|
return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
|
|
36
52
|
footerState,
|
|
37
53
|
toggleFooter
|
|
38
|
-
}), [footerState, toggleFooter]), children: [_jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, children: _jsx(StyledIframe, { src: frameurl, title: t('
|
|
54
|
+
}), [footerState, toggleFooter]), children: [_jsx(SkipLinks, { items: skipLinks }), _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: _jsx(StyledIframe, { src: frameurl, title: t('preview_frame') }) }) }), _jsx(Footer, { tabs: tabs, newTabHref: newTabHref, menu: menu, tabContent: tabContent, onTabClick: onTabClick, ref: footerEl })] }));
|
|
39
55
|
});
|
|
40
56
|
export default PreviewShell;
|
|
41
57
|
//# sourceMappingURL=PreviewShell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnG,OAAO,
|
|
1
|
+
{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnG,OAAO,EAEL,OAAO,EACP,kBAAkB,EAElB,SAAS,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,MAAM,EACN,QAAQ,EACR,MAAM,EAAE,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EAChB,EACkC,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAA4B,OAAO,CAChD,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;YAC9B,MAAM,EAAE;gBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;gBAC5B,QAAQ,EAAE,MAAM;aACjB;SACF;QACD;YACE,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;YAC1C,MAAM,EAAE;gBACN,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC;gBAC3B,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF,EACD,CAAC,CAAC,CAAC,CACJ,CAAC;IAEF,MAAM,EACJ,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,cAAc,EACpB,GAAG,kBAAkB,CAAC;QACrB,GAAG,EAAE,QAAQ;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,oBAAoB;QAC5B,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,GAAG;KAC9E,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAClF,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,oBAAoB,CAAC,MAAM,EAAE;YAC/C,cAAc,EAAE,EAAE,CAAC;SACpB;aAAM,IAAI,WAAW,KAAK,oBAAoB,CAAC,OAAO,EAAE;YACvD,gBAAgB,EAAE,EAAE,CAAC;SACtB;aAAM,IAAI,WAAW,KAAK,oBAAoB,CAAC,GAAG,EAAE;YACnD,eAAe,EAAE,EAAE,CAAC;SACrB;aAAM;YACL,aAAa,EAAE,EAAE,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,WAAW;YACX,YAAY;SACb,CAAC,EACF,CAAC,WAAW,EAAE,YAAY,CAAC,CAC5B,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC/B,KAAC,MAAM,OAAK,MAAM,GAAI,EACtB,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,YAClB,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YACjE,KAAC,YAAY,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,GAAI,GACnC,GACd,EACb,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,QAAQ,GACb,IAC2B,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FunctionComponent, useRef, useEffect, useMemo } from 'react';\n\nimport {\n ForwardProps,\n useI18n,\n useTransitionState,\n SkipLinksProps,\n SkipLinks\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledIframe, StyledMain, StyledPreviewContainer } from './PreviewShell.styles';\nimport Footer from './Footer';\nimport PreviewShellContext from './PreviewShellContext';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n (\n {\n header,\n frameurl,\n footer: {\n tabs,\n tabContent,\n onTabClick,\n newTabHref,\n menu,\n expanded,\n onBeforeExpand,\n onAfterExpand,\n onBeforeCollapse,\n onAfterCollapse\n }\n }: PropsWithoutRef<PreviewShellProps>,\n ref: PreviewShellProps['ref']\n ) => {\n const footerEl = useRef<HTMLDivElement>(null);\n const t = useI18n();\n const skipLinks: SkipLinksProps['items'] = useMemo(\n () => [\n {\n label: t('go_to_main_content'),\n target: {\n ariaLabel: t('main_content'),\n selector: 'main'\n }\n },\n {\n label: t('go_to_noun', [t('debug_tools')]),\n target: {\n ariaLabel: t('debug_tools'),\n selector: 'footer'\n }\n }\n ],\n [t]\n );\n\n const {\n state: footerState,\n toggle: toggleFooter,\n set: setFooterState\n } = useTransitionState({\n ref: footerEl,\n property: 'height',\n states: expandCollapseStates,\n defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low\n });\n\n useEffect(() => {\n setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);\n }, [expanded]);\n\n useEffect(() => {\n if (footerState === expandCollapseStates.rising) {\n onBeforeExpand?.();\n } else if (footerState === expandCollapseStates.falling) {\n onBeforeCollapse?.();\n } else if (footerState === expandCollapseStates.low) {\n onAfterCollapse?.();\n } else {\n onAfterExpand?.();\n }\n }, [footerState]);\n\n return (\n <PreviewShellContext.Provider\n value={useMemo(\n () => ({\n footerState,\n toggleFooter\n }),\n [footerState, toggleFooter]\n )}\n >\n <SkipLinks items={skipLinks} />\n <Header {...header} />\n <StyledMain ref={ref}>\n <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n <StyledIframe src={frameurl} title={t('preview_frame')} />\n </StyledPreviewContainer>\n </StyledMain>\n <Footer\n tabs={tabs}\n newTabHref={newTabHref}\n menu={menu}\n tabContent={tabContent}\n onTabClick={onTabClick}\n ref={footerEl}\n />\n </PreviewShellContext.Provider>\n );\n }\n);\n\nexport default PreviewShell;\n"]}
|
|
@@ -5,6 +5,7 @@ export declare const StyledBareButton: import("styled-components").StyledCompone
|
|
|
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, {}, never>;
|
|
7
7
|
export declare const StyledIframe: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
9
|
export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
|
|
9
10
|
export declare const StyledTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
11
|
export declare const StyledToolsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAYjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU,0GAcrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIxB,CAAC;AAEF,eAAO,MAAM,YAAY,4GAKvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAgB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAsBhC,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;AAYjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU,0GAcrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAUjC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAKvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAgB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAsBhC,CAAC"}
|
|
@@ -65,6 +65,18 @@ export const StyledIframe = styled.iframe `
|
|
|
65
65
|
height: 100%;
|
|
66
66
|
border: none;
|
|
67
67
|
`;
|
|
68
|
+
export const StyledPreviewContainer = styled.div(({ theme }) => {
|
|
69
|
+
return css `
|
|
70
|
+
height: 100%;
|
|
71
|
+
width: 100%;
|
|
72
|
+
&:focus,
|
|
73
|
+
&:focus-visible {
|
|
74
|
+
box-shadow: ${theme.base.shadow.focus};
|
|
75
|
+
outline: none;
|
|
76
|
+
}
|
|
77
|
+
`;
|
|
78
|
+
});
|
|
79
|
+
StyledPreviewContainer.defaultProps = defaultThemeProp;
|
|
68
80
|
export const StyledFooter = styled.footer(({ theme }) => {
|
|
69
81
|
return css `
|
|
70
82
|
background-color: ${theme.base.palette['primary-background']};
|
|
@@ -1 +1 @@
|
|
|
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 { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport footerexpanded from './utils';\n\nconst footerExpandedHeight = '50vh';\nconst footerOffset = '2.5rem';\nconst headerHeight = '3rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n return css`\n height: ${headerHeight};\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].xs};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n const { footerState } = useContext(PreviewShellContext);\n const heightDelta = footerexpanded(footerState)\n ? `${footerExpandedHeight} - ${headerHeight}`\n : `${footerOffset} - ${headerHeight}`;\n\n return css`\n height: calc(100vh - ${heightDelta});\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 100%;\n padding: calc(2 * ${theme.base.spacing});\n background-color: ${theme.base.colors.slate.medium};\n overflow: hidden;\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 StyledFooter = styled.footer(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n overflow: hidden;\n `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(({ theme }) => {\n return css`\n height: ${footerOffset};\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n text-decoration: none;\n\n & ${StyledTabs} {\n height: 100%;\n border-bottom: none;\n\n button {\n height: 100%;\n }\n }\n `;\n});\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContainer = styled.div(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { footerState } = useContext(PreviewShellContext);\n const containerHeight = footerexpanded(footerState)\n ? `calc(${footerExpandedHeight} - ${footerOffset})`\n : 0;\n\n return css`\n height: ${containerHeight};\n padding: 0;\n transition: height ${animation.speed} ${animation.timing.ease};\n overflow: auto;\n\n ${StyledTabPanel} {\n width: 100%;\n }\n `;\n }\n);\n\nStyledToolsContainer.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp, Text } from '@pega/cosmos-react-core';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport footerexpanded from './utils';\n\nconst footerExpandedHeight = '50vh';\nconst footerOffset = '2.5rem';\nconst headerHeight = '3rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n return css`\n height: ${headerHeight};\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].xs};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n const { footerState } = useContext(PreviewShellContext);\n const heightDelta = footerexpanded(footerState)\n ? `${footerExpandedHeight} - ${headerHeight}`\n : `${footerOffset} - ${headerHeight}`;\n\n return css`\n height: calc(100vh - ${heightDelta});\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 100%;\n padding: calc(2 * ${theme.base.spacing});\n background-color: ${theme.base.colors.slate.medium};\n overflow: hidden;\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(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n overflow: hidden;\n `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(({ theme }) => {\n return css`\n height: ${footerOffset};\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n text-decoration: none;\n\n & ${StyledTabs} {\n height: 100%;\n border-bottom: none;\n\n button {\n height: 100%;\n }\n }\n `;\n});\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContainer = styled.div(\n ({\n theme: {\n base: { animation }\n }\n }) => {\n const { footerState } = useContext(PreviewShellContext);\n const containerHeight = footerexpanded(footerState)\n ? `calc(${footerExpandedHeight} - ${footerOffset})`\n : 0;\n\n return css`\n height: ${containerHeight};\n padding: 0;\n transition: height ${animation.speed} ${animation.timing.ease};\n overflow: auto;\n\n ${StyledTabPanel} {\n width: 100%;\n }\n `;\n }\n);\n\nStyledToolsContainer.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-tools",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.26.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": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.26.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.7",
|