@pega/cosmos-react-work 6.1.2 → 6.2.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.
- package/lib/components/InteractionNotification/InteractionNotification.js +1 -1
- package/lib/components/InteractionNotification/InteractionNotification.js.map +1 -1
- package/lib/components/Timeline/TimelineItem.js +2 -2
- package/lib/components/Timeline/TimelineItem.js.map +1 -1
- package/package.json +2 -2
|
@@ -12,7 +12,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
|
|
|
12
12
|
inset-inline-end: calc(2 * ${base.spacing});
|
|
13
13
|
width: min(calc(100% - 2rem), ${base['content-width'].md});
|
|
14
14
|
max-height: calc(100vh - 2rem);
|
|
15
|
-
z-index: ${base['z-index'].
|
|
15
|
+
z-index: ${base['z-index'].backdrop - 1};
|
|
16
16
|
color: ${base.colors.white};
|
|
17
17
|
animation: SlideIn calc(4 * ${base.animation.speed});
|
|
18
18
|
padding: calc(0.75 * ${base.spacing}) 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldValueList,\n useI18n,\n useDirection,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter\n} from '@pega/cosmos-react-core';\nimport type {\n StatusProps,\n ForwardProps,\n FieldValueListProps,\n NoChildrenProp,\n RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n NoChildrenProp & {\n /** Ref to Component. */\n ref?: Ref<HTMLDivElement>;\n /** Name of the icon used in header. */\n icon: string;\n /** Interaction title. */\n title: string;\n /** Primary information of the notification. For example caller name . */\n primaryText: string;\n /** Secondary information of the notification. For example phone number of the caller */\n secondaryText?: string;\n /** Represents the current status of interaction. */\n status: { variant: StatusProps['variant']; text: string };\n /** Information structured as field values to be displayed below main section. */\n fields?: FieldValueListProps['fields'];\n /** Timeout definition */\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /** Callback when accept button is clicked. */\n onAccept?: () => void;\n /** Callback when decline or 'x' button is clicked. */\n onDismiss?: () => void;\n },\n 'onAccept' | 'onDismiss'\n>;\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 * ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\n z-index: ${base['z-index'].modal};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n box-shadow: ${base.shadow.low};\n\n &&& {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\n\n ${StyledText} {\n color: ${base.colors.white};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDismiss\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDismiss?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDismiss?.();\n },\n containerRef.current,\n [onDismiss]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDismiss\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n ref={acceptButtonRef}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={containerRef} data-app-region>\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1' as='span'>\n {primaryText}\n </Text>\n {secondaryText && (\n <Text variant='h5' as='span'>\n {secondaryText}\n </Text>\n )}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n {onAccept ? (\n <CardFooter justify={onDismiss ? 'between' : 'end'}>\n {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n {acceptButton}\n </CardFooter>\n ) : (\n <CardFooter justify='end'>\n <Button variant='primary' onClick={onDismiss}>\n {t('close')}\n </Button>\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}
|
|
1
|
+
{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n Status,\n Text,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n StyledFieldValueList,\n useI18n,\n useDirection,\n Icon,\n StyledLabel,\n useLiveLog,\n registerAction,\n useShortcut,\n useConsolidatedRef,\n useEscape,\n CardFooter\n} from '@pega/cosmos-react-core';\nimport type {\n StatusProps,\n ForwardProps,\n FieldValueListProps,\n NoChildrenProp,\n RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n NoChildrenProp & {\n /** Ref to Component. */\n ref?: Ref<HTMLDivElement>;\n /** Name of the icon used in header. */\n icon: string;\n /** Interaction title. */\n title: string;\n /** Primary information of the notification. For example caller name . */\n primaryText: string;\n /** Secondary information of the notification. For example phone number of the caller */\n secondaryText?: string;\n /** Represents the current status of interaction. */\n status: { variant: StatusProps['variant']; text: string };\n /** Information structured as field values to be displayed below main section. */\n fields?: FieldValueListProps['fields'];\n /** Timeout definition */\n incomingNotificationTimeout?: {\n startTime: CountdownButtonProps['startTime'];\n answerTimeout: CountdownButtonProps['timeout'];\n onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n };\n /** Callback when accept button is clicked. */\n onAccept?: () => void;\n /** Callback when decline or 'x' button is clicked. */\n onDismiss?: () => void;\n },\n 'onAccept' | 'onDismiss'\n>;\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n const { rtl } = useDirection();\n return css`\n position: fixed;\n inset-block-start: calc(2 * ${base.spacing});\n inset-inline-end: calc(2 * ${base.spacing});\n width: min(calc(100% - 2rem), ${base['content-width'].md});\n max-height: calc(100vh - 2rem);\n z-index: ${base['z-index'].backdrop - 1};\n color: ${base.colors.white};\n animation: SlideIn calc(4 * ${base.animation.speed});\n padding: calc(0.75 * ${base.spacing}) 0;\n box-shadow: ${base.shadow.low};\n\n &&& {\n background-color: ${base.colors.slate['extra-dark']};\n }\n\n @keyframes SlideIn {\n 0% {\n ${rtl\n ? css`\n transform: translateX(calc(-100% - 1rem));\n `\n : css`\n transform: translateX(calc(100% + 1rem));\n `}\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\n overflow: auto;\n\n ${StyledText} {\n color: ${base.colors.white};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n text-align: center;\n }\n }\n\n ${StyledFieldValueList} {\n border-block-start: solid 0.0625rem ${base.palette['border-line']};\n padding-block-start: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n\n @media (min-width: calc(${base.breakpoints.md})) {\n inset-block-start: calc(8 * ${base.spacing});\n max-height: initial;\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n {\n id: 'GoToIncomingInteraction',\n defaultKeyBinding: 'Alt+Enter'\n },\n {\n id: 'DismissIncomingInteraction',\n defaultKeyBinding: 'Alt+Q'\n }\n);\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(function InteractionNotification(\n {\n icon,\n title,\n primaryText,\n secondaryText,\n status,\n fields,\n incomingNotificationTimeout,\n onAccept,\n onDismiss\n }: PropsWithoutRef<InteractionNotificationProps>,\n ref: InteractionNotificationProps['ref']\n ) {\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const containerRef = useConsolidatedRef(ref);\n const returnRef = useRef<HTMLElement>();\n const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n if (containerRef.current) {\n returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n acceptButtonRef.current?.focus();\n }\n });\n const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n onDismiss?.();\n });\n\n useEscape(\n () => {\n returnRef.current?.focus();\n onDismiss?.();\n },\n containerRef.current,\n [onDismiss]\n );\n\n useEffect(() => {\n announceAssertive({\n message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n }${\n dismissBinding && onDismiss\n ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n : ''\n }`,\n type: 'alert'\n });\n }, []);\n\n const acceptButton = incomingNotificationTimeout ? (\n <CountdownButton\n variant='primary'\n onClick={onAccept}\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n ref={acceptButtonRef}\n >\n {t('accept')}\n </CountdownButton>\n ) : (\n <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={containerRef} data-app-region>\n <CardHeader>\n <Flex container={{ alignItems: 'center', gap: 1 }}>\n <Icon name={icon} />\n <Text variant='h2'>{title}</Text>\n </Flex>\n </CardHeader>\n <CardContent container={{ gap: 2 }}>\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <Text variant='h1' as='span'>\n {primaryText}\n </Text>\n {secondaryText && (\n <Text variant='h5' as='span'>\n {secondaryText}\n </Text>\n )}\n <Status variant={status.variant}>{status.text}</Status>\n </Flex>\n {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n </CardContent>\n\n {onAccept ? (\n <CardFooter justify={onDismiss ? 'between' : 'end'}>\n {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n {acceptButton}\n </CardFooter>\n ) : (\n <CardFooter justify='end'>\n <Button variant='primary' onClick={onDismiss}>\n {t('close')}\n </Button>\n </CardFooter>\n )}\n </StyledInteractionNotification>\n );\n });\n\nexport default InteractionNotification;\n"]}
|
|
@@ -11,7 +11,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
|
|
|
11
11
|
const isSMContentWidthOrAbove = useBreakpoint('sm', {
|
|
12
12
|
breakpointRef: contentListRef
|
|
13
13
|
});
|
|
14
|
-
return (_jsxs("li", { 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: {
|
|
14
|
+
return (_jsxs("li", { 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: {
|
|
15
15
|
cols: 'auto 1fr',
|
|
16
16
|
alignContent: 'evenly',
|
|
17
17
|
alignItems: 'center',
|
|
@@ -20,7 +20,7 @@ const TimelineItem = ({ item: { date, title, icon, status, content }, timeFormat
|
|
|
20
20
|
cols: '1fr auto',
|
|
21
21
|
alignContent: 'evenly',
|
|
22
22
|
alignItems: 'center'
|
|
23
|
-
}, 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 }) }))] }) }) }), content && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
|
|
23
|
+
}, 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 }) }))] }) }) }), content && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
|
|
24
24
|
gap: 1,
|
|
25
25
|
cols: isSMContentWidthOrAbove
|
|
26
26
|
? `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":";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;AAIjC,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAUvC,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,yBACG,cAAc,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,
|
|
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 } from 'react';\n\nimport {\n ExpandCollapse,\n Grid,\n Icon,\n Status,\n useBreakpoint,\n FieldValueItem\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, DateTimeDisplayProps } 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} 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 const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <li>\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 {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 {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} 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 {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 </li>\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": "6.
|
|
3
|
+
"version": "6.2.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "6.
|
|
22
|
+
"@pega/cosmos-react-core": "6.2.0",
|
|
23
23
|
"@types/react": "^17.0.62",
|
|
24
24
|
"@types/react-dom": "^17.0.20",
|
|
25
25
|
"@types/styled-components": "^5.1.26",
|