@pega/cosmos-react-build 2.1.1 → 2.1.5
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/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +9 -7
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +2 -0
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/AppShell/AppShellContext.d.ts.map +1 -1
- package/lib/components/AppShell/AppShellContext.js +1 -4
- package/lib/components/AppShell/AppShellContext.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
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;
|
|
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"}
|
|
@@ -27,11 +27,13 @@ const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
|
|
|
27
27
|
setShowDevMode(devMode ?? false);
|
|
28
28
|
}, [devMode]);
|
|
29
29
|
useAfterInitialEffect(() => {
|
|
30
|
-
if (!showDevMode)
|
|
30
|
+
if (!showDevMode) {
|
|
31
|
+
setDrawerData({ label: '', id: '' });
|
|
31
32
|
onClose();
|
|
33
|
+
}
|
|
32
34
|
}, [showDevMode]);
|
|
33
|
-
return (_jsxs(StyledUtils, { showDevMode: showDevMode, children: [_jsx(Switch, { label: t('dev_mode'), onChange: () => setShowDevMode(cur => !cur), on: showDevMode }, void 0), showDevMode && (_jsx("ul", { role: 'menu', children: items.map(({ label, id }) => {
|
|
34
|
-
return (_jsx(StyledUtilItem, { role: 'menuitem', "aria-current": drawerData
|
|
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: () => {
|
|
35
37
|
setDrawerData({ label, id });
|
|
36
38
|
setDrawerOpen(true);
|
|
37
39
|
onItemClick(id);
|
|
@@ -39,8 +41,8 @@ const Utils = ({ items, onItemClick, onClose, currentItemId, devMode }) => {
|
|
|
39
41
|
}) }, void 0))] }, void 0));
|
|
40
42
|
};
|
|
41
43
|
const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hideNav = false }, ref) => {
|
|
42
|
-
const [drawerOpen, setDrawerOpen] = useState(
|
|
43
|
-
const [drawerData, setDrawerData] = useState(
|
|
44
|
+
const [drawerOpen, setDrawerOpen] = useState(!!utils?.currentItemId);
|
|
45
|
+
const [drawerData, setDrawerData] = useState(utils?.items.find(i => i.id === utils?.currentItemId));
|
|
44
46
|
const backButtonRef = useRef(null);
|
|
45
47
|
const { rtl } = useDirection();
|
|
46
48
|
const navRef = useConsolidatedRef(ref);
|
|
@@ -63,13 +65,13 @@ const AppShell = forwardRef(({ main, appHeader, appInfo, utils, navigation, hide
|
|
|
63
65
|
drawerData,
|
|
64
66
|
setDrawerData,
|
|
65
67
|
navState
|
|
66
|
-
}), [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, nullWhenClosed: true, position: 'absolute', placement: rtl ? 'right' : 'left', onBeforeOpen: utils?.drawer?.onBeforeOpen, onAfterOpen: () => {
|
|
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: () => {
|
|
67
69
|
if (backButtonRef.current &&
|
|
68
70
|
document.activeElement !== backButtonRef.current) {
|
|
69
71
|
backButtonRef.current.focus();
|
|
70
72
|
}
|
|
71
73
|
utils?.drawer?.onAfterOpen?.();
|
|
72
|
-
}, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData
|
|
74
|
+
}, onBeforeClose: utils?.drawer?.onBeforeClose, onAfterClose: utils?.drawer?.onAfterClose, children: [_jsx(DrawerHeader, { ref: backButtonRef, text: drawerData?.label || '', visual: {
|
|
73
75
|
icon: {
|
|
74
76
|
name: 'caret-left',
|
|
75
77
|
bgColor: 'transparent'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","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) onClose();\n }, [showDevMode]);\n\n return (\n <StyledUtils showDevMode={showDevMode}>\n <Switch label={t('dev_mode')} onChange={() => setShowDevMode(cur => !cur)} on={showDevMode} />\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(false);\n const [drawerData, setDrawerData] = useState({ label: '', id: '' });\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}\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
|
+
{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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","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 +1 @@
|
|
|
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,
|
|
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"}
|
|
@@ -303,6 +303,8 @@ export const StyledNav = styled.nav(({ theme }) => {
|
|
|
303
303
|
}
|
|
304
304
|
|
|
305
305
|
${StyledNodeInteraction} {
|
|
306
|
+
padding-block-start: calc(0.5 * ${theme.base.spacing});
|
|
307
|
+
padding-block-end: calc(0.5 * ${theme.base.spacing});
|
|
306
308
|
&:hover,
|
|
307
309
|
&[aria-current='true'] {
|
|
308
310
|
background-color: ${hoverBg};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n &[aria-current='true'] {\n background-color: rgba(0, 0, 0, 0.4);\n\n & > ${StyledBareButton} {\n color: ${theme.base.colors.blue.light};\n }\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus {\n box-shadow: inset ${theme.base.shadow['focus-inverted']};\n }\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${(navState === 'expanding' || navState === 'expanded') &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n z-index: 1;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navState === 'expanding' || navState === 'expanded'\n ? '14rem'\n : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n &[aria-current='true'] {\n background-color: rgba(0, 0, 0, 0.4);\n\n & > ${StyledBareButton} {\n color: ${theme.base.colors.blue.light};\n }\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus {\n box-shadow: inset ${theme.base.shadow['focus-inverted']};\n }\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${(navState === 'expanding' || navState === 'expanded') &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n z-index: 1;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${theme.base.spacing});\n padding-block-end: calc(0.5 * ${theme.base.spacing});\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navState === 'expanding' || navState === 'expanded'\n ? '14rem'\n : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE;
|
|
1
|
+
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n main: ReactNode;\n appInfo: AppInfoProps;\n appHeader: AppBarProps;\n navigation: StandardTreeProps;\n hideNav?: boolean;\n utils?: UtilsProps;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n items: UtilItem[];\n currentItemId?: UtilItem['id'];\n onItemClick: (id: UtilItem['id']) => void;\n drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n devMode?: boolean;\n}\n\nexport interface UtilItem {\n id: string;\n label: string;\n}\n\nexport interface AppInfoProps {\n text: string;\n visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n setDrawerData: (data: { label: string; id: string }) => void;\n drawerData
|
|
1
|
+
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n main: ReactNode;\n appInfo: AppInfoProps;\n appHeader: AppBarProps;\n navigation: StandardTreeProps;\n hideNav?: boolean;\n utils?: UtilsProps;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n items: UtilItem[];\n currentItemId?: UtilItem['id'];\n onItemClick: (id: UtilItem['id']) => void;\n drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n devMode?: boolean;\n}\n\nexport interface UtilItem {\n id: string;\n label: string;\n}\n\nexport interface AppInfoProps {\n text: string;\n visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n setDrawerData: (data: { label: string; id: string }) => void;\n drawerData?: {\n label: string;\n id: string;\n };\n navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+
|
|
1
|
+
{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE
|
|
1
|
+
{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n drawerOpen: false,\n setDrawerOpen: () => {},\n drawerData: undefined,\n setDrawerData: () => {},\n navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}
|
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.5",
|
|
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.5",
|
|
24
|
+
"@pega/cosmos-react-dnd": "2.1.5",
|
|
25
25
|
"dagre": "^0.8.5",
|
|
26
26
|
"polished": "^4.1.0",
|
|
27
27
|
"react": "^16.14.0 || ^17.0.0",
|