@pega/lists-react 9.0.0-build.9.8 → 9.0.0

package/lib/Core/Views/Timeline/Timeline.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,kNAUrB,CAAC;AAIH,eAAO,MAAM,WAAW,yGAKvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,kNAG5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kNAW7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,gIA6D/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,kBAAkB,wGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,wGAYlC,CAAC;AAIF,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,UAAU,6NAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}
+{"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,WAAW,6NAKvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,6ZAS5B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAG5B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAW7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,+PA6D/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,6NAE/B,CAAC;AAIF,eAAO,MAAM,iBAAiB,uNAQ5B,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAGlC,CAAC;AAIF,eAAO,MAAM,sBAAsB,6NAQlC,CAAC;AAIF,eAAO,MAAM,uBAAuB,6NAGnC,CAAC;AAIF,eAAO,MAAM,cAAc,mOAgBzB,CAAC;AAIH,eAAO,MAAM,UAAU;;oMAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAQ7B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;CAOzB,CAAC"}

package/lib/Core/Views/Timeline/Timeline.styles.js

@@ -1,17 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Button, calculateFontSize, Card, CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledBackdrop, StyledIcon, useDirection } from '@pega/cosmos-react-core';
-export const StyledCard = styled(Card)(({ theme }) => {
-    return css `
-    border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
-    padding-block: ${theme.base.spacing};
-
-    &:not(& &) {
-      border-radius: 0;
-      background-color: transparent;
-    }
-  `;
-});
-StyledCard.defaultProps = defaultThemeProp;
+import { CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledBackdrop, StyledIcon, StyledCard, useDirection, StyledExpandCollapseButton } from '@pega/cosmos-react-core';
 export const StyledTitle = styled.div `
   display: -webkit-inline-box;
   -webkit-line-clamp: 1;
@@ -30,17 +18,6 @@ export const StyledCardContent = styled(CardContent)(({ theme }) => {
   `;
 });
 StyledCardContent.defaultProps = defaultThemeProp;
-export const StyledToggleButton = styled(Button)(({ theme, collapsed }) => {
-    const { rtl } = useDirection();
-    return css `
-    ${StyledIcon} {
-      transition: transform calc(2 * ${theme.base.animation.speed})
-        ${theme.base.animation.timing.ease};
-      transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};
-    }
-  `;
-});
-StyledToggleButton.defaultProps = defaultThemeProp;
 export const StyledCardHeader = styled(Grid) `
   padding: 0;
   min-height: 2rem;
@@ -98,7 +75,7 @@ export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPre
             ${theme.base.palette.info};
         }
       `}
-      & > ${StyledTimelineIcon} {
+        & > ${StyledTimelineIcon} {
         position: relative;
         margin: 0;
         z-index: 1;
@@ -120,38 +97,52 @@ export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPre
     `;
 });
 StyledBulletWrapper.defaultProps = defaultThemeProp;
-export const StyledDate = styled.h2(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
-    const fontSizes = calculateFontSize(fontSize, fontScale);
+export const StyledTimelineGroup = styled.li `
+  grid-column: 1 / -1;
+`;
+StyledTimelineGroup.defaultProps = defaultThemeProp;
+export const StyledGroupHeader = styled.header(({ theme }) => {
     return css `
-      grid-column: 1 / -1;
-      padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});
-      font-size: ${fontSizes[text.h2['font-size']]};
-      font-weight: ${text.h2['font-weight']};
-    `;
+    display: flex;
+    align-items: center;
+    gap: ${theme.base.spacing};
+    padding-block: calc(3 * ${theme.base.spacing}) calc(1.25 * ${theme.base.spacing});
+    padding-inline-start: calc(0.75 * ${theme.base.spacing});
+  `;
 });
-StyledDate.defaultProps = defaultThemeProp;
-export const StyledTimelineList = styled.ol `
-  display: contents;
+StyledGroupHeader.defaultProps = defaultThemeProp;
+export const StyledGroupContentList = styled.ol `
+  padding: 0;
+  margin: 0;
 `;
-StyledTimelineList.defaultProps = defaultThemeProp;
+StyledGroupContentList.defaultProps = defaultThemeProp;
 export const StyledTimelineListItem = styled.li `
   display: contents;
 
-  &:first-child ${StyledDate} {
-    padding-block-start: 0;
-  }
-
-  &:has(${StyledCardContent} .cell-content > span:empty):not(:has(${StyledTimelineList}))
+  &:has(${StyledCardContent} .cell-content > span:empty)
     ${StyledCard}
-    ${StyledToggleButton} {
+    ${StyledExpandCollapseButton} {
     display: none;
   }
 `;
 StyledTimelineListItem.defaultProps = defaultThemeProp;
+export const StyledTimelineEndMarker = styled.li `
+  grid-column: 1 / -1;
+  min-height: 0.0625rem;
+`;
+StyledTimelineEndMarker.defaultProps = defaultThemeProp;
 export const StyledTimeline = styled.ol(({ theme }) => {
     return css `
-    @media (min-width: ${theme.base.breakpoints.sm}) {
-      ${StyledCard} {
+    &&& ${StyledTimelineListItem} ${StyledCard} {
+      border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
+      padding-block: ${theme.base.spacing};
+
+      &:not(& &) {
+        border-radius: 0;
+        background-color: transparent;
+      }
+
+      @media (min-width: ${theme.base.breakpoints.sm}) {
         padding-block: calc(0.5 * ${theme.base.spacing});
       }
     }
@@ -179,4 +170,13 @@ export const StyledLoadingCell = styled.div `
     background: transparent;
   }
 `;
+StyledLoadingCell.defaultProps = defaultThemeProp;
+export const timelineItemsGridProps = {
+    container: {
+        cols: 'auto 1fr',
+        colGap: 0.75,
+        alignItems: 'start'
+    },
+    sm: { container: { cols: 'auto auto 1fr', colGap: 0.25 } }
+};
 //# sourceMappingURL=Timeline.styles.js.map

package/lib/Core/Views/Timeline/Timeline.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport type { FontSize } from '@pega/cosmos-react-core';\nimport {\n  Button,\n  calculateFontSize,\n  Card,\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Flex,\n  Grid,\n  StyledBackdrop,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding-block: ${theme.base.spacing};\n\n    &:not(& &) {\n      border-radius: 0;\n      background-color: transparent;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledTitle = styled.div`\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};\n      @media (pointer: coarse) {\n        padding-inline-start: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n  const { rtl } = useDirection();\n  return css`\n    ${StyledIcon} {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${collapsed ? `rotate(${rtl ? '90deg' : '-90deg'})` : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n  padding: 0;\n  min-height: 2rem;\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    color: ${theme.base.palette.light};\n    background: ${theme.base.palette.info};\n\n    & > ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n  hasPrev: boolean;\n  hasNext: boolean;\n  isPrevFuture: boolean;\n  isNextFuture: boolean;\n  hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.span<StyledBulletWrapperProps>(\n  ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n    const { rtl } = useDirection();\n    return css`\n      height: 100%;\n      position: relative;\n      text-align: center;\n      padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n      min-width: 2rem;\n\n      ${hasPrev &&\n      css`\n        &::before {\n          content: '';\n          display: block;\n          position: absolute;\n          inset-block-start: 0;\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n      ${hasNext &&\n      css`\n        &::after {\n          content: '';\n          display: block;\n          position: absolute;\n          inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n      & > ${StyledTimelineIcon} {\n        position: relative;\n        margin: 0;\n        z-index: 1;\n        width: ${hasIcon ? '1.5rem' : '0.5rem'};\n        height: ${hasIcon ? '1.5rem' : '0.5rem'};\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-block-start: calc(${theme.base.spacing} + 0.0625rem);\n        &::before {\n          height: calc(${theme.base.spacing} + 0.75rem);\n        }\n\n        &::after {\n          inset-block-start: calc(${theme.base.spacing} + 0.75rem);\n          height: calc(100% - ${theme.base.spacing} - 0.75rem);\n        }\n      }\n    `;\n  }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled.h2(\n  ({\n    theme: {\n      base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n      components: { text }\n    }\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n    return css`\n      grid-column: 1 / -1;\n      padding-block: calc(3 * ${spacing}) calc(1.25 * ${spacing});\n      font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n      font-weight: ${text.h2['font-weight']};\n    `;\n  }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineList = styled.ol`\n  display: contents;\n`;\n\nStyledTimelineList.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineListItem = styled.li`\n  display: contents;\n\n  &:first-child ${StyledDate} {\n    padding-block-start: 0;\n  }\n\n  &:has(${StyledCardContent} .cell-content > span:empty):not(:has(${StyledTimelineList}))\n    ${StyledCard}\n    ${StyledToggleButton} {\n    display: none;\n  }\n`;\n\nStyledTimelineListItem.defaultProps = defaultThemeProp;\n\nexport const StyledTimeline = styled.ol(({ theme }) => {\n  return css`\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      ${StyledCard} {\n        padding-block: calc(0.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n  return css`\n    opacity: ${theme.base.transparency['transparent-2']};\n    white-space: nowrap;\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      text-align: end;\n      line-height: ${theme.base['hit-area']['mouse-min']};\n      padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n    }\n  `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n  grid-column: 1 / -1;\n  position: relative;\n  height: 2.8rem;\n\n  ${StyledBackdrop} {\n    background: transparent;\n  }\n`;\n"]}
+{"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  CardContent,\n  DateTimeDisplay,\n  defaultThemeProp,\n  Flex,\n  Grid,\n  StyledBackdrop,\n  StyledIcon,\n  StyledCard,\n  useDirection,\n  StyledExpandCollapseButton\n} from '@pega/cosmos-react-core';\n\nexport const StyledTitle = styled.div`\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n  return css`\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};\n      @media (pointer: coarse) {\n        padding-inline-start: ${theme.base['hit-area']['finger-min']};\n      }\n    }\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n  padding: 0;\n  min-height: 2rem;\n`;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n  return css`\n    border-radius: 50%;\n    color: ${theme.base.palette.light};\n    background: ${theme.base.palette.info};\n\n    & > ${StyledIcon} {\n      height: 1em;\n      width: 1em;\n    }\n  `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n  hasPrev: boolean;\n  hasNext: boolean;\n  isPrevFuture: boolean;\n  isNextFuture: boolean;\n  hasIcon: boolean;\n}\n\nexport const StyledBulletWrapper = styled.span<StyledBulletWrapperProps>(\n  ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n    const { rtl } = useDirection();\n    return css`\n      height: 100%;\n      position: relative;\n      text-align: center;\n      padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n      min-width: 2rem;\n\n      ${hasPrev &&\n      css`\n        &::before {\n          content: '';\n          display: block;\n          position: absolute;\n          inset-block-start: 0;\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n      ${hasNext &&\n      css`\n        &::after {\n          content: '';\n          display: block;\n          position: absolute;\n          inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);\n          inset-inline-start: 50%;\n          transform: translateX(${rtl ? '50%' : '-50%'});\n          width: 0.0625rem;\n          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);\n          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}\n            ${theme.base.palette.info};\n        }\n      `}\n        & > ${StyledTimelineIcon} {\n        position: relative;\n        margin: 0;\n        z-index: 1;\n        width: ${hasIcon ? '1.5rem' : '0.5rem'};\n        height: ${hasIcon ? '1.5rem' : '0.5rem'};\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-block-start: calc(${theme.base.spacing} + 0.0625rem);\n        &::before {\n          height: calc(${theme.base.spacing} + 0.75rem);\n        }\n\n        &::after {\n          inset-block-start: calc(${theme.base.spacing} + 0.75rem);\n          height: calc(100% - ${theme.base.spacing} - 0.75rem);\n        }\n      }\n    `;\n  }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineGroup = styled.li`\n  grid-column: 1 / -1;\n`;\n\nStyledTimelineGroup.defaultProps = defaultThemeProp;\n\nexport const StyledGroupHeader = styled.header(({ theme }) => {\n  return css`\n    display: flex;\n    align-items: center;\n    gap: ${theme.base.spacing};\n    padding-block: calc(3 * ${theme.base.spacing}) calc(1.25 * ${theme.base.spacing});\n    padding-inline-start: calc(0.75 * ${theme.base.spacing});\n  `;\n});\n\nStyledGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledGroupContentList = styled.ol`\n  padding: 0;\n  margin: 0;\n`;\n\nStyledGroupContentList.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineListItem = styled.li`\n  display: contents;\n\n  &:has(${StyledCardContent} .cell-content > span:empty)\n    ${StyledCard}\n    ${StyledExpandCollapseButton} {\n    display: none;\n  }\n`;\n\nStyledTimelineListItem.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineEndMarker = styled.li`\n  grid-column: 1 / -1;\n  min-height: 0.0625rem;\n`;\n\nStyledTimelineEndMarker.defaultProps = defaultThemeProp;\n\nexport const StyledTimeline = styled.ol(({ theme }) => {\n  return css`\n    &&& ${StyledTimelineListItem} ${StyledCard} {\n      border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n      padding-block: ${theme.base.spacing};\n\n      &:not(& &) {\n        border-radius: 0;\n        background-color: transparent;\n      }\n\n      @media (min-width: ${theme.base.breakpoints.sm}) {\n        padding-block: calc(0.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n  return css`\n    opacity: ${theme.base.transparency['transparent-2']};\n    white-space: nowrap;\n    @media (min-width: ${theme.base.breakpoints.sm}) {\n      text-align: end;\n      line-height: ${theme.base['hit-area']['mouse-min']};\n      padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n    }\n  `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n\nexport const StyledLoadingCell = styled.div`\n  grid-column: 1 / -1;\n  position: relative;\n  height: 2.8rem;\n\n  ${StyledBackdrop} {\n    background: transparent;\n  }\n`;\n\nStyledLoadingCell.defaultProps = defaultThemeProp;\n\nexport const timelineItemsGridProps = {\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 const;\n"]}

package/lib/Core/Views/Timeline/Timeline.types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode, Ref } from 'react';
 import type { BaseProps, DateTimeDisplayProps, FieldValueListProps, IconProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';
-import type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';
+import type { Group } from 'pega-repeating-structures-core/types/State.types';
 export interface ActivityObject {
     /** Unique id for activity */
     id: string;
@@ -25,18 +25,22 @@ export interface ActivityObject {
     /** The set of field values to render in the list. */
     content?: FieldValueListProps['fields'] | ReactElement;
 }
-export type TimelineSortOrder = 'ascending' | 'descending';
-export type TimelineGroupBy = Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'> | 'none';
 export default interface TimelineProps extends BaseProps, NoChildrenProp {
     /** List of activity */
-    activity: ActivityObject[];
+    activities: {
+        header: ReactNode;
+        activity: ActivityObject[];
+    }[];
     /** Current time as Date */
     currentTime: Date;
+    /** Grouping configuration */
+    groupBy?: Group;
     /**
-     * List of activity grouped by day, month, quarter or year.
-     * @default 'date'
+     * Whether groups are expanded by default.
+     * Only applies when `groupBy` is provided.
+     * @default true
      */
-    groupBy?: TimelineGroupBy;
+    defaultGroupsExpanded?: boolean;
     /**
      * Show a Progress indicator at the end of a list where newly loaded items will be appended.
      * @default false

package/lib/Core/Views/Timeline/Timeline.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EACV,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AAEtG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC9C,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}
+{"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EACV,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAE9E,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC9C,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,UAAU,EAAE;QAAE,MAAM,EAAE,SAAS,CAAC;QAAC,QAAQ,EAAE,cAAc,EAAE,CAAA;KAAE,EAAE,CAAC;IAChE,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

package/lib/Core/Views/Timeline/Timeline.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement, ReactNode, Ref } from 'react';\n\nimport type {\n  BaseProps,\n  DateTimeDisplayProps,\n  FieldValueListProps,\n  IconProps,\n  NoChildrenProp,\n  StatusProps\n} from '@pega/cosmos-react-core';\nimport type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\n\nexport interface ActivityObject {\n  /** Unique id for activity */\n  id: string;\n  /** Date as ISO8601 string, timestamp or native Date object. */\n  date: string | number | Date;\n  /**\n   * Controls date time variant. Set to 'time' when groupBy is 'date'.\n   * @default datetime\n   */\n  dateVariant?: DateTimeDisplayProps['variant'];\n  /** Header region for rendering text and links. */\n  title: ReactNode;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon?: IconProps['name'];\n  /**\n   * Default visually expanded state for the activity item.\n   * @default false\n   */\n  defaultExpanded?: boolean;\n  /** Represents the current status of activity */\n  status?: StatusProps;\n  /** The set of field values to render in the list. */\n  content?: FieldValueListProps['fields'] | ReactElement;\n}\n\nexport type TimelineSortOrder = 'ascending' | 'descending';\nexport type TimelineGroupBy =\n  | Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'>\n  | 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n  /** List of activity */\n  activity: ActivityObject[];\n  /** Current time as Date */\n  currentTime: Date;\n  /**\n   * List of activity grouped by day, month, quarter or year.\n   * @default 'date'\n   */\n  groupBy?: TimelineGroupBy;\n  /**\n   * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n   * @default false\n   */\n  loading?: boolean;\n  /** Callback to fetch more activity items */\n  loadMore?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n"]}
+{"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactElement, ReactNode, Ref } from 'react';\n\nimport type {\n  BaseProps,\n  DateTimeDisplayProps,\n  FieldValueListProps,\n  IconProps,\n  NoChildrenProp,\n  StatusProps\n} from '@pega/cosmos-react-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nexport interface ActivityObject {\n  /** Unique id for activity */\n  id: string;\n  /** Date as ISO8601 string, timestamp or native Date object. */\n  date: string | number | Date;\n  /**\n   * Controls date time variant. Set to 'time' when groupBy is 'date'.\n   * @default datetime\n   */\n  dateVariant?: DateTimeDisplayProps['variant'];\n  /** Header region for rendering text and links. */\n  title: ReactNode;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon?: IconProps['name'];\n  /**\n   * Default visually expanded state for the activity item.\n   * @default false\n   */\n  defaultExpanded?: boolean;\n  /** Represents the current status of activity */\n  status?: StatusProps;\n  /** The set of field values to render in the list. */\n  content?: FieldValueListProps['fields'] | ReactElement;\n}\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n  /** List of activity */\n  activities: { header: ReactNode; activity: ActivityObject[] }[];\n  /** Current time as Date */\n  currentTime: Date;\n  /** Grouping configuration */\n  groupBy?: Group;\n  /**\n   * Whether groups are expanded by default.\n   * Only applies when `groupBy` is provided.\n   * @default true\n   */\n  defaultGroupsExpanded?: boolean;\n  /**\n   * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n   * @default false\n   */\n  loading?: boolean;\n  /** Callback to fetch more activity items */\n  loadMore?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTableElement>;\n}\n"]}

package/lib/Core/Views/Timeline/TimelineGroup.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { Group } from 'pega-repeating-structures-core/types/State.types';
+import type { ActivityObject } from './Timeline.types';
+interface TimelineGroupProps {
+    header: ReactNode;
+    activity: ActivityObject[];
+    groupBy: Group | undefined;
+    currentTime: Date;
+    defaultExpanded: boolean;
+}
+declare const TimelineGroup: ({ header, activity, groupBy, currentTime, defaultExpanded }: TimelineGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default TimelineGroup;
+//# sourceMappingURL=TimelineGroup.d.ts.map

package/lib/Core/Views/Timeline/TimelineGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineGroup.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AASvD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,aAAa,GAAI,6DAMpB,kBAAkB,4CA8CpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/Core/Views/Timeline/TimelineGroup.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ExpandCollapse, ExpandCollapseButton, Grid, Text, useI18n, useUID } from '@pega/cosmos-react-core';
+import { StyledGroupContentList, StyledGroupHeader, StyledTimelineGroup, timelineItemsGridProps } from './Timeline.styles';
+import TimelineItem from './TimelineItem';
+const TimelineGroup = ({ header, activity, groupBy, currentTime, defaultExpanded }) => {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const headerId = useUID();
+    const contentId = useUID();
+    const t = useI18n();
+    const toggleLabel = expanded ? t('collapse') : t('expand');
+    return (_jsxs(StyledTimelineGroup, { "data-timeline-group": true, children: [_jsxs(StyledGroupHeader, { children: [_jsx(ExpandCollapseButton, { expanded: expanded, onToggle: () => setExpanded(prev => !prev), iconOnly: true, compact: true, "aria-label": toggleLabel, "aria-describedby": headerId, "aria-controls": contentId }), _jsx(Text, { variant: 'h3', id: headerId, children: header })] }), _jsx(ExpandCollapse, { collapsed: !expanded, dimension: 'height', as: 'section', children: _jsx("div", { id: contentId, role: 'region', "aria-labelledby": headerId, children: _jsx(Grid, { ...timelineItemsGridProps, as: StyledGroupContentList, children: activity.map((item, index) => (_jsx(TimelineItem, { item: {
+                                ...item,
+                                ...(groupBy?.dateFunction === 'DAYS' &&
+                                    (!item.dateVariant || item.dateVariant === 'datetime') && {
+                                    dateVariant: 'time'
+                                })
+                            }, prevItemDate: activity[index - 1]?.date, nextItemDate: activity[index + 1]?.date, currentTime: currentTime }, item.id))) }) }) })] }));
+};
+export default TimelineGroup;
+//# sourceMappingURL=TimelineGroup.js.map

package/lib/Core/Views/Timeline/TimelineGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineGroup.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,MAAM,EACP,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAU1C,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,eAAe,EACI,EAAE,EAAE;IACvB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;IAC1B,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAE3D,OAAO,CACL,MAAC,mBAAmB,4CAClB,MAAC,iBAAiB,eAChB,KAAC,oBAAoB,IACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAC1C,QAAQ,QACR,OAAO,sBACK,WAAW,sBACL,QAAQ,mBACX,SAAS,GACxB,EACF,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAE,QAAQ,YAC5B,MAAM,GACF,IACW,EACpB,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,SAAS,YACnE,cAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ,qBAAkB,QAAQ,YACzD,KAAC,IAAI,OAAK,sBAAsB,EAAE,EAAE,EAAE,sBAAsB,YACzD,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,KAAC,YAAY,IAEX,IAAI,EAAE;gCACJ,GAAG,IAAI;gCACP,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM;oCAClC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,IAAI;oCACxD,WAAW,EAAE,MAAM;iCACpB,CAAC;6BACL,EACD,YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,WAAW,EAAE,WAAW,IAVnB,IAAI,CAAC,EAAE,CAWZ,CACH,CAAC,GACG,GACH,GACS,IACG,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport {\n  ExpandCollapse,\n  ExpandCollapseButton,\n  Grid,\n  Text,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n  StyledGroupContentList,\n  StyledGroupHeader,\n  StyledTimelineGroup,\n  timelineItemsGridProps\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\ninterface TimelineGroupProps {\n  header: ReactNode;\n  activity: ActivityObject[];\n  groupBy: Group | undefined;\n  currentTime: Date;\n  defaultExpanded: boolean;\n}\n\nconst TimelineGroup = ({\n  header,\n  activity,\n  groupBy,\n  currentTime,\n  defaultExpanded\n}: TimelineGroupProps) => {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const headerId = useUID();\n  const contentId = useUID();\n  const t = useI18n();\n  const toggleLabel = expanded ? t('collapse') : t('expand');\n\n  return (\n    <StyledTimelineGroup data-timeline-group>\n      <StyledGroupHeader>\n        <ExpandCollapseButton\n          expanded={expanded}\n          onToggle={() => setExpanded(prev => !prev)}\n          iconOnly\n          compact\n          aria-label={toggleLabel}\n          aria-describedby={headerId}\n          aria-controls={contentId}\n        />\n        <Text variant='h3' id={headerId}>\n          {header}\n        </Text>\n      </StyledGroupHeader>\n      <ExpandCollapse collapsed={!expanded} dimension='height' as='section'>\n        <div id={contentId} role='region' aria-labelledby={headerId}>\n          <Grid {...timelineItemsGridProps} as={StyledGroupContentList}>\n            {activity.map((item, index) => (\n              <TimelineItem\n                key={item.id}\n                item={{\n                  ...item,\n                  ...(groupBy?.dateFunction === 'DAYS' &&\n                    (!item.dateVariant || item.dateVariant === 'datetime') && {\n                      dateVariant: 'time'\n                    })\n                }}\n                prevItemDate={activity[index - 1]?.date}\n                nextItemDate={activity[index + 1]?.date}\n                currentTime={currentTime}\n              />\n            ))}\n          </Grid>\n        </div>\n      </ExpandCollapse>\n    </StyledTimelineGroup>\n  );\n};\n\nexport default TimelineGroup;\n"]}

package/lib/Core/Views/Timeline/TimelineItem.d.ts

@@ -1,5 +1,3 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { ActivityObject } from './Timeline.types';
 interface TimelineItemProps {
     item: ActivityObject;
@@ -7,6 +5,6 @@ interface TimelineItemProps {
     nextItemDate: ActivityObject['date'] | undefined;
     currentTime: Date;
 }
-declare const TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps>;
+declare const TimelineItem: ({ item: { date, dateVariant, title, icon, defaultExpanded, status, content }, prevItemDate, nextItemDate, currentTime }: TimelineItemProps) => import("react/jsx-runtime").JSX.Element;
 export default TimelineItem;
 //# sourceMappingURL=TimelineItem.d.ts.map

package/lib/Core/Views/Timeline/TimelineItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAA2B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAsBrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAgBD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAgBD,QAAA,MAAM,YAAY,GAAI,yHAKnB,iBAAiB,4CA2GnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/Core/Views/Timeline/TimelineItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { ExpandCollapse, FieldValueItem, Grid, Icon, Status, useBreakpoint, isValidElement } from '@pega/cosmos-react-core';
-import { StyledBulletWrapper, StyledCard, StyledCardContent, StyledCardHeader, StyledTime, StyledTimelineIcon, StyledTimelineListItem, StyledTitle, StyledToggleButton } from './Timeline.styles';
+import { Card, ExpandCollapse, ExpandCollapseButton, FieldValueItem, Grid, Icon, Status, useBreakpoint, useUID, isValidElement } from '@pega/cosmos-react-core';
+import { StyledBulletWrapper, StyledCardContent, StyledCardHeader, StyledTime, StyledTimelineIcon, StyledTimelineListItem, StyledTitle } from './Timeline.styles';
 import { isFutureDate } from './utils';
 const shouldRenderContent = (content) => {
     if (!content) {
@@ -13,24 +13,25 @@ const shouldRenderContent = (content) => {
     return true;
 };
 const TimelineItem = ({ item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content }, prevItemDate, nextItemDate, currentTime }) => {
+    const timeId = useUID();
     const [expanded, setExpanded] = useState(defaultExpanded);
     const isSmallOrAbove = useBreakpoint('sm');
     const contentListRef = useRef(null);
     const isSMContentWidthOrAbove = useBreakpoint('sm', {
         breakpointRef: contentListRef
     });
-    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: dateVariant, value: date, format: 'short' }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
+    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && (_jsx(StyledTime, { id: timeId, variant: dateVariant, value: date, format: 'short' })), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(Card, { children: _jsxs(StyledCardHeader, { container: {
                                     cols: 'auto 1fr',
                                     alignContent: 'evenly',
                                     alignItems: 'center',
                                     gap: 0.5
-                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [shouldRenderContent(content) && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: () => {
+                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [shouldRenderContent(content) && (_jsx(ExpandCollapseButton, { expanded: expanded, onToggle: () => {
                                             setExpanded(cur => !cur);
-                                        }, collapsed: !expanded, "aria-expanded": expanded, compact: true, children: _jsx(Icon, { name: 'caret-down' }) })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
+                                        }, iconOnly: true, compact: true, "aria-labelledby": timeId })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
                                                     cols: '1fr auto',
                                                     alignContent: 'evenly',
                                                     alignItems: 'center'
-                                                }, children: [_jsx(StyledTime, { variant: 'time', value: date, format: 'short' }), status && _jsx(Status, { variant: status.variant, children: status.children })] }))] }), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }) }))] }) }) }), shouldRenderContent(content) && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: !expanded, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
+                                                }, children: [_jsx(StyledTime, { id: timeId, variant: 'time', value: date, format: 'short' }), status && _jsx(Status, { variant: status.variant, children: status.children })] }))] }), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }) }))] }) }) }), shouldRenderContent(content) && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: !expanded, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
                                     gap: 1,
                                     cols: isSMContentWidthOrAbove
                                         ? `repeat(${content.length > 1 ? '2' : '1'}, minmax(16ch, auto) minmax(25%, 1fr))`

package/lib/Core/Views/Timeline/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, ReactElement } from 'react';\nimport { useRef, useState } from 'react';\n\nimport type { FieldValueListItemProps, ForwardProps } from '@pega/cosmos-react-core';\nimport {\n  ExpandCollapse,\n  FieldValueItem,\n  Grid,\n  Icon,\n  Status,\n  useBreakpoint,\n  isValidElement\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledBulletWrapper,\n  StyledCard,\n  StyledCardContent,\n  StyledCardHeader,\n  StyledTime,\n  StyledTimelineIcon,\n  StyledTimelineListItem,\n  StyledTitle,\n  StyledToggleButton\n} from './Timeline.styles';\nimport type { ActivityObject } from './Timeline.types';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n  item: ActivityObject;\n  prevItemDate: ActivityObject['date'] | undefined;\n  nextItemDate: ActivityObject['date'] | undefined;\n  currentTime: Date;\n}\n\nconst shouldRenderContent = (\n  content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] | ReactElement => {\n  if (!content) {\n    return false;\n  }\n\n  if (Array.isArray(content)) {\n    return content.length > 0;\n  }\n\n  return true;\n};\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n  item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content },\n  prevItemDate,\n  nextItemDate,\n  currentTime\n}: TimelineItemProps & ForwardProps) => {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const contentListRef = useRef<HTMLDivElement>(null);\n  const isSMContentWidthOrAbove = useBreakpoint('sm', {\n    breakpointRef: contentListRef\n  });\n\n  return (\n    <StyledTimelineListItem>\n      {isSmallOrAbove && <StyledTime variant={dateVariant} value={date} format='short' />}\n      <StyledBulletWrapper\n        hasIcon={!!icon}\n        hasPrev={!!prevItemDate}\n        hasNext={!!nextItemDate}\n        isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n        isNextFuture={isFutureDate(nextItemDate, currentTime)}\n      >\n        <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n          {icon && <Icon name={icon} />}\n        </StyledTimelineIcon>\n      </StyledBulletWrapper>\n      <div>\n        <div>\n          <StyledCard>\n            <StyledCardHeader\n              container={{\n                cols: 'auto 1fr',\n                alignContent: 'evenly',\n                alignItems: 'center',\n                gap: 0.5\n              }}\n              sm={{ container: { cols: 'auto 1fr auto' } }}\n            >\n              {shouldRenderContent(content) && (\n                <StyledToggleButton\n                  icon\n                  variant='simple'\n                  onClick={() => {\n                    setExpanded(cur => !cur);\n                  }}\n                  collapsed={!expanded}\n                  aria-expanded={expanded}\n                  compact\n                >\n                  <Icon name='caret-down' />\n                </StyledToggleButton>\n              )}\n              <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n                <StyledTitle>{title}</StyledTitle>\n                {!isSmallOrAbove && (\n                  <Grid\n                    container={{\n                      cols: '1fr auto',\n                      alignContent: 'evenly',\n                      alignItems: 'center'\n                    }}\n                  >\n                    <StyledTime variant='time' value={date} format='short' />\n                    {status && <Status variant={status.variant}>{status.children}</Status>}\n                  </Grid>\n                )}\n              </Grid>\n              {isSmallOrAbove && status && (\n                <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n                  <Status variant={status.variant}>{status.children}</Status>\n                </Grid>\n              )}\n            </StyledCardHeader>\n          </StyledCard>\n        </div>\n        {shouldRenderContent(content) && (\n          <ExpandCollapse dimension='height' collapsed={!expanded}>\n            <StyledCardContent>\n              {isValidElement(content) ? (\n                content\n              ) : (\n                <Grid\n                  container={{\n                    gap: 1,\n                    cols: isSMContentWidthOrAbove\n                      ? `repeat(${\n                          content.length > 1 ? '2' : '1'\n                        }, minmax(16ch, auto) minmax(25%, 1fr))`\n                      : 'minmax(0, 1fr)'\n                  }}\n                  ref={contentListRef}\n                >\n                  {content.map(({ id, name, value, variant }) => {\n                    return (\n                      <FieldValueItem\n                        name={name}\n                        value={value}\n                        variant={isSmallOrAbove ? variant : 'stacked'}\n                        key={id ?? name}\n                      />\n                    );\n                  })}\n                </Grid>\n              )}\n            </StyledCardContent>\n          </ExpandCollapse>\n        )}\n      </div>\n    </StyledTimelineListItem>\n  );\n};\n\nexport default TimelineItem;\n"]}
+{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactElement } from 'react';\nimport { useRef, useState } from 'react';\n\nimport type { FieldValueListItemProps } from '@pega/cosmos-react-core';\nimport {\n  Card,\n  ExpandCollapse,\n  ExpandCollapseButton,\n  FieldValueItem,\n  Grid,\n  Icon,\n  Status,\n  useBreakpoint,\n  useUID,\n  isValidElement\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledBulletWrapper,\n  StyledCardContent,\n  StyledCardHeader,\n  StyledTime,\n  StyledTimelineIcon,\n  StyledTimelineListItem,\n  StyledTitle\n} from './Timeline.styles';\nimport type { ActivityObject } from './Timeline.types';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n  item: ActivityObject;\n  prevItemDate: ActivityObject['date'] | undefined;\n  nextItemDate: ActivityObject['date'] | undefined;\n  currentTime: Date;\n}\n\nconst shouldRenderContent = (\n  content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] | ReactElement => {\n  if (!content) {\n    return false;\n  }\n\n  if (Array.isArray(content)) {\n    return content.length > 0;\n  }\n\n  return true;\n};\n\nconst TimelineItem = ({\n  item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content },\n  prevItemDate,\n  nextItemDate,\n  currentTime\n}: TimelineItemProps) => {\n  const timeId = useUID();\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const contentListRef = useRef<HTMLDivElement>(null);\n  const isSMContentWidthOrAbove = useBreakpoint('sm', {\n    breakpointRef: contentListRef\n  });\n\n  return (\n    <StyledTimelineListItem>\n      {isSmallOrAbove && (\n        <StyledTime id={timeId} variant={dateVariant} value={date} format='short' />\n      )}\n      <StyledBulletWrapper\n        hasIcon={!!icon}\n        hasPrev={!!prevItemDate}\n        hasNext={!!nextItemDate}\n        isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n        isNextFuture={isFutureDate(nextItemDate, currentTime)}\n      >\n        <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n          {icon && <Icon name={icon} />}\n        </StyledTimelineIcon>\n      </StyledBulletWrapper>\n      <div>\n        <div>\n          <Card>\n            <StyledCardHeader\n              container={{\n                cols: 'auto 1fr',\n                alignContent: 'evenly',\n                alignItems: 'center',\n                gap: 0.5\n              }}\n              sm={{ container: { cols: 'auto 1fr auto' } }}\n            >\n              {shouldRenderContent(content) && (\n                <ExpandCollapseButton\n                  expanded={expanded}\n                  onToggle={() => {\n                    setExpanded(cur => !cur);\n                  }}\n                  iconOnly\n                  compact\n                  aria-labelledby={timeId}\n                />\n              )}\n              <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n                <StyledTitle>{title}</StyledTitle>\n                {!isSmallOrAbove && (\n                  <Grid\n                    container={{\n                      cols: '1fr auto',\n                      alignContent: 'evenly',\n                      alignItems: 'center'\n                    }}\n                  >\n                    <StyledTime id={timeId} variant='time' value={date} format='short' />\n                    {status && <Status variant={status.variant}>{status.children}</Status>}\n                  </Grid>\n                )}\n              </Grid>\n              {isSmallOrAbove && status && (\n                <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n                  <Status variant={status.variant}>{status.children}</Status>\n                </Grid>\n              )}\n            </StyledCardHeader>\n          </Card>\n        </div>\n        {shouldRenderContent(content) && (\n          <ExpandCollapse dimension='height' collapsed={!expanded}>\n            <StyledCardContent>\n              {isValidElement(content) ? (\n                content\n              ) : (\n                <Grid\n                  container={{\n                    gap: 1,\n                    cols: isSMContentWidthOrAbove\n                      ? `repeat(${\n                          content.length > 1 ? '2' : '1'\n                        }, minmax(16ch, auto) minmax(25%, 1fr))`\n                      : 'minmax(0, 1fr)'\n                  }}\n                  ref={contentListRef}\n                >\n                  {content.map(({ id, name, value, variant }) => {\n                    return (\n                      <FieldValueItem\n                        name={name}\n                        value={value}\n                        variant={isSmallOrAbove ? variant : 'stacked'}\n                        key={id ?? name}\n                      />\n                    );\n                  })}\n                </Grid>\n              )}\n            </StyledCardContent>\n          </ExpandCollapse>\n        )}\n      </div>\n    </StyledTimelineListItem>\n  );\n};\n\nexport default TimelineItem;\n"]}

package/lib/Core/Views/Timeline/__tests__/Timeline.mocks.d.ts

@@ -1,4 +1,4 @@
-import type TimelineProps from '../Timeline.types';
-declare const activity: TimelineProps['activity'];
+import type { ActivityObject } from '../Timeline.types';
+declare const activity: ActivityObject[];
 export default activity;
 //# sourceMappingURL=Timeline.mocks.d.ts.map

package/lib/Core/Views/Timeline/__tests__/Timeline.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.mocks.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Timeline/__tests__/Timeline.mocks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AAEnD,QAAA,MAAM,QAAQ,EAAE,aAAa,CAAC,UAAU,CA+JvC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.mocks.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Timeline/__tests__/Timeline.mocks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,QAAA,MAAM,QAAQ,EAAE,cAAc,EA+J7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/Core/Views/Timeline/__tests__/Timeline.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.mocks.js","sourceRoot":"","sources":["../../../../../Core/Views/Timeline/__tests__/Timeline.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, CurrencyDisplay, Text, HTML } from '@pega/cosmos-react-core';\n\nimport type TimelineProps from '../Timeline.types';\n\nconst activity: TimelineProps['activity'] = [\n  {\n    id: '1',\n    date: Date.UTC(2025, 2, 20, 19, 28, 22),\n    title: 'Email blast: \"Buy today\"',\n    icon: 'bell-off-solid',\n    content: [\n      {\n        id: '11',\n        name: 'Progress and Risk',\n        value: <HTML content='<ul><li>Progress</li><li>Risk</li></ul>' />\n      }\n    ]\n  },\n  {\n    id: '2',\n    date: Date.UTC(2025, 2, 20, 18, 6, 22),\n    title: 'Confirm eligibility',\n    icon: 'circle-stacked-mixed'\n  },\n  {\n    id: '3',\n    date: Date.UTC(2023, 2, 10, 9, 26, 22),\n    title: 'Review customer bill',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '4',\n    date: Date.UTC(2022, 7, 10, 18, 6, 22),\n    title: 'Confirm eligibility',\n    icon: 'circle-stacked-mixed'\n  },\n  {\n    id: '5',\n    date: Date.UTC(2022, 6, 18, 0, 1, 22),\n    title: (\n      <Link href='https://www.pega.com' target='_blank'>\n        Visit Pega\n      </Link>\n    )\n  },\n  {\n    id: '6',\n    date: Date.UTC(2021, 6, 10, 13, 20, 22),\n    title: 'Update plat',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' }\n  },\n  {\n    id: '7',\n    date: Date.UTC(2021, 1, 20, 13, 20, 22),\n    title: 'Sent over request',\n    icon: 'bulb-solid',\n    defaultExpanded: true,\n    status: { variant: 'success', children: 'Good' },\n    content: [\n      { id: '31', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '32',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '33',\n        name: 'Current due amount',\n        value: <CurrencyDisplay value={1343.45} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '8',\n    date: Date.UTC(2021, 1, 20, 13, 19, 22),\n    title: 'Fulfill customer request for last month’s billing statement',\n    icon: 'layers',\n    status: { variant: 'pending', children: 'Wait' },\n    content: [\n      { id: '41', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '42',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '43',\n        name: 'Current due amount',\n        value: <CurrencyDisplay value={121} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '9',\n    date: Date.UTC(2021, 1, 20, 0, 1, 22),\n    title: (\n      <Link href='https://community.pega.com/support' target='_blank'>\n        Visit Pega support for assistance\n      </Link>\n    )\n  },\n  {\n    id: '10',\n    date: Date.UTC(2021, 1, 19, 13, 20, 22),\n    title: 'Sent over request',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' },\n    content: [\n      { id: '61', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '62',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '64',\n        name: 'Current due amount long label',\n        value: <CurrencyDisplay value={248.87} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '11',\n    date: Date.UTC(2021, 1, 17, 36, 20, 22),\n    title: 'Initial claim received',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '12',\n    date: Date.UTC(2020, 12, 15, 13, 19, 22),\n    title: 'Balance inquiry',\n    icon: 'phone-solid',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '13',\n    date: Date.UTC(2020, 2, 20, 19, 28, 22),\n    title: 'Email blast: \"Best Offer\"',\n    icon: 'bell-off-solid'\n  },\n  {\n    id: '14',\n    date: Date.UTC(2020, 1, 12, 10, 25, 48),\n    title: 'Receive customer bill',\n    icon: 'layers',\n    status: { variant: 'success', children: 'Good' }\n  }\n];\n\nexport default activity;\n"]}
+{"version":3,"file":"Timeline.mocks.js","sourceRoot":"","sources":["../../../../../Core/Views/Timeline/__tests__/Timeline.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI5E,MAAM,QAAQ,GAAqB;IACjC;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,0BAA0B;QACjC,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE;YACP;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,yCAAyC,GAAG;aAClE;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,KAAK,EAAE,qBAAqB;QAC5B,IAAI,EAAE,sBAAsB;KAC7B;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC;QACtC,KAAK,EAAE,sBAAsB;QAC7B,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;KACjD;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;QACtC,KAAK,EAAE,qBAAqB;QAC5B,IAAI,EAAE,sBAAsB;KAC7B;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,2BAE1C,CACR;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;KACjD;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,YAAY;QAClB,eAAe,EAAE,IAAI;QACrB,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;QAChD,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,KAAC,IAAI,4CAAiC,EAAE;YAC/E;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,CACL,KAAC,IAAI,gJAGE,CACR;aACF;YACD;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,OAAO,EAAE,eAAe,EAAC,KAAK,GAAG;aACjE;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,6DAA6D;QACpE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;QAChD,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,KAAC,IAAI,4CAAiC,EAAE;YAC/E;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,CACL,KAAC,IAAI,gJAGE,CACR;aACF;YACD;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,GAAG,EAAE,eAAe,EAAC,KAAK,GAAG;aAC7D;SACF;KACF;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,oCAAoC,EAAC,MAAM,EAAC,QAAQ,kDAExD,CACR;KACF;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;QAChD,OAAO,EAAE;YACP,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,KAAC,IAAI,4CAAiC,EAAE;YAC/E;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,CACL,KAAC,IAAI,gJAGE,CACR;aACF;YACD;gBACE,EAAE,EAAE,IAAI;gBACR,IAAI,EAAE,+BAA+B;gBACrC,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAC,KAAK,GAAG;aAChE;SACF;KACF;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,wBAAwB;QAC/B,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;KACjD;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACxC,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,aAAa;QACnB,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;KACjD;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,2BAA2B;QAClC,IAAI,EAAE,gBAAgB;KACvB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,uBAAuB;QAC9B,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE;KACjD;CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { Link, CurrencyDisplay, Text, HTML } from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from '../Timeline.types';\n\nconst activity: ActivityObject[] = [\n  {\n    id: '1',\n    date: Date.UTC(2025, 2, 20, 19, 28, 22),\n    title: 'Email blast: \"Buy today\"',\n    icon: 'bell-off-solid',\n    content: [\n      {\n        id: '11',\n        name: 'Progress and Risk',\n        value: <HTML content='<ul><li>Progress</li><li>Risk</li></ul>' />\n      }\n    ]\n  },\n  {\n    id: '2',\n    date: Date.UTC(2025, 2, 20, 18, 6, 22),\n    title: 'Confirm eligibility',\n    icon: 'circle-stacked-mixed'\n  },\n  {\n    id: '3',\n    date: Date.UTC(2023, 2, 10, 9, 26, 22),\n    title: 'Review customer bill',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '4',\n    date: Date.UTC(2022, 7, 10, 18, 6, 22),\n    title: 'Confirm eligibility',\n    icon: 'circle-stacked-mixed'\n  },\n  {\n    id: '5',\n    date: Date.UTC(2022, 6, 18, 0, 1, 22),\n    title: (\n      <Link href='https://www.pega.com' target='_blank'>\n        Visit Pega\n      </Link>\n    )\n  },\n  {\n    id: '6',\n    date: Date.UTC(2021, 6, 10, 13, 20, 22),\n    title: 'Update plat',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' }\n  },\n  {\n    id: '7',\n    date: Date.UTC(2021, 1, 20, 13, 20, 22),\n    title: 'Sent over request',\n    icon: 'bulb-solid',\n    defaultExpanded: true,\n    status: { variant: 'success', children: 'Good' },\n    content: [\n      { id: '31', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '32',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '33',\n        name: 'Current due amount',\n        value: <CurrencyDisplay value={1343.45} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '8',\n    date: Date.UTC(2021, 1, 20, 13, 19, 22),\n    title: 'Fulfill customer request for last month’s billing statement',\n    icon: 'layers',\n    status: { variant: 'pending', children: 'Wait' },\n    content: [\n      { id: '41', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '42',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '43',\n        name: 'Current due amount',\n        value: <CurrencyDisplay value={121} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '9',\n    date: Date.UTC(2021, 1, 20, 0, 1, 22),\n    title: (\n      <Link href='https://community.pega.com/support' target='_blank'>\n        Visit Pega support for assistance\n      </Link>\n    )\n  },\n  {\n    id: '10',\n    date: Date.UTC(2021, 1, 19, 13, 20, 22),\n    title: 'Sent over request',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' },\n    content: [\n      { id: '61', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '62',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '64',\n        name: 'Current due amount long label',\n        value: <CurrencyDisplay value={248.87} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '11',\n    date: Date.UTC(2021, 1, 17, 36, 20, 22),\n    title: 'Initial claim received',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '12',\n    date: Date.UTC(2020, 12, 15, 13, 19, 22),\n    title: 'Balance inquiry',\n    icon: 'phone-solid',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '13',\n    date: Date.UTC(2020, 2, 20, 19, 28, 22),\n    title: 'Email blast: \"Best Offer\"',\n    icon: 'bell-off-solid'\n  },\n  {\n    id: '14',\n    date: Date.UTC(2020, 1, 12, 10, 25, 48),\n    title: 'Receive customer bill',\n    icon: 'layers',\n    status: { variant: 'success', children: 'Good' }\n  }\n];\n\nexport default activity;\n"]}

package/lib/Core/Views/Timeline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAkElE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,GAAI,UAAU,iBAAiB,4CAwF5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAqElE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,GAAI,UAAU,iBAAiB,4CA6F5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/Core/Views/Timeline/index.js

@@ -14,7 +14,7 @@ import EmptyContainer from '../../Components/DefaultComponents/EmptyContainer';
 import { isFilterApplied } from '../../Utils';
 import useTranslate from '../../Hooks/useTranslate';
 import TimelineInner from './Timeline';
-import getActivity, { mapDateFnToGroupOption } from './utility';
+import getActivities from './utils';
 const StyledTimeline = styled(TimelineInner)(({ theme }) => {
     return css `
     flex: 1;
@@ -30,15 +30,22 @@ const StyledTimelineContainer = styled.div(({ view, isFullscreen }) => {
     `;
 });
 const StyledRowContainer = styled.div(({ isFullscreen, view }) => {
-    const { bodyHeight, totalItemCount, meta: { basicMode } } = view;
+    const { bodyHeight, totalItemCount } = view;
     return css `
     ${() => generateRSDataContainerHeightStyles()};
     position: relative;
-    min-height: ${basicMode && totalItemCount === 0 ? '100px' : 'auto'};
+    min-height: auto;
     flex-grow: 0;
 
     /* Adjust height based on number of rows configured */
     height: ${bodyHeight && !isFullscreen ? `${bodyHeight}px` : 'auto'};
+
+    ${totalItemCount === 0 &&
+        css `
+      /* stylelint-disable-next-line unit-allowed-list */
+      min-height: 100px;
+      height: inherit;
+    `}
   `;
 });
 const INITIAL_DEFAULT_CHUNK_SIZE = 40;
@@ -74,14 +81,14 @@ const Timeline = ({ view }) => {
             setLoading(false);
         }
     }, [count.total, rows.length, paginationEndIndex, visibleGroupHeaders]);
-    const activity = useMemo(() => getActivity(rows, columns, meta), [rows, columns, meta]);
+    const activities = useMemo(() => getActivities(groupHeaders, columns, meta, groups?.[0]), [groupHeaders, columns, meta, groups?.[0]]);
     let loadMore;
     if (hasMore) {
         loadMore = onLoadMore;
     }
-    return (_jsx(RsCardWrapper, { children: _jsxs(StyledTimelineContainer, { view: view, isFullscreen: isFullscreen, children: [_jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledRowContainer, { className: 'container row-container', isFullscreen: isFullscreen, view: view, children: [_jsx(StyledTimeline, { activity: activity || [], currentTime: new Date(), groupBy: mapDateFnToGroupOption(groups?.[0]?.dateFunction), loading: loading || !rows || !!view.isLoading, loadMore: loadMore, "data-test-id": 'Timeline', ref: ref }), domContainer && hasNoRecords && (_jsx(EmptyContainer, { message: isFilterApplied({ filterExpression, searchText, externalState }, meta.externalFilters)
+    return (_jsx(RsCardWrapper, { children: _jsxs(StyledTimelineContainer, { view: view, isFullscreen: isFullscreen, children: [_jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledRowContainer, { className: 'container row-container', isFullscreen: isFullscreen, view: view, children: [_jsx(StyledTimeline, { activities: activities, currentTime: new Date(), groupBy: groups?.[0], loading: loading || !rows || !!view.isLoading, loadMore: loadMore, "data-test-id": 'Timeline', ref: ref }), domContainer && hasNoRecords && (_jsx(EmptyContainer, { message: isFilterApplied({ filterExpression, searchText, externalState }, meta.externalFilters)
                                 ? translate('No records found')
-                                : translate('No records') }))] })] }) }));
+                                : translate('No records'), domContainer: domContainer, shouldAnnounce: false }))] })] }) }));
 };
 export default Timeline;
 //# sourceMappingURL=index.js.map

package/lib/Core/Views/Timeline/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGjF,oDAAoD;AACpD,aAAa;AACb,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,mCAAmC,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,aAAa,MAAM,YAAY,CAAC;AACvC,OAAO,WAAW,EAAE,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAEhE,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAO/C,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE;IACzB,OAAO,GAAG,CAAA;;QAEN,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;KACvD,CAAC;AACJ,CAAC,CACF,CAAC;AAOF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAA0B,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,EAAE;IACxF,MAAM,EACJ,UAAU,EACV,cAAc,EACd,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,GAAG,IAAI,CAAC;IACT,OAAO,GAAG,CAAA;MACN,GAAG,EAAE,CAAC,mCAAmC,EAAE;;kBAE/B,SAAS,IAAI,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;cAIxD,UAAU,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,CAAC,MAAM;GACnE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,0BAA0B,GAAG,EAAE,CAAC;AACtC,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAMrC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE;IAC/C,MAAM,YAAY,GAAG,CAAC,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,EACJ,IAAI,EACJ,IAAI,GAAG,EAAE,SAAS,EAAE,EAA4B,EAAE,OAAO,EAAE,EAAE,EAAsB,EACnF,OAAO,EACP,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,YAAY,EACb,GAAG,IAAI,CAAC;IACT,MAAM,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzF,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjC,MAAM,mBAAmB,GAAG,YAAY,EAAE,MAAM,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC;IAC5F,MAAM,kBAAkB,GAAG,iBAAiB,EAAE,eAAe,EAAE,QAAQ,IAAI,CAAC,CAAC;IAE7E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,QAAQ,GACZ,IAAK,CAAC,MAAM,GAAG,mBAAmB,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,yBAAyB,CAAC,CAAC;YACxF,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,iBAAiB,EAAE,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAK,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE/E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;YACnB,UAAU,EAAE,CAAC;YACb,QAAQ,EAAE,IAAI,CAAC,YAAY,IAAI,0BAA0B;YACzD,EAAE,EAAE,iBAAiB;SACtB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,kBAAkB,IAAI,IAAK,CAAC,MAAM,GAAG,mBAAmB,IAAI,IAAK,CAAC,MAAM,KAAK,KAAK,CAAC,KAAK,EAAE,CAAC;YAC7F,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAK,CAAC,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEzE,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAExF,IAAI,QAAQ,CAAC;IACb,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,GAAG,UAAU,CAAC;IACxB,CAAC;IAED,OAAO,CACL,KAAC,aAAa,cACZ,MAAC,uBAAuB,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,aAC7D,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,GAAI,EACvB,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAI,EAElD,MAAC,kBAAkB,IACjB,SAAS,EAAC,yBAAyB,EACnC,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,aAEV,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,IAAI,EAAE,EACxB,WAAW,EAAE,IAAI,IAAI,EAAE,EACvB,OAAO,EAAE,sBAAsB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAC1D,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,EAC7C,QAAQ,EAAE,QAAQ,kBACL,UAAU,EACvB,GAAG,EAAE,GAAG,GACR,EACD,YAAY,IAAI,YAAY,IAAI,CAC/B,KAAC,cAAc,IACb,OAAO,EACL,eAAe,CACb,EAAE,gBAAgB,EAAE,UAAU,EAAE,aAAa,EAAE,EAC/C,IAAI,CAAC,eAAe,CACrB;gCACC,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC;gCAC/B,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,GAE7B,CACH,IACkB,IACG,GACZ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { useEffect, useCallback, useMemo, useState, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, useFullscreenContext } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\n// TODO remove ts-ignore once Toolbar migrated to TS\n// @ts-ignore\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport getCount from '../../Components/Toolbar/utils/getCount';\nimport { EXTERNAL_FILTERS } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\nimport EmptyContainer from '../../Components/DefaultComponents/EmptyContainer';\nimport { isFilterApplied } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport TimelineInner from './Timeline';\nimport getActivity, { mapDateFnToGroupOption } from './utility';\n\nconst StyledTimeline = styled(TimelineInner)(({ theme }) => {\n  return css`\n    flex: 1;\n    padding-inline-end: ${theme.base.spacing};\n    overflow: auto;\n  `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\ninterface StyledTimelineContainerProps {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}\n\nconst StyledTimelineContainer = styled.div<StyledTimelineContainerProps>(\n  ({ view, isFullscreen }) => {\n    return css`\n      position: relative;\n      ${() => generateRSHeightStyles({ view, isFullscreen })}\n    `;\n  }\n);\n\ninterface StyledRowContainerProps {\n  isFullscreen: boolean;\n  view: RsCoreTypes.View;\n}\n\nconst StyledRowContainer = styled.div<StyledRowContainerProps>(({ isFullscreen, view }) => {\n  const {\n    bodyHeight,\n    totalItemCount,\n    meta: { basicMode }\n  } = view;\n  return css`\n    ${() => generateRSDataContainerHeightStyles()};\n    position: relative;\n    min-height: ${basicMode && totalItemCount === 0 ? '100px' : 'auto'};\n    flex-grow: 0;\n\n    /* Adjust height based on number of rows configured */\n    height: ${bodyHeight && !isFullscreen ? `${bodyHeight}px` : 'auto'};\n  `;\n});\n\nconst INITIAL_DEFAULT_CHUNK_SIZE = 40;\nconst APPEND_DEFAULT_CHUNK_SIZE = 25;\n\nexport interface TimelineViewProps {\n  view: RsCoreTypes.View;\n}\n\nconst Timeline = ({ view }: TimelineViewProps) => {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const [translate] = useTranslate();\n  const {\n    rows,\n    meta = { fieldDefs: [] as RsCoreTypes.FieldDef[], itemKey: '' } as RsCoreTypes.Meta,\n    columns,\n    groupHeaders,\n    state,\n    domContainer,\n    hasNoRecords\n  } = view;\n  const { filterExpression, externalState, searchText, paginationOptions, groups } = state;\n  const ref = useRef<HTMLTableElement>(null);\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n\n  const count = getCount({ view });\n  const visibleGroupHeaders = groupHeaders?.filter(({ isVisible }) => isVisible)?.length ?? 0;\n  const paginationEndIndex = paginationOptions?.rootVirtualiser?.endIndex ?? 0;\n\n  const onLoadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      const endIndex =\n        rows!.length + visibleGroupHeaders + (meta.numberOfRows || APPEND_DEFAULT_CHUNK_SIZE);\n      view.type.onPaginate({ startIndex: 0, endIndex, id: 'rootVirtualiser' });\n    }\n  }, [loading, view.type, meta.numberOfRows, rows!.length, visibleGroupHeaders]);\n\n  useEffect(() => {\n    view.type.onPaginate({\n      startIndex: 0,\n      endIndex: meta.numberOfRows || INITIAL_DEFAULT_CHUNK_SIZE,\n      id: 'rootVirtualiser'\n    });\n  }, [view.type, meta.numberOfRows]);\n\n  useEffect(() => {\n    setHasMore(rows!.length !== count.total);\n    if (paginationEndIndex <= rows!.length + visibleGroupHeaders || rows!.length === count.total) {\n      setLoading(false);\n    }\n  }, [count.total, rows!.length, paginationEndIndex, visibleGroupHeaders]);\n\n  const activity = useMemo(() => getActivity(rows, columns, meta), [rows, columns, meta]);\n\n  let loadMore;\n  if (hasMore) {\n    loadMore = onLoadMore;\n  }\n\n  return (\n    <RsCardWrapper>\n      <StyledTimelineContainer view={view} isFullscreen={isFullscreen}>\n        <Toolbar view={view} />\n        <RenderView view={view} type={EXTERNAL_FILTERS} />\n\n        <StyledRowContainer\n          className='container row-container'\n          isFullscreen={isFullscreen}\n          view={view}\n        >\n          <StyledTimeline\n            activity={activity || []}\n            currentTime={new Date()}\n            groupBy={mapDateFnToGroupOption(groups?.[0]?.dateFunction)}\n            loading={loading || !rows || !!view.isLoading}\n            loadMore={loadMore}\n            data-test-id='Timeline'\n            ref={ref}\n          />\n          {domContainer && hasNoRecords && (\n            <EmptyContainer\n              message={\n                isFilterApplied(\n                  { filterExpression, searchText, externalState },\n                  meta.externalFilters\n                )\n                  ? translate('No records found')\n                  : translate('No records')\n              }\n            />\n          )}\n        </StyledRowContainer>\n      </StyledTimelineContainer>\n    </RsCardWrapper>\n  );\n};\n\nexport default Timeline;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, useMemo, useState, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, useFullscreenContext } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\n// TODO remove ts-ignore once Toolbar migrated to TS\n// @ts-ignore\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport getCount from '../../Components/Toolbar/utils/getCount';\nimport { EXTERNAL_FILTERS } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';\nimport EmptyContainer from '../../Components/DefaultComponents/EmptyContainer';\nimport { isFilterApplied } from '../../Utils';\nimport useTranslate from '../../Hooks/useTranslate';\n\nimport TimelineInner from './Timeline';\nimport getActivities from './utils';\n\nconst StyledTimeline = styled(TimelineInner)(({ theme }) => {\n  return css`\n    flex: 1;\n    padding-inline-end: ${theme.base.spacing};\n    overflow: auto;\n  `;\n});\n\nStyledTimeline.defaultProps = defaultThemeProp;\n\ninterface StyledTimelineContainerProps {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}\n\nconst StyledTimelineContainer = styled.div<StyledTimelineContainerProps>(\n  ({ view, isFullscreen }) => {\n    return css`\n      position: relative;\n      ${() => generateRSHeightStyles({ view, isFullscreen })}\n    `;\n  }\n);\n\ninterface StyledRowContainerProps {\n  isFullscreen: boolean;\n  view: RsCoreTypes.View;\n}\n\nconst StyledRowContainer = styled.div<StyledRowContainerProps>(({ isFullscreen, view }) => {\n  const { bodyHeight, totalItemCount } = view;\n  return css`\n    ${() => generateRSDataContainerHeightStyles()};\n    position: relative;\n    min-height: auto;\n    flex-grow: 0;\n\n    /* Adjust height based on number of rows configured */\n    height: ${bodyHeight && !isFullscreen ? `${bodyHeight}px` : 'auto'};\n\n    ${totalItemCount === 0 &&\n    css`\n      /* stylelint-disable-next-line unit-allowed-list */\n      min-height: 100px;\n      height: inherit;\n    `}\n  `;\n});\n\nconst INITIAL_DEFAULT_CHUNK_SIZE = 40;\nconst APPEND_DEFAULT_CHUNK_SIZE = 25;\n\nexport interface TimelineViewProps {\n  view: RsCoreTypes.View;\n}\n\nconst Timeline = ({ view }: TimelineViewProps) => {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const [translate] = useTranslate();\n  const {\n    rows,\n    meta = { fieldDefs: [] as RsCoreTypes.FieldDef[], itemKey: '' } as RsCoreTypes.Meta,\n    columns,\n    groupHeaders,\n    state,\n    domContainer,\n    hasNoRecords\n  } = view;\n  const { filterExpression, externalState, searchText, paginationOptions, groups } = state;\n  const ref = useRef<HTMLTableElement>(null);\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n\n  const count = getCount({ view });\n  const visibleGroupHeaders = groupHeaders?.filter(({ isVisible }) => isVisible)?.length ?? 0;\n  const paginationEndIndex = paginationOptions?.rootVirtualiser?.endIndex ?? 0;\n\n  const onLoadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      const endIndex =\n        rows!.length + visibleGroupHeaders + (meta.numberOfRows || APPEND_DEFAULT_CHUNK_SIZE);\n      view.type.onPaginate({ startIndex: 0, endIndex, id: 'rootVirtualiser' });\n    }\n  }, [loading, view.type, meta.numberOfRows, rows!.length, visibleGroupHeaders]);\n\n  useEffect(() => {\n    view.type.onPaginate({\n      startIndex: 0,\n      endIndex: meta.numberOfRows || INITIAL_DEFAULT_CHUNK_SIZE,\n      id: 'rootVirtualiser'\n    });\n  }, [view.type, meta.numberOfRows]);\n\n  useEffect(() => {\n    setHasMore(rows!.length !== count.total);\n    if (paginationEndIndex <= rows!.length + visibleGroupHeaders || rows!.length === count.total) {\n      setLoading(false);\n    }\n  }, [count.total, rows!.length, paginationEndIndex, visibleGroupHeaders]);\n\n  const activities = useMemo(\n    () => getActivities(groupHeaders, columns, meta, groups?.[0]),\n    [groupHeaders, columns, meta, groups?.[0]]\n  );\n\n  let loadMore;\n  if (hasMore) {\n    loadMore = onLoadMore;\n  }\n\n  return (\n    <RsCardWrapper>\n      <StyledTimelineContainer view={view} isFullscreen={isFullscreen}>\n        <Toolbar view={view} />\n        <RenderView view={view} type={EXTERNAL_FILTERS} />\n\n        <StyledRowContainer\n          className='container row-container'\n          isFullscreen={isFullscreen}\n          view={view}\n        >\n          <StyledTimeline\n            activities={activities}\n            currentTime={new Date()}\n            groupBy={groups?.[0]}\n            loading={loading || !rows || !!view.isLoading}\n            loadMore={loadMore}\n            data-test-id='Timeline'\n            ref={ref}\n          />\n          {domContainer && hasNoRecords && (\n            <EmptyContainer\n              message={\n                isFilterApplied(\n                  { filterExpression, searchText, externalState },\n                  meta.externalFilters\n                )\n                  ? translate('No records found')\n                  : translate('No records')\n              }\n              domContainer={domContainer}\n              shouldAnnounce={false}\n            />\n          )}\n        </StyledRowContainer>\n      </StyledTimelineContainer>\n    </RsCardWrapper>\n  );\n};\n\nexport default Timeline;\n"]}