@pega/cosmos-react-build 4.0.0-dev.15.2 → 4.0.0-dev.15.4
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/Header/AppHeader.d.ts.map +1 -1
- package/lib/components/AppShell/Header/AppHeader.js +1 -1
- package/lib/components/AppShell/Header/AppHeader.js.map +1 -1
- package/lib/components/AppShell/Header/AppHeader.styles.d.ts.map +1 -1
- package/lib/components/AppShell/Header/AppHeader.styles.js +0 -8
- package/lib/components/AppShell/Header/AppHeader.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAmBjC,OAAO,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ1E,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAoG/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -42,7 +42,7 @@ const Utils = ({ operator, branch, action, appInfo }) => {
|
|
|
42
42
|
const isMediumOrAbove = useBreakpoint('md');
|
|
43
43
|
const isSmallOrAbove = useBreakpoint('sm');
|
|
44
44
|
const [appInfoEl, setAppInfoEl] = useElement(null);
|
|
45
|
-
return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-end' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
|
|
45
|
+
return (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, md: { container: { justify: 'end' } }, item: { shrink: 1 }, as: StyledUtilsContainer, children: [appInfo && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 1 }, ref: setAppInfoEl, children: [_jsx(Flex, { as: StyledAppName, item: { shrink: 1 }, children: appInfo.name }), _jsx(StyledAppVersion, { children: appInfo.version }), _jsx(Tooltip, { target: appInfoEl, hideDelay: 'none', children: `${appInfo.name} ${appInfo.version}` })] })), _jsxs(Flex, { container: { alignItems: 'center' }, children: [branch && _jsx(BranchButton, { ...branch, compact: isSmallOrAbove ? branch.compact : true }), action && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 0.5 }, item: { shrink: 0 }, as: Button, variant: 'secondary', icon: !isMediumOrAbove, label: isMediumOrAbove ? undefined : action.text, onClick: (e) => action.onClick?.(action.id, e), disabled: action.disabled, children: [action.icon && _jsx(Icon, { name: action.icon }), isMediumOrAbove && action.text] }))] }), isMediumOrAbove && (_jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-end' }, children: _jsx(Avatar, { ...operator.avatar }) }))] }));
|
|
46
46
|
};
|
|
47
47
|
const AppHeader = forwardRef(({ contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, brand, utils, links }, ref) => {
|
|
48
48
|
const selectedContext = contexts?.length > 1 ? contexts.find(ctx => ctx.selected) : contexts[0];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n Dispatch,\n SetStateAction\n} from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n ForwardProps,\n SearchInputProps,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n StyledAppHeaderSearchForm,\n StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledAppHeaderSearch,\n StyledAppName,\n StyledAppVersion,\n StyledBrandButton,\n StyledBrandImage,\n StyledContext\n} from './AppHeader.styles';\nimport { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ 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 AppHeaderSearch: FC<\n SearchInputProps & {\n showSearchButton: boolean;\n setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n const searchInputRef = useCallback(\n node => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback(node => {\n if (node && focusSearchBtn.current) {\n node.focus();\n }\n }, []);\n\n return isMediumOrAbove || !showSearchButton ? (\n <Flex\n as={StyledAppHeaderSearch}\n item={{ shrink: 0, grow: 1 }}\n md={{ item: { grow: 0, shrink: 1 } }}\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n >\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...restProps} ref={searchInputRef} />\n </StyledAppHeaderSearchForm>\n <Button\n variant='simple'\n icon\n onClick={() => {\n setShowSearchButton(true);\n focusSearchBtn.current = true;\n }}\n label={t('collapse_search')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n ) : (\n <Button\n variant='simple'\n icon\n onClick={() => setShowSearchButton(false)}\n ref={searchButtonRef}\n label={t('expand_search')}\n >\n <Icon name='search' />\n </Button>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [appInfoEl, setAppInfoEl] = useElement(null);\n\n return (\n <Flex\n container={{ justify: 'between', alignItems: 'center' }}\n md={{ container: { justify: 'end' } }}\n item={{ shrink: 1 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 1 }}\n ref={setAppInfoEl}\n >\n <Flex as={StyledAppName} item={{ shrink: 1 }}>\n {appInfo.name}\n </Flex>\n <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n <Tooltip target={appInfoEl} hideDelay='none'>\n {`${appInfo.name} ${appInfo.version}`}\n </Tooltip>\n </Flex>\n )}\n <Flex container={{ alignItems: 'center' }}>\n {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n icon={!isMediumOrAbove}\n label={isMediumOrAbove ? undefined : action.text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {isMediumOrAbove && action.text}\n </Flex>\n )}\n </Flex>\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-end' }}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n </Flex>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n (\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n ) => {\n const selectedContext =\n contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n const isMediumOrAbove = useBreakpoint('md');\n const [showSearchButton, setShowSearchButton] = useState(true);\n\n useEffect(() => {\n if (isMediumOrAbove && !showSearchButton) {\n setShowSearchButton(true);\n }\n }, [isMediumOrAbove]);\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n colGap: 2,\n wrap: 'wrap',\n pad: [0, 1]\n }}\n md={{ container: { wrap: 'nowrap' } }}\n ref={ref}\n >\n {showSearchButton && (\n <Flex\n as={StyledBrandContainer}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1\n }}\n item={{ shrink: 0, alignSelf: 'stretch' }}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n <Flex\n as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n variant='simple'\n container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n onClick={brand.onClick}\n href={brand.href}\n >\n <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n <StyledContext>{selectedContext.primary}</StyledContext>\n </Flex>\n </Flex>\n </Flex>\n )}\n {links && links.length > 0 && <Links links={links} />}\n\n <Flex\n container={{\n gap: 1,\n justify: 'center',\n alignItems: 'center'\n }}\n item={{ grow: showSearchButton ? 0 : 1 }}\n md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n >\n {utils?.search && (\n <AppHeaderSearch\n {...utils.search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && utils?.operator && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={utils.operator.actions}\n popover={{ placement: 'bottom-start' }}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState,\n useRef,\n Dispatch,\n SetStateAction\n} from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n ForwardProps,\n SearchInputProps,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport AppShellOperator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\nimport {\n StyledAppHeaderSearchForm,\n StyledAppHeaderOperator\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledAppHeaderSearch,\n StyledAppName,\n StyledAppVersion,\n StyledBrandButton,\n StyledBrandImage,\n StyledContext\n} from './AppHeader.styles';\nimport { AppHeaderProps, LinkProps, UtilsProps } from './AppHeader.types';\nimport BranchButton from './BranchButton';\n\nconst Links: FC<{ links: LinkProps[] }> = ({ 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 AppHeaderSearch: FC<\n SearchInputProps & {\n showSearchButton: boolean;\n setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const t = useI18n();\n\n const searchInputRef = useCallback(\n node => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback(node => {\n if (node && focusSearchBtn.current) {\n node.focus();\n }\n }, []);\n\n return isMediumOrAbove || !showSearchButton ? (\n <Flex\n as={StyledAppHeaderSearch}\n item={{ shrink: 0, grow: 1 }}\n md={{ item: { grow: 0, shrink: 1 } }}\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n >\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={t('sitewide')}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...restProps} ref={searchInputRef} />\n </StyledAppHeaderSearchForm>\n <Button\n variant='simple'\n icon\n onClick={() => {\n setShowSearchButton(true);\n focusSearchBtn.current = true;\n }}\n label={t('collapse_search')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n ) : (\n <Button\n variant='simple'\n icon\n onClick={() => setShowSearchButton(false)}\n ref={searchButtonRef}\n label={t('expand_search')}\n >\n <Icon name='search' />\n </Button>\n );\n};\n\nconst Utils: FC<UtilsProps> = ({ operator, branch, action, appInfo }) => {\n const isMediumOrAbove = useBreakpoint('md');\n const isSmallOrAbove = useBreakpoint('sm');\n const [appInfoEl, setAppInfoEl] = useElement(null);\n\n return (\n <Flex\n container={{ justify: 'between', alignItems: 'center' }}\n md={{ container: { justify: 'end' } }}\n item={{ shrink: 1 }}\n as={StyledUtilsContainer}\n >\n {appInfo && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 1 }}\n ref={setAppInfoEl}\n >\n <Flex as={StyledAppName} item={{ shrink: 1 }}>\n {appInfo.name}\n </Flex>\n <StyledAppVersion>{appInfo.version}</StyledAppVersion>\n <Tooltip target={appInfoEl} hideDelay='none'>\n {`${appInfo.name} ${appInfo.version}`}\n </Tooltip>\n </Flex>\n )}\n <Flex container={{ alignItems: 'center' }}>\n {branch && <BranchButton {...branch} compact={isSmallOrAbove ? branch.compact : true} />}\n {action && (\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 0.5 }}\n item={{ shrink: 0 }}\n as={Button}\n variant='secondary'\n icon={!isMediumOrAbove}\n label={isMediumOrAbove ? undefined : action.text}\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n disabled={action.disabled}\n >\n {action.icon && <Icon name={action.icon} />}\n {isMediumOrAbove && action.text}\n </Flex>\n )}\n </Flex>\n {isMediumOrAbove && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={operator.actions}\n popover={{ placement: 'bottom-end' }}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n (\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n ) => {\n const selectedContext =\n contexts?.length > 1 ? contexts.find(ctx => ctx.selected)! : contexts[0];\n\n const isMediumOrAbove = useBreakpoint('md');\n const [showSearchButton, setShowSearchButton] = useState(true);\n\n useEffect(() => {\n if (isMediumOrAbove && !showSearchButton) {\n setShowSearchButton(true);\n }\n }, [isMediumOrAbove]);\n\n return (\n <Flex\n as={StyledAppHeader}\n container={{\n justify: 'between',\n alignItems: 'center',\n colGap: 2,\n wrap: 'wrap',\n pad: [0, 1]\n }}\n md={{ container: { wrap: 'nowrap' } }}\n ref={ref}\n >\n {showSearchButton && (\n <Flex\n as={StyledBrandContainer}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 1\n }}\n item={{ shrink: 0, alignSelf: 'stretch' }}\n >\n {contexts && onContextClick && contexts.length > 1 && (\n <ContextSwitcher\n contexts={contexts}\n onContextClick={onContextClick}\n label={contextSwitcherLabel}\n />\n )}\n <Flex\n as={brand.onClick || brand.href ? StyledBrandButton : 'div'}\n variant='simple'\n container={{ alignItems: 'center', justify: 'between', gap: 2, pad: 1 }}\n aria-label={`${brand.label} - ${selectedContext.primary}`}\n onClick={brand.onClick}\n href={brand.href}\n >\n <Flex item={{ shrink: 0 }} as={StyledBrandImage} src={brand.logo} alt={brand.label} />\n <Flex container={{ justify: 'between', alignItems: 'center', gap: 1 }}>\n {selectedContext.visual}\n <StyledContext>{selectedContext.primary}</StyledContext>\n </Flex>\n </Flex>\n </Flex>\n )}\n {links && links.length > 0 && <Links links={links} />}\n\n <Flex\n container={{\n gap: 1,\n justify: 'center',\n alignItems: 'center'\n }}\n item={{ grow: showSearchButton ? 0 : 1 }}\n md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n >\n {utils?.search && (\n <AppHeaderSearch\n {...utils.search}\n showSearchButton={showSearchButton}\n setShowSearchButton={setShowSearchButton}\n />\n )}\n {showSearchButton && !isMediumOrAbove && utils?.operator && (\n <AppShellOperator\n as={StyledAppHeaderOperator}\n actions={utils.operator.actions}\n popover={{ placement: 'bottom-start' }}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAoB,IAAI,EAAE,IAAI,EAAuB,MAAM,yBAAyB,CAAC;AAI5F,eAAO,MAAM,eAAe,4GA8B3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAkBhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAgB5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAgB5B,CAAC;AAEF,eAAO,MAAM,aAAa,0GAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IA8B/B,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAoB,IAAI,EAAE,IAAI,EAAuB,MAAM,yBAAyB,CAAC;AAI5F,eAAO,MAAM,eAAe,4GA8B3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAkBhC,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAgB5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAgB5B,CAAC;AAEF,eAAO,MAAM,aAAa,0GAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAAO,IA8B/B,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGA0BjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAmBhC,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,OAAO,IAUjC,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAKpC,CAAC"}
|
|
@@ -133,16 +133,8 @@ export const StyledUtilsContainer = styled.div(({ theme: { base: { spacing, brea
|
|
|
133
133
|
margin-inline-start: ${spacing};
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
& > div:last-child {
|
|
137
|
-
display: none;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
136
|
@media (min-width: ${breakpoints.md}) {
|
|
141
137
|
width: auto;
|
|
142
|
-
|
|
143
|
-
& > div:last-child {
|
|
144
|
-
display: unset;
|
|
145
|
-
}
|
|
146
138
|
}
|
|
147
139
|
`;
|
|
148
140
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Text, Tabs, Image, StyledButton } from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(\n ({\n theme: {\n base: { palette, breakpoints, 'z-index': zIndex }\n }\n }) => {\n return css`\n height: 6rem;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${zIndex.drawer + 1});\n & > div {\n height: 50%;\n }\n\n @media (pointer: coarse) {\n height: 8rem;\n }\n\n @media (min-width: ${breakpoints.md}) {\n height: 3rem;\n\n & > div {\n height: 100%;\n }\n }\n `;\n }\n);\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer = styled.div(\n ({\n theme: {\n base: { 'hit-area': hitArea, breakpoints, spacing }\n }\n }) => {\n return css`\n max-width: calc(100% - calc(3 * ${hitArea.mouse}));\n\n @media (min-width: ${breakpoints.xs}) and (pointer: coarse) {\n max-width: calc(100% - calc(3 * ${hitArea.mouse}) - calc(2 * ${spacing}));\n }\n\n @media (min-width: ${breakpoints.md}) {\n max-width: 30%;\n }\n `;\n }\n);\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n text-decoration: none;\n min-width: 0;\n\n & > div:last-child {\n min-width: 0;\n svg {\n flex-shrink: 0;\n }\n }\n\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledBrandImage = styled(Image)(\n ({\n theme: {\n base: { breakpoints }\n }\n }) => {\n return css`\n height: 1.5rem;\n max-width: 17ch;\n display: none;\n\n @media (min-width: ${breakpoints.sm}) {\n display: unset;\n }\n `;\n }\n);\n\nexport const StyledContext = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(\n ({\n theme: {\n base: { breakpoints, 'font-weight': fontWeight }\n }\n }) => {\n return css`\n display: none;\n border: none;\n min-height: 3rem;\n [role='tab'] {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n [role='tab'][aria-selected='false'] > span {\n font-weight: ${fontWeight['semi-bold']};\n }\n [role='tab']:hover,\n [role='tab']:focus,\n [role='tab']:active {\n box-shadow: none;\n }\n\n @media (min-width: ${breakpoints.md}) {\n display: inherit;\n }\n `;\n }\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAppHeaderSearch = styled.div(\n ({\n theme: {\n base: { spacing, breakpoints, 'content-width': contentWidth }\n }\n }) => {\n return css`\n padding-block: ${spacing};\n width: 100%;\n ${StyledAppHeaderSearchForm} {\n margin-inline-start: 0;\n max-width: 100%;\n }\n\n @media (min-width: ${breakpoints.md}) {\n ${StyledAppHeaderSearchForm} {\n margin-inline-start: auto;\n max-width: ${contentWidth.lg};\n }\n\n ${StyledButton} {\n display: none;\n }\n }\n `;\n }\n);\n\nStyledAppHeaderSearch.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer = styled.div(\n ({\n theme: {\n base: { spacing, breakpoints }\n }\n }) => {\n return css`\n width: 100%;\n & > div,\n & > span,\n & > button {\n margin-inline-start: ${spacing};\n }\n\n @media (min-width: ${breakpoints.md}) {\n width: auto;\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppName: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].sm};\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppName.defaultProps = defaultThemeProp;\n\nexport const StyledAppVersion: typeof Text = styled(Text)(({ theme }) => {\n return css`\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: 0;\n `;\n});\n\nStyledAppVersion.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "4.0.0-dev.15.
|
|
3
|
+
"version": "4.0.0-dev.15.4",
|
|
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": "4.0.0-dev.15.
|
|
24
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.15.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.15.4",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.15.4",
|
|
25
25
|
"@types/codemirror": "^5.60.7",
|
|
26
26
|
"@types/dagre": "^0.7.46",
|
|
27
27
|
"@types/react": "^16.14.24 || ^17.0.38",
|