@pega/cosmos-react-social 4.0.0-dev.19.2 → 4.0.0-dev.19.4
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAEvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;
|
|
1
|
+
{"version":3,"file":"EmailConversation.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8C,MAAM,OAAO,CAAC;AAKlG,OAAO,EAQL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAWvD,eAAO,MAAM,2BAA2B,iLAEvC,CAAC;AAIF,eAAO,MAAM,6BAA6B,iLAGzC,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAA8B,OAAO;SAczE,CAAC;AAGF,eAAO,MAAM,iBAAiB,yGAsB7B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;;SAqBnC,CAAC;AAGF,eAAO,MAAM,yBAAyB,wKA4BrC,CAAC;AAuEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA6I/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -21,109 +21,109 @@ export const StyledCompactTimeStampDisplay = styled(Text) `
|
|
|
21
21
|
margin-top: calc(${props => props.theme.base.spacing} / 2);
|
|
22
22
|
`;
|
|
23
23
|
StyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;
|
|
24
|
-
export const StyledConversationHeader = styled.header(({ theme, collapsed }) => {
|
|
24
|
+
export const StyledConversationHeader = styled.header(({ theme: { base: { palette } }, collapsed }) => {
|
|
25
25
|
return css `
|
|
26
|
-
border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${
|
|
26
|
+
border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${palette['border-line']};
|
|
27
27
|
position: sticky;
|
|
28
28
|
top: 0;
|
|
29
29
|
z-index: 1;
|
|
30
30
|
`;
|
|
31
31
|
});
|
|
32
32
|
StyledConversationHeader.defaultProps = defaultThemeProp;
|
|
33
|
-
export const StyledUnReadCount = styled.div(({ theme: { base } }) => {
|
|
34
|
-
const readableBackground = readableHue(
|
|
33
|
+
export const StyledUnReadCount = styled.div(({ theme: { base: { spacing, palette, 'font-weight': { 'semi-bold': fontWeightSemiBold } } } }) => {
|
|
34
|
+
const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
|
|
35
35
|
const readableTextColor = readableColor(readableBackground);
|
|
36
36
|
return css `
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
align-self: flex-start;
|
|
38
|
+
background-color: ${readableBackground};
|
|
39
|
+
color: ${readableTextColor};
|
|
40
|
+
padding: 0 ${spacing};
|
|
41
|
+
font-weight: ${fontWeightSemiBold};
|
|
42
|
+
width: fit-content;
|
|
43
|
+
`;
|
|
44
44
|
});
|
|
45
45
|
StyledUnReadCount.defaultProps = defaultThemeProp;
|
|
46
|
-
export const StyledEmailConversation = styled.li(({ theme: { base }, singleConversation, showHeader }) => {
|
|
46
|
+
export const StyledEmailConversation = styled.li(({ theme: { base: { spacing, palette, 'border-radius': baseBorderRadius } }, singleConversation, showHeader }) => {
|
|
47
47
|
return css `
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
? `0 0 ${
|
|
51
|
-
:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
48
|
+
margin-bottom: ${spacing};
|
|
49
|
+
border-radius: ${singleConversation && showHeader
|
|
50
|
+
? `0 0 ${baseBorderRadius} ${baseBorderRadius}`
|
|
51
|
+
: baseBorderRadius};
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
background-color: ${palette['primary-background']};
|
|
54
|
+
list-style-type: none;
|
|
55
|
+
`;
|
|
56
56
|
});
|
|
57
57
|
StyledEmailConversation.defaultProps = defaultThemeProp;
|
|
58
|
-
export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {
|
|
59
|
-
const readableBackground = readableHue(
|
|
58
|
+
export const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base: { spacing, palette } } }) => {
|
|
59
|
+
const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
|
|
60
60
|
return css `
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
${unRead &&
|
|
67
|
-
css `
|
|
68
|
-
&::before {
|
|
69
|
-
content: '';
|
|
70
|
-
background-color: ${readableBackground};
|
|
71
|
-
position: absolute;
|
|
72
|
-
inset: 0;
|
|
73
|
-
height: calc(100% + 0.0625rem);
|
|
74
|
-
top: -0.0625rem;
|
|
75
|
-
width: 0.125rem;
|
|
61
|
+
padding: calc(2 * ${spacing}) 0;
|
|
62
|
+
position: relative;
|
|
63
|
+
:not(:last-child) {
|
|
64
|
+
border-bottom: 0.0625rem solid ${palette['border-line']};
|
|
76
65
|
}
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
${unRead &&
|
|
67
|
+
css `
|
|
68
|
+
&::before {
|
|
69
|
+
content: '';
|
|
70
|
+
background-color: ${readableBackground};
|
|
71
|
+
position: absolute;
|
|
72
|
+
inset: 0;
|
|
73
|
+
height: calc(100% + 0.0625rem);
|
|
74
|
+
top: -0.0625rem;
|
|
75
|
+
width: 0.125rem;
|
|
76
|
+
}
|
|
77
|
+
`}
|
|
78
|
+
`;
|
|
79
79
|
});
|
|
80
80
|
StyledEmailInConversation.defaultProps = defaultThemeProp;
|
|
81
|
-
const StyledUnreadIndicator = styled.span(({ theme, isVisible }) => {
|
|
82
|
-
const readableBackground = readableHue(
|
|
81
|
+
const StyledUnreadIndicator = styled.span(({ theme: { base: { palette } }, isVisible }) => {
|
|
82
|
+
const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);
|
|
83
83
|
const diameter = '0.375rem';
|
|
84
84
|
return css `
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
85
|
+
width: ${isVisible ? diameter : 0};
|
|
86
|
+
margin: 0 ${isVisible ? 0 : '0.188rem'};
|
|
87
|
+
height: ${diameter};
|
|
88
|
+
display: inline-block;
|
|
89
|
+
border-radius: 50%;
|
|
90
|
+
background: ${readableBackground};
|
|
91
|
+
position: relative;
|
|
92
|
+
top: 0.375rem;
|
|
93
|
+
align-self: flex-start;
|
|
94
|
+
`;
|
|
95
95
|
});
|
|
96
96
|
StyledUnreadIndicator.defaultProps = defaultThemeProp;
|
|
97
|
-
const StyledConversationButton = styled.button(({ theme }) => {
|
|
98
|
-
const hoverColor = tryCatch(() => mix(0.85,
|
|
97
|
+
const StyledConversationButton = styled.button(({ theme: { base: { spacing, palette } } }) => {
|
|
98
|
+
const hoverColor = tryCatch(() => mix(0.85, palette['primary-background'], palette['brand-primary']));
|
|
99
99
|
return css `
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
100
|
+
border-width: 0;
|
|
101
|
+
width: 100%;
|
|
102
|
+
padding: ${spacing};
|
|
103
|
+
background: ${palette['primary-background']};
|
|
104
|
+
color: ${palette['foreground-color']};
|
|
105
|
+
position: sticky;
|
|
106
|
+
top: 0;
|
|
107
|
+
z-index: 1;
|
|
107
108
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
&[aria-expanded='true'] {
|
|
110
|
+
border-bottom: 0.0625rem solid ${palette['border-line']};
|
|
111
|
+
}
|
|
111
112
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
&:focus {
|
|
114
|
+
background: ${palette['secondary-background']};
|
|
115
|
+
outline: none;
|
|
116
|
+
}
|
|
116
117
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
&:hover {
|
|
119
|
+
background: ${hoverColor};
|
|
120
|
+
outline: none;
|
|
121
|
+
}
|
|
121
122
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
`;
|
|
123
|
+
& > ${StyledIcon} {
|
|
124
|
+
align-self: flex-start;
|
|
125
|
+
}
|
|
126
|
+
`;
|
|
127
127
|
});
|
|
128
128
|
StyledConversationButton.defaultProps = defaultThemeProp;
|
|
129
129
|
const EmailConversation = forwardRef((props, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport {\n ExpandCollapse,\n Flex,\n Icon,\n registerIcon,\n Text,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n useAfterInitialEffect,\n DateTimeDisplay,\n readableHue,\n useBreakpoint,\n useConfiguration,\n StyledIcon,\n tryCatch,\n useDirection,\n Status\n} from '@pega/cosmos-react-core';\n\nimport Email from './Email';\nimport { EmailConversationProps } from './Email.types';\n\nregisterIcon(caretDownIcon);\n\nconst EmailParticipantTextCss = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledEmailParticipantsText = styled(Text)`\n ${EmailParticipantTextCss}\n`;\n\nStyledEmailParticipantsText.defaultProps = defaultThemeProp;\n\nexport const StyledCompactTimeStampDisplay = styled(Text)`\n ${EmailParticipantTextCss}\n margin-top: calc(${props => props.theme.base.spacing} / 2);\n`;\nStyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledConversationHeader = styled.header<{ collapsed: boolean }>(\n ({ theme, collapsed }) => {\n return css`\n border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${theme.base.palette['border-line']};\n position: sticky;\n top: 0;\n z-index: 1;\n `;\n }\n);\nStyledConversationHeader.defaultProps = defaultThemeProp;\n\nexport const StyledUnReadCount = styled.div(({ theme: { base } }) => {\n const readableBackground = readableHue(\n base.palette['brand-primary'],\n base.palette['primary-background']\n );\n const readableTextColor = readableColor(readableBackground);\n\n return css`\n align-self: flex-start;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding: 0 ${base.spacing};\n font-weight: ${base['font-weight']['semi-bold']};\n width: fit-content;\n `;\n});\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li<{\n singleConversation?: boolean;\n showHeader?: boolean;\n}>(({ theme: { base }, singleConversation, showHeader }) => {\n return css`\n margin-bottom: ${base.spacing};\n border-radius: ${singleConversation && showHeader\n ? `0 0 ${base['border-radius']} ${base['border-radius']}`\n : base['border-radius']};\n overflow: hidden;\n background-color: ${base.palette['primary-background']};\n list-style-type: none;\n `;\n});\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(({ unRead, theme: { base } }) => {\n const readableBackground = readableHue(\n base.palette['brand-primary'],\n base.palette['primary-background']\n );\n return css`\n padding: calc(2 * ${base.spacing}) 0;\n position: relative;\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${base.palette['border-line']};\n }\n ${unRead &&\n css`\n &::before {\n content: '';\n background-color: ${readableBackground};\n position: absolute;\n inset: 0;\n height: calc(100% + 0.0625rem);\n top: -0.0625rem;\n width: 0.125rem;\n }\n `}\n `;\n});\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(({ theme, isVisible }) => {\n const readableBackground = readableHue(\n theme.base.palette['brand-primary'],\n theme.base.palette['primary-background']\n );\n\n const diameter = '0.375rem';\n\n return css`\n width: ${isVisible ? diameter : 0};\n margin: 0 ${isVisible ? 0 : '0.188rem'};\n height: ${diameter};\n display: inline-block;\n border-radius: 50%;\n background: ${readableBackground};\n position: relative;\n top: 0.375rem;\n align-self: flex-start;\n `;\n});\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(({ theme }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, theme.base.palette['primary-background'], theme.base.palette['brand-primary'])\n );\n return css`\n border-width: 0;\n width: 100%;\n padding: ${theme.base.spacing};\n background: ${theme.base.palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: 1;\n\n &[aria-expanded='true'] {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n &:focus {\n background: ${theme.base.palette['secondary-background']};\n outline: none;\n }\n\n &:hover {\n background: ${hoverColor};\n outline: none;\n }\n\n & > ${StyledIcon} {\n align-self: flex-start;\n color: ${theme.base.palette['foreground-color']};\n }\n `;\n});\n\nStyledConversationButton.defaultProps = defaultThemeProp;\n\nconst EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EmailConversationProps>, ref: EmailConversationProps['ref']) => {\n const {\n id,\n emails,\n from,\n to,\n unReadEmailCount,\n timeStamp,\n isForwarded = false,\n isCollapsed = false,\n onCollapse,\n onExpand,\n undelivered,\n drafts,\n ...restProps\n } = props;\n const t = useI18n();\n const [collapsedState, setCollapsedState] = useState(isCollapsed);\n useAfterInitialEffect(() => {\n setCollapsedState(isCollapsed);\n }, [isCollapsed]);\n const onExpandCollapse = () => {\n setCollapsedState(!collapsedState);\n };\n\n const headerRef = useRef<HTMLDivElement>(null);\n const isSmallOrAbove = useBreakpoint('sm', {\n breakpointRef: headerRef,\n themeProp: 'content-width'\n });\n const { locale } = useConfiguration();\n const { rtl } = useDirection();\n\n const caretDirection = rtl ? 'caret-left' : 'caret-right';\n const generateRecipientList = useMemo(() => {\n const recipientElements = to.slice(0, 2).map((recipient, i) => {\n return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;\n });\n if (to.length > 2) {\n return [...recipientElements, `+${to.length - 2} more`];\n }\n return recipientElements;\n }, [to]);\n\n return (\n <StyledEmailConversation {...restProps} id={id} ref={ref}>\n <Flex\n as={StyledConversationButton}\n id={`conversation-heading${id}`}\n aria-controls={id}\n aria-expanded={!collapsedState}\n container={{ gap: 1, alignItems: 'center', pad: 1 }}\n onClick={onExpandCollapse}\n ref={headerRef}\n >\n <Icon name={collapsedState ? caretDirection : 'caret-down'} />\n <StyledUnreadIndicator isVisible={!!unReadEmailCount} />\n <Flex\n container={{\n wrap: 'nowrap',\n alignItems: 'start',\n direction: 'column'\n }}\n item={{\n grow: 1,\n shrink: 1\n }}\n >\n <Flex container={{ gap: 1 }}>\n <Text variant='primary' as={StyledEmailParticipantsText}>\n {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n </Text>\n\n {(undelivered || drafts) && (\n <>\n {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n {/* Passing Infinity for count so the correct plural translation is chosen\n along with an empty tokens array so that a count is not shown. */}\n {drafts && (\n <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>\n )}\n </>\n )}\n </Flex>\n <Text variant='secondary' as={StyledEmailParticipantsText}>\n {`${t('to')}: `}\n {generateRecipientList}\n </Text>\n {!isSmallOrAbove && (\n <Text variant='secondary' as={StyledCompactTimeStampDisplay}>\n {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n new Date(timeStamp)\n )}, `}\n <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n </Text>\n )}\n </Flex>\n <Flex\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n item={{\n shrink: 0\n }}\n >\n {isSmallOrAbove && (\n <Text variant='secondary' as={StyledEmailParticipantsText}>\n {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n new Date(timeStamp)\n )}, `}\n <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n </Text>\n )}\n </Flex>\n </Flex>\n\n <ExpandCollapse\n as={Flex}\n container={{ direction: 'column' }}\n collapsed={collapsedState}\n onBeforeCollapse={onCollapse}\n onBeforeExpand={onExpand}\n role='region'\n aria-labelledby={`conversation-heading${id}`}\n id={`conversation-content${id}`}\n >\n {!!unReadEmailCount && (\n <Text as={StyledUnReadCount} id={`unread-emailCount-${id}`} variant='secondary'>\n {t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount })}\n </Text>\n )}\n {emails &&\n emails.map(email => {\n return <StyledEmailInConversation key={email.id} {...email} />;\n })}\n </ExpandCollapse>\n </StyledEmailConversation>\n );\n }\n);\n\nexport default EmailConversation;\n"]}
|
|
1
|
+
{"version":3,"file":"EmailConversation.js","sourceRoot":"","sources":["../../../src/components/Email/EmailConversation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, readableColor } from 'polished';\n\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport {\n ExpandCollapse,\n Flex,\n Icon,\n registerIcon,\n Text,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n useAfterInitialEffect,\n DateTimeDisplay,\n readableHue,\n useBreakpoint,\n useConfiguration,\n StyledIcon,\n tryCatch,\n useDirection,\n Status\n} from '@pega/cosmos-react-core';\n\nimport Email from './Email';\nimport { EmailConversationProps } from './Email.types';\n\nregisterIcon(caretDownIcon);\n\nconst EmailParticipantTextCss = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n`;\n\nexport const StyledEmailParticipantsText = styled(Text)`\n ${EmailParticipantTextCss}\n`;\n\nStyledEmailParticipantsText.defaultProps = defaultThemeProp;\n\nexport const StyledCompactTimeStampDisplay = styled(Text)`\n ${EmailParticipantTextCss}\n margin-top: calc(${props => props.theme.base.spacing} / 2);\n`;\nStyledCompactTimeStampDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledConversationHeader = styled.header<{ collapsed: boolean }>(\n ({\n theme: {\n base: { palette }\n },\n collapsed\n }) => {\n return css`\n border-bottom: ${collapsed ? 0 : '0.0625rem'} solid ${palette['border-line']};\n position: sticky;\n top: 0;\n z-index: 1;\n `;\n }\n);\nStyledConversationHeader.defaultProps = defaultThemeProp;\n\nexport const StyledUnReadCount = styled.div(\n ({\n theme: {\n base: {\n spacing,\n palette,\n 'font-weight': { 'semi-bold': fontWeightSemiBold }\n }\n }\n }) => {\n const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n const readableTextColor = readableColor(readableBackground);\n\n return css`\n align-self: flex-start;\n background-color: ${readableBackground};\n color: ${readableTextColor};\n padding: 0 ${spacing};\n font-weight: ${fontWeightSemiBold};\n width: fit-content;\n `;\n }\n);\n\nStyledUnReadCount.defaultProps = defaultThemeProp;\n\nexport const StyledEmailConversation = styled.li<{\n singleConversation?: boolean;\n showHeader?: boolean;\n}>(\n ({\n theme: {\n base: { spacing, palette, 'border-radius': baseBorderRadius }\n },\n singleConversation,\n showHeader\n }) => {\n return css`\n margin-bottom: ${spacing};\n border-radius: ${singleConversation && showHeader\n ? `0 0 ${baseBorderRadius} ${baseBorderRadius}`\n : baseBorderRadius};\n overflow: hidden;\n background-color: ${palette['primary-background']};\n list-style-type: none;\n `;\n }\n);\nStyledEmailConversation.defaultProps = defaultThemeProp;\n\nexport const StyledEmailInConversation = styled(Email)(\n ({\n unRead,\n theme: {\n base: { spacing, palette }\n }\n }) => {\n const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n return css`\n padding: calc(2 * ${spacing}) 0;\n position: relative;\n :not(:last-child) {\n border-bottom: 0.0625rem solid ${palette['border-line']};\n }\n ${unRead &&\n css`\n &::before {\n content: '';\n background-color: ${readableBackground};\n position: absolute;\n inset: 0;\n height: calc(100% + 0.0625rem);\n top: -0.0625rem;\n width: 0.125rem;\n }\n `}\n `;\n }\n);\nStyledEmailInConversation.defaultProps = defaultThemeProp;\n\nconst StyledUnreadIndicator = styled.span<{ isVisible: boolean }>(\n ({\n theme: {\n base: { palette }\n },\n isVisible\n }) => {\n const readableBackground = readableHue(palette['brand-primary'], palette['primary-background']);\n\n const diameter = '0.375rem';\n\n return css`\n width: ${isVisible ? diameter : 0};\n margin: 0 ${isVisible ? 0 : '0.188rem'};\n height: ${diameter};\n display: inline-block;\n border-radius: 50%;\n background: ${readableBackground};\n position: relative;\n top: 0.375rem;\n align-self: flex-start;\n `;\n }\n);\nStyledUnreadIndicator.defaultProps = defaultThemeProp;\n\nconst StyledConversationButton = styled.button(\n ({\n theme: {\n base: { spacing, palette }\n }\n }) => {\n const hoverColor = tryCatch(() =>\n mix(0.85, palette['primary-background'], palette['brand-primary'])\n );\n return css`\n border-width: 0;\n width: 100%;\n padding: ${spacing};\n background: ${palette['primary-background']};\n color: ${palette['foreground-color']};\n position: sticky;\n top: 0;\n z-index: 1;\n\n &[aria-expanded='true'] {\n border-bottom: 0.0625rem solid ${palette['border-line']};\n }\n\n &:focus {\n background: ${palette['secondary-background']};\n outline: none;\n }\n\n &:hover {\n background: ${hoverColor};\n outline: none;\n }\n\n & > ${StyledIcon} {\n align-self: flex-start;\n }\n `;\n }\n);\n\nStyledConversationButton.defaultProps = defaultThemeProp;\n\nconst EmailConversation: FunctionComponent<EmailConversationProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<EmailConversationProps>, ref: EmailConversationProps['ref']) => {\n const {\n id,\n emails,\n from,\n to,\n unReadEmailCount,\n timeStamp,\n isForwarded = false,\n isCollapsed = false,\n onCollapse,\n onExpand,\n undelivered,\n drafts,\n ...restProps\n } = props;\n const t = useI18n();\n const [collapsedState, setCollapsedState] = useState(isCollapsed);\n useAfterInitialEffect(() => {\n setCollapsedState(isCollapsed);\n }, [isCollapsed]);\n const onExpandCollapse = () => {\n setCollapsedState(!collapsedState);\n };\n\n const headerRef = useRef<HTMLDivElement>(null);\n const isSmallOrAbove = useBreakpoint('sm', {\n breakpointRef: headerRef,\n themeProp: 'content-width'\n });\n const { locale } = useConfiguration();\n const { rtl } = useDirection();\n\n const caretDirection = rtl ? 'caret-left' : 'caret-right';\n const generateRecipientList = useMemo(() => {\n const recipientElements = to.slice(0, 2).map((recipient, i) => {\n return `${recipient.shortName}${i < to.length - 1 ? ';' : ''} `;\n });\n if (to.length > 2) {\n return [...recipientElements, `+${to.length - 2} more`];\n }\n return recipientElements;\n }, [to]);\n\n return (\n <StyledEmailConversation {...restProps} id={id} ref={ref}>\n <Flex\n as={StyledConversationButton}\n id={`conversation-heading${id}`}\n aria-controls={id}\n aria-expanded={!collapsedState}\n container={{ gap: 1, alignItems: 'center', pad: 1 }}\n onClick={onExpandCollapse}\n ref={headerRef}\n >\n <Icon name={collapsedState ? caretDirection : 'caret-down'} />\n <StyledUnreadIndicator isVisible={!!unReadEmailCount} />\n <Flex\n container={{\n wrap: 'nowrap',\n alignItems: 'start',\n direction: 'column'\n }}\n item={{\n grow: 1,\n shrink: 1\n }}\n >\n <Flex container={{ gap: 1 }}>\n <Text variant='primary' as={StyledEmailParticipantsText}>\n {`${isForwarded ? 'FW' : t('from')}: ${from.fullName}`}\n </Text>\n\n {(undelivered || drafts) && (\n <>\n {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n {/* Passing Infinity for count so the correct plural translation is chosen\n along with an empty tokens array so that a count is not shown. */}\n {drafts && (\n <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>\n )}\n </>\n )}\n </Flex>\n <Text variant='secondary' as={StyledEmailParticipantsText}>\n {`${t('to')}: `}\n {generateRecipientList}\n </Text>\n {!isSmallOrAbove && (\n <Text variant='secondary' as={StyledCompactTimeStampDisplay}>\n {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n new Date(timeStamp)\n )}, `}\n <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n </Text>\n )}\n </Flex>\n <Flex\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n item={{\n shrink: 0\n }}\n >\n {isSmallOrAbove && (\n <Text variant='secondary' as={StyledEmailParticipantsText}>\n {`${new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(\n new Date(timeStamp)\n )}, `}\n <DateTimeDisplay variant='datetime' format='short' value={timeStamp} />\n </Text>\n )}\n </Flex>\n </Flex>\n\n <ExpandCollapse\n as={Flex}\n container={{ direction: 'column' }}\n collapsed={collapsedState}\n onBeforeCollapse={onCollapse}\n onBeforeExpand={onExpand}\n role='region'\n aria-labelledby={`conversation-heading${id}`}\n id={`conversation-content${id}`}\n >\n {!!unReadEmailCount && (\n <Text as={StyledUnReadCount} id={`unread-emailCount-${id}`} variant='secondary'>\n {t('new_emails_count', [unReadEmailCount], { count: unReadEmailCount })}\n </Text>\n )}\n {emails &&\n emails.map(email => {\n return <StyledEmailInConversation key={email.id} {...email} />;\n })}\n </ExpandCollapse>\n </StyledEmailConversation>\n );\n }\n);\n\nexport default EmailConversation;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "4.0.0-dev.19.
|
|
3
|
+
"version": "4.0.0-dev.19.4",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"build": "tsc -b"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@pega/cosmos-react-core": "4.0.0-dev.19.
|
|
27
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.19.
|
|
28
|
-
"@pega/cosmos-react-work": "4.0.0-dev.19.
|
|
26
|
+
"@pega/cosmos-react-core": "4.0.0-dev.19.4",
|
|
27
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.19.4",
|
|
28
|
+
"@pega/cosmos-react-work": "4.0.0-dev.19.4",
|
|
29
29
|
"@types/parse5": "^6.0.0",
|
|
30
30
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
31
31
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|