npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-work 2.0.0-dev.2.1 → 2.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

package/lib/components/Timeline/Timeline.styles.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import styled, { css } from 'styled-components';
-import { Button, calculateFontSize, Card, CardContent, defaultThemeProp, Flex, Grid, StyledText } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, Card, CardContent, DateTimeDisplay, defaultThemeProp, Flex, Grid, StyledIcon, useDirection } from '@pega/cosmos-react-core';
 export const StyledCard = styled(Card)(({ theme }) => {
     return css `
     border-top: 0.0625rem solid ${theme.base.colors.slate.light};
-    padding: calc(1 * ${theme.base.spacing}) 0;
+    padding: ${theme.base.spacing} 0;
     &:not(& &) {
       border-radius: 0;
+      background-color: transparent;
     }
   `;
 });
@@ -14,18 +15,14 @@ export const StyledCardContent = styled(CardContent)(({ theme }) => {
     return css `
     &:not(${StyledCard} ${StyledCard} > &) {
       padding: ${theme.base.spacing} 0;
-      padding-inline-start: ${theme.base.sizes['touch-mouse']};
+      padding-inline-start: ${theme.base['hit-area']['mouse-min']};
       @media (pointer: coarse) {
-        padding-inline-start: ${theme.base.sizes['touch-finger']};
+        padding-inline-start: ${theme.base['hit-area']['finger-min']};
       }
     }
   `;
 });
 StyledCardContent.defaultProps = defaultThemeProp;
-export const StyledCardHeader = styled(Grid) `
-  padding: 0;
-  min-height: 2rem;
-`;
 export const StyledToggleButton = styled(Button)(({ theme, collapsed }) => {
     return css `
     transition: transform calc(2 * ${theme.base.animation.speed})
@@ -35,83 +32,143 @@ export const StyledToggleButton = styled(Button)(({ theme, collapsed }) => {
   `;
 });
 StyledToggleButton.defaultProps = defaultThemeProp;
+export const StyledCardHeader = styled(Grid) `
+  padding: 0;
+  min-height: 2rem;
+  ${StyledToggleButton} {
+    align-self: start;
+  }
+`;
 StyledCardHeader.defaultProps = defaultThemeProp;
 export const StyledTimelineIcon = styled(Flex)(({ theme }) => {
     return css `
     border-radius: 50%;
-    color: ${theme.base.colors.slate.dark};
-    background: ${theme.base.colors.slate['extra-light']};
-    width: 1.5rem;
-    height: 1.5rem;
+    color: ${theme.base.palette.light};
+    background: ${theme.base.palette.info};
+    & > ${StyledIcon} {
+      height: 1em;
+      width: 1em;
+    }
   `;
 });
 StyledTimelineIcon.defaultProps = defaultThemeProp;
-export const StyledBulletWrapper = styled(Grid)(({ theme, isPrevFuture, isNextFuture }) => {
+export const StyledBulletWrapper = styled.td(({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {
+    const { rtl } = useDirection();
     return css `
       position: relative;
-      height: 100%;
-      align-items: center;
+      text-align: center;
+      padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);
+      ${hasPrev &&
+        css `
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 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;
+          top: 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'};
       }
-      &:not(:first-of-type)::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0.0625rem;
-        height: 30%;
-        border-left: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'} ${theme.base.colors.slate.light};
-      }
-      &:not(:last-of-type)::after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 30%;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0.0625rem;
-        height: 70%;
-        border-left: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'} ${theme.base.colors.slate.light};
+      @media (min-width: ${theme.base.breakpoints.sm}) {
+        padding-top: calc(${theme.base.spacing} + 0.0625rem);
+        &::before {
+          height: calc(${theme.base.spacing} + 0.75rem);
+        }
+        &::after {
+          top: calc(${theme.base.spacing} + 0.75rem);
+          height: calc(100% - ${theme.base.spacing} - 0.75rem);
+        }
       }
     `;
 });
 StyledBulletWrapper.defaultProps = defaultThemeProp;
-export const StyledGrid = styled(Grid)(({ theme }) => {
+export const StyledTimelineTable = styled.table(({ theme }) => {
     return css `
-    grid-auto-rows: auto;
-    background-color: ${theme.base.palette['primary-background']};
-    padding: calc(2 * ${theme.base.spacing});
+    tr {
+      td {
+        border-inline-start: ${theme.base.spacing} solid transparent;
+        border-inline-end: ${theme.base.spacing} solid transparent;
+        vertical-align: top;
+      }
+      td:first-child {
+        border-inline-start: none;
+      }
+      td:last-child {
+        border-inline-end: none;
+      }
+    }
+    border-collapse: collapse;
+    width: 100%;
     @media (min-width: ${theme.base.breakpoints.sm}) {
+      column-gap: ${theme.base.spacing};
+      tr {
+        td {
+          border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;
+          border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;
+        }
+      }
       ${StyledCard} {
         padding: calc(0.5 * ${theme.base.spacing}) 0;
       }
     }
   `;
 });
-StyledGrid.defaultProps = defaultThemeProp;
-export const StyledDate = styled.header(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
+StyledTimelineTable.defaultProps = defaultThemeProp;
+export const StyledDate = styled(DateTimeDisplay)(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { text } } }) => {
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
-      height: 100%;
+      display: block;
       padding: calc(3 * ${spacing}) 0 calc(1.25 * ${spacing});
-      & ${StyledText} {
-        font-size: ${fontSizes[text.h2['font-size']]};
-        font-weight: ${text.h2['font-weight']};
-      }
+      font-size: ${fontSizes[text.h2['font-size']]};
+      font-weight: ${text.h2['font-weight']};
     `;
 });
 StyledDate.defaultProps = defaultThemeProp;
-export const StyledTime = styled(StyledText)(({ theme }) => {
+export const StyledTimeWrapper = styled.td(({ theme }) => {
+    return css `
+    @media (min-width: ${theme.base.breakpoints.sm}) {
+      text-align: end;
+      line-height: ${theme.base['hit-area']['mouse-min']};
+      padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);
+    }
+  `;
+});
+StyledTimeWrapper.defaultProps = defaultThemeProp;
+export const StyledTime = styled(DateTimeDisplay)(({ theme }) => {
     return css `
     opacity: ${theme.base.transparency['transparent-2']};
+    white-space: nowrap;
   `;
 });
 StyledTime.defaultProps = defaultThemeProp;

package/lib/components/Timeline/Timeline.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n defaultThemeProp,\n Flex,\n FontSize,\n Grid,\n StyledText\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n padding: calc(1 * ${theme.base.spacing}) 0;\n &:not(& &) {\n border-radius: 0;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0;\n padding-inline-start: ${theme.base.sizes['touch-mouse']};\n @media (pointer: coarse) {\n padding-inline-start: ${theme.base.sizes['touch-finger']};\n }\n }\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\n`;\n\nexport const StyledToggleButton = styled(Button)<{ collapsed: boolean }>(({ theme, collapsed }) => {\n return css`\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n color: ${theme.components.button.color};\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTimelineIcon = styled(Flex)(({ theme }) => {\n return css`\n border-radius: 50%;\n color: ${theme.base.colors.slate.dark};\n background: ${theme.base.colors.slate['extra-light']};\n width: 1.5rem;\n height: 1.5rem;\n `;\n});\n\nStyledTimelineIcon.defaultProps = defaultThemeProp;\n\ninterface StyledBulletWrapperProps {\n isPrevFuture: boolean;\n isNextFuture: boolean;\n}\n\nexport const StyledBulletWrapper = styled(Grid)<StyledBulletWrapperProps>(\n ({ theme, isPrevFuture, isNextFuture }) => {\n return css`\n position: relative;\n height: 100%;\n align-items: center;\n\n & > ${StyledTimelineIcon} {\n margin: 0;\n z-index: 1;\n }\n\n &:not(:first-of-type)::before {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0.0625rem;\n height: 30%;\n border-left: 0.0625rem ${isPrevFuture ? 'dashed' : 'solid'} ${theme.base.colors.slate.light};\n }\n\n &:not(:last-of-type)::after {\n content: '';\n display: block;\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translateX(-50%);\n width: 0.0625rem;\n height: 70%;\n border-left: 0.0625rem ${isNextFuture ? 'dashed' : 'solid'} ${theme.base.colors.slate.light};\n }\n `;\n }\n);\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledGrid = styled(Grid)(({ theme }) => {\n return css`\n grid-auto-rows: auto;\n background-color: ${theme.base.palette['primary-background']};\n padding: calc(2 * ${theme.base.spacing});\n @media (min-width: ${theme.base.breakpoints.sm}) {\n ${StyledCard} {\n padding: calc(0.5 * ${theme.base.spacing}) 0;\n }\n }\n `;\n});\n\nStyledGrid.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled.header(\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 height: 100%;\n padding: calc(3 * ${spacing}) 0 calc(1.25 * ${spacing});\n\n & ${StyledText} {\n font-size: ${fontSizes[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n }\n `;\n }\n);\n\nStyledDate.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(StyledText)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Timeline.styles.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n Button,\n calculateFontSize,\n Card,\n CardContent,\n DateTimeDisplay,\n defaultThemeProp,\n Flex,\n FontSize,\n Grid,\n StyledIcon,\n useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n border-top: 0.0625rem solid ${theme.base.colors.slate.light};\n padding: ${theme.base.spacing} 0;\n &:not(& &) {\n border-radius: 0;\n background-color: transparent;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)(({ theme }) => {\n return css`\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: ${theme.base.spacing} 0;\n padding-inline-start: ${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 return css`\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${collapsed ? 'rotate(-90deg)' : 'rotate(0)'};\n color: ${theme.components.button.color};\n `;\n});\n\nStyledToggleButton.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled(Grid)`\n padding: 0;\n min-height: 2rem;\n ${StyledToggleButton} {\n align-self: start;\n }\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 & > ${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.td<StyledBulletWrapperProps>(\n ({ theme, hasPrev, hasNext, isPrevFuture, isNextFuture, hasIcon }) => {\n const { rtl } = useDirection();\n return css`\n position: relative;\n text-align: center;\n padding-top: calc(2.25 * ${theme.base.spacing} + 0.0625rem);\n\n ${hasPrev &&\n css`\n &::before {\n content: '';\n display: block;\n position: absolute;\n top: 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\n ${hasNext &&\n css`\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 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\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-top: calc(${theme.base.spacing} + 0.0625rem);\n &::before {\n height: calc(${theme.base.spacing} + 0.75rem);\n }\n &::after {\n top: 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 StyledTimelineTable = styled.table(({ theme }) => {\n return css`\n tr {\n td {\n border-inline-start: ${theme.base.spacing} solid transparent;\n border-inline-end: ${theme.base.spacing} solid transparent;\n vertical-align: top;\n }\n td:first-child {\n border-inline-start: none;\n }\n\n td:last-child {\n border-inline-end: none;\n }\n }\n border-collapse: collapse;\n width: 100%;\n @media (min-width: ${theme.base.breakpoints.sm}) {\n column-gap: ${theme.base.spacing};\n tr {\n td {\n border-inline-start: calc(0.5 * ${theme.base.spacing}) solid transparent;\n border-inline-end: calc(0.5 * ${theme.base.spacing}) solid transparent;\n }\n }\n ${StyledCard} {\n padding: calc(0.5 * ${theme.base.spacing}) 0;\n }\n }\n `;\n});\n\nStyledTimelineTable.defaultProps = defaultThemeProp;\n\nexport const StyledDate = styled(DateTimeDisplay)(\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 display: block;\n padding: calc(3 * ${spacing}) 0 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 StyledTimeWrapper = styled.td(({ theme }) => {\n return css`\n @media (min-width: ${theme.base.breakpoints.sm}) {\n text-align: end;\n line-height: ${theme.base['hit-area']['mouse-min']};\n padding-top: calc(0.5 * ${theme.base.spacing} + 0.0625rem);\n }\n `;\n});\n\nStyledTimeWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTime = styled(DateTimeDisplay)(({ theme }) => {\n return css`\n opacity: ${theme.base.transparency['transparent-2']};\n white-space: nowrap;\n `;\n});\n\nStyledTime.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Timeline/Timeline.types.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
-import { ReactElement, ReactNode, Ref } from 'react';
-import { BaseProps, FieldValueListProps, IconProps, Link, StatusProps } from '@pega/cosmos-react-core';
+import { ReactNode, Ref } from 'react';
+import { BaseProps, FieldValueListProps, IconProps, StatusProps } from '@pega/cosmos-react-core';
+import { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';
 export interface ActivityObject {
     /** Unique id for activity */
     id: string;
     /** Date as ISO8601 string, timestamp or native Date object. */
     date: string | number | Date;
-    /** Header text of the activity or Link */
-    title: string | ReactElement<typeof Link>;
+    /** Header region for rendering text and links. */
+    title: ReactNode;
     /** Name of the icon (to be selected from default Pega icon set) */
     icon?: IconProps['name'];
     /** Represents the current status of activity */
@@ -14,12 +15,24 @@ export interface ActivityObject {
     /** The set of field values to render in the list. */
     content?: FieldValueListProps['fields'] | ReactNode;
 }
+export declare type TimelineSortOrder = 'ascending' | 'descending';
+export declare type TimelineGroupBy = Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'> | 'none';
 export default interface TimelineProps extends BaseProps {
     /** List of activity */
     activity: ActivityObject[];
     /** Current time as Date */
     currentTime: Date;
+    /**
+     * List of activity sorted in ascending or descending order.
+     * @default "descending"
+     */
+    sortOrder?: TimelineSortOrder;
+    /**
+     * List of activity grouped by day, month, quarter or year.
+     * @default "date"
+     */
+    groupBy?: TimelineGroupBy;
     /** Ref for the wrapping element. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLTableElement>;
 }
 //# sourceMappingURL=Timeline.types.d.ts.map

package/lib/components/Timeline/Timeline.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~YAAY,EAAE,~~SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAErD~~,OAAO,~~EACL~~,SAAS,~~EACT~~,mBAAmB,~~EACnB~~,SAAS,~~EACT~~,~~IAAI,EACJ,~~WAAW,~~EACZ~~,MAAM,yBAAyB,CAAC;~~AAEjC~~,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,~~0CAA0C~~;~~IAC1C~~,KAAK,EAAE,~~MAAM~~,~~GAAG,YAAY,~~CAAC~~,OAAO,IAAI,CAAC,CAAC~~;~~IAC1C~~,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS;IACtD,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,~~cAAc~~,CAAC,CAAC;~~CAC3B~~"}
1	+ {"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAAE,eAAe,EAAE,MAAM,iEAAiE,CAAC;AAElG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,oBAAY,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,oBAAY,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;IACtD,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

package/lib/components/Timeline/Timeline.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ~~ReactElement,~~ ReactNode, Ref } from 'react';\n\nimport {\n BaseProps~~,\n~~ FieldValueListProps~~,\n~~ IconProps~~,\n Link,\n~~ StatusProps\n} from '@pega/cosmos-react-core';\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 /* Header ~~text~~ of ~~the~~ ~~activity~~ or ~~Link~~ /\n title: ~~string \| ReactElement<typeof Link>;\~~n /* Name of the icon (to be selected from default Pega icon set) /\n icon?: IconProps['name'];\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'] \| ReactNode;\n}\n\nexport default interface TimelineProps extends BaseProps {\n /* List of activity /\n activity: ActivityObject[];\n /* Current time as Date /\n currentTime: Date;\n /* Ref for the wrapping element. */\n ref?: Ref<~~HTMLDivElement~~>;\n}\n"]}
1	+ {"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, FieldValueListProps, IconProps, StatusProps } from '@pega/cosmos-react-core';\nimport { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTimeDisplay';\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 /* 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 /* Represents the current status of activity /\n status?: StatusProps;\n /* The set of field values to render in the list. /\n content?: FieldValueListProps['fields'] \| ReactNode;\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 {\n /* List of activity /\n activity: ActivityObject[];\n /* Current time as Date /\n currentTime: Date;\n /\n List of activity sorted in ascending or descending order.\n * @default \"descending\"\n /\n sortOrder?: TimelineSortOrder;\n /\n List of activity grouped by day, month, quarter or year.\n * @default \"date\"\n /\n groupBy?: TimelineGroupBy;\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n"]}

package/lib/components/Timeline/TimelineItem.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import { ForwardProps, DateTimeDisplayProps } from '@pega/cosmos-react-core';
 import type { ActivityObject } from './Timeline.types';
 interface TimelineItemProps {
     item: ActivityObject;
-    isPrevFuture: boolean;
-    isNextFuture: boolean;
+    timeFormat: DateTimeDisplayProps['variant'];
+    prevItemDate: ActivityObject['date'] | undefined;
+    nextItemDate: ActivityObject['date'] | undefined;
+    currentTime: Date;
 }
 declare const TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps>;
 export default TimelineItem;

package/lib/components/Timeline/TimelineItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAE,iBAAiB,EAAyC,MAAM,OAAO,CAAC;~~AAExF~~,OAAO,~~EAIL~~,YAAY,~~EAMb~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;~~AAWvD~~,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,~~OAAO~~,CAAC;~~IACtB~~,YAAY,EAAE,~~OAAO~~,CAAC;~~CACvB~~;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,~~CAkGrE~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAEjF,OAAO,EAGL,YAAY,EAOZ,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAavD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC5C,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;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA4FrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Timeline/TimelineItem.js CHANGED Viewed

@@ -1,38 +1,21 @@
-import React, { isValidElement, useCallback, useState } from 'react';
-import { DateTimeDisplay, ExpandCollapse, Grid, Icon, Status, useBreakpoint, FieldValueList } from '@pega/cosmos-react-core';
-import { StyledCard, StyledCardHeader, StyledTime, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton } from './Timeline.styles';
-const TimelineItem = ({ item: { id, date, title, icon, status, content }, isPrevFuture, isNextFuture }) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useCallback, useState } from 'react';
+import { ExpandCollapse, Grid, Icon, Status, useBreakpoint, FieldValueList, Flex } from '@pega/cosmos-react-core';
+import { StyledCard, StyledCardHeader, StyledTimeWrapper, StyledTimelineIcon, StyledCardContent, StyledBulletWrapper, StyledToggleButton, StyledTime } from './Timeline.styles';
+import { isFutureDate } from './utils';
+const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat, prevItemDate, nextItemDate, currentTime }) => {
     const [collapsed, setCollapsed] = useState(true);
     const isSmallOrAbove = useBreakpoint('sm');
     const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);
-    return (React.createElement(React.Fragment, null,
-        isSmallOrAbove && React.createElement(DateTimeDisplay, { variant: 'time', value: date, as: StyledTime }),
-        React.createElement(StyledBulletWrapper, { container: { alignItems: 'start' }, isPrevFuture: isPrevFuture, isNextFuture: isNextFuture },
-            React.createElement(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' } }, icon && React.createElement(Icon, { name: icon }))),
-        React.createElement(StyledCard, null,
-            React.createElement(StyledCardHeader, { container: {
-                    cols: 'auto 1fr',
-                    alignContent: 'evenly',
-                    alignItems: 'center'
-                }, sm: { container: { cols: 'auto 1fr auto' } } },
-                content && (React.createElement(StyledToggleButton, { icon: true, variant: 'simple', onClick: toggleCollapse, collapsed: collapsed, "aria-expanded": !collapsed },
-                    React.createElement(Icon, { name: 'caret-down' }))),
-                React.createElement(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, id: `timeline-item-heading${id}` },
-                    title,
-                    !isSmallOrAbove && (React.createElement(Grid, { container: {
-                            cols: '1fr auto',
-                            alignContent: 'evenly',
-                            alignItems: 'center'
-                        } },
-                        React.createElement(DateTimeDisplay, { variant: 'time', value: date, as: StyledTime }),
-                        status && React.createElement(Status, { variant: status.variant }, status.children)))),
-                isSmallOrAbove && status && (React.createElement(Grid, { sm: { item: { colStart: '3', colEnd: '3' } } },
-                    React.createElement(Status, { variant: status.variant }, status.children))))),
-        content && (React.createElement(React.Fragment, null,
-            React.createElement(StyledBulletWrapper, { item: { colStart: '1', colEnd: '1' }, sm: { item: { colStart: '2', colEnd: '2' } }, isPrevFuture: isNextFuture, isNextFuture: isNextFuture }),
-            React.createElement(Grid, { item: { colStart: '2', colEnd: '-1' }, sm: { item: { colStart: '3', colEnd: '-1' } }, "aria-labelledby": `timeline-item-heading${id}` },
-                React.createElement(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true },
-                    React.createElement(StyledCardContent, null, isValidElement(content) ? (content) : (React.createElement(FieldValueList, { fields: content, variant: isSmallOrAbove ? 'inline' : 'stacked' })))))))));
+    return (_jsxs("tr", { children: [isSmallOrAbove && (_jsx(StyledTimeWrapper, { children: _jsx(StyledTime, { variant: timeFormat, value: date }, void 0) }, void 0)), _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 }, void 0) }, void 0) }, void 0), _jsxs("td", { style: { width: '100%' }, children: [_jsx(Flex, { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
+                                    cols: 'auto 1fr',
+                                    alignContent: 'evenly',
+                                    alignItems: 'center'
+                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [content && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: toggleCollapse, collapsed: collapsed, "aria-expanded": !collapsed, children: _jsx(Icon, { name: 'caret-down' }, void 0) }, void 0)), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [title, !isSmallOrAbove && (_jsxs(Grid, { container: {
+                                                    cols: '1fr auto',
+                                                    alignContent: 'evenly',
+                                                    alignItems: 'center'
+                                                }, children: [_jsx(StyledTime, { variant: 'time', value: date }, void 0), status && _jsx(Status, { variant: status.variant, children: status.children }, void 0)] }, void 0))] }, void 0), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0), content && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(FieldValueList, { fields: content, variant: isSmallOrAbove ? 'inline' : 'stacked' }, void 0)) }, void 0) }, void 0))] }, void 0)] }, void 0));
 };
 export default TimelineItem;
 //# sourceMappingURL=TimelineItem.js.map

package/lib/components/Timeline/TimelineItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,~~KAAK,EAAE,~~EAAqB,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAExF~~,OAAO,EACL,~~eAAe,EACf,~~cAAc,EAGd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,cAAc,~~EACf~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,~~UAAU~~,~~EACV~~,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,~~EACnB~~,MAAM,mBAAmB,CAAC;~~AAQ3B~~,MAAM,YAAY,GAAwD,CAAC,EACzE,IAAI,EAAE,EAAE,~~EAAE,EAAE,~~IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,~~EAChD~~,YAAY,EACZ,YAAY,~~EACqB~~,EAAE,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE3C,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpF,OAAO,CACL~~;QACG~~,cAAc,IAAI,~~oBAAC~~,~~eAAe~~,IAAC,OAAO,~~EAAC~~,~~MAAM~~,~~EAAC~~,KAAK,EAAE,IAAI,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~GAAI;QAClF~~,~~oBAAC,~~mBAAmB,IAClB,~~SAAS~~,EAAE,~~EAAE~~,~~UAAU~~,EAAE,OAAO,EAAE,~~EAClC~~,YAAY,EAAE,YAAY,~~EAC1B~~,YAAY,EAAE,YAAY~~;YAE1B~~,~~oBAAC~~,kBAAkB,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,~~IACrF~~,IAAI,IAAI,~~oBAAC~~,IAAI,IAAC,IAAI,EAAE,IAAI,~~GAAI~~,~~CACV~~,~~CACD;QACtB~~,~~oBAAC~~,UAAU~~;YACT~~,~~oBAAC~~,gBAAgB,IACf,SAAS,EAAE;~~oBACT~~,IAAI,EAAE,UAAU;~~oBAChB~~,YAAY,EAAE,QAAQ;~~oBACtB~~,UAAU,EAAE,QAAQ;~~iBACrB~~,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE~~;gBAE3C~~,OAAO,IAAI,CACV,~~oBAAC~~,kBAAkB,IACjB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,mBACL,CAAC,SAAS~~;oBAEzB~~,~~oBAAC~~,IAAI,IAAC,IAAI,EAAC,YAAY,~~GAAG~~,~~CACP~~,CACtB~~;gBACD~~,~~oBAAC~~,IAAI,~~IACH~~,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,~~EACpC~~,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,~~EAC3B~~,~~EAAE~~,~~EAAE~~,~~wBAAwB,EAAE,EAAE;oBAE/B,KAAK;oBACL,~~CAAC,cAAc,IAAI,CAClB,~~oBAAC~~,IAAI,IACH,SAAS,EAAE;~~4BACT~~,IAAI,EAAE,UAAU;~~4BAChB~~,YAAY,EAAE,QAAQ;~~4BACtB~~,UAAU,EAAE,QAAQ;~~yBACrB;wBAED~~,~~oBAAC~~,~~eAAe~~,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,~~EAAE~~,~~EAAE~~,~~EAAE,UAAU,GAAI;wBAC9D,~~MAAM,IAAI,~~oBAAC~~,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,~~IAAG~~,MAAM,CAAC,QAAQ,~~CAAU~~,~~CACjE~~,CACR,~~CACI;gBACN~~,cAAc,IAAI,MAAM,IAAI,CAC3B,~~oBAAC~~,IAAI,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE~~;oBAChD~~,~~oBAAC~~,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,~~IAAG~~,MAAM,CAAC,QAAQ,~~CAAU~~,~~CACtD~~,CACR,~~CACgB~~,~~CACR;QACZ~~,OAAO,IAAI,CACV~~;YACE~~,~~oBAAC~~,mBAAmB,IAClB,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EACpC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAC5C,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC1B;YACF,oBAAC,IAAI,IACH,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,EACrC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,qBAC5B,wBAAwB,EAAE,EAAE;gBAE7C,oBAAC,cAAc,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,iBAAiB~~;oBACxE~~,~~oBAAC~~,iBAAiB,~~QACf~~,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACzB,OAAO,CACR,CAAC,CAAC,CAAC,CACF,~~oBAAC~~,cAAc,IACb,MAAM,EAAE,OAAwC,EAChD,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,~~GAC9C~~,CACH,~~CACiB~~,~~CACL~~,~~CACZ~~,~~CACN~~,~~CACJ~~,~~CACA~~,~~CACJ,~~CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import ~~React,~~ { FunctionComponent, isValidElement, useCallback, useState } from 'react';\n\nimport {\n ~~DateTimeDisplay,\n~~ ExpandCollapse,\n FieldValueListProps,\n ForwardProps,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueList\n} from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n ~~StyledTime~~,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton\n} from './Timeline.styles';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n ~~isPrevFuture~~: ~~boolean~~;\n ~~isNextFuture~~: ~~boolean~~;\n}\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { ~~id,~~ date, title, icon, status, content },\n ~~isPrevFuture~~,\n ~~isNextFuture~~\n}: TimelineItemProps & ForwardProps) => {\n const [collapsed, setCollapsed] = useState(true);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);\n\n return (\n ~~<>\~~n {isSmallOrAbove && <~~DateTimeDisplay~~ variant=~~'time'~~ value={date} ~~as={StyledTime~~} ~~/>}~~\n <StyledBulletWrapper\n ~~container~~={{ ~~alignItems: 'start'~~ }}\n isPrevFuture={~~isPrevFuture~~}\n isNextFuture={~~isNextFuture~~}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <~~StyledCard~~>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {content && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid\n item={{ colStart: '2', colEnd: '2' }}\n container={{ rowGap: 0.25 }}~~\n id={`timeline-item-heading${id}`}\n~~ >\n {title}\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <~~DateTimeDisplay~~ variant='time' value={date} ~~as={StyledTime}~~ />\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 {content && (\n ~~<>\n~~ <StyledBulletWrapper\n item={{ colStart: '1', colEnd: '1' }}\n sm={{ item: { colStart: '2', colEnd: '2' } }}\n isPrevFuture={isNextFuture}\n isNextFuture={isNextFuture}\n />\n <Grid\n item={{ colStart: '2', colEnd: '-1' }}\n sm={{ item: { colStart: '3', colEnd: '-1' } }}\n aria-labelledby={`timeline-item-heading${id}`}\n >\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement(content) ? (\n content\n ) : (\n <FieldValueList\n fields={content as FieldValueListProps['fields']}\n variant={isSmallOrAbove ? 'inline' : 'stacked'}\n />\n )}\n </StyledCardContent>\n </ExpandCollapse>\n ~~</Grid>\n~~ ~~</>\n~~ )}\n ~~</>\~~n );\n};\n\nexport default TimelineItem;\n"]}
1	+ {"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, isValidElement, useCallback, useState } from 'react';\n\nimport {\n ExpandCollapse,\n FieldValueListProps,\n ForwardProps,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueList,\n Flex,\n DateTimeDisplayProps\n} from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n StyledTimeWrapper,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton,\n StyledTime\n} from './Timeline.styles';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n timeFormat: DateTimeDisplayProps['variant'];\n prevItemDate: ActivityObject['date'] \| undefined;\n nextItemDate: ActivityObject['date'] \| undefined;\n currentTime: Date;\n}\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, title, icon, status, content },\n timeFormat,\n prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [collapsed, setCollapsed] = useState(true);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const toggleCollapse = useCallback(() => setCollapsed(prevState => !prevState), []);\n\n return (\n <tr>\n {isSmallOrAbove && (\n <StyledTimeWrapper>\n <StyledTime variant={timeFormat} value={date} />\n </StyledTimeWrapper>\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 <td style={{ width: '100%' }}>\n <Flex>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {content && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n {title}\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} />\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 </Flex>\n {content && (\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement(content) ? (\n content\n ) : (\n <FieldValueList\n fields={content as FieldValueListProps['fields']}\n variant={isSmallOrAbove ? 'inline' : 'stacked'}\n />\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </td>\n </tr>\n );\n};\n\nexport default TimelineItem;\n"]}

package/lib/components/Timeline/utils.d.ts CHANGED Viewed

@@ -1,6 +1,14 @@
-import type { ActivityObject } from './Timeline.types';
+import type { ActivityObject, TimelineGroupBy, TimelineSortOrder } from './Timeline.types';
+export declare function sortByDateAscending(dates: ActivityObject[]): ActivityObject[];
+export declare function sortByDateDescending(dates: ActivityObject[]): ActivityObject[];
+export declare function sortByDate(activity: ActivityObject[], sortOrder: TimelineSortOrder): ActivityObject[];
 export declare function getDatePartAsDate(date: string | number | Date): Date;
-export declare function sortByDate(dates: ActivityObject[]): ActivityObject[];
-export declare function isSameDate(firstDate: string | number | Date | undefined, secondDate: string | number | Date | undefined): boolean;
+export declare function getMonthYearPartAsDate(date: string | number | Date): Date;
+export declare function getYearPartAsDate(date: string | number | Date): Date;
+export declare function isSameDate(firstDate: string | number | Date, secondDate: string | number | Date): boolean;
+export declare function isSameMonthYear(firstDate: string | number | Date, secondDate: string | number | Date): boolean;
+export declare function isSameYear(firstDate: string | number | Date, secondDate: string | number | Date): boolean;
+export declare function isSameQuarterYear(firstDate: string | number | Date, secondDate: string | number | Date): boolean;
+export declare function isSameGroup(firstDate: string | number | Date | undefined, secondDate: string | number | Date | undefined, groupBy: TimelineGroupBy): boolean;
 export declare function isFutureDate(date: string | number | Date | undefined, current: Date): boolean;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/Timeline/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/utils.ts"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;~~AAEvD~~,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAGpE;AAED,wBAAgB,~~UAAU~~,CAAC,~~KAAK~~,EAAE,~~cAAc~~,EAAE,GAAG,~~cAAc~~,EAAE,~~CAEpE~~;AAED,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAC7C,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,~~GAC7C~~,OAAO,~~CAGT~~;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,CAG7F"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/utils.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE3F,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAE7E;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAE9E;AAED,wBAAgB,UAAU,CACxB,QAAQ,EAAE,cAAc,EAAE,EAC1B,SAAS,EAAE,iBAAiB,GAC3B,cAAc,EAAE,CAElB;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAGpE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAGzE;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAGpE;AAED,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EACjC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GACjC,OAAO,CAET;AAED,wBAAgB,eAAe,CAC7B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EACjC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GACjC,OAAO,CAIT;AAED,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EACjC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GACjC,OAAO,CAET;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EACjC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GACjC,OAAO,CAET;AAED,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAC7C,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,OAAO,EAAE,eAAe,GACvB,OAAO,CAqBT;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,CAG7F"}

package/lib/components/Timeline/utils.js CHANGED Viewed

@@ -1,15 +1,59 @@
-import { parseToDate } from '@pega/cosmos-react-core/lib/components/DateTime/Input/utils';
+import { getQuarter, parseToDate } from '@pega/cosmos-react-core/lib/components/DateTime/Input/utils';
+export function sortByDateAscending(dates) {
+    return [...dates].sort((a, b) => parseToDate(a.date).getTime() - parseToDate(b.date).getTime());
+}
+export function sortByDateDescending(dates) {
+    return [...dates].sort((a, b) => parseToDate(b.date).getTime() - parseToDate(a.date).getTime());
+}
+export function sortByDate(activity, sortOrder) {
+    return sortOrder === 'ascending' ? sortByDateAscending(activity) : sortByDateDescending(activity);
+}
 export function getDatePartAsDate(date) {
     const parsedDate = parseToDate(date);
     return new Date(parsedDate.getUTCFullYear(), parsedDate.getUTCMonth(), parsedDate.getUTCDate());
 }
-export function sortByDate(dates) {
-    return [...dates].sort((a, b) => parseToDate(b.date).getTime() - parseToDate(a.date).getTime());
+export function getMonthYearPartAsDate(date) {
+    const parsedDate = parseToDate(date);
+    return new Date(parsedDate.getUTCFullYear(), parsedDate.getUTCMonth());
+}
+export function getYearPartAsDate(date) {
+    const parsedDate = parseToDate(date);
+    return new Date(parsedDate.getUTCFullYear());
 }
 export function isSameDate(firstDate, secondDate) {
+    return getDatePartAsDate(firstDate).getTime() === getDatePartAsDate(secondDate).getTime();
+}
+export function isSameMonthYear(firstDate, secondDate) {
+    return (getMonthYearPartAsDate(firstDate).getTime() === getMonthYearPartAsDate(secondDate).getTime());
+}
+export function isSameYear(firstDate, secondDate) {
+    return getYearPartAsDate(firstDate).getTime() === getYearPartAsDate(secondDate).getTime();
+}
+export function isSameQuarterYear(firstDate, secondDate) {
+    return isSameYear(firstDate, secondDate) && getQuarter(firstDate) === getQuarter(secondDate);
+}
+export function isSameGroup(firstDate, secondDate, groupBy) {
     if (!firstDate || !secondDate)
         return false;
-    return getDatePartAsDate(firstDate).getTime() === getDatePartAsDate(secondDate).getTime();
+    switch (groupBy) {
+        case 'none': {
+            return true;
+        }
+        case 'date': {
+            return isSameDate(firstDate, secondDate);
+        }
+        case 'monthyear': {
+            return isSameMonthYear(firstDate, secondDate);
+        }
+        case 'quarteryear': {
+            return isSameQuarterYear(firstDate, secondDate);
+        }
+        case 'year': {
+            return isSameYear(firstDate, secondDate);
+        }
+        default:
+            return false;
+    }
 }
 export function isFutureDate(date, current) {
     if (!date || !current)

package/lib/components/Timeline/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Timeline/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,~~6DAA6D~~,CAAC;~~AAI1F~~,MAAM,UAAU,iBAAiB,CAAC,IAA4B;IAC5D,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,UAAU,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;AAClG,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,~~KAAuB~~;~~IAChD~~,OAAO,CAAC,GAAG,~~KAAK~~,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,~~WAAW~~,CAAC,CAAC,CAAC,~~IAAI~~,CAAC,CAAC,OAAO,EAAE,~~GAAG~~,~~WAAW~~,CAAC,CAAC,CAAC,~~IAAI~~,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;~~AAClG~~,CAAC;AAED,MAAM,UAAU,~~UAAU~~,~~CACxB~~,SAA6C,EAC7C,UAA8C;~~IAE9C~~,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU;QAAE,OAAO,KAAK,CAAC;IAC5C,OAAO,~~iBAAiB~~,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,KAAK,iBAAiB,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;~~AAC5F~~,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,IAAwC,EAAE,OAAa;IAClF,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO;QAAE,OAAO,KAAK,CAAC;IACpC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;AACzD,CAAC","sourcesContent":["import { parseToDate } from '@pega/cosmos-react-core/lib/components/DateTime/Input/utils';\n\nimport type { ActivityObject } from './Timeline.types';\n\nexport function getDatePartAsDate(date: string \| number \| Date): Date {\n const parsedDate = parseToDate(date);\n return new Date(parsedDate.getUTCFullYear(), parsedDate.getUTCMonth(), parsedDate.getUTCDate());\n}\n\nexport function ~~sortByDate~~(~~dates~~: ~~ActivityObject[]~~): ~~ActivityObject[]~~ {\n return ~~[...dates]~~.~~sort~~((a, b) => parseToDate(b.date).getTime() - ~~parseToDate~~(a.~~date~~).getTime());\n}\n\nexport function ~~isSameDate~~(\n firstDate: string \| number \| Date \| undefined,\n secondDate: string \| number \| Date \| undefined\n): boolean {\n if (!firstDate \|\| !secondDate) return false;\n return ~~getDatePartAsDate~~(firstDate)~~.getTime~~() ~~===~~ ~~getDatePartAsDate~~(secondDate)~~.getTime~~();\n}\n\nexport function isFutureDate(date: string \| number \| Date \| undefined, current: Date): boolean {\n if (!date \|\| !current) return false;\n return parseToDate(date).getTime() > current.getTime();\n}\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Timeline/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n getQuarter,\n parseToDate\n} from '@pega/cosmos-react-core/lib/components/DateTime/Input/utils';\n\nimport type { ActivityObject, TimelineGroupBy, TimelineSortOrder } from './Timeline.types';\n\nexport function sortByDateAscending(dates: ActivityObject[]): ActivityObject[] {\n return [...dates].sort((a, b) => parseToDate(a.date).getTime() - parseToDate(b.date).getTime());\n}\n\nexport function sortByDateDescending(dates: ActivityObject[]): ActivityObject[] {\n return [...dates].sort((a, b) => parseToDate(b.date).getTime() - parseToDate(a.date).getTime());\n}\n\nexport function sortByDate(\n activity: ActivityObject[],\n sortOrder: TimelineSortOrder\n): ActivityObject[] {\n return sortOrder === 'ascending' ? sortByDateAscending(activity) : sortByDateDescending(activity);\n}\n\nexport function getDatePartAsDate(date: string \| number \| Date): Date {\n const parsedDate = parseToDate(date);\n return new Date(parsedDate.getUTCFullYear(), parsedDate.getUTCMonth(), parsedDate.getUTCDate());\n}\n\nexport function getMonthYearPartAsDate(date: string \| number \| Date): Date {\n const parsedDate = parseToDate(date);\n return new Date(parsedDate.getUTCFullYear(), parsedDate.getUTCMonth());\n}\n\nexport function getYearPartAsDate(date: string \| number \| Date): Date {\n const parsedDate = parseToDate(date);\n return new Date(parsedDate.getUTCFullYear());\n}\n\nexport function isSameDate(\n firstDate: string \| number \| Date,\n secondDate: string \| number \| Date\n): boolean {\n return getDatePartAsDate(firstDate).getTime() === getDatePartAsDate(secondDate).getTime();\n}\n\nexport function isSameMonthYear(\n firstDate: string \| number \| Date,\n secondDate: string \| number \| Date\n): boolean {\n return (\n getMonthYearPartAsDate(firstDate).getTime() === getMonthYearPartAsDate(secondDate).getTime()\n );\n}\n\nexport function isSameYear(\n firstDate: string \| number \| Date,\n secondDate: string \| number \| Date\n): boolean {\n return getYearPartAsDate(firstDate).getTime() === getYearPartAsDate(secondDate).getTime();\n}\n\nexport function isSameQuarterYear(\n firstDate: string \| number \| Date,\n secondDate: string \| number \| Date\n): boolean {\n return isSameYear(firstDate, secondDate) && getQuarter(firstDate) === getQuarter(secondDate);\n}\n\nexport function isSameGroup(\n firstDate: string \| number \| Date \| undefined,\n secondDate: string \| number \| Date \| undefined,\n groupBy: TimelineGroupBy\n): boolean {\n if (!firstDate \|\| !secondDate) return false;\n switch (groupBy) {\n case 'none': {\n return true;\n }\n case 'date': {\n return isSameDate(firstDate, secondDate);\n }\n case 'monthyear': {\n return isSameMonthYear(firstDate, secondDate);\n }\n case 'quarteryear': {\n return isSameQuarterYear(firstDate, secondDate);\n }\n case 'year': {\n return isSameYear(firstDate, secondDate);\n }\n default:\n return false;\n }\n}\n\nexport function isFutureDate(date: string \| number \| Date \| undefined, current: Date): boolean {\n if (!date \|\| !current) return false;\n return parseToDate(date).getTime() > current.getTime();\n}\n"]}

package/lib/index.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 export { default as AppAnnouncement } from './components/AppAnnouncement';
 export * from './components/AppAnnouncement';
-export { default as CaseActions } from './components/CaseActions';
-export * from './components/CaseActions';
 export { default as CaseHeader } from './components/CaseHeader';
 export * from './components/CaseHeader';
 export { default as CasePreview } from './components/CasePreview';
@@ -12,12 +10,22 @@ export { default as CaseSummaryFields } from './components/CaseSummaryFields';
 export * from './components/CaseSummaryFields';
 export { default as CaseView } from './components/CaseView';
 export * from './components/CaseView';
+export { default as ConfigurableLayout } from './components/ConfigurableLayout';
+export * from './components/ConfigurableLayout';
+export { default as Confirmation } from './components/Confirmation';
+export * from './components/Confirmation';
+export { default as Details } from './components/Details';
+export * from './components/Details';
 export { default as Glimpse } from './components/Glimpse';
 export * from './components/Glimpse';
 export { default as SearchResults } from './components/SearchResults';
 export * from './components/SearchResults';
 export { default as Stages } from './components/Stages';
 export * from './components/Stages';
+export { default as Stakeholders } from './components/Stakeholders';
+export * from './components/Stakeholders';
+export { default as Tags } from './components/Tags';
+export * from './components/Tags';
 export { default as Tasks } from './components/Tasks';
 export * from './components/Tasks';
 export { default as Timeline } from './components/Timeline';

package/lib/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,~~WAAW~~,EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAClE~~,cAAc,~~0BAA0B~~,CAAC;~~AACzC~~,OAAO,EAAE,OAAO,IAAI,~~UAAU~~,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AAChE~~,cAAc,~~yBAAyB~~,CAAC;~~AACxC~~,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,~~WAAW~~,EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAClE~~,cAAc,~~0BAA0B~~,CAAC;~~AACzC~~,OAAO,EAAE,OAAO,IAAI,~~iBAAiB~~,EAAE,MAAM,~~gCAAgC~~,CAAC;~~AAC9E~~,cAAc,~~gCAAgC~~,CAAC;~~AAC/C~~,OAAO,EAAE,OAAO,IAAI,~~QAAQ~~,EAAE,MAAM,~~uBAAuB~~,CAAC;~~AAC5D~~,cAAc,~~uBAAuB~~,CAAC;~~AACtC~~,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAChF,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC"}