@pega/cosmos-react-build 9.17.2 → 9.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAoB,MAAM,yBAAyB,CAAC;AAmBjG,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAoB,MAAM,yBAAyB,CAAC;AAmBjG,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,mBAAmB,CAAC;AAkJ/E,QAAA,MAAM,SAAS,EAAE,+BAA+B,CAAC,cAAc,CAkG7D,CAAC;AAEH,eAAe,SAAS,CAAC"}
|
|
@@ -33,7 +33,7 @@ const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }
|
|
|
33
33
|
node.focus();
|
|
34
34
|
}
|
|
35
35
|
}, []);
|
|
36
|
-
return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledAppHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(),
|
|
36
|
+
return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledAppHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), children: _jsx(SearchInput, { ...restProps, ref: searchInputRef }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: () => {
|
|
37
37
|
setShowSearchButton(true);
|
|
38
38
|
focusSearchBtn.current = true;
|
|
39
39
|
}, label: t('collapse_search'), children: _jsx(Icon, { name: 'times' }) })] })) : (_jsx(Button, { variant: 'simple', icon: true, onClick: () => setShowSearchButton(false), ref: searchButtonRef, label: t('expand_search'), children: _jsx(Icon, { name: 'search' }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../../src/components/AppShell/Header/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type { MouseEvent, FC, PropsWithoutRef, Dispatch, SetStateAction } from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SearchInputProps } 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 type { 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: HTMLInputElement | null) => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback((node: HTMLButtonElement | null) => {\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 name={operator.name}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n );\n};\n\nconst AppHeader: ForwardRefForwardPropsComponent<AppHeaderProps> = forwardRef(function AppHeader(\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n) {\n const selectedContext = 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 name={utils.operator.name}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\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 { forwardRef, useCallback, useEffect, useState, useRef } from 'react';\nimport type { MouseEvent, FC, PropsWithoutRef, Dispatch, SetStateAction } from 'react';\n\nimport {\n ContextSwitcher,\n Flex,\n SearchInput,\n useBreakpoint,\n Button,\n Icon,\n useI18n,\n Tooltip,\n useElement,\n Avatar\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent, SearchInputProps } 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 type { 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: HTMLInputElement | null) => {\n if (!showSearchButton && node) {\n node.focus();\n }\n },\n [showSearchButton]\n );\n const focusSearchBtn = useRef(false);\n const searchButtonRef = useCallback((node: HTMLButtonElement | null) => {\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 >\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 name={operator.name}\n >\n <Avatar {...operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n );\n};\n\nconst AppHeader: ForwardRefForwardPropsComponent<AppHeaderProps> = forwardRef(function AppHeader(\n {\n contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n brand,\n utils,\n links\n }: PropsWithoutRef<AppHeaderProps>,\n ref: AppHeaderProps['ref']\n) {\n const selectedContext = 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 name={utils.operator.name}\n >\n <Avatar {...utils.operator.avatar} />\n </AppShellOperator>\n )}\n </Flex>\n {utils && <Utils {...utils} />}\n </Flex>\n );\n});\n\nexport default AppHeader;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.19.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@dagrejs/dagre": "^3.0.0",
|
|
18
|
-
"@pega/cosmos-react-core": "9.
|
|
19
|
-
"@pega/cosmos-react-dnd": "9.
|
|
20
|
-
"@pega/cosmos-react-rte": "9.
|
|
18
|
+
"@pega/cosmos-react-core": "9.19.0",
|
|
19
|
+
"@pega/cosmos-react-dnd": "9.19.0",
|
|
20
|
+
"@pega/cosmos-react-rte": "9.19.0",
|
|
21
21
|
"@types/codemirror": "^5.60.15",
|
|
22
22
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
23
23
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|