@pega/lists-react 8.8.0 → 9.0.0-build.10.0

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

@@ -0,0 +1,182 @@
+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;
+export const StyledTitle = styled.div `
+  display: -webkit-inline-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+StyledTitle.defaultProps = defaultThemeProp;
+export const StyledCardContent = styled(CardContent)(({ theme }) => {
+    return css `
+    &:not(${StyledCard} ${StyledCard} > &) {
+      padding: ${theme.base.spacing} 0 ${theme.base.spacing} ${theme.base['hit-area']['mouse-min']};
+      @media (pointer: coarse) {
+        padding-inline-start: ${theme.base['hit-area']['finger-min']};
+      }
+    }
+  `;
+});
+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;
+`;
+StyledCardHeader.defaultProps = defaultThemeProp;
+export const StyledTimelineIcon = styled(Flex)(({ theme }) => {
+    return css `
+    border-radius: 50%;
+    color: ${theme.base.palette.light};
+    background: ${theme.base.palette.info};
+
+    & > ${StyledIcon} {
+      height: 1em;
+      width: 1em;
+    }
+  `;
+});
+StyledTimelineIcon.defaultProps = defaultThemeProp;
+export const StyledBulletWrapper = styled.span(({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {
+    const { rtl } = useDirection();
+    return css `
+      height: 100%;
+      position: relative;
+      text-align: center;
+      padding-block-start: calc(2.25 * ${theme.base.spacing} + 0.0625rem);
+      min-width: 2rem;
+
+      ${hasPrev &&
+        css `
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-block-start: 0;
+          inset-inline-start: 50%;
+          transform: translateX(${rtl ? '50%' : '-50%'});
+          width: 0.0625rem;
+          height: calc(2.25 * ${theme.base.spacing} + 0.75rem);
+          border-inline-start: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'}
+            ${theme.base.palette.info};
+        }
+      `}
+      ${hasNext &&
+        css `
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-block-start: calc(2.25 * ${theme.base.spacing} + 0.75rem);
+          inset-inline-start: 50%;
+          transform: translateX(${rtl ? '50%' : '-50%'});
+          width: 0.0625rem;
+          height: calc(100% - 2.25 * ${theme.base.spacing} - 0.75rem);
+          border-inline-start: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'}
+            ${theme.base.palette.info};
+        }
+      `}
+      & > ${StyledTimelineIcon} {
+        position: relative;
+        margin: 0;
+        z-index: 1;
+        width: ${hasIcon ? '1.5rem' : '0.5rem'};
+        height: ${hasIcon ? '1.5rem' : '0.5rem'};
+      }
+
+      @media (min-width: ${theme.base.breakpoints.sm}) {
+        padding-block-start: calc(${theme.base.spacing} + 0.0625rem);
+        &::before {
+          height: calc(${theme.base.spacing} + 0.75rem);
+        }
+
+        &::after {
+          inset-block-start: calc(${theme.base.spacing} + 0.75rem);
+          height: calc(100% - ${theme.base.spacing} - 0.75rem);
+        }
+      }
+    `;
+});
+StyledBulletWrapper.defaultProps = defaultThemeProp;
+export const StyledDate = styled.h2(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    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']};
+    `;
+});
+StyledDate.defaultProps = defaultThemeProp;
+export const StyledTimelineList = styled.ol `
+  display: contents;
+`;
+StyledTimelineList.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}))
+    ${StyledCard}
+    ${StyledToggleButton} {
+    display: none;
+  }
+`;
+StyledTimelineListItem.defaultProps = defaultThemeProp;
+export const StyledTimeline = styled.ol(({ theme }) => {
+    return css `
+    @media (min-width: ${theme.base.breakpoints.sm}) {
+      ${StyledCard} {
+        padding-block: calc(0.5 * ${theme.base.spacing});
+      }
+    }
+  `;
+});
+StyledTimeline.defaultProps = defaultThemeProp;
+export const StyledTime = styled(DateTimeDisplay)(({ theme }) => {
+    return css `
+    opacity: ${theme.base.transparency['transparent-2']};
+    white-space: nowrap;
+    @media (min-width: ${theme.base.breakpoints.sm}) {
+      text-align: end;
+      line-height: ${theme.base['hit-area']['mouse-min']};
+      padding-block-start: calc(0.5 * ${theme.base.spacing} + 0.0625rem);
+    }
+  `;
+});
+StyledTime.defaultProps = defaultThemeProp;
+export const StyledLoadingCell = styled.div `
+  grid-column: 1 / -1;
+  position: relative;
+  height: 2.8rem;
+
+  ${StyledBackdrop} {
+    background: transparent;
+  }
+`;
+//# sourceMappingURL=Timeline.styles.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,50 @@
+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';
+export interface ActivityObject {
+    /** Unique id for activity */
+    id: string;
+    /** Date as ISO8601 string, timestamp or native Date object. */
+    date: string | number | Date;
+    /**
+     * Controls date time variant. Set to 'time' when groupBy is 'date'.
+     * @default datetime
+     */
+    dateVariant?: DateTimeDisplayProps['variant'];
+    /** Header region for rendering text and links. */
+    title: ReactNode;
+    /** Name of the icon (to be selected from default Pega icon set) */
+    icon?: IconProps['name'];
+    /**
+     * Default visually expanded state for the activity item.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /** Represents the current status of activity */
+    status?: StatusProps;
+    /** 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[];
+    /** Current time as Date */
+    currentTime: Date;
+    /**
+     * List of activity grouped by day, month, quarter or year.
+     * @default 'date'
+     */
+    groupBy?: TimelineGroupBy;
+    /**
+     * Show a Progress indicator at the end of a list where newly loaded items will be appended.
+     * @default false
+     */
+    loading?: boolean;
+    /** Callback to fetch more activity items */
+    loadMore?: () => void;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLTableElement>;
+}
+//# sourceMappingURL=Timeline.types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Timeline.types.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,12 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ActivityObject } from './Timeline.types';
+interface TimelineItemProps {
+    item: ActivityObject;
+    prevItemDate: ActivityObject['date'] | undefined;
+    nextItemDate: ActivityObject['date'] | undefined;
+    currentTime: Date;
+}
+declare const TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps>;
+export default TimelineItem;
+//# sourceMappingURL=TimelineItem.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,43 @@
+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 { isFutureDate } from './utils';
+const shouldRenderContent = (content) => {
+    if (!content) {
+        return false;
+    }
+    if (Array.isArray(content)) {
+        return content.length > 0;
+    }
+    return true;
+};
+const TimelineItem = ({ item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content }, prevItemDate, nextItemDate, currentTime }) => {
+    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: {
+                                    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: () => {
+                                            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: {
+                                                    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: {
+                                    gap: 1,
+                                    cols: isSMContentWidthOrAbove
+                                        ? `repeat(${content.length > 1 ? '2' : '1'}, minmax(16ch, auto) minmax(25%, 1fr))`
+                                        : 'minmax(0, 1fr)'
+                                }, ref: contentListRef, children: content.map(({ id, name, value, variant }) => {
+                                    return (_jsx(FieldValueItem, { name: name, value: value, variant: isSmallOrAbove ? variant : 'stacked' }, id ?? name));
+                                }) })) }) }))] })] }));
+};
+export default TimelineItem;
+//# sourceMappingURL=TimelineItem.js.map

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

@@ -0,0 +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"]}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, CurrencyDisplay, Text, HTML } from '@pega/cosmos-react-core';
+const activity = [
+    {
+        id: '1',
+        date: Date.UTC(2025, 2, 20, 19, 28, 22),
+        title: 'Email blast: "Buy today"',
+        icon: 'bell-off-solid',
+        content: [
+            {
+                id: '11',
+                name: 'Progress and Risk',
+                value: _jsx(HTML, { content: '<ul><li>Progress</li><li>Risk</li></ul>' })
+            }
+        ]
+    },
+    {
+        id: '2',
+        date: Date.UTC(2025, 2, 20, 18, 6, 22),
+        title: 'Confirm eligibility',
+        icon: 'circle-stacked-mixed'
+    },
+    {
+        id: '3',
+        date: Date.UTC(2023, 2, 10, 9, 26, 22),
+        title: 'Review customer bill',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '4',
+        date: Date.UTC(2022, 7, 10, 18, 6, 22),
+        title: 'Confirm eligibility',
+        icon: 'circle-stacked-mixed'
+    },
+    {
+        id: '5',
+        date: Date.UTC(2022, 6, 18, 0, 1, 22),
+        title: (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "Visit Pega" }))
+    },
+    {
+        id: '6',
+        date: Date.UTC(2021, 6, 10, 13, 20, 22),
+        title: 'Update plat',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' }
+    },
+    {
+        id: '7',
+        date: Date.UTC(2021, 1, 20, 13, 20, 22),
+        title: 'Sent over request',
+        icon: 'bulb-solid',
+        defaultExpanded: true,
+        status: { variant: 'success', children: 'Good' },
+        content: [
+            { id: '31', name: 'Date range', value: _jsx(Text, { children: "Jan 1, 2021 - May 3, 2021" }) },
+            {
+                id: '32',
+                name: "What's next",
+                value: (_jsx(Text, { children: "We will fulfill your request within 3 business days. You will receive your statement copy via mail at 23 Main St. Boston, MA." }))
+            },
+            {
+                id: '33',
+                name: 'Current due amount',
+                value: _jsx(CurrencyDisplay, { value: 1343.45, currencyISOCode: 'USD' })
+            }
+        ]
+    },
+    {
+        id: '8',
+        date: Date.UTC(2021, 1, 20, 13, 19, 22),
+        title: 'Fulfill customer request for last month’s billing statement',
+        icon: 'layers',
+        status: { variant: 'pending', children: 'Wait' },
+        content: [
+            { id: '41', name: 'Date range', value: _jsx(Text, { children: "Jan 1, 2021 - May 3, 2021" }) },
+            {
+                id: '42',
+                name: "What's next",
+                value: (_jsx(Text, { children: "We will fulfill your request within 3 business days. You will receive your statement copy via mail at 23 Main St. Boston, MA." }))
+            },
+            {
+                id: '43',
+                name: 'Current due amount',
+                value: _jsx(CurrencyDisplay, { value: 121, currencyISOCode: 'USD' })
+            }
+        ]
+    },
+    {
+        id: '9',
+        date: Date.UTC(2021, 1, 20, 0, 1, 22),
+        title: (_jsx(Link, { href: 'https://community.pega.com/support', target: '_blank', children: "Visit Pega support for assistance" }))
+    },
+    {
+        id: '10',
+        date: Date.UTC(2021, 1, 19, 13, 20, 22),
+        title: 'Sent over request',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' },
+        content: [
+            { id: '61', name: 'Date range', value: _jsx(Text, { children: "Jan 1, 2021 - May 3, 2021" }) },
+            {
+                id: '62',
+                name: "What's next",
+                value: (_jsx(Text, { children: "We will fulfill your request within 3 business days. You will receive your statement copy via mail at 23 Main St. Boston, MA." }))
+            },
+            {
+                id: '64',
+                name: 'Current due amount long label',
+                value: _jsx(CurrencyDisplay, { value: 248.87, currencyISOCode: 'USD' })
+            }
+        ]
+    },
+    {
+        id: '11',
+        date: Date.UTC(2021, 1, 17, 36, 20, 22),
+        title: 'Initial claim received',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '12',
+        date: Date.UTC(2020, 12, 15, 13, 19, 22),
+        title: 'Balance inquiry',
+        icon: 'phone-solid',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '13',
+        date: Date.UTC(2020, 2, 20, 19, 28, 22),
+        title: 'Email blast: "Best Offer"',
+        icon: 'bell-off-solid'
+    },
+    {
+        id: '14',
+        date: Date.UTC(2020, 1, 12, 10, 25, 48),
+        title: 'Receive customer bill',
+        icon: 'layers',
+        status: { variant: 'success', children: 'Good' }
+    }
+];
+export default activity;
+//# sourceMappingURL=Timeline.mocks.js.map

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

@@ -0,0 +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"]}

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":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA+DlE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB;AACD,QAAA,MAAM,QAAQ,GAAI,UAAU,iBAAiB,4CAyE5C,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;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"}

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

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback, useMemo, useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Timeline as TimelineCosmos } from '@pega/cosmos-react-work';
 import { defaultThemeProp, useFullscreenContext } from '@pega/cosmos-react-core';
 // TODO remove ts-ignore once Toolbar migrated to TS
 // @ts-ignore
 import Toolbar from '../../Components/Toolbar';
-import EmptyContainer from '../../Components/EmptyContainer';
 import RenderView from '../../Components/RenderingEngine/RenderView';
 import getCount from '../../Components/Toolbar/utils/getCount';
 import { EXTERNAL_FILTERS } from '../../constants';
 import RsCardWrapper from '../RsCardWrapper';
 import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
+import EmptyContainer from '../../Components/DefaultComponents/EmptyContainer';
+import { isFilterApplied } from '../../Utils';
+import useTranslate from '../../Hooks/useTranslate';
+import TimelineInner from './Timeline';
 import getActivity, { mapDateFnToGroupOption } from './utility';
-const StyledTimeline = styled(TimelineCosmos)(({ theme }) => {
+const StyledTimeline = styled(TimelineInner)(({ theme }) => {
     return css `
     flex: 1;
     padding-inline-end: ${theme.base.spacing};
@@ -43,13 +45,15 @@ const INITIAL_DEFAULT_CHUNK_SIZE = 40;
 const APPEND_DEFAULT_CHUNK_SIZE = 25;
 const Timeline = ({ view }) => {
     const isFullscreen = !!useFullscreenContext()?.[0];
-    const { rows, meta = { fieldDefs: [], itemKey: '' }, columns, groupHeaders, state } = view;
+    const [translate] = useTranslate();
+    const { rows, meta = { fieldDefs: [], itemKey: '' }, columns, groupHeaders, state, domContainer, hasNoRecords } = view;
+    const { filterExpression, externalState, searchText, paginationOptions, groups } = state;
     const ref = useRef(null);
     const [loading, setLoading] = useState(false);
     const [hasMore, setHasMore] = useState(true);
     const count = getCount({ view });
     const visibleGroupHeaders = groupHeaders?.filter(({ isVisible }) => isVisible)?.length ?? 0;
-    const paginationEndIndex = state.paginationOptions?.rootVirtualiser?.endIndex ?? 0;
+    const paginationEndIndex = paginationOptions?.rootVirtualiser?.endIndex ?? 0;
     const onLoadMore = useCallback(() => {
         if (!loading) {
             setLoading(true);
@@ -75,7 +79,9 @@ const Timeline = ({ view }) => {
     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(view.state.groups?.[0]?.dateFunction), loading: loading || !rows || !!view.isLoading, loadMore: loadMore, "data-test-id": 'Timeline', ref: ref }), _jsx(EmptyContainer, { view: view })] })] }) }));
+    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)
+                                ? translate('No records found')
+                                : translate('No records') }))] })] }) }));
 };
 export default Timeline;
 //# sourceMappingURL=index.js.map