@pega/cosmos-react-work 5.0.0-dev.12.6 → 5.0.0-dev.13.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":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAgB9F,OAAO,KAAK,EAAE,YAAY,EAAmB,MAAM,yBAAyB,CAAC;AAQ7E,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CAmKnF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Icon, useI18n, useAfterInitialEffect, Text, Tabs, CardHeader, TabPanel, Flex, Count, Actions } from '@pega/cosmos-react-core';
|
|
2
|
+
import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
+
import { Icon, useI18n, useAfterInitialEffect, Text, Tabs, CardHeader, TabPanel, Flex, Count, Actions, useLiveLog, usePrevious } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledNew, StyledBorderLine } from './IntelligentGuidance.styles';
|
|
5
5
|
const IntelligentGuidance = forwardRef(function IntelligentGuidance({ items, previousItems, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) {
|
|
6
6
|
const t = useI18n();
|
|
7
7
|
const headerRef = useRef(null);
|
|
8
8
|
const toggleButtonRef = useRef(null);
|
|
9
9
|
const [currentTab, setCurrentTab] = useState('current');
|
|
10
|
+
const { announcePolite } = useLiveLog();
|
|
11
|
+
const oldItems = usePrevious(items);
|
|
12
|
+
const oldPreviousItems = usePrevious(previousItems);
|
|
10
13
|
const listItems = (currentTab === 'current' ? items : previousItems ?? []).map(item => {
|
|
11
14
|
return {
|
|
12
15
|
id: item.id,
|
|
@@ -45,6 +48,25 @@ const IntelligentGuidance = forwardRef(function IntelligentGuidance({ items, pre
|
|
|
45
48
|
setHeaderHeight(headerRef.current?.offsetHeight || 0);
|
|
46
49
|
}
|
|
47
50
|
}, [headerRef.current]);
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
announcePolite({ message: `${heading} ${items.length + (previousItems?.length ?? 0)}` });
|
|
53
|
+
if (oldItems) {
|
|
54
|
+
const oldItemsIds = oldItems.map(i => i.id);
|
|
55
|
+
const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));
|
|
56
|
+
if (itemsToAnnounce.length) {
|
|
57
|
+
announcePolite({ message: t('items_added_to_current_list') });
|
|
58
|
+
itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
if (oldPreviousItems) {
|
|
62
|
+
const oldItemsIds = oldPreviousItems.map(i => i.id);
|
|
63
|
+
const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));
|
|
64
|
+
if (itemsToAnnounce) {
|
|
65
|
+
announcePolite({ message: t('items_added_to_previous_list') });
|
|
66
|
+
itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, [items, previousItems]);
|
|
48
70
|
// FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.
|
|
49
71
|
useAfterInitialEffect(() => {
|
|
50
72
|
if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
|
|
@@ -55,7 +77,7 @@ const IntelligentGuidance = forwardRef(function IntelligentGuidance({ items, pre
|
|
|
55
77
|
}
|
|
56
78
|
}, [isCollapsed]);
|
|
57
79
|
const intelligentGuidanceList = (_jsx(StyledIntelligentGuidanceList, { items: listItems, noItemsText: t('no_recommendations') }));
|
|
58
|
-
return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region',
|
|
80
|
+
return (_jsxs(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', isCollapsed: isCollapsed, hasItems: !!items.length, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsxs(CardHeader, { ref: headerRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), _jsx(Count, { children: items.length + (previousItems?.length ?? 0) })] }), _jsx(Actions, { items: [
|
|
59
81
|
{
|
|
60
82
|
text: t(isCollapsed ? 'expand' : 'collapse'),
|
|
61
83
|
id: 'IntelligentGuidanceButton',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, FunctionComponent, KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n useI18n,\n useAfterInitialEffect,\n Text,\n Tabs,\n CardHeader,\n TabPanel,\n Flex,\n Count,\n Actions\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledNew,\n StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n function IntelligentGuidance(\n {\n items,\n previousItems,\n heading,\n isCollapsed,\n onExpandCollapse,\n ...restProps\n }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) {\n const t = useI18n();\n const headerRef = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const [currentTab, setCurrentTab] = useState('current');\n\n const listItems: SummaryListItem[] = (\n currentTab === 'current' ? items : previousItems ?? []\n ).map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: (\n <>\n {item.label}\n {item.new && (\n <>\n <StyledNew>{t('new')}</StyledNew>\n {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n <StyledBorderLine />\n </>\n )}\n </>\n ),\n secondary: <Text variant='secondary'>{item.type}</Text>,\n contextualLabel: item.label,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss'),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 1 },\n role: 'button',\n tabIndex: 0,\n 'aria-label': t('continue_label_a11y', [item.label]),\n onClick: item.onClick,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current?.offsetHeight || 0);\n }\n }, [headerRef.current]);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 1000);\n }\n }, [isCollapsed]);\n\n const intelligentGuidanceList = (\n <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n );\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n aria-live='polite'\n aria-relevant='all'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader ref={headerRef}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{heading}</Text>\n <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n </Flex>\n <Actions\n items={[\n {\n text: t(isCollapsed ? 'expand' : 'collapse'),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n 'aria-label': isCollapsed\n ? t('expand_noun', [heading])\n : t('collapse_noun', [heading]),\n onClick: onExpandCollapse,\n ref: toggleButtonRef\n }\n ]}\n />\n </CardHeader>\n {previousItems ? (\n <>\n <Tabs\n tabs={[\n {\n id: 'current',\n name: t('current'),\n count: items.filter(item => item.new).length || undefined\n },\n {\n id: 'previous',\n name: t('previous'),\n count: previousItems.filter(item => item.new).length || undefined\n }\n ]}\n currentTabId={currentTab}\n onTabClick={setCurrentTab}\n />\n <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n </>\n ) : (\n intelligentGuidanceList\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}
|
|
1
|
+
{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, FunctionComponent, KeyboardEvent, PropsWithoutRef } from 'react';\n\nimport {\n Icon,\n useI18n,\n useAfterInitialEffect,\n Text,\n Tabs,\n CardHeader,\n TabPanel,\n Flex,\n Count,\n Actions,\n useLiveLog,\n usePrevious\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, SummaryListItem } from '@pega/cosmos-react-core';\n\nimport {\n StyledIntelligentGuidanceList,\n StyledIntelligentGuidance,\n StyledNew,\n StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n function IntelligentGuidance(\n {\n items,\n previousItems,\n heading,\n isCollapsed,\n onExpandCollapse,\n ...restProps\n }: PropsWithoutRef<IntelligentGuidanceProps>,\n ref: IntelligentGuidanceProps['ref']\n ) {\n const t = useI18n();\n const headerRef = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const [currentTab, setCurrentTab] = useState('current');\n const { announcePolite } = useLiveLog();\n const oldItems = usePrevious(items);\n const oldPreviousItems = usePrevious(previousItems);\n\n const listItems: SummaryListItem[] = (\n currentTab === 'current' ? items : previousItems ?? []\n ).map(item => {\n return {\n id: item.id,\n visual: <Icon name={item.icon} />,\n primary: (\n <>\n {item.label}\n {item.new && (\n <>\n <StyledNew>{t('new')}</StyledNew>\n {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n <StyledBorderLine />\n </>\n )}\n </>\n ),\n secondary: <Text variant='secondary'>{item.type}</Text>,\n contextualLabel: item.label,\n actions: item.onDismiss\n ? [\n {\n text: t('dismiss'),\n id: item.id,\n icon: 'times',\n onClick: (id, e) => {\n e.stopPropagation();\n item.onDismiss?.(id, e);\n }\n }\n ]\n : undefined,\n container: { colGap: 1 },\n role: 'button',\n tabIndex: 0,\n 'aria-label': t('continue_label_a11y', [item.label]),\n onClick: item.onClick,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n item.onClick(e);\n }\n }\n };\n });\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (headerRef.current) {\n setHeaderHeight(headerRef.current?.offsetHeight || 0);\n }\n }, [headerRef.current]);\n\n useEffect(() => {\n announcePolite({ message: `${heading} ${items.length + (previousItems?.length ?? 0)}` });\n if (oldItems) {\n const oldItemsIds = oldItems.map(i => i.id);\n const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));\n if (itemsToAnnounce.length) {\n announcePolite({ message: t('items_added_to_current_list') });\n itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));\n }\n }\n if (oldPreviousItems) {\n const oldItemsIds = oldPreviousItems.map(i => i.id);\n const itemsToAnnounce = items.filter(i => !oldItemsIds.includes(i.id));\n if (itemsToAnnounce) {\n announcePolite({ message: t('items_added_to_previous_list') });\n itemsToAnnounce.forEach(i => announcePolite({ message: `${i.label} ${i.type}` }));\n }\n }\n }, [items, previousItems]);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 1000);\n }\n }, [isCollapsed]);\n\n const intelligentGuidanceList = (\n <StyledIntelligentGuidanceList items={listItems} noItemsText={t('no_recommendations')} />\n );\n\n return (\n <StyledIntelligentGuidance\n {...restProps}\n ref={ref}\n role='region'\n isCollapsed={isCollapsed}\n hasItems={!!items.length}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader ref={headerRef}>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Text variant='h2'>{heading}</Text>\n <Count>{items.length + (previousItems?.length ?? 0)}</Count>\n </Flex>\n <Actions\n items={[\n {\n text: t(isCollapsed ? 'expand' : 'collapse'),\n id: 'IntelligentGuidanceButton',\n icon: 'caret-down',\n 'aria-label': isCollapsed\n ? t('expand_noun', [heading])\n : t('collapse_noun', [heading]),\n onClick: onExpandCollapse,\n ref: toggleButtonRef\n }\n ]}\n />\n </CardHeader>\n {previousItems ? (\n <>\n <Tabs\n tabs={[\n {\n id: 'current',\n name: t('current'),\n count: items.filter(item => item.new).length || undefined\n },\n {\n id: 'previous',\n name: t('previous'),\n count: previousItems.filter(item => item.new).length || undefined\n }\n ]}\n currentTabId={currentTab}\n onTabClick={setCurrentTab}\n />\n <TabPanel tabId={currentTab}>{intelligentGuidanceList}</TabPanel>\n </>\n ) : (\n intelligentGuidanceList\n )}\n </StyledIntelligentGuidance>\n );\n }\n);\n\nexport default IntelligentGuidance;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.13.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"build": "tsc -b tsconfig.build.json"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@pega/cosmos-react-core": "5.0.0-dev.
|
|
21
|
+
"@pega/cosmos-react-core": "5.0.0-dev.13.0",
|
|
22
22
|
"@types/react": "^17.0.62",
|
|
23
23
|
"@types/react-dom": "^17.0.20",
|
|
24
24
|
"@types/styled-components": "^5.1.26",
|