@pega/cosmos-react-work 7.2.7 → 7.2.8

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.
@@ -20,7 +20,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
20
20
  const isSMContentWidthOrAbove = useBreakpoint('sm', {
21
21
  breakpointRef: contentListRef
22
22
  });
23
- 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: {
23
+ 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: {
24
24
  cols: 'auto 1fr',
25
25
  alignContent: 'evenly',
26
26
  alignItems: 'center',
@@ -29,7 +29,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
29
29
  cols: '1fr auto',
30
30
  alignContent: 'evenly',
31
31
  alignItems: 'center'
32
- }, 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: {
32
+ }, 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: {
33
33
  gap: 1,
34
34
  cols: isSMContentWidthOrAbove
35
35
  ? `repeat(${content.length > 1 ? '2' : '1'}, minmax(16ch, auto) minmax(25%, 1fr))`
@@ -1 +1 @@
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} />}\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-work",
3
- "version": "7.2.7",
3
+ "version": "7.2.8",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,8 +19,8 @@
19
19
  "build": "tsc -b tsconfig.build.json"
20
20
  },
21
21
  "dependencies": {
22
- "@pega/cosmos-react-core": "7.2.7",
23
- "@pega/cosmos-react-rte": "7.2.7",
22
+ "@pega/cosmos-react-core": "7.2.8",
23
+ "@pega/cosmos-react-rte": "7.2.8",
24
24
  "@types/react": "^17.0.62",
25
25
  "@types/react-dom": "^17.0.20",
26
26
  "@types/styled-components": "^5.1.26",