@pega/cosmos-react-build 2.1.3 → 2.1.6
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/package.json +3 -3
- package/lib/components/AppHeader/AppHeader.d.ts +0 -29
- package/lib/components/AppHeader/AppHeader.d.ts.map +0 -1
- package/lib/components/AppHeader/AppHeader.js +0 -32
- package/lib/components/AppHeader/AppHeader.js.map +0 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts +0 -12
- package/lib/components/AppHeader/AppHeader.styles.d.ts.map +0 -1
- package/lib/components/AppHeader/AppHeader.styles.js +0 -123
- package/lib/components/AppHeader/AppHeader.styles.js.map +0 -1
- package/lib/components/AppHeader/index.d.ts +0 -3
- package/lib/components/AppHeader/index.d.ts.map +0 -1
- package/lib/components/AppHeader/index.js +0 -2
- package/lib/components/AppHeader/index.js.map +0 -1
- package/lib/components/AppShell/AppShell.d.ts +0 -4
- package/lib/components/AppShell/AppShell.d.ts.map +0 -1
- package/lib/components/AppShell/AppShell.js +0 -84
- package/lib/components/AppShell/AppShell.js.map +0 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +0 -20
- package/lib/components/AppShell/AppShell.styles.d.ts.map +0 -1
- package/lib/components/AppShell/AppShell.styles.js +0 -331
- package/lib/components/AppShell/AppShell.styles.js.map +0 -1
- package/lib/components/AppShell/AppShell.types.d.ts +0 -43
- package/lib/components/AppShell/AppShell.types.d.ts.map +0 -1
- package/lib/components/AppShell/AppShell.types.js +0 -2
- package/lib/components/AppShell/AppShell.types.js.map +0 -1
- package/lib/components/AppShell/AppShellContext.d.ts +0 -4
- package/lib/components/AppShell/AppShellContext.d.ts.map +0 -1
- package/lib/components/AppShell/AppShellContext.js +0 -10
- package/lib/components/AppShell/AppShellContext.js.map +0 -1
- package/lib/components/AppShell/index.d.ts +0 -3
- package/lib/components/AppShell/index.d.ts.map +0 -1
- package/lib/components/AppShell/index.js +0 -2
- package/lib/components/AppShell/index.js.map +0 -1
- package/lib/components/FlowModeller/AddNode.d.ts +0 -16
- package/lib/components/FlowModeller/AddNode.d.ts.map +0 -1
- package/lib/components/FlowModeller/AddNode.js +0 -62
- package/lib/components/FlowModeller/AddNode.js.map +0 -1
- package/lib/components/FlowModeller/FlowModeller.d.ts +0 -21
- package/lib/components/FlowModeller/FlowModeller.d.ts.map +0 -1
- package/lib/components/FlowModeller/FlowModeller.js +0 -190
- package/lib/components/FlowModeller/FlowModeller.js.map +0 -1
- package/lib/components/FlowModeller/Node/Node.types.d.ts +0 -54
- package/lib/components/FlowModeller/Node/Node.types.d.ts.map +0 -1
- package/lib/components/FlowModeller/Node/Node.types.js +0 -28
- package/lib/components/FlowModeller/Node/Node.types.js.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts +0 -15
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js +0 -128
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts +0 -6
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplates.js +0 -64
- package/lib/components/FlowModeller/Node/NodeTemplates.js.map +0 -1
- package/lib/components/FlowModeller/NodeLibrary.d.ts +0 -13
- package/lib/components/FlowModeller/NodeLibrary.d.ts.map +0 -1
- package/lib/components/FlowModeller/NodeLibrary.js +0 -51
- package/lib/components/FlowModeller/NodeLibrary.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Connectors.d.ts +0 -13
- package/lib/components/FlowModeller/Renderer/Connectors.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Connectors.js +0 -47
- package/lib/components/FlowModeller/Renderer/Connectors.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Nodes.d.ts +0 -9
- package/lib/components/FlowModeller/Renderer/Nodes.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Nodes.js +0 -25
- package/lib/components/FlowModeller/Renderer/Nodes.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.d.ts +0 -5
- package/lib/components/FlowModeller/Renderer/Renderer.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.js +0 -17
- package/lib/components/FlowModeller/Renderer/Renderer.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts +0 -18
- package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.types.js +0 -2
- package/lib/components/FlowModeller/Renderer/Renderer.types.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts +0 -54
- package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/Graph.js +0 -302
- package/lib/components/FlowModeller/Renderer/Utils/Graph.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts +0 -35
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js +0 -107
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.d.ts +0 -24
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.js +0 -152
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.js.map +0 -1
- package/lib/components/FlowModeller/Utils/AddNodeUtils.d.ts +0 -16
- package/lib/components/FlowModeller/Utils/AddNodeUtils.d.ts.map +0 -1
- package/lib/components/FlowModeller/Utils/AddNodeUtils.js +0 -118
- package/lib/components/FlowModeller/Utils/AddNodeUtils.js.map +0 -1
- package/lib/components/FlowModeller/helper.d.ts +0 -23
- package/lib/components/FlowModeller/helper.d.ts.map +0 -1
- package/lib/components/FlowModeller/helper.js +0 -128
- package/lib/components/FlowModeller/helper.js.map +0 -1
- package/lib/components/FlowModeller/index.d.ts +0 -10
- package/lib/components/FlowModeller/index.d.ts.map +0 -1
- package/lib/components/FlowModeller/index.js +0 -8
- package/lib/components/FlowModeller/index.js.map +0 -1
- package/lib/components/LifeCycle/Category.d.ts +0 -32
- package/lib/components/LifeCycle/Category.d.ts.map +0 -1
- package/lib/components/LifeCycle/Category.js +0 -98
- package/lib/components/LifeCycle/Category.js.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.d.ts +0 -22
- package/lib/components/LifeCycle/LifeCycle.d.ts.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.js +0 -73
- package/lib/components/LifeCycle/LifeCycle.js.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.types.d.ts +0 -56
- package/lib/components/LifeCycle/LifeCycle.types.d.ts.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.types.js +0 -2
- package/lib/components/LifeCycle/LifeCycle.types.js.map +0 -1
- package/lib/components/LifeCycle/LifeCycleList.d.ts +0 -22
- package/lib/components/LifeCycle/LifeCycleList.d.ts.map +0 -1
- package/lib/components/LifeCycle/LifeCycleList.js +0 -65
- package/lib/components/LifeCycle/LifeCycleList.js.map +0 -1
- package/lib/components/LifeCycle/Stage.d.ts +0 -49
- package/lib/components/LifeCycle/Stage.d.ts.map +0 -1
- package/lib/components/LifeCycle/Stage.js +0 -293
- package/lib/components/LifeCycle/Stage.js.map +0 -1
- package/lib/components/LifeCycle/Step.d.ts +0 -51
- package/lib/components/LifeCycle/Step.d.ts.map +0 -1
- package/lib/components/LifeCycle/Step.js +0 -241
- package/lib/components/LifeCycle/Step.js.map +0 -1
- package/lib/components/LifeCycle/Task.d.ts +0 -53
- package/lib/components/LifeCycle/Task.d.ts.map +0 -1
- package/lib/components/LifeCycle/Task.js +0 -188
- package/lib/components/LifeCycle/Task.js.map +0 -1
- package/lib/components/LifeCycle/index.d.ts +0 -4
- package/lib/components/LifeCycle/index.d.ts.map +0 -1
- package/lib/components/LifeCycle/index.js +0 -2
- package/lib/components/LifeCycle/index.js.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.d.ts +0 -23
- package/lib/components/PageTemplates/GalleryPage.d.ts.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.js +0 -23
- package/lib/components/PageTemplates/GalleryPage.js.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts +0 -9
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.styles.js +0 -70
- package/lib/components/PageTemplates/GalleryPage.styles.js.map +0 -1
- package/lib/components/PageTemplates/PageTemplates.d.ts +0 -27
- package/lib/components/PageTemplates/PageTemplates.d.ts.map +0 -1
- package/lib/components/PageTemplates/PageTemplates.js +0 -105
- package/lib/components/PageTemplates/PageTemplates.js.map +0 -1
- package/lib/components/PageTemplates/index.d.ts +0 -5
- package/lib/components/PageTemplates/index.d.ts.map +0 -1
- package/lib/components/PageTemplates/index.js +0 -4
- package/lib/components/PageTemplates/index.js.map +0 -1
- package/lib/components/SummaryCard/SummaryCard.d.ts +0 -16
- package/lib/components/SummaryCard/SummaryCard.d.ts.map +0 -1
- package/lib/components/SummaryCard/SummaryCard.js +0 -31
- package/lib/components/SummaryCard/SummaryCard.js.map +0 -1
- package/lib/components/SummaryCard/index.d.ts +0 -3
- package/lib/components/SummaryCard/index.d.ts.map +0 -1
- package/lib/components/SummaryCard/index.js +0 -3
- package/lib/components/SummaryCard/index.js.map +0 -1
- package/lib/components/Visual/Visual.d.ts +0 -17
- package/lib/components/Visual/Visual.d.ts.map +0 -1
- package/lib/components/Visual/Visual.js +0 -28
- package/lib/components/Visual/Visual.js.map +0 -1
- package/lib/components/Visual/index.d.ts +0 -3
- package/lib/components/Visual/index.d.ts.map +0 -1
- package/lib/components/Visual/index.js +0 -3
- package/lib/components/Visual/index.js.map +0 -1
- package/lib/components/Workbench/ConfigurationPanel.d.ts +0 -5
- package/lib/components/Workbench/ConfigurationPanel.d.ts.map +0 -1
- package/lib/components/Workbench/ConfigurationPanel.js +0 -21
- package/lib/components/Workbench/ConfigurationPanel.js.map +0 -1
- package/lib/components/Workbench/Toolbar.d.ts +0 -14
- package/lib/components/Workbench/Toolbar.d.ts.map +0 -1
- package/lib/components/Workbench/Toolbar.js +0 -14
- package/lib/components/Workbench/Toolbar.js.map +0 -1
- package/lib/components/Workbench/UtilityPanel.d.ts +0 -7
- package/lib/components/Workbench/UtilityPanel.d.ts.map +0 -1
- package/lib/components/Workbench/UtilityPanel.js +0 -12
- package/lib/components/Workbench/UtilityPanel.js.map +0 -1
- package/lib/components/Workbench/Workbench.d.ts +0 -6
- package/lib/components/Workbench/Workbench.d.ts.map +0 -1
- package/lib/components/Workbench/Workbench.js +0 -24
- package/lib/components/Workbench/Workbench.js.map +0 -1
- package/lib/components/Workbench/Workbench.styles.d.ts +0 -10
- package/lib/components/Workbench/Workbench.styles.d.ts.map +0 -1
- package/lib/components/Workbench/Workbench.styles.js +0 -71
- package/lib/components/Workbench/Workbench.styles.js.map +0 -1
- package/lib/components/Workbench/Workbench.types.d.ts +0 -49
- package/lib/components/Workbench/Workbench.types.d.ts.map +0 -1
- package/lib/components/Workbench/Workbench.types.js +0 -2
- package/lib/components/Workbench/Workbench.types.js.map +0 -1
- package/lib/components/Workbench/index.d.ts +0 -2
- package/lib/components/Workbench/index.d.ts.map +0 -1
- package/lib/components/Workbench/index.js +0 -2
- package/lib/components/Workbench/index.js.map +0 -1
- package/lib/index.d.ts +0 -13
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -14
- package/lib/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.6",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "2.1.
|
|
24
|
-
"@pega/cosmos-react-dnd": "2.1.
|
|
23
|
+
"@pega/cosmos-react-core": "2.1.6",
|
|
24
|
+
"@pega/cosmos-react-dnd": "2.1.6",
|
|
25
25
|
"dagre": "^0.8.5",
|
|
26
26
|
"polished": "^4.1.0",
|
|
27
27
|
"react": "^16.14.0 || ^17.0.0",
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, Ref, MouseEvent } from 'react';
|
|
2
|
-
import { AvatarProps, BaseProps, ForwardProps, SearchInputProps, MenuItemProps, Tab, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
-
export interface AppHeaderProps extends BaseProps, NoChildrenProp {
|
|
4
|
-
brand: BrandProps;
|
|
5
|
-
links?: LinkProps[];
|
|
6
|
-
utils?: UtilsProps;
|
|
7
|
-
ref?: Ref<HTMLDivElement>;
|
|
8
|
-
}
|
|
9
|
-
interface BrandProps {
|
|
10
|
-
/** The primary text to render in the header. */
|
|
11
|
-
name: string;
|
|
12
|
-
/** URL or DOM id to navigate to. */
|
|
13
|
-
href?: string;
|
|
14
|
-
/** Click handler for the header. */
|
|
15
|
-
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
16
|
-
}
|
|
17
|
-
interface LinkProps extends Tab {
|
|
18
|
-
onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
19
|
-
}
|
|
20
|
-
interface UtilsProps {
|
|
21
|
-
avatar: AvatarProps;
|
|
22
|
-
search?: SearchInputProps;
|
|
23
|
-
branchName?: string;
|
|
24
|
-
actions?: MenuItemProps['items'];
|
|
25
|
-
onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
26
|
-
}
|
|
27
|
-
declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;
|
|
28
|
-
export default AppHeader;
|
|
29
|
-
//# sourceMappingURL=AppHeader.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAMZ,gBAAgB,EAChB,aAAa,EACb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAgBjC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACvF;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAmFD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
3
|
-
import { Flex, Icon, MenuButton, Text, useI18n, useBreakpoint, SearchInput } from '@pega/cosmos-react-core';
|
|
4
|
-
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
|
|
5
|
-
import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
|
|
6
|
-
const BrandContainer = ({ name, onClick, href }) => {
|
|
7
|
-
return (_jsxs(StyledBrandContainer, { container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div', children: [_jsx(StyledIconContainer, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: 'pegasus' }, void 0) }, void 0), _jsx(StyledTitle, { children: name }, void 0)] }, void 0));
|
|
8
|
-
};
|
|
9
|
-
const Links = ({ links = [] }) => {
|
|
10
|
-
const [currentTabId, setCurrentTabId] = useState(links[0].id || '');
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
setCurrentTabId(links[0].id || '');
|
|
13
|
-
}, [links]);
|
|
14
|
-
const handleTabClick = useCallback((id, e) => {
|
|
15
|
-
const newActiveTab = links.find(item => item.id === id);
|
|
16
|
-
if (newActiveTab) {
|
|
17
|
-
newActiveTab.onClick?.(id, e);
|
|
18
|
-
setCurrentTabId(newActiveTab.id);
|
|
19
|
-
}
|
|
20
|
-
}, [links]);
|
|
21
|
-
return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick }, void 0);
|
|
22
|
-
};
|
|
23
|
-
const Utils = ({ avatar, search, branchName, actions, onPreviewClick }) => {
|
|
24
|
-
const t = useI18n();
|
|
25
|
-
const isMediumOrAbove = useBreakpoint('md');
|
|
26
|
-
return (_jsxs(StyledUtilsContainer, { isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' }, children: [search && (_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...search }, void 0) }, void 0)), branchName && (_jsxs(StyledBranchContainer, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, { "aria-label": branchName, children: branchName }, void 0)] }, void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, { variant: 'primary', onClick: onPreviewClick, children: t('preview') }, void 0)), _jsx(StyledAppAvatar, { ...avatar }, void 0)] }, void 0));
|
|
27
|
-
};
|
|
28
|
-
const AppHeader = forwardRef(({ brand, utils, links }, ref) => {
|
|
29
|
-
return (_jsxs(Flex, { as: StyledAppHeader, container: { justify: 'between' }, ref: ref, children: [_jsx(BrandContainer, { ...brand }, void 0), links && links.length > 0 && _jsx(Links, { links: links }, void 0), utils && _jsx(Utils, { ...utils }, void 0)] }, void 0));
|
|
30
|
-
});
|
|
31
|
-
export default AppHeader;
|
|
32
|
-
//# sourceMappingURL=AppHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n AvatarProps,\n BaseProps,\n Flex,\n ForwardProps,\n Icon,\n MenuButton,\n Text,\n useI18n,\n useBreakpoint,\n SearchInputProps,\n MenuItemProps,\n Tab,\n SearchInput,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledBranchContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton,\n StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. */\n name: string;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branchName?: string;\n actions?: MenuItemProps['items'];\n onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n >\n <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name='pegasus' />\n </StyledIconContainer>\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({\n avatar,\n search,\n branchName,\n actions,\n onPreviewClick\n}: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer\n isMediumOrAbove={isMediumOrAbove}\n container={{ alignItems: 'center', justify: 'end' }}\n >\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branchName && (\n <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n <Icon name='nodes-right' />\n <Text aria-label={branchName}>{branchName}</Text>\n </StyledBranchContainer>\n )}\n {actions && actions.length > 0 && (\n <MenuButton variant='link' menu={{ items: actions, scrollAt: 20 }} text={t('actions')} />\n )}\n {onPreviewClick && (\n <StyledPreviewButton variant='primary' onClick={onPreviewClick}>\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Avatar, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';
|
|
2
|
-
export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
-
export declare const StyledTitle: typeof Text;
|
|
4
|
-
export declare const StyledBrandContainer: typeof Flex;
|
|
5
|
-
export declare const StyledIconContainer: typeof Flex;
|
|
6
|
-
export declare const StyledBrandButton: 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>;
|
|
7
|
-
export declare const StyledTabs: typeof Tabs;
|
|
8
|
-
export declare const StyledUtilsContainer: typeof Flex;
|
|
9
|
-
export declare const StyledBranchContainer: typeof Flex;
|
|
10
|
-
export declare const StyledPreviewButton: typeof Button;
|
|
11
|
-
export declare const StyledAppAvatar: typeof Avatar;
|
|
12
|
-
//# sourceMappingURL=AppHeader.styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EAEN,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAGjC,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAgBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAExC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,MAQnC,CAAC"}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs, Button } from '@pega/cosmos-react-core';
|
|
3
|
-
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
4
|
-
export const StyledAppHeader = styled.header(({ theme }) => {
|
|
5
|
-
return css `
|
|
6
|
-
height: 3rem;
|
|
7
|
-
padding: 0 calc(2 * ${theme.base.spacing});
|
|
8
|
-
border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};
|
|
9
|
-
box-shadow: ${theme.base.shadow.low};
|
|
10
|
-
background-color: ${theme.base.palette['primary-background']};
|
|
11
|
-
`;
|
|
12
|
-
});
|
|
13
|
-
StyledAppHeader.defaultProps = defaultThemeProp;
|
|
14
|
-
export const StyledTitle = styled(Text)(({ theme }) => {
|
|
15
|
-
return css `
|
|
16
|
-
max-width: 25ch;
|
|
17
|
-
text-overflow: ellipsis;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
white-space: nowrap;
|
|
20
|
-
color: ${theme.base.palette['foreground-color']};
|
|
21
|
-
font-weight: ${theme.base['font-weight'].bold};
|
|
22
|
-
margin-inline-start: calc(0.75 * ${theme.base.spacing});
|
|
23
|
-
`;
|
|
24
|
-
});
|
|
25
|
-
StyledTitle.defaultProps = defaultThemeProp;
|
|
26
|
-
export const StyledBrandContainer = styled(Flex)(({ theme }) => {
|
|
27
|
-
return css `
|
|
28
|
-
padding-block: ${theme.base.spacing};
|
|
29
|
-
text-decoration: none;
|
|
30
|
-
`;
|
|
31
|
-
});
|
|
32
|
-
StyledBrandContainer.defaultProps = defaultThemeProp;
|
|
33
|
-
export const StyledIconContainer = styled(Flex)(({ theme }) => {
|
|
34
|
-
return css `
|
|
35
|
-
background-color: ${theme.base.palette['brand-primary']};
|
|
36
|
-
width: 2rem;
|
|
37
|
-
height: 2rem;
|
|
38
|
-
position: relative;
|
|
39
|
-
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
40
|
-
|
|
41
|
-
${StyledIcon} {
|
|
42
|
-
width: 1.25rem;
|
|
43
|
-
height: 1.25rem;
|
|
44
|
-
color: ${theme.base.palette.light};
|
|
45
|
-
}
|
|
46
|
-
`;
|
|
47
|
-
});
|
|
48
|
-
StyledIconContainer.defaultProps = defaultThemeProp;
|
|
49
|
-
export const StyledBrandButton = styled(BareButton)(({ theme }) => {
|
|
50
|
-
return css `
|
|
51
|
-
&:not([disabled]):focus {
|
|
52
|
-
box-shadow: ${theme.base.shadow.focus};
|
|
53
|
-
}
|
|
54
|
-
`;
|
|
55
|
-
});
|
|
56
|
-
StyledBrandButton.defaultProps = defaultThemeProp;
|
|
57
|
-
export const StyledTabs = styled(Tabs)(({ theme }) => {
|
|
58
|
-
return css `
|
|
59
|
-
margin-inline-start: calc(2 * ${theme.base.spacing});
|
|
60
|
-
margin-inline-end: calc(2 * ${theme.base.spacing});
|
|
61
|
-
border: none;
|
|
62
|
-
min-height: 3rem;
|
|
63
|
-
button {
|
|
64
|
-
height: auto;
|
|
65
|
-
span:first-of-type {
|
|
66
|
-
text-transform: none;
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
button[aria-selected='false'] > span {
|
|
70
|
-
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
71
|
-
}
|
|
72
|
-
button:hover,
|
|
73
|
-
button:focus,
|
|
74
|
-
button:active {
|
|
75
|
-
box-shadow: none;
|
|
76
|
-
}
|
|
77
|
-
`;
|
|
78
|
-
});
|
|
79
|
-
StyledTabs.defaultProps = defaultThemeProp;
|
|
80
|
-
export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) => {
|
|
81
|
-
return css `
|
|
82
|
-
margin-inline-start: auto;
|
|
83
|
-
padding-block: ${theme.base.spacing};
|
|
84
|
-
width: auto;
|
|
85
|
-
min-width: ${isMediumOrAbove ? '32%' : 'auto'};
|
|
86
|
-
& > div,
|
|
87
|
-
& > span {
|
|
88
|
-
margin-inline-start: ${theme.base.spacing};
|
|
89
|
-
}
|
|
90
|
-
& > div:last-child {
|
|
91
|
-
margin-inline-end: 0;
|
|
92
|
-
}
|
|
93
|
-
`;
|
|
94
|
-
});
|
|
95
|
-
StyledUtilsContainer.defaultProps = defaultThemeProp;
|
|
96
|
-
export const StyledBranchContainer = styled(Flex)(({ theme }) => {
|
|
97
|
-
return css `
|
|
98
|
-
span {
|
|
99
|
-
white-space: nowrap;
|
|
100
|
-
max-width: 25ch;
|
|
101
|
-
overflow: hidden;
|
|
102
|
-
text-overflow: ellipsis;
|
|
103
|
-
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
104
|
-
margin-inline-start: calc(0.5 * ${theme.base.spacing});
|
|
105
|
-
margin-inline-end: calc(0.75 * ${theme.base.spacing});
|
|
106
|
-
}
|
|
107
|
-
`;
|
|
108
|
-
});
|
|
109
|
-
StyledBranchContainer.defaultProps = defaultThemeProp;
|
|
110
|
-
export const StyledPreviewButton = styled(Button) `
|
|
111
|
-
flex-shrink: 0;
|
|
112
|
-
`;
|
|
113
|
-
export const StyledAppAvatar = styled(Avatar)(({ theme }) => {
|
|
114
|
-
return css `
|
|
115
|
-
width: 1.5rem;
|
|
116
|
-
height: 1.5rem;
|
|
117
|
-
&& {
|
|
118
|
-
margin-inline-start: calc(2 * ${theme.base.spacing});
|
|
119
|
-
}
|
|
120
|
-
`;
|
|
121
|
-
});
|
|
122
|
-
StyledAppAvatar.defaultProps = defaultThemeProp;
|
|
123
|
-
//# sourceMappingURL=AppHeader.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Avatar,\n defaultThemeProp,\n Flex,\n StyledIcon,\n Text,\n Tabs,\n Button\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = 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.colors.gray.light};\n box-shadow: ${theme.base.shadow.low};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\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'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n width: 2rem;\n height: 2rem;\n position: relative;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n color: ${theme.base.palette.light};\n }\n `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n return css`\n width: 1.5rem;\n height: 1.5rem;\n && {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default } from './AppHeader';\nexport { AppHeaderProps as AppBarProps } from './AppHeader';\n"]}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { AppShellProps } from './AppShell.types';
|
|
2
|
-
declare const AppShell: import("react").ForwardRefExoticComponent<Pick<AppShellProps, "main" | "children" | "navigation" | "appInfo" | "appHeader" | "utils" | "hideNav"> & import("react").RefAttributes<HTMLElement>>;
|
|
3
|
-
export default AppShell;
|
|
4
|
-
//# sourceMappingURL=AppShell.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,kBAAkB,CAAC;AA+FhF,QAAA,MAAM,QAAQ,iMAkIb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useMemo, useState, useContext, useRef, useEffect } from 'react';
|
|
3
|
-
import { Flex, Icon, Switch, SkipNavigation, Drawer, useDirection, useI18n, useAfterInitialEffect, StandardTree, useConsolidatedRef, useTransitionState } from '@pega/cosmos-react-core';
|
|
4
|
-
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
5
|
-
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
6
|
-
import AppHeader from '../AppHeader';
|
|
7
|
-
import Visual from '../Visual';
|
|
8
|
-
import { StyledHeader, StyledUtils, StyledUtilItem, StyledScrollWrap, StyledNavContent, StyledMain, StyledDrawerWrapper, StyledDrawerHeader, StyledNavTitle, StyledNav, StyledInnerNav, StyledNavToggle, StyledDrawerCloseButton } from './AppShell.styles';
|
|
9
|
-
import AppShellContext from './AppShellContext';
|
|
10
|
-
const NavigationHeader = ({ text, visual }) => {
|
|
11
|
-
return (_jsxs(Flex, { container: { alignItems: 'center', pad: 2, gap: 1 }, as: StyledHeader, children: [visual && _jsx(Visual, { ...visual }, void 0), _jsx(StyledNavTitle, { variant: 'h4', children: text }, void 0)] }, void 0));
|
|
12
|
-
};
|
|
13
|
-
const DrawerHeader = forwardRef(({ text, visual: { icon } }, ref) => {
|
|
14
|
-
const t = useI18n();
|
|
15
|
-
const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);
|
|
16
|
-
const onDrawerClose = () => {
|
|
17
|
-
setDrawerData({ label: '', id: '' });
|
|
18
|
-
setDrawerOpen(false);
|
|
19
|
-
};
|
|
20
|
-
return (_jsxs(Flex, { container: { alignItems: 'center' }, as: StyledDrawerHeader, children: [_jsx(StyledDrawerCloseButton, { variant: 'simple', onClick: onDrawerClose, "aria-label": t('close_noun', [text]), icon: true, ref: ref, children: icon && _jsx(Icon, { name: icon.name }, void 0) }, void 0), _jsx(StyledNavTitle, { variant: 'h4', children: text }, void 0)] }, void 0));
|
|
21
|
-
});
|
|
22
|
-
const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
|
|
23
|
-
const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);
|
|
24
|
-
const [showDevMode, setShowDevMode] = useState(devMode ?? false);
|
|
25
|
-
const t = useI18n();
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
setShowDevMode(devMode ?? false);
|
|
28
|
-
}, [devMode]);
|
|
29
|
-
useAfterInitialEffect(() => {
|
|
30
|
-
if (!showDevMode) {
|
|
31
|
-
setDrawerData({ label: '', id: '' });
|
|
32
|
-
onClose();
|
|
33
|
-
}
|
|
34
|
-
}, [showDevMode]);
|
|
35
|
-
return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode').toUpperCase(), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
|
|
36
|
-
return (_jsx(StyledUtilItem, { role: 'menuitem', "aria-current": drawerData?.id !== id && currentItemId === id ? 'true' : undefined, children: _jsx(BareButton, { onClick: () => {
|
|
37
|
-
setDrawerData({ label, id });
|
|
38
|
-
setDrawerOpen(true);
|
|
39
|
-
onItemClick(id);
|
|
40
|
-
}, children: label }, void 0) }, id));
|
|
41
|
-
}) }, void 0))] }, void 0));
|
|
42
|
-
};
|
|
43
|
-
const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hideNav = false }, ref) => {
|
|
44
|
-
const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);
|
|
45
|
-
const [drawerData, setDrawerData] = useState(utils?.items.find(i => i.id === utils?.currentItemId));
|
|
46
|
-
const backButtonRef = useRef(null);
|
|
47
|
-
const { rtl } = useDirection();
|
|
48
|
-
const navRef = useConsolidatedRef(ref);
|
|
49
|
-
const t = useI18n();
|
|
50
|
-
const { state: navState, toggle: toggleNavState } = useTransitionState({
|
|
51
|
-
ref: navRef,
|
|
52
|
-
property: 'width',
|
|
53
|
-
states: expandCollapseStates,
|
|
54
|
-
defaultState: 'expanded'
|
|
55
|
-
});
|
|
56
|
-
const navExpanded = navState === 'expanded' || navState === 'expanding';
|
|
57
|
-
const navContent = useMemo(() => {
|
|
58
|
-
return (_jsx(Flex, { item: { grow: 1 }, as: StyledScrollWrap, children: _jsx(StandardTree, { ...navigation }, void 0) }, void 0));
|
|
59
|
-
}, [navigation]);
|
|
60
|
-
const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');
|
|
61
|
-
const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');
|
|
62
|
-
return (_jsxs(AppShellContext.Provider, { value: useMemo(() => ({
|
|
63
|
-
drawerOpen,
|
|
64
|
-
setDrawerOpen,
|
|
65
|
-
drawerData,
|
|
66
|
-
setDrawerData,
|
|
67
|
-
navState
|
|
68
|
-
}), [navExpanded, drawerOpen, drawerData, navState]), children: [_jsx(SkipNavigation, {}, void 0), _jsx(AppHeader, { ...appHeader }, void 0), _jsxs(Flex, { container: true, children: [!hideNav && (_jsxs(StyledNav, { ref: navRef, children: [_jsx(StyledInnerNav, { children: _jsxs(Flex, { container: { direction: 'column', justify: 'between' }, as: StyledNavContent, "aria-hidden": !navExpanded, children: [_jsx(Flex, { as: StyledDrawerWrapper, children: _jsxs(Drawer, { open: drawerOpen && !!drawerData, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
|
|
69
|
-
if (backButtonRef.current &&
|
|
70
|
-
document.activeElement !== backButtonRef.current) {
|
|
71
|
-
backButtonRef.current.focus();
|
|
72
|
-
}
|
|
73
|
-
utils?.drawer?.onAfterOpen?.();
|
|
74
|
-
}, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData?.label || '', visual: {
|
|
75
|
-
icon: {
|
|
76
|
-
name: 'caret-left',
|
|
77
|
-
bgColor: 'transparent'
|
|
78
|
-
}
|
|
79
|
-
} }, void 0), navContent] }, void 0) }, void 0), !drawerOpen && (_jsxs(_Fragment, { children: [_jsx(NavigationHeader, { ...appInfo }, void 0), navContent] }, void 0)), utils && _jsx(Utils, { ...utils, onClose: () => setDrawerOpen(false) }, void 0)] }, void 0) }, void 0), _jsx(StyledNavToggle, { icon: true, "aria-expanded": navExpanded, label: navState === 'expanded' || navState === 'collapsed'
|
|
80
|
-
? toggleButtonLabel
|
|
81
|
-
: undefined, "aria-label": toggleButtonA11y, onClick: toggleNavState, children: _jsx(Icon, { name: 'arrow-micro-right' }, void 0) }, void 0)] }, void 0)), _jsx(Flex, { item: { grow: 1 }, as: StyledMain, children: main }, void 0)] }, void 0)] }, void 0));
|
|
82
|
-
});
|
|
83
|
-
export default AppShell;
|
|
84
|
-
//# sourceMappingURL=AppShell.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,qBAAqB,EACrB,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,cAAc,EACd,eAAe,EACf,uBAAuB,EACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAGhD,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAgB,EAAE,EAAE;IAC1D,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,YAAY,aACxE,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,cAAc,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,WAAkB,YAC/C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAiC,EAAE,GAA2B,EAAE,EAAE;IACzF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACrC,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,kBAAkB,aAC/D,KAAC,uBAAuB,IACtB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,aAAa,gBACV,CAAC,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EACnC,IAAI,QACJ,GAAG,EAAE,GAAG,YAEP,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,WAAI,WACV,EAE1B,KAAC,cAAc,IAAC,OAAO,EAAC,IAAI,YAAE,IAAI,WAAkB,YAC/C,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,OAAO,EAC8B,EAAE,EAAE;IACzC,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACjF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACjE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,EAAE;YAChB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,OAAO,EAAE,CAAC;SACX;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,WAAW,IAAC,WAAW,EAAE,WAAW,aACnC,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,EAClC,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAC3C,EAAE,EAAE,WAAW,WACf,EACD,WAAW,IAAI,CACd,aAAI,IAAI,EAAC,MAAM,YACZ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;oBAC3B,OAAO,CACL,KAAC,cAAc,IAEb,IAAI,EAAC,UAAU,kBACD,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAEhF,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;gCACZ,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gCAC7B,aAAa,CAAC,IAAI,CAAC,CAAC;gCACpB,WAAW,CAAC,EAAE,CAAC,CAAC;4BAClB,CAAC,YAEA,KAAK,WACK,IAZR,EAAE,CAaQ,CAClB,CAAC;gBACJ,CAAC,CAAC,WACC,CACN,YACW,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EACE,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,OAAO,GAAG,KAAK,EACgB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACrE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,EAAE,aAAa,CAAC,CACtD,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,kBAAkB,CAAC;QACrE,GAAG,EAAE,MAAM;QACX,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,oBAAoB;QAC5B,YAAY,EAAE,UAAU;KACzB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,CAAC;IAExE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,gBAAgB,YAC3C,KAAC,YAAY,OAAK,UAAU,WAAI,WAC3B,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,iBAAiB,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;IAEtF,OAAO,CACL,MAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,UAAU;YACV,aAAa;YACb,UAAU;YACV,aAAa;YACb,QAAQ;SACT,CAAC,EACF,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAChD,aAED,KAAC,cAAc,aAAG,EAClB,KAAC,SAAS,OAAK,SAAS,WAAI,EAC5B,MAAC,IAAI,IAAC,SAAS,mBACZ,CAAC,OAAO,IAAI,CACX,MAAC,SAAS,IAAC,GAAG,EAAE,MAAM,aACpB,KAAC,cAAc,cACb,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EACtD,EAAE,EAAE,gBAAgB,iBACP,CAAC,WAAW,aAEzB,KAAC,IAAI,IAAC,EAAE,EAAE,mBAAmB,YAC3B,MAAC,MAAM,IACL,IAAI,EAAE,UAAU,IAAI,CAAC,CAAC,UAAU,EAChC,cAAc,QACd,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACjC,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EACzC,WAAW,EAAE,GAAG,EAAE;oDAChB,IACE,aAAa,CAAC,OAAO;wDACrB,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,EAChD;wDACA,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;qDAC/B;oDACD,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC;gDACjC,CAAC,EACD,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAC3C,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,aAEzC,KAAC,YAAY,IACX,GAAG,EAAE,aAAa,EAClB,IAAI,EAAE,UAAU,EAAE,KAAK,IAAI,EAAE,EAC7B,MAAM,EAAE;4DACN,IAAI,EAAE;gEACJ,IAAI,EAAE,YAAY;gEAClB,OAAO,EAAE,aAAa;6DACvB;yDACF,WACD,EACD,UAAU,YACJ,WACJ,EAEN,CAAC,UAAU,IAAI,CACd,8BACE,KAAC,gBAAgB,OAAK,OAAO,WAAI,EAChC,UAAU,YACV,CACJ,EAEA,KAAK,IAAI,KAAC,KAAK,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,WAAI,YAC9D,WACQ,EACjB,KAAC,eAAe,IACd,IAAI,yBACW,WAAW,EAC1B,KAAK,EACH,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,WAAW;oCACjD,CAAC,CAAC,iBAAiB;oCACnB,CAAC,CAAC,SAAS,gBAEH,gBAAgB,EAC5B,OAAO,EAAE,cAAc,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,WAAG,WACjB,YACR,CACb,EACD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,UAAU,YACpC,IAAI,WACA,YACF,YACkB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n Ref,\n useMemo,\n useState,\n useContext,\n useRef,\n useEffect\n} from 'react';\n\nimport {\n Flex,\n Icon,\n Switch,\n SkipNavigation,\n Drawer,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n StandardTree,\n useConsolidatedRef,\n useTransitionState\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport AppHeader from '../AppHeader';\nimport Visual from '../Visual';\n\nimport {\n StyledHeader,\n StyledUtils,\n StyledUtilItem,\n StyledScrollWrap,\n StyledNavContent,\n StyledMain,\n StyledDrawerWrapper,\n StyledDrawerHeader,\n StyledNavTitle,\n StyledNav,\n StyledInnerNav,\n StyledNavToggle,\n StyledDrawerCloseButton\n} from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\nimport type { AppShellProps, AppInfoProps, UtilsProps } from './AppShell.types';\n\nconst NavigationHeader = ({ text, visual }: AppInfoProps) => {\n return (\n <Flex container={{ alignItems: 'center', pad: 2, gap: 1 }} as={StyledHeader}>\n {visual && <Visual {...visual} />}\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n};\n\nconst DrawerHeader = forwardRef(\n ({ text, visual: { icon } }: PropsWithoutRef<AppInfoProps>, ref: Ref<HTMLButtonElement>) => {\n const t = useI18n();\n const { setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n\n const onDrawerClose = () => {\n setDrawerData({ label: '', id: '' });\n setDrawerOpen(false);\n };\n\n return (\n <Flex container={{ alignItems: 'center' }} as={StyledDrawerHeader}>\n <StyledDrawerCloseButton\n variant='simple'\n onClick={onDrawerClose}\n aria-label={t('close_noun', [text])}\n icon\n ref={ref}\n >\n {icon && <Icon name={icon.name} />}\n </StyledDrawerCloseButton>\n\n <StyledNavTitle variant='h4'>{text}</StyledNavTitle>\n </Flex>\n );\n }\n);\n\nconst Utils = ({\n items,\n onItemClick,\n onClose,\n currentItemId,\n devMode\n}: UtilsProps & { onClose: () => void }) => {\n const { drawerData, setDrawerData, setDrawerOpen } = useContext(AppShellContext);\n const [showDevMode, setShowDevMode] = useState(devMode ?? false);\n const t = useI18n();\n\n useEffect(() => {\n setShowDevMode(devMode ?? false);\n }, [devMode]);\n\n useAfterInitialEffect(() => {\n if (!showDevMode) {\n setDrawerData({ label: '', id: '' });\n onClose();\n }\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch\n label={t('dev_mode').toUpperCase()}\n onChange={() => setShowDevMode(cur => !cur)}\n on={showDevMode}\n />\n {showDevMode && (\n <ul role='menu'>\n {items.map(({ label, id }) => {\n return (\n <StyledUtilItem\n key={id}\n role='menuitem'\n aria-current={drawerData?.id !== id && currentItemId === id ? 'true' : undefined}\n >\n <BareButton\n onClick={() => {\n setDrawerData({ label, id });\n setDrawerOpen(true);\n onItemClick(id);\n }}\n >\n {label}\n </BareButton>\n </StyledUtilItem>\n );\n })}\n </ul>\n )}\n </StyledUtils>\n );\n};\n\nconst AppShell = forwardRef(\n (\n {\n main,\n appHeader,\n appInfo,\n utils,\n navigation,\n hideNav = false\n }: PropsWithoutRef<AppShellProps>,\n ref: AppShellProps['ref']\n ) => {\n const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);\n const [drawerData, setDrawerData] = useState(\n utils?.items.find(i => i.id === utils?.currentItemId)\n );\n const backButtonRef = useRef<HTMLButtonElement>(null);\n const { rtl } = useDirection();\n const navRef = useConsolidatedRef(ref);\n const t = useI18n();\n\n const { state: navState, toggle: toggleNavState } = useTransitionState({\n ref: navRef,\n property: 'width',\n states: expandCollapseStates,\n defaultState: 'expanded'\n });\n\n const navExpanded = navState === 'expanded' || navState === 'expanding';\n\n const navContent = useMemo(() => {\n return (\n <Flex item={{ grow: 1 }} as={StyledScrollWrap}>\n <StandardTree {...navigation} />\n </Flex>\n );\n }, [navigation]);\n\n const toggleButtonLabel = t(navExpanded ? 'collapse' : 'expand');\n const toggleButtonA11y = t(navExpanded ? 'collapse_navigation' : 'expand_navigation');\n\n return (\n <AppShellContext.Provider\n value={useMemo(\n () => ({\n drawerOpen,\n setDrawerOpen,\n drawerData,\n setDrawerData,\n navState\n }),\n [navExpanded, drawerOpen, drawerData, navState]\n )}\n >\n <SkipNavigation />\n <AppHeader {...appHeader} />\n <Flex container>\n {!hideNav && (\n <StyledNav ref={navRef}>\n <StyledInnerNav>\n <Flex\n container={{ direction: 'column', justify: 'between' }}\n as={StyledNavContent}\n aria-hidden={!navExpanded}\n >\n <Flex as={StyledDrawerWrapper}>\n <Drawer\n open={drawerOpen && !!drawerData}\n nullWhenClosed\n position='absolute'\n placement={rtl ? 'right' : 'left'}\n onBeforeOpen={utils?.drawer?.onBeforeOpen}\n onAfterOpen={() => {\n if (\n backButtonRef.current &&\n document.activeElement !== backButtonRef.current\n ) {\n backButtonRef.current.focus();\n }\n utils?.drawer?.onAfterOpen?.();\n }}\n onBeforeClose={utils?.drawer?.onBeforeClose}\n onAfterClose={utils?.drawer?.onAfterClose}\n >\n <DrawerHeader\n ref={backButtonRef}\n text={drawerData?.label || ''}\n visual={{\n icon: {\n name: 'caret-left',\n bgColor: 'transparent'\n }\n }}\n />\n {navContent}\n </Drawer>\n </Flex>\n\n {!drawerOpen && (\n <>\n <NavigationHeader {...appInfo} />\n {navContent}\n </>\n )}\n\n {utils && <Utils {...utils} onClose={() => setDrawerOpen(false)} />}\n </Flex>\n </StyledInnerNav>\n <StyledNavToggle\n icon\n aria-expanded={navExpanded}\n label={\n navState === 'expanded' || navState === 'collapsed'\n ? toggleButtonLabel\n : undefined\n }\n aria-label={toggleButtonA11y}\n onClick={toggleNavState}\n >\n <Icon name='arrow-micro-right' />\n </StyledNavToggle>\n </StyledNav>\n )}\n <Flex item={{ grow: 1 }} as={StyledMain}>\n {main}\n </Flex>\n </Flex>\n </AppShellContext.Provider>\n );\n }\n);\n\nexport default AppShell;\n"]}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare const StyledNavToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
-
export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
-
export declare const StyledDrawerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export declare const StyledNavHeaderIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
-
export declare const StyledNavTitle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
-
export declare const StyledUtils: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
7
|
-
showDevMode: boolean;
|
|
8
|
-
}, never>;
|
|
9
|
-
export declare const StyledUtilItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
-
export declare const StyledScrollWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
|
-
export declare const StyledNavContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
-
export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
|
|
13
|
-
export declare const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
|
-
export declare const StyledNavHeaderVisual: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
15
|
-
bgColor: string;
|
|
16
|
-
}, never>;
|
|
17
|
-
export declare const StyledDrawerCloseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
-
export declare const StyledInnerNav: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
19
|
-
export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
|
|
20
|
-
//# sourceMappingURL=AppShell.styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA0BA,eAAO,MAAM,eAAe,qOA4B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGA2BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAOrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAQ9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAsHpB,CAAC"}
|