npm - @pega/cosmos-react-work - Versions diffs - 8.0.0-build.2.0 → 8.0.0-build.20.1 - Mend

@pega/cosmos-react-work 8.0.0-build.2.0 → 8.0.0-build.20.1

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 (219) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,QAAQ,~~GAAoD~~,UAAU,CAAC,SAAS,QAAQ,~~CAC5F~~,EACE,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACmB,EACjC,GAAyB;IAEzB,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,QAAQ,CAAC,MAAM,GAAG,CAAC,EACnB,GAAG,EAAE;QACH,IAAI,CAAC,OAAO;YAAE,QAAQ,EAAE,EAAE,CAAC;IAC7B,CAAC,EACD,iBAAiB,CAClB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,OAAO;SACpB,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAC3D,EAAE,EAAE,cAAc,EAClB,GAAG,EAAE,OAAO,aAEX,OAAO,KAAK,MAAM;gBACjB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,YAAY,IAEX,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,UAAU,EACrB,YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACvC,WAAW,EAAE,WAAW,IALnB,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC;gBACJ,CAAC,CAAC,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CACpD,MAAC,IAAI,IACH,IAAI,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,EAC7B,EAAE,EAAE,sBAAsB,aAG1B,KAAC,eAAe,IACd,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,MAAM,EACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,GAC1B,EACF,KAAC,kBAAkB,cAChB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,KAAC,YAAY,IAEX,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EACpD,YAAY,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAC1C,YAAY,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAC1C,WAAW,EAAE,WAAW,IALnB,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC,GACiB,KAnBhB,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAoBjB,CACR,CAAC,EACL,OAAO,IAAI,CACV,KAAC,sBAAsB,cACrB,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,GAAG,GACZ,GACG,CAC1B,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ~~FunctionComponent,~~ PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ~~ForwardProps~~ } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: ~~FunctionComponent~~<TimelineProps ~~& ForwardProps~~> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n ':scope li > div'\n );\n\n return (\n <Grid\n {...restProps}\n container={{\n cols: 'auto 1fr',\n colGap: 0.75,\n alignItems: 'start'\n }}\n sm={{ container: { cols: 'auto auto 1fr', colGap: 0.25 } }}\n as={StyledTimeline}\n ref={listRef}\n >\n {groupBy === 'none'\n ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat='datetime'\n prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\n {groupedData.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n prevItemDate={groupedData[index - 1]?.date}\n nextItemDate={groupedData[index + 1]?.date}\n currentTime={currentTime}\n />\n ))}\n </StyledTimelineList>\n </Grid>\n ))}\n {loading && (\n <StyledTimelineListItem>\n <StyledLoadingCell>\n <Progress placement='local' />\n </StyledLoadingCell>\n </StyledTimelineListItem>\n )}\n </Grid>\n );\n});\n\nexport default Timeline;\n"]}
1	+ {"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\n StyledTimeline,\n StyledLoadingCell,\n StyledTimelineListItem,\n StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: ForwardRefForwardPropsComponent<TimelineProps> = forwardRef(function Timeline(\n {\n activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.length - 1,\n () => {\n if (!loading) loadMore?.();\n },\n ':scope li > div'\n );\n\n return (\n <Grid\n {...restProps}\n container={{\n cols: 'auto 1fr',\n colGap: 0.75,\n alignItems: 'start'\n }}\n sm={{ container: { cols: 'auto auto 1fr', colGap: 0.25 } }}\n as={StyledTimeline}\n ref={listRef}\n >\n {groupBy === 'none'\n ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat='datetime'\n prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\n {groupedData.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n timeFormat={groupBy === 'date' ? 'time' : 'datetime'}\n prevItemDate={groupedData[index - 1]?.date}\n nextItemDate={groupedData[index + 1]?.date}\n currentTime={currentTime}\n />\n ))}\n </StyledTimelineList>\n </Grid>\n ))}\n {loading && (\n <StyledTimelineListItem>\n <StyledLoadingCell>\n <Progress placement='local' />\n </StyledLoadingCell>\n </StyledTimelineListItem>\n )}\n </Grid>\n );\n});\n\nexport default Timeline;\n"]}

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
-export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledToggleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+export declare const StyledToggleButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {
     collapsed: boolean;
 }, never>;
-export declare const StyledCardHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Grid/Grid.types").default & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTimelineIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FlexProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCardHeader: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").GridProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTimelineIcon: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
 interface StyledBulletWrapperProps {
     hasPrev: boolean;
     hasNext: boolean;
@@ -19,7 +18,7 @@ export declare const StyledDate: import("styled-components").StyledComponent<"h2
 export declare const StyledTimelineList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimelineListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTimeline: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTime: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTime: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").DateTimeDisplayProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLoadingCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};
 //# sourceMappingURL=Timeline.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":";AAiBA,eAAO,MAAM,UAAU,~~mOASrB~~,CAAC;AAIH,eAAO,MAAM,WAAW,yGAKvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~gQAG5B~~,CAAC;AAIF,eAAO,MAAM,kBAAkB,~~mOAU7B~~,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,gIA8D/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,kBAAkB,wGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,wGAMlC,CAAC;AAIF,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,UAAU,~~8OAUrB~~,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}
1	+ {"version":3,"file":"Timeline.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.styles.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,UAAU,kNASrB,CAAC;AAIH,eAAO,MAAM,WAAW,yGAKvB,CAAC;AAIF,eAAO,MAAM,iBAAiB,0OAS5B,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA+B,OAAO;SASnE,CAAC;AAIH,eAAO,MAAM,gBAAgB,kNAG5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,kNAU7B,CAAC;AAIH,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,gIA8D/B,CAAC;AAIF,eAAO,MAAM,UAAU,wGAetB,CAAC;AAIF,eAAO,MAAM,kBAAkB,wGAE9B,CAAC;AAIF,eAAO,MAAM,sBAAsB,wGAMlC,CAAC;AAIF,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAIH,eAAO,MAAM,UAAU,6NAUrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAQ7B,CAAC"}

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

@@ -20,7 +20,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
     const isSMContentWidthOrAbove = useBreakpoint('sm', {
         breakpointRef: contentListRef
     });
-    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: timeFormat, value: date }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
+    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: timeFormat, 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',
@@ -29,7 +29,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
                                                     cols: '1fr auto',
                                                     alignContent: 'evenly',
                                                     alignItems: 'center'
-                                                }, children: [_jsx(StyledTime, { variant: 'time', value: date }), 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: collapsed, nullWhenCollapsed: true, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
+                                                }, 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: collapsed, nullWhenCollapsed: true, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
                                     gap: 1,
                                     cols: isSMContentWidthOrAbove
                                         ? `repeat(${content.length > 1 ? '2' : '1'}, minmax(16ch, auto) minmax(25%, 1fr))`

package/lib/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,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EACL,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,sBAAsB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAUvC,MAAM,mBAAmB,GAAG,CAC1B,OAAkC,EACiD,EAAE;IACrF,IAAI,CAAC,OAAO,EAAE;~~QACZ~~,OAAO,KAAK,CAAC;~~KACd~~;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;~~QAC1B~~,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;~~KAC3B~~;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,YAAY,GAAwD,CAAC,EACzE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,EAC5C,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACsB,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;IACpF,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,cAAc;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,sBAAsB,eACpB,cAAc,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,~~GAAI~~,~~EACnE~~,KAAC,mBAAmB,IAClB,OAAO,EAAE,CAAC,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,YAAY,EAAE,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,EACrD,YAAY,EAAE,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,YAErD,KAAC,kBAAkB,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACrF,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACV,GACD,EACtB,0BACE,wBACE,KAAC,UAAU,cACT,MAAC,gBAAgB,IACf,SAAS,EAAE;oCACT,IAAI,EAAE,UAAU;oCAChB,YAAY,EAAE,QAAQ;oCACtB,UAAU,EAAE,QAAQ;oCACpB,GAAG,EAAE,GAAG;iCACT,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,aAE3C,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAC/B,KAAC,kBAAkB,IACjB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,SAAS,mBACL,CAAC,SAAS,EACzB,OAAO,kBAEP,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACP,CACtB,EACD,MAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aACrE,KAAC,WAAW,cAAE,KAAK,GAAe,EACjC,CAAC,cAAc,IAAI,CAClB,MAAC,IAAI,IACH,SAAS,EAAE;oDACT,IAAI,EAAE,UAAU;oDAChB,YAAY,EAAE,QAAQ;oDACtB,UAAU,EAAE,QAAQ;iDACrB,aAED,KAAC,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,~~GAAI~~,~~EACzC~~,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,IACjE,CACR,IACI,EACN,cAAc,IAAI,MAAM,IAAI,CAC3B,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,YAChD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,GACtD,CACR,IACgB,GACR,GACT,EACL,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAC/B,KAAC,cAAc,IAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAE,iBAAiB,kBACxE,KAAC,iBAAiB,cACf,cAAc,CAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAC9B,OAAO,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAE;oCACT,GAAG,EAAE,CAAC;oCACN,IAAI,EAAE,uBAAuB;wCAC3B,CAAC,CAAC,UACE,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAC7B,wCAAwC;wCAC1C,CAAC,CAAC,gBAAgB;iCACrB,EACD,GAAG,EAAE,cAAc,YAElB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;oCAC5C,OAAO,CACL,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IACxC,EAAE,IAAI,IAAI,CACf,CACH,CAAC;gCACJ,CAAC,CAAC,GACG,CACR,GACiB,GACL,CAClB,IACG,IACiB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { isValidElement, useCallback, useRef, useState } from 'react';\nimport type { FunctionComponent, ReactElement } from 'react';\n\nimport {\n ExpandCollapse,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueItem\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardProps,\n DateTimeDisplayProps,\n FieldValueListItemProps\n} from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton,\n StyledTime,\n StyledTitle,\n StyledTimelineListItem\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 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, 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 const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <StyledTimelineListItem>\n {isSmallOrAbove && <StyledTime variant={timeFormat} value={date} />}\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={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\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} />\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={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement<any>(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"]}
1	+ {"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isValidElement, useCallback, useRef, useState } from 'react';\nimport type { FunctionComponent, ReactElement } from 'react';\n\nimport {\n ExpandCollapse,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueItem\n} from '@pega/cosmos-react-core';\nimport type {\n ForwardProps,\n DateTimeDisplayProps,\n FieldValueListItemProps\n} from '@pega/cosmos-react-core';\n\nimport type { ActivityObject } from './Timeline.types';\nimport {\n StyledCard,\n StyledCardHeader,\n StyledTimelineIcon,\n StyledCardContent,\n StyledBulletWrapper,\n StyledToggleButton,\n StyledTime,\n StyledTitle,\n StyledTimelineListItem\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 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, 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 const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <StyledTimelineListItem>\n {isSmallOrAbove && <StyledTime variant={timeFormat} 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={toggleCollapse}\n collapsed={collapsed}\n aria-expanded={!collapsed}\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={collapsed} nullWhenCollapsed>\n <StyledCardContent>\n {isValidElement<any>(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/components/Timeline/TimelineToolbar.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import type { FunctionComponent } from 'react';
-import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { TimelineToolbarProps } from './Timeline.types';
-declare const TimelineToolbar: FunctionComponent<TimelineToolbarProps & ForwardProps>;
+declare const TimelineToolbar: ForwardRefForwardPropsComponent<TimelineToolbarProps>;
 export default TimelineToolbar;
 //# sourceMappingURL=TimelineToolbar.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,EAAE,~~iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,~~EAAE,~~YAAY,EAAE,~~MAAM,yBAAyB,CAAC;~~AAG5D~~,OAAO,KAAK,EAAsC,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEjG,QAAA,MAAM,eAAe,EAAE,~~iBAAiB,~~CAAC,oBAAoB,~~GAAG~~,~~YAAY,CA6E3E,~~CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"TimelineToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,EAAsC,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEjG,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CA6E1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineToolbar.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAM/D,MAAM,eAAe,~~GAA2D~~,UAAU,~~CACxF~~,SAAS,eAAe,CACtB,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAyC,EACpE,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAoB,OAAO,CAAC,GAAG,EAAE;QACjD,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,YAAY,CAAC;QAChD,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,QAAQ,KAAK,YAAY;iBACpC;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,iCAAiC,CAAC;oBAC1C,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAE,WAAW,CAAC,EAAuB,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,MAAM,aAAa,GAAoB,OAAO,CAAC,GAAG,EAAE;QAClD,MAAM,QAAQ,GAAG,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC;QAC3C,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;gBACD;oBACE,EAAE,EAAE,aAAa;oBACjB,IAAI,EAAE,CAAC,CAAC,oCAAoC,CAAC;oBAC7C,QAAQ,EAAE,QAAQ,KAAK,aAAa;iBACrC;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,KAAK,EAAE,WAAW,CAAC,EAAqB,EAAE,CAAC,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACrC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACxC,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { ~~FunctionComponent,~~ PropsWithoutRef } from 'react';\n\nimport { ListToolbar, useI18n } from '@pega/cosmos-react-core';\nimport type { ~~ForwardProps~~ } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport type { TimelineGroupBy, TimelineSortOrder, TimelineToolbarProps } from './Timeline.types';\n\nconst TimelineToolbar: ~~FunctionComponent~~<TimelineToolbarProps ~~& ForwardProps~~> = forwardRef(\n function TimelineToolbar(\n { sort, group, ...restProps }: PropsWithoutRef<TimelineToolbarProps>,\n ref: TimelineToolbarProps['ref']\n ) {\n const t = useI18n();\n\n const timelineSort: PresetMenuProps = useMemo(() => {\n const selected = sort?.selected \|\| 'descending';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'descending',\n text: t('timeline_toolbar_sort_descending'),\n icon: 'arrow-down',\n selected: selected === 'descending'\n },\n {\n id: 'ascending',\n text: t('timeline_toolbar_sort_ascending'),\n icon: 'arrow-up',\n selected: selected === 'ascending'\n }\n ],\n onItemClick: (id, e) => {\n sort?.onItemClick(id as TimelineSortOrder, e);\n }\n };\n }, [sort?.selected, sort?.onItemClick]);\n\n const timelineGroup: PresetMenuProps = useMemo(() => {\n const selected = group?.selected \|\| 'date';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'date',\n text: t('timeline_toolbar_group_date'),\n selected: selected === 'date'\n },\n {\n id: 'monthyear',\n text: t('timeline_toolbar_group_monthyear'),\n selected: selected === 'monthyear'\n },\n {\n id: 'quarteryear',\n text: t('timeline_toolbar_group_quarteryear'),\n selected: selected === 'quarteryear'\n },\n {\n id: 'year',\n text: t('timeline_toolbar_group_year'),\n selected: selected === 'year'\n },\n {\n id: 'none',\n text: t('timeline_toolbar_group_none'),\n selected: selected === 'none'\n }\n ],\n onItemClick: (id, e) => {\n group?.onItemClick(id as TimelineGroupBy, e);\n }\n };\n }, [group?.selected, group?.onItemClick]);\n\n return (\n <ListToolbar\n {...restProps}\n sort={sort ? timelineSort : undefined}\n group={group ? timelineGroup : undefined}\n ref={ref}\n />\n );\n }\n);\n\nexport default TimelineToolbar;\n"]}
1	+ {"version":3,"file":"TimelineToolbar.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAM/D,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAyC,EACpE,GAAgC;IAEhC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAoB,OAAO,CAAC,GAAG,EAAE;QACjD,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,YAAY,CAAC;QAChD,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,YAAY;oBAChB,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,QAAQ,KAAK,YAAY;iBACpC;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,iCAAiC,CAAC;oBAC1C,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,IAAI,EAAE,WAAW,CAAC,EAAuB,EAAE,CAAC,CAAC,CAAC;YAChD,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExC,MAAM,aAAa,GAAoB,OAAO,CAAC,GAAG,EAAE;QAClD,MAAM,QAAQ,GAAG,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC;QAC3C,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,WAAW;oBACf,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;oBAC3C,QAAQ,EAAE,QAAQ,KAAK,WAAW;iBACnC;gBACD;oBACE,EAAE,EAAE,aAAa;oBACjB,IAAI,EAAE,CAAC,CAAC,oCAAoC,CAAC;oBAC7C,QAAQ,EAAE,QAAQ,KAAK,aAAa;iBACrC;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACtC,QAAQ,EAAE,QAAQ,KAAK,MAAM;iBAC9B;aACF;YACD,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;gBACrB,KAAK,EAAE,WAAW,CAAC,EAAqB,EAAE,CAAC,CAAC,CAAC;YAC/C,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACrC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACxC,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { ListToolbar, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport type { TimelineGroupBy, TimelineSortOrder, TimelineToolbarProps } from './Timeline.types';\n\nconst TimelineToolbar: ForwardRefForwardPropsComponent<TimelineToolbarProps> = forwardRef(\n function TimelineToolbar(\n { sort, group, ...restProps }: PropsWithoutRef<TimelineToolbarProps>,\n ref: TimelineToolbarProps['ref']\n ) {\n const t = useI18n();\n\n const timelineSort: PresetMenuProps = useMemo(() => {\n const selected = sort?.selected \|\| 'descending';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'descending',\n text: t('timeline_toolbar_sort_descending'),\n icon: 'arrow-down',\n selected: selected === 'descending'\n },\n {\n id: 'ascending',\n text: t('timeline_toolbar_sort_ascending'),\n icon: 'arrow-up',\n selected: selected === 'ascending'\n }\n ],\n onItemClick: (id, e) => {\n sort?.onItemClick(id as TimelineSortOrder, e);\n }\n };\n }, [sort?.selected, sort?.onItemClick]);\n\n const timelineGroup: PresetMenuProps = useMemo(() => {\n const selected = group?.selected \|\| 'date';\n return {\n mode: 'single-select',\n items: [\n {\n id: 'date',\n text: t('timeline_toolbar_group_date'),\n selected: selected === 'date'\n },\n {\n id: 'monthyear',\n text: t('timeline_toolbar_group_monthyear'),\n selected: selected === 'monthyear'\n },\n {\n id: 'quarteryear',\n text: t('timeline_toolbar_group_quarteryear'),\n selected: selected === 'quarteryear'\n },\n {\n id: 'year',\n text: t('timeline_toolbar_group_year'),\n selected: selected === 'year'\n },\n {\n id: 'none',\n text: t('timeline_toolbar_group_none'),\n selected: selected === 'none'\n }\n ],\n onItemClick: (id, e) => {\n group?.onItemClick(id as TimelineGroupBy, e);\n }\n };\n }, [group?.selected, group?.onItemClick]);\n\n return (\n <ListToolbar\n {...restProps}\n sort={sort ? timelineSort : undefined}\n group={group ? timelineGroup : undefined}\n ref={ref}\n />\n );\n }\n);\n\nexport default TimelineToolbar;\n"]}

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,EACL,UAAU,EACV,WAAW,EACZ,MAAM,6DAA6D,CAAC;AAIrE,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,sBAAsB,CAAC,IAA4B;IACjE,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;AACzE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAA4B;IAC5D,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,SAAiC,EACjC,UAAkC;IAElC,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,KAAK,iBAAiB,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;AAC5F,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,SAAiC,EACjC,UAAkC;IAElC,OAAO,CACL,sBAAsB,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,KAAK,sBAAsB,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,CAC7F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,SAAiC,EACjC,UAAkC;IAElC,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,KAAK,iBAAiB,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,CAAC;AAC5F,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,SAAiC,EACjC,UAAkC;IAElC,OAAO,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,KAAK,UAAU,CAAC,UAAU,CAAC,CAAC;AAC/F,CAAC;AAED,MAAM,UAAU,WAAW,CACzB,SAA6C,EAC7C,UAA8C,EAC9C,OAAwB;IAExB,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU;QAAE,OAAO,KAAK,CAAC;IAC5C,QAAQ,OAAO,EAAE;~~QACf~~,KAAK,MAAM,CAAC,CAAC;~~YACX~~,OAAO,IAAI,CAAC;~~SACb~~;QACD,KAAK,MAAM,CAAC,CAAC;~~YACX~~,OAAO,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;~~SAC1C~~;QACD,KAAK,WAAW,CAAC,CAAC;~~YAChB~~,OAAO,eAAe,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;~~SAC/C~~;QACD,KAAK,aAAa,CAAC,CAAC;~~YAClB~~,OAAO,iBAAiB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;~~SACjD~~;QACD,KAAK,MAAM,CAAC,CAAC;~~YACX~~,OAAO,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;~~SAC1C~~;QACD;YACE,OAAO,KAAK,CAAC;~~KAChB~~;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,QAA0B,EAC1B,OAAwB;IAExB,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,MAA0B,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACjE,MAAM,kBAAkB,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACvF,IAAI,kBAAkB,EAAE;~~YACtB~~,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;~~SACrB~~;aAAM;~~YACL~~,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;~~SACtC~~;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,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 {\n getQuarter,\n parseToDate\n} from '@pega/cosmos-react-core/lib/components/DateTime/Input/utils';\n\nimport type { ActivityObject, TimelineGroupBy } 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 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 groupByActivity(\n activity: ActivityObject[],\n groupBy: TimelineGroupBy\n): ActivityObject[][] {\n return activity.reduce((result: ActivityObject[][], item, index) => {\n const isFirstItemInGroup = !isSameGroup(activity[index - 1]?.date, item.date, groupBy);\n if (isFirstItemInGroup) {\n result.push([item]);\n } else {\n result[result.length - 1].push(item);\n }\n return result;\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"]}
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 } 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 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 groupByActivity(\n activity: ActivityObject[],\n groupBy: TimelineGroupBy\n): ActivityObject[][] {\n return activity.reduce((result: ActivityObject[][], item, index) => {\n const isFirstItemInGroup = !isSameGroup(activity[index - 1]?.date, item.date, groupBy);\n if (isFirstItemInGroup) {\n result.push([item]);\n } else {\n result[result.length - 1].push(item);\n }\n return result;\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/components/UtilitiesLayout/UtilitiesLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UtilitiesLayout.js","sourceRoot":"","sources":["../../../src/components/UtilitiesLayout/UtilitiesLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAgD,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,gBAAgB,MAAM,sEAAsE,CAAC;AACzG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAE9G,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,mCAAmC,EACpC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,UAAU,MAAM,eAAe,CAAC;AAGvC,OAAO,qBAAqB,MAAM,0BAA0B,CAAC;AAE7D,YAAY,CAAC,gBAAgB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC,CAAC;AAWxE,MAAM,eAAe,GAA2D,CAAC,EAC/E,eAAe,EACf,sBAAsB,GAAG,KAAK,EAC9B,iBAAiB,EACjB,GAAG,SAAS,EAC0B,EAAE,EAAE;IAC1C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,mBAAmB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5D,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,CAAC;QACvC,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,OAAO,EAAE;~~YAClD~~,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;~~SAClC~~;IACH,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,qBAAqB,GAAG,CAC5B,KAAC,mCAAmC,IAClC,OAAO,QACP,IAAI,QACJ,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,gBACvC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,wBAAwB,CAAC,EACxF,OAAO,EAAE,GAAG,EAAE;YACZ,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;YAChC,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;QAChD,CAAC,EACD,GAAG,EAAE,eAAe,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAE,eAAe,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,GAAI,GAC5B,CACvC,CAAC;IAEF,MAAM,UAAU,GAAG,eAAe,IAAI,CACpC,KAAC,UAAU,OAAK,eAAe,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,GAAI,CACxE,CAAC;IAEF,IAAI,CAAC,SAAS,IAAI,UAAU,EAAE;~~QAC5B~~,OAAO,UAAU,CAAC;~~KACnB~~;IAED,IAAI,iBAAiB,IAAI,CAAC,SAAS,EAAE;~~QACnC~~,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAE,gBAAgB,EACpB,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,GAAG,EACd,MAAM,QACN,cAAc,kBAEd,MAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,sCAG1C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,WAAW,CAAC,GAAQ,EACzC,qBAAqB,IACjB,EACN,UAAU,IACN,GACA,CACV,CAAC;~~KACH~~;IAED,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,qBAAqB,EACzB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,eAAe,EAAE,cAAc,aAE/C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,aAC7E,iBAAiB,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,WAAW,CAAC,GAAQ,EAC/D,qBAAqB,IACjB,EACN,iBAAiB,IAAI,UAAU,EAC/B,CAAC,iBAAiB,IAAI,CACrB,KAAC,iBAAiB,IAChB,QAAQ,QACR,OAAO,EAAC,SAAS,EACjB,GAAG,EAAE,mBAAmB,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EACxC,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC,GAClC,CACH,EACA,mBAAmB,CAAC,OAAO,IAAI,eAAe,IAAI,SAAS,IAAI,CAC9D,KAAC,wBAAwB,IACvB,MAAM,EAAE,mBAAmB,CAAC,OAAO,EACnC,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,YAEpC,KAAC,UAAU,OACL,eAAe,EACnB,OAAO,EAAE;wBACP,SAAS,EAAE,QAAQ;wBACnB,OAAO,EAAE,GAAG,EAAE;4BACZ,eAAe,CAAC,OAAO,EAAE,EAAE,CAAC;4BAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;4BACpB,mBAAmB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBACvC,CAAC;qBACF,GACD,GACuB,CAC5B,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,eAAe,CAAC","sourcesContent":["import { useState, type FunctionComponent, type PropsWithoutRef, useRef, useEffect } from 'react';\n\nimport {\n Drawer,\n Flex,\n Icon,\n useBreakpoint,\n useDirection,\n useI18n,\n Text,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as arrowMicroRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-right.icon';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport {\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledCoachButton,\n StyledExpandCollapseUtilitiesButton\n} from '../CaseView/CaseView.styles';\nimport { UtilitySummaryItemDialog } from '../CaseView';\nimport GenAICoach from '../GenAICoach';\nimport type { UtilitiesGenAICoachProps } from '../GenAICoach';\n\nimport StyledUtilitiesLayout from './UtilitiesLayout.styles';\n\nregisterIcon(polarisSolidIcon, arrowMicroRightIcon, arrowMicroLeftIcon);\n\nexport interface UtilitiesLayoutProps extends BaseProps {\n /** GenAICoach props /\n genAICoachProps?: UtilitiesGenAICoachProps;\n /* Callback triggered when utilities are expanded or collapsed /\n onToggleUtilities?: (utilitiesExpanded: boolean) => void;\n /* show utilities in expanded mode */\n defaultExpandUtilities?: boolean;\n}\n\nconst UtilitiesLayout: FunctionComponent<UtilitiesLayoutProps & ForwardProps> = ({\n genAICoachProps,\n defaultExpandUtilities = false,\n onToggleUtilities,\n ...restProps\n}: PropsWithoutRef<UtilitiesLayoutProps>) => {\n const [utilitiesExpanded, setUtilitiesExpanded] = useState(defaultExpandUtilities);\n const [showCoach, setShowCoach] = useState(false);\n\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const genAICoachButtonRef = useRef<HTMLButtonElement>(null);\n const utilitiesToggled = useRef(false);\n const { end, start } = useDirection();\n const mdOrAbove = useBreakpoint('md');\n const lgOrAbove = useBreakpoint('lg');\n const t = useI18n();\n\n useEffect(() => {\n onToggleUtilities?.(utilitiesExpanded);\n if (!utilitiesExpanded && utilitiesToggled.current) {\n toggleButtonRef.current?.focus();\n }\n }, [utilitiesExpanded]);\n\n const utilitiesToggleButton = (\n <StyledExpandCollapseUtilitiesButton\n compact\n icon\n label={t(utilitiesExpanded ? 'collapse' : 'expand')}\n aria-label={t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n onClick={() => {\n utilitiesToggled.current = true;\n setUtilitiesExpanded(prevState => !prevState);\n }}\n ref={toggleButtonRef}\n >\n <Icon name={`arrow-micro-${utilitiesExpanded ? end : start}`} />\n </StyledExpandCollapseUtilitiesButton>\n );\n\n const genAICoach = genAICoachProps && (\n <GenAICoach {...genAICoachProps} variant={{ placement: 'fullpage' }} />\n );\n\n if (!mdOrAbove && genAICoach) {\n return genAICoach;\n }\n\n if (utilitiesExpanded && !lgOrAbove) {\n return (\n <Drawer\n as={StyledCaseDrawer}\n open={utilitiesExpanded}\n position='fixed'\n placement={end}\n shadow\n nullWhenClosed\n >\n <Flex\n as={StyledCaseDrawerContent}\n container={{ direction: 'column', gap: 2 }}\n data-app-region\n >\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n <Text variant='h2'>{t('utilities')}</Text>\n {utilitiesToggleButton}\n </Flex>\n {genAICoach}\n </Flex>\n </Drawer>\n );\n }\n\n return (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledUtilitiesLayout}\n utilitiesExpanded={utilitiesExpanded}\n lgOrAbove={lgOrAbove}\n starterMessage={genAICoachProps?.starterMessage}\n >\n <Flex container={{ alignItems: 'center', justify: 'between', pad: [0, 0, 1, 0] }}>\n {utilitiesExpanded && <Text variant='h2'>{t('utilities')}</Text>}\n {utilitiesToggleButton}\n </Flex>\n {utilitiesExpanded && genAICoach}\n {!utilitiesExpanded && (\n <StyledCoachButton\n iconOnly\n variant='primary'\n ref={genAICoachButtonRef}\n onClick={() => setShowCoach(cur => !cur)}\n label={t('coach', ['Pega GenAI™'])}\n />\n )}\n {genAICoachButtonRef.current && genAICoachProps && showCoach && (\n <UtilitySummaryItemDialog\n target={genAICoachButtonRef.current}\n onDismiss={() => setShowCoach(false)}\n >\n <GenAICoach\n {...genAICoachProps}\n variant={{\n placement: 'dialog',\n onClose: () => {\n genAICoachProps.onClose?.();\n setShowCoach(false);\n genAICoachButtonRef.current?.focus();\n }\n }}\n />\n </UtilitySummaryItemDialog>\n )}\n </Flex>\n );\n};\nexport default UtilitiesLayout;\n"]}
1	+ {"version":3,"file":"UtilitiesLayout.js","sourceRoot":"","sources":["../../../src/components/UtilitiesLayout/UtilitiesLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, type FunctionComponent, type PropsWithoutRef, useRef, useEffect } from 'react';\n\nimport {\n Drawer,\n Flex,\n Icon,\n useBreakpoint,\n useDirection,\n useI18n,\n Text,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport type { BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\nimport * as arrowMicroRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-right.icon';\nimport * as arrowMicroLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-micro-left.icon';\n\nimport {\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledCoachButton,\n StyledExpandCollapseUtilitiesButton\n} from '../CaseView/CaseView.styles';\nimport { UtilitySummaryItemDialog } from '../CaseView';\nimport GenAICoach from '../GenAICoach';\nimport type { UtilitiesGenAICoachProps } from '../GenAICoach';\n\nimport StyledUtilitiesLayout from './UtilitiesLayout.styles';\n\nregisterIcon(polarisSolidIcon, arrowMicroRightIcon, arrowMicroLeftIcon);\n\nexport interface UtilitiesLayoutProps extends BaseProps {\n /** GenAICoach props /\n genAICoachProps?: UtilitiesGenAICoachProps;\n /* Callback triggered when utilities are expanded or collapsed /\n onToggleUtilities?: (utilitiesExpanded: boolean) => void;\n /* show utilities in expanded mode */\n defaultExpandUtilities?: boolean;\n}\n\nconst UtilitiesLayout: FunctionComponent<UtilitiesLayoutProps & ForwardProps> = ({\n genAICoachProps,\n defaultExpandUtilities = false,\n onToggleUtilities,\n ...restProps\n}: PropsWithoutRef<UtilitiesLayoutProps>) => {\n const [utilitiesExpanded, setUtilitiesExpanded] = useState(defaultExpandUtilities);\n const [showCoach, setShowCoach] = useState(false);\n\n const toggleButtonRef = useRef<HTMLButtonElement>(null);\n const genAICoachButtonRef = useRef<HTMLButtonElement>(null);\n const utilitiesToggled = useRef(false);\n const { end, start } = useDirection();\n const mdOrAbove = useBreakpoint('md');\n const lgOrAbove = useBreakpoint('lg');\n const t = useI18n();\n\n useEffect(() => {\n onToggleUtilities?.(utilitiesExpanded);\n if (!utilitiesExpanded && utilitiesToggled.current) {\n toggleButtonRef.current?.focus();\n }\n }, [utilitiesExpanded]);\n\n const utilitiesToggleButton = (\n <StyledExpandCollapseUtilitiesButton\n compact\n icon\n label={t(utilitiesExpanded ? 'collapse' : 'expand')}\n aria-label={t(utilitiesExpanded ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n onClick={() => {\n utilitiesToggled.current = true;\n setUtilitiesExpanded(prevState => !prevState);\n }}\n ref={toggleButtonRef}\n >\n <Icon name={`arrow-micro-${utilitiesExpanded ? end : start}`} />\n </StyledExpandCollapseUtilitiesButton>\n );\n\n const genAICoach = genAICoachProps && (\n <GenAICoach {...genAICoachProps} variant={{ placement: 'fullpage' }} />\n );\n\n if (!mdOrAbove && genAICoach) {\n return genAICoach;\n }\n\n if (utilitiesExpanded && !lgOrAbove) {\n return (\n <Drawer\n as={StyledCaseDrawer}\n open={utilitiesExpanded}\n position='fixed'\n placement={end}\n shadow\n nullWhenClosed\n >\n <Flex\n as={StyledCaseDrawerContent}\n container={{ direction: 'column', gap: 2 }}\n data-app-region\n >\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n <Text variant='h2'>{t('utilities')}</Text>\n {utilitiesToggleButton}\n </Flex>\n {genAICoach}\n </Flex>\n </Drawer>\n );\n }\n\n return (\n <Flex\n {...restProps}\n container={{ direction: 'column', gap: 1 }}\n as={StyledUtilitiesLayout}\n utilitiesExpanded={utilitiesExpanded}\n lgOrAbove={lgOrAbove}\n starterMessage={genAICoachProps?.starterMessage}\n >\n <Flex container={{ alignItems: 'center', justify: 'between', pad: [0, 0, 1, 0] }}>\n {utilitiesExpanded && <Text variant='h2'>{t('utilities')}</Text>}\n {utilitiesToggleButton}\n </Flex>\n {utilitiesExpanded && genAICoach}\n {!utilitiesExpanded && (\n <StyledCoachButton\n iconOnly\n variant='primary'\n ref={genAICoachButtonRef}\n onClick={() => setShowCoach(cur => !cur)}\n label={t('coach', ['Pega GenAI™'])}\n />\n )}\n {genAICoachButtonRef.current && genAICoachProps && showCoach && (\n <UtilitySummaryItemDialog\n target={genAICoachButtonRef.current}\n onDismiss={() => setShowCoach(false)}\n >\n <GenAICoach\n {...genAICoachProps}\n variant={{\n placement: 'dialog',\n onClose: () => {\n genAICoachProps.onClose?.();\n setShowCoach(false);\n genAICoachButtonRef.current?.focus();\n }\n }}\n />\n </UtilitySummaryItemDialog>\n )}\n </Flex>\n );\n};\nexport default UtilitiesLayout;\n"]}

package/lib/components/UtilitiesLayout/UtilitiesLayout.styles.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import type { GenAICoachProps } from '../GenAICoach';
 declare const StyledUtilitiesLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    utilitiesExpanded?: boolean | undefined;
-    lgOrAbove?: boolean | undefined;
-    starterMessage: GenAICoachProps['starterMessage'];
+    utilitiesExpanded?: boolean;
+    lgOrAbove?: boolean;
+    starterMessage: GenAICoachProps["starterMessage"];
 }, never>;
 export default StyledUtilitiesLayout;
 //# sourceMappingURL=UtilitiesLayout.styles.d.ts.map

package/lib/components/UtilitiesLayout/UtilitiesLayout.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UtilitiesLayout.styles.d.ts","sourceRoot":"","sources":["../../../src/components/UtilitiesLayout/UtilitiesLayout.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,QAAA,MAAM,qBAAqB~~;;;oBAGT~~,eAAe,CAAC,gBAAgB,CAAC;SAsBjD,CAAC;AAIH,eAAe,qBAAqB,CAAC"}
1	+ {"version":3,"file":"UtilitiesLayout.styles.d.ts","sourceRoot":"","sources":["../../../src/components/UtilitiesLayout/UtilitiesLayout.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,QAAA,MAAM,qBAAqB;wBACL,OAAO;gBACf,OAAO;oBACH,eAAe,CAAC,gBAAgB,CAAC;SAsBjD,CAAC;AAIH,eAAe,qBAAqB,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "8.0.0-build.2.0",
+  "version": "8.0.0-build.20.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,23 +19,24 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "8.0.0-build.2.0",
-    "@pega/cosmos-react-rte": "8.0.0-build.2.0",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
+    "@pega/cosmos-react-core": "8.0.0-build.20.1",
+    "@pega/cosmos-react-rte": "8.0.0-build.20.1",
+    "@types/marked": "^4.0.2",
+    "@types/react": "^17.0.62 || ^18.3.3",
+    "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",
     "polished": "^4.1.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "~8.2.9",
     "@storybook/react": "~8.2.9",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/dompurify": "^3.0.5",
     "dompurify": "^3.1.6",
-    "typescript": "~5.2.2"
+    "typescript": "~5.5.4"
   }
 }