@pega/cosmos-react-work 7.0.0-build.28.1 → 7.0.0-build.28.3
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.
|
@@ -92,7 +92,7 @@ const CaseHeader = () => {
|
|
|
92
92
|
useEffect(() => {
|
|
93
93
|
setSummaryResetID(Math.random());
|
|
94
94
|
}, [heading, summaryFields, promotedActions]);
|
|
95
|
-
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: summaryExpanded ? `arrow-micro-${start}` :
|
|
95
|
+
return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down' }) })), icon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: _jsx(Icon, { "data-testid": testIds.icon, name: icon, background: iconBackground }) })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
|
|
96
96
|
direction: 'column',
|
|
97
97
|
pad: [0.5, 2, 0.5, 1.5],
|
|
98
98
|
alignItems: 'start'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n Button,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch,\n Actions\n} from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr, start } = useDirection();\n const theme = useTheme();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n\n const iconBackground = useMemo(() => {\n return tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n }, [theme]);\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n const caseActions: Action[] | undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n text: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1.5 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name={summaryExpanded ? `arrow-micro-${start}` : `arrow-micro-down`} />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {icon && (\n <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n <Icon data-testid={testIds.icon} name={icon} background={iconBackground} />\n </Flex>\n )}\n\n {/* header group */}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, 1.5],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\n ref={headerGroupEl}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases || subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </Flex>\n\n {/* summary */}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n\n {/* inline actions */}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {(caseActions || onFollowedChange) && (\n <Actions\n contextualLabel={caseId}\n data-testid={testIds.actions}\n iconOnly\n items={[\n ...(onFollowedChange\n ? [\n {\n id: 'follow',\n text: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange(!followed)\n }\n ]\n : []),\n ...(caseActions ?? [])\n ]}\n menuAt={1}\n />\n )}\n </Flex>\n </Flex>\n\n {/* wrapped promoted actions */}\n {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
|
|
1
|
+
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, MouseEvent } from 'react';\nimport { parseToHsl } from 'polished';\n\nimport {\n Breadcrumbs,\n Flex,\n getEdge,\n Icon,\n registerIcon,\n Text,\n Link,\n Button,\n throttle,\n useDirection,\n useI18n,\n useAfterInitialEffect,\n useTheme,\n tryCatch,\n Actions\n} from '@pega/cosmos-react-core';\nimport type { Action } from '@pega/cosmos-react-core';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nimport {\n StyledCaseHeader,\n StyledCaseHeaderText,\n StyledExpandCollapseSummaryButton,\n StyledSubheading,\n StyledHeaderActions,\n StyledCaseHeaderPromotedAction\n} from '../CaseView.styles';\nimport { useCaseViewContext } from '../CaseView.context';\n\nimport Summary from './Summary';\n\nregisterIcon(pencilIcon, moreIcon);\n\nconst CaseHeader: FC = () => {\n const t = useI18n();\n const { ltr, start } = useDirection();\n const theme = useTheme();\n\n const {\n testIds,\n caseId,\n icon,\n heading,\n subheading,\n actions,\n caseLink,\n parentCases,\n onEdit,\n followed,\n onFollowedChange,\n promotedActions,\n summaryExpanded,\n summaryFields,\n onToggleSummary,\n isPreview,\n aboveSM,\n aboveMD,\n persistentUtility\n } = useCaseViewContext();\n\n const [wrapPromotedActions, setWrapPromotedActions] = useState(false);\n const [summaryResetID, setSummaryResetID] = useState<number | undefined>(Math.random());\n\n const wrapActionsBreakpoint = useRef<number | null>(null);\n\n const iconBackground = useMemo(() => {\n return tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n }, [theme]);\n\n const contentsEl = useRef<HTMLDivElement>(null);\n const headerGroupEl = useRef<HTMLElement>(null);\n const actionsContainerEl = useRef<HTMLDivElement>(null);\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n const caseActions: Action[] | undefined = actions\n ? actions.map(action => {\n return {\n ...action,\n text: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n })\n : undefined;\n const showExpandCollapse = !isPreview && aboveMD;\n const collapsedMainHeader =\n (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);\n\n // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.\n useAfterInitialEffect(() => {\n if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n toggleButtonRef.current.blur();\n setTimeout(() => {\n toggleButtonRef.current?.focus();\n }, 0);\n }\n }, [summaryExpanded]);\n\n // Actions wrapping\n useLayoutEffect(() => {\n if (\n !wrapPromotedActions &&\n contentsEl.current &&\n headerGroupEl.current &&\n actionsContainerEl.current\n ) {\n const contentStart = getEdge({\n el: contentsEl.current,\n side: 'leading',\n ltr\n });\n const headerGroupEnd = getEdge({\n el: headerGroupEl.current,\n side: 'trailing',\n ltr\n });\n const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;\n\n wrapActionsBreakpoint.current =\n Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);\n }\n\n const promotedActionsWrapHandler = () => {\n if (wrapActionsBreakpoint.current && contentsEl.current) {\n setWrapPromotedActions(\n Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current\n );\n }\n };\n\n const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));\n\n promotedActionsWrapHandler();\n\n if (contentsEl.current) {\n resizeObserver.observe(contentsEl.current, { box: 'border-box' });\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n contentsEl,\n headerGroupEl,\n actionsContainerEl,\n promotedActions,\n heading,\n subheading,\n wrapPromotedActions\n ]);\n\n // Reset summary\n useEffect(() => {\n setSummaryResetID(Math.random());\n }, [heading, summaryFields, promotedActions]);\n\n return (\n <Flex\n data-testid={testIds.header}\n as={StyledCaseHeader}\n container={{ direction: 'column', gap: 1.5 }}\n >\n <Flex container ref={contentsEl}>\n {showExpandCollapse && onToggleSummary && !persistentUtility && (\n <StyledExpandCollapseSummaryButton\n ref={toggleButtonRef}\n onClick={onToggleSummary}\n label={t(summaryExpanded ? 'collapse' : 'expand')}\n aria-label={t(summaryExpanded ? 'collapse_summary' : 'expand_summary')}\n icon\n compact\n >\n <Icon name={summaryExpanded ? `arrow-micro-${start}` : 'arrow-micro-down'} />\n </StyledExpandCollapseSummaryButton>\n )}\n\n {icon && (\n <Flex container={{ pad: [1, 0, 0] }} item={{ shrink: 0 }}>\n <Icon data-testid={testIds.icon} name={icon} background={iconBackground} />\n </Flex>\n )}\n\n {/* header group */}\n <Flex\n as={StyledCaseHeaderText}\n container={{\n direction: 'column',\n pad: [0.5, 2, 0.5, 1.5],\n alignItems: 'start'\n }}\n item={aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }}\n ref={headerGroupEl}\n >\n <Text data-testid={testIds.heading} variant='h1'>\n {caseLink ? <Link {...caseLink}>{heading}</Link> : heading}\n </Text>\n\n {subheading && (!parentCases || subheading !== caseId) && (\n <StyledSubheading data-testid={testIds.subheading}>{subheading}</StyledSubheading>\n )}\n\n {parentCases && (\n <Breadcrumbs\n forwardedAs='p'\n path={[\n ...parentCases,\n {\n ...caseLink,\n id: caseId,\n primary: caseId,\n href: caseLink?.href\n }\n ]}\n leafOnly\n />\n )}\n </Flex>\n\n {/* summary */}\n {collapsedMainHeader && !wrapPromotedActions && (\n <Summary siblingRef={actionsContainerEl} key={summaryResetID} />\n )}\n\n {/* inline actions */}\n <Flex\n as={StyledHeaderActions}\n item={{ shrink: 0 }}\n container={{ alignItems: 'start', pad: [0, 0, 0, 2] }}\n offsetEnd={!summaryExpanded}\n ref={actionsContainerEl}\n >\n {collapsedMainHeader &&\n !wrapPromotedActions &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <>\n {promotedActions.map(promotedAction => (\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n key={promotedAction.id}\n >\n {promotedAction.text}\n </StyledCaseHeaderPromotedAction>\n ))}\n </>\n ) : null}\n\n {onEdit && (\n <Button\n data-testid={testIds.edit}\n icon\n variant='simple'\n onClick={onEdit}\n label={t('edit')}\n >\n <Icon name='pencil' />\n </Button>\n )}\n\n {(caseActions || onFollowedChange) && (\n <Actions\n contextualLabel={caseId}\n data-testid={testIds.actions}\n iconOnly\n items={[\n ...(onFollowedChange\n ? [\n {\n id: 'follow',\n text: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange(!followed)\n }\n ]\n : []),\n ...(caseActions ?? [])\n ]}\n menuAt={1}\n />\n )}\n </Flex>\n </Flex>\n\n {/* wrapped promoted actions */}\n {(!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&\n promotedActions &&\n promotedActions.length > 0 ? (\n <Flex\n data-testid={testIds.promotedActions}\n container={{ justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }}\n >\n {promotedActions.map(({ id, text, onClick }) => (\n <div key={text}>\n <StyledCaseHeaderPromotedAction\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => onClick?.(id, e)}\n >\n {text}\n </StyledCaseHeaderPromotedAction>\n </div>\n ))}\n </Flex>\n ) : null}\n </Flex>\n );\n};\n\nexport default CaseHeader;\n"]}
|
|
@@ -9,7 +9,7 @@ const Timeline = forwardRef(function Timeline({ activity, currentTime, groupBy =
|
|
|
9
9
|
useItemIntersection(listRef, activity.length - 1, () => {
|
|
10
10
|
if (!loading)
|
|
11
11
|
loadMore?.();
|
|
12
|
-
},
|
|
12
|
+
}, ':scope li > div');
|
|
13
13
|
return (_jsxs(Grid, { ...restProps, container: {
|
|
14
14
|
cols: 'auto 1fr',
|
|
15
15
|
colGap: 0.75,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: FunctionComponent<TimelineProps & ForwardProps> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n ':scope li > div'\n );\n\n return (\n <Grid\n {...restProps}\n container={{\n cols: 'auto 1fr',\n colGap: 0.75,\n alignItems: 'start'\n }}\n sm={{ container: { cols: 'auto auto 1fr', colGap: 0.25 } }}\n as={StyledTimeline}\n ref={listRef}\n >\n {groupBy === 'none'\n ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat='datetime'\n prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\n {groupedData.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n prevItemDate={groupedData[index - 1]?.date}\n nextItemDate={groupedData[index + 1]?.date}\n currentTime={currentTime}\n />\n ))}\n </StyledTimelineList>\n </Grid>\n ))}\n {loading && (\n <StyledTimelineListItem>\n <StyledLoadingCell>\n <Progress placement='local' />\n </StyledLoadingCell>\n </StyledTimelineListItem>\n )}\n </Grid>\n );\n});\n\nexport default Timeline;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "7.0.0-build.28.
|
|
3
|
+
"version": "7.0.0-build.28.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "7.0.0-build.28.
|
|
23
|
-
"@pega/cosmos-react-rte": "7.0.0-build.28.
|
|
22
|
+
"@pega/cosmos-react-core": "7.0.0-build.28.3",
|
|
23
|
+
"@pega/cosmos-react-rte": "7.0.0-build.28.3",
|
|
24
24
|
"@types/react": "^17.0.62",
|
|
25
25
|
"@types/react-dom": "^17.0.20",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"styled-components": "^5.2.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@storybook/addon-actions": "~8.2.
|
|
34
|
-
"@storybook/react": "~8.2.
|
|
33
|
+
"@storybook/addon-actions": "~8.2.9",
|
|
34
|
+
"@storybook/react": "~8.2.9",
|
|
35
35
|
"@testing-library/react": "^12.1.3",
|
|
36
36
|
"@testing-library/user-event": "^14.5.1",
|
|
37
37
|
"@types/dompurify": "^3.0.5",
|