@pega/cosmos-react-social 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/lib/components/Email/EmailEntity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailEntity.js","sourceRoot":"","sources":["../../../src/components/Email/EmailEntity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef } from 'react';\nimport { render, unmountComponentAtNode } from 'react-dom';\n\nimport {\n  ForwardProps,\n  Tooltip,\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useConfiguration,\n  formatListToLocaleString,\n  Icon\n} from '@pega/cosmos-react-core';\n\nimport { StyledEmailEntity } from './Email.styles';\nimport { EmailEntityProps } from './Email.types';\n\nconst EmailEntity: FunctionComponent<EmailEntityProps & ForwardProps> = forwardRef(\n  function EmailEntity(\n    { entity, ...restProps }: PropsWithoutRef<EmailEntityProps>,\n    ref: EmailEntityProps['ref']\n  ) {\n    const [el, setEl] = useElement<HTMLElement>();\n    const elementRef = useConsolidatedRef<HTMLElement>(setEl, ref);\n    const t = useI18n();\n    const { locale } = useConfiguration();\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    return (\n      <StyledEmailEntity\n        {...restProps}\n        entity={entity}\n        ref={elementRef}\n        aria-label={\n          Array.isArray(entity.description)\n            ? formatListToLocaleString(entity.description, t, locale)\n            : entity.description\n        }\n        onContextMenu={() => {\n          if (tooltipRef.current) tooltipRef.current.hidden = true;\n        }}\n        contentEditable={false}\n      >\n        {entity.value}\n        {entity.icon && <Icon name={entity.icon} />}\n        {entity.description && entity.description.length > 0 && (\n          <Tooltip target={el} ref={tooltipRef} hideDelay='short'>\n            {Array.isArray(entity.description)\n              ? formatListToLocaleString(entity.description, t, locale, {\n                  separator: '\\n'\n                })\n              : entity.description}\n          </Tooltip>\n        )}\n      </StyledEmailEntity>\n    );\n  }\n);\n\nexport class EmailEntityWeb extends HTMLElement {\n  removeElements() {\n    while (this.firstChild) {\n      this.removeChild(this.firstChild);\n    }\n  }\n\n  connectedCallback() {\n    const inner = this.innerHTML;\n    this.removeElements();\n    const variant = Number(this.getAttribute('data-variant'));\n    const descAttribute = this.getAttribute('data-description');\n    const description = descAttribute !== null ? JSON.parse(descAttribute) : undefined;\n    const type = this.getAttribute('data-type') || '';\n    render(\n      <EmailEntity\n        entity={{\n          value: inner,\n          type,\n          variant,\n          description\n        }}\n      />,\n      this\n    );\n  }\n\n  disconnectedCallback() {\n    unmountComponentAtNode(this);\n  }\n}\n\nif (!customElements.get('pega-email-entity')) {\n  customElements.define('pega-email-entity', EmailEntityWeb);\n}\n\nexport default EmailEntity;\n"]}

package/lib/components/Email/EmailManager.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { EmailManagerProps } from './Email.types';
+declare const EmailManager: FC<EmailManagerProps & ForwardProps>;
+export default EmailManager;
+//# sourceMappingURL=EmailManager.d.ts.map

package/lib/components/Email/EmailManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailManager.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAsD,MAAM,OAAO,CAAC;AAE/E,OAAO,EAGL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUlD,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA4CtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Email/EmailManager.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect } from 'react';
+import { EmptyState, Flex, Grid, Icon, registerIcon, Text } from '@pega/cosmos-react-core';
+import { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
+import * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';
+import * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';
+import { StyledEmailManagerContainer, StyledGridContainer, StyledHeader, StyledList } from './Email.styles';
+registerIcon(moveRightSolidIcon, moveLeftSolidIcon);
+const EmailManager = ({ header, list, emailCaseDetails, ...restProps }) => {
+    const headerRef = useRef(null);
+    const [headerOffsetHeight, setHeaderOffsetHeight] = useState(0);
+    useLayoutEffect(() => {
+        setHeaderOffsetHeight(headerRef?.current?.offsetHeight || 0);
+    }, []);
+    return (_jsxs(StyledEmailManagerContainer, { ...restProps, children: [header && (_jsxs(Flex, { container: { alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }, as: StyledHeader, ref: headerRef, children: [header.icon && (_jsx(StyledPageIcon, { container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: header.icon }) })), _jsx(Text, { variant: 'h1', children: header.title })] })), _jsxs(Grid, { as: StyledGridContainer, container: {
+                    cols: 'minmax(20rem, 1fr) minmax(0, 3fr)',
+                    gap: 2
+                }, style: { '--headerOffsetHeight': `${headerOffsetHeight}px` }, item: { area: 'container' }, hasHeader: !!header, children: [_jsx(StyledList, { children: list }), _jsx("div", { children: emailCaseDetails || _jsx(EmptyState, {}) })] })] }));
+};
+export default EmailManager;
+//# sourceMappingURL=EmailManager.js.map

package/lib/components/Email/EmailManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailManager.js","sourceRoot":"","sources":["../../../src/components/Email/EmailManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAmB,MAAM,OAAO,CAAC;AAE/E,OAAO,EACL,UAAU,EACV,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,oEAAoE,CAAC;AACpG,OAAO,KAAK,kBAAkB,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAG5G,OAAO,EACL,2BAA2B,EAC3B,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACX,MAAM,gBAAgB,CAAC;AAExB,YAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,YAAY,GAAyC,CAAC,EAC1D,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,GAAG,SAAS,EACuB,EAAE,EAAE;IACvC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhE,eAAe,CAAC,GAAG,EAAE;QACnB,qBAAqB,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;IAC/D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,2BAA2B,OAAK,SAAS,aACvC,MAAM,IAAI,CACT,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC9D,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,SAAS,aAEb,MAAM,CAAC,IAAI,IAAI,CACd,KAAC,cAAc,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpE,KAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,GACZ,CAClB,EACD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,CAAC,KAAK,GAAQ,IACnC,CACR,EACD,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;oBACT,IAAI,EAAE,mCAAmC;oBACzC,GAAG,EAAE,CAAC;iBACP,EACD,KAAK,EAAE,EAAE,sBAAsB,EAAE,GAAG,kBAAkB,IAAI,EAAE,EAC5D,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAC3B,SAAS,EAAE,CAAC,CAAC,MAAM,aAEnB,KAAC,UAAU,cAAE,IAAI,GAAc,EAC/B,wBAAM,gBAAgB,IAAI,KAAC,UAAU,KAAG,GAAO,IAC1C,IACqB,CAC/B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, useState, useRef, useLayoutEffect, PropsWithoutRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  ForwardProps,\n  Grid,\n  Icon,\n  registerIcon,\n  Text\n} from '@pega/cosmos-react-core';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport * as moveRightSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-right-solid.icon';\nimport * as moveLeftSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/move-left-solid.icon';\n\nimport { EmailManagerProps } from './Email.types';\nimport {\n  StyledEmailManagerContainer,\n  StyledGridContainer,\n  StyledHeader,\n  StyledList\n} from './Email.styles';\n\nregisterIcon(moveRightSolidIcon, moveLeftSolidIcon);\n\nconst EmailManager: FC<EmailManagerProps & ForwardProps> = ({\n  header,\n  list,\n  emailCaseDetails,\n  ...restProps\n}: PropsWithoutRef<EmailManagerProps>) => {\n  const headerRef = useRef<HTMLDivElement>(null);\n  const [headerOffsetHeight, setHeaderOffsetHeight] = useState(0);\n\n  useLayoutEffect(() => {\n    setHeaderOffsetHeight(headerRef?.current?.offsetHeight || 0);\n  }, []);\n\n  return (\n    <StyledEmailManagerContainer {...restProps}>\n      {header && (\n        <Flex\n          container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n          as={StyledHeader}\n          ref={headerRef}\n        >\n          {header.icon && (\n            <StyledPageIcon container={{ alignItems: 'center', justify: 'center' }}>\n              <Icon name={header.icon} />\n            </StyledPageIcon>\n          )}\n          <Text variant='h1'>{header.title}</Text>\n        </Flex>\n      )}\n      <Grid\n        as={StyledGridContainer}\n        container={{\n          cols: 'minmax(20rem, 1fr) minmax(0, 3fr)',\n          gap: 2\n        }}\n        style={{ '--headerOffsetHeight': `${headerOffsetHeight}px` }}\n        item={{ area: 'container' }}\n        hasHeader={!!header}\n      >\n        <StyledList>{list}</StyledList>\n        <div>{emailCaseDetails || <EmptyState />}</div>\n      </Grid>\n    </StyledEmailManagerContainer>\n  );\n};\n\nexport default EmailManager;\n"]}

package/lib/components/Email/EmailNotificationPanel.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';
+import type { EmailNotificationPanelProps } from './Email.types';
+export declare const EmailNotificationPanelIcon: FunctionComponent<OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps>;
+declare const EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps>;
+export default EmailNotificationPanel;
+//# sourceMappingURL=EmailNotificationPanel.d.ts.map

package/lib/components/Email/EmailNotificationPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailNotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EACL,YAAY,EAEZ,UAAU,EAKX,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,eAAe,CAAC;AAKjE,eAAO,MAAM,0BAA0B,EAAE,iBAAiB,CACxD,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,GAAG,YAAY,CAclE,CAAC;AAEF,QAAA,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,2BAA2B,GAAG,YAAY,CAazF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/Email/EmailNotificationPanel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, registerIcon, StyledAvatar, useTheme, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';
+import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';
+import { StyledEmailCountIcon } from './Email.styles';
+registerIcon(mailIcon);
+export const EmailNotificationPanelIcon = ({ status, label, count, ...restProps }) => {
+    const { base: { colors } } = useTheme();
+    return (_jsxs(StyledAvatar, { as: StyledAvatar, ...restProps, size: 'm', backgroundColor: colors.white, children: [_jsx(Icon, { name: 'mail-solid' }), _jsx(StyledEmailCountIcon, { variant: 'urgent', children: count }), _jsx(VisuallyHiddenText, { children: label })] }));
+};
+const EmailNotificationPanel = ({ label, onClick, count, ...restProps }) => {
+    return (_jsx(NavigationListItem, { primary: label, visual: _jsx(EmailNotificationPanelIcon, { ...restProps, count: count, label: label }), onClick: onClick }));
+};
+export default EmailNotificationPanel;
+//# sourceMappingURL=EmailNotificationPanel.js.map

package/lib/components/Email/EmailNotificationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailNotificationPanel.js","sourceRoot":"","sources":["../../../src/components/Email/EmailNotificationPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAEL,IAAI,EAEJ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,mEAAmE,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,0BAA0B,GAEnC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,QAAQ,EAAE,CAAC;IACf,OAAO,CACL,MAAC,YAAY,IAAC,EAAE,EAAE,YAAY,KAAM,SAAS,EAAE,IAAI,EAAC,GAAG,EAAC,eAAe,EAAE,MAAM,CAAC,KAAK,aACnF,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,EAE1B,KAAC,oBAAoB,IAAC,OAAO,EAAC,QAAQ,YAAE,KAAK,GAAwB,EAErE,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACnC,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAkE,CAAC,EAC7F,KAAK,EACL,OAAO,EACP,KAAK,EACL,GAAG,SAAS,EACb,EAAE,EAAE;IACH,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,KAAC,0BAA0B,OAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,EACjF,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  OmitStrict,\n  registerIcon,\n  StyledAvatar,\n  useTheme,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail-solid.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { EmailNotificationPanelProps } from './Email.types';\nimport { StyledEmailCountIcon } from './Email.styles';\n\nregisterIcon(mailIcon);\n\nexport const EmailNotificationPanelIcon: FunctionComponent<\n  OmitStrict<EmailNotificationPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, count, ...restProps }) => {\n  const {\n    base: { colors }\n  } = useTheme();\n  return (\n    <StyledAvatar as={StyledAvatar} {...restProps} size='m' backgroundColor={colors.white}>\n      <Icon name='mail-solid' />\n\n      <StyledEmailCountIcon variant='urgent'>{count}</StyledEmailCountIcon>\n\n      <VisuallyHiddenText>{label}</VisuallyHiddenText>\n    </StyledAvatar>\n  );\n};\n\nconst EmailNotificationPanel: FunctionComponent<EmailNotificationPanelProps & ForwardProps> = ({\n  label,\n  onClick,\n  count,\n  ...restProps\n}) => {\n  return (\n    <NavigationListItem\n      primary={label}\n      visual={<EmailNotificationPanelIcon {...restProps} count={count} label={label} />}\n      onClick={onClick}\n    />\n  );\n};\n\nexport default EmailNotificationPanel;\n"]}

package/lib/components/Email/EmailSelector.d.ts

@@ -0,0 +1,22 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { ComboBoxProps, NoChildrenProp, FormControlProps } from '@pega/cosmos-react-core';
+import { EmailComposerProps, EmailUser } from './Email.types';
+export interface EmailSelectorProps extends NoChildrenProp {
+    /** participants */
+    participants: EmailComposerProps['participants'];
+    /** default selections */
+    selectedItems: EmailUser['emailAddress'][];
+    /** selectedItems */
+    onSelectedItemChange: (selectedItems: EmailUser['emailAddress'][], label: ReactNode) => void;
+    /**
+     * Callback to handle external entry validation
+     * If returned true considers the entry to be a valid entry
+     */
+    externalValidator?: EmailComposerProps['externalValidator'];
+    status?: FormControlProps['status'];
+    info?: FormControlProps['info'];
+    compose?: boolean;
+}
+declare const EmailSelector: FunctionComponent<EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>>;
+export default EmailSelector;
+//# sourceMappingURL=EmailSelector.d.ts.map

package/lib/components/Email/EmailSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSelector.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEd,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,mBAAmB;IACnB,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACjD,yBAAyB;IACzB,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,CAAC;IAC3C,oBAAoB;IACpB,oBAAoB,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7F;;;OAGG;IACH,iBAAiB,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,CA4IxE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailSelector.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ComboBox, createStringMatcher, menuHelpers, useI18n, useAfterInitialEffect } from '@pega/cosmos-react-core';
+const EmailSelector = ({ participants, selectedItems, label, mode, required, onSelectedItemChange, externalValidator, status, info, compose }) => {
+    const [filterValue, setFilterValue] = useState('');
+    const [emailParticipants, setEmailParticipants] = useState(participants);
+    const t = useI18n();
+    useAfterInitialEffect(() => {
+        setEmailParticipants(participants);
+    }, [participants]);
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const emailsToRender = useMemo(() => {
+        const filteredItems = (filterValue
+            ? emailParticipants.filter(({ emailAddress, fullName, shortName }) => {
+                return (filterRegex.test(emailAddress) ||
+                    filterRegex.test(fullName) ||
+                    filterRegex.test(shortName));
+            })
+            : emailParticipants).map(({ emailAddress, fullName }) => {
+            return {
+                id: emailAddress,
+                primary: fullName,
+                secondary: [emailAddress],
+                selected: selectedItems.includes(emailAddress)
+            };
+        });
+        const isValid = externalValidator?.(filterValue);
+        return ((filterValue && externalValidator && isValid) || (filterValue && !externalValidator)) &&
+            !compose
+            ? [
+                {
+                    id: filterValue,
+                    primary: `${t('use')}: ${filterValue}`,
+                    selected: selectedItems.includes(filterValue)
+                },
+                ...filteredItems
+            ]
+            : filteredItems;
+    }, [emailParticipants, selectedItems, filterRegex]);
+    const toggleSelectedItems = (id) => {
+        let newSelectedItems = mode === 'single-select' ? [] : [...selectedItems];
+        if (selectedItems.includes(id)) {
+            // Unselect an already selected item
+            newSelectedItems = newSelectedItems.filter(value => value !== id);
+        }
+        else {
+            setFilterValue('');
+            const filteredItem = menuHelpers.getItem(emailsToRender, id);
+            if (!filteredItem?.secondary) {
+                // New value addition to the list
+                if (!externalValidator) {
+                    setEmailParticipants([
+                        ...emailParticipants,
+                        {
+                            shortName: '',
+                            fullName: '',
+                            emailAddress: filterValue
+                        }
+                    ]);
+                    newSelectedItems = [...newSelectedItems, id];
+                }
+                else {
+                    const isValid = externalValidator?.(filterValue);
+                    if (isValid) {
+                        setEmailParticipants([
+                            ...emailParticipants,
+                            {
+                                shortName: '',
+                                fullName: '',
+                                emailAddress: filterValue
+                            }
+                        ]);
+                        newSelectedItems = [...newSelectedItems, id];
+                    }
+                }
+            }
+            else {
+                // Existing value to be selected
+                newSelectedItems = [...newSelectedItems, id];
+            }
+        }
+        onSelectedItemChange(newSelectedItems, label);
+    };
+    const getSelectedItems = () => {
+        if (mode === 'single-select') {
+            return { id: selectedItems[0], text: selectedItems[0] };
+        }
+        return selectedItems.map(value => ({ id: value, text: value }));
+    };
+    const clearSelection = () => {
+        onSelectedItemChange([], label);
+    };
+    const comboBoxProps = {
+        value: filterValue,
+        onChange: (e) => {
+            if (!e.target.value)
+                clearSelection();
+            setFilterValue(e.target.value);
+        },
+        onBlur: () => {
+            setFilterValue('');
+        },
+        menu: {
+            items: emailsToRender,
+            accent: filterRegex,
+            onItemClick: toggleSelectedItems
+        },
+        selected: {
+            items: getSelectedItems(),
+            onRemove: toggleSelectedItems
+        },
+        label,
+        mode,
+        required,
+        status,
+        info
+    };
+    return _jsx(ComboBox, { ...comboBoxProps });
+};
+export default EmailSelector;
+//# sourceMappingURL=EmailSelector.js.map

package/lib/components/Email/EmailSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSelector.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ChangeEvent, useMemo, useState, ReactNode } from 'react';\n\nimport {\n  ComboBox,\n  ComboBoxProps,\n  createStringMatcher,\n  menuHelpers,\n  NoChildrenProp,\n  useI18n,\n  FormControlProps,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { EmailComposerProps, EmailUser } from './Email.types';\n\nexport interface EmailSelectorProps extends NoChildrenProp {\n  /** participants */\n  participants: EmailComposerProps['participants'];\n  /** default selections */\n  selectedItems: EmailUser['emailAddress'][];\n  /** selectedItems */\n  onSelectedItemChange: (selectedItems: EmailUser['emailAddress'][], label: ReactNode) => void;\n  /**\n   * Callback to handle external entry validation\n   * If returned true considers the entry to be a valid entry\n   */\n  externalValidator?: EmailComposerProps['externalValidator'];\n  status?: FormControlProps['status'];\n  info?: FormControlProps['info'];\n  compose?: boolean;\n}\n\nconst EmailSelector: FunctionComponent<\n  EmailSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required'>\n> = ({\n  participants,\n  selectedItems,\n  label,\n  mode,\n  required,\n  onSelectedItemChange,\n  externalValidator,\n  status,\n  info,\n  compose\n}) => {\n  const [filterValue, setFilterValue] = useState('');\n  const [emailParticipants, setEmailParticipants] = useState(participants);\n  const t = useI18n();\n\n  useAfterInitialEffect(() => {\n    setEmailParticipants(participants);\n  }, [participants]);\n\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n\n  const emailsToRender = useMemo(() => {\n    const filteredItems = (\n      filterValue\n        ? emailParticipants.filter(({ emailAddress, fullName, shortName }) => {\n            return (\n              filterRegex.test(emailAddress) ||\n              filterRegex.test(fullName) ||\n              filterRegex.test(shortName)\n            );\n          })\n        : emailParticipants\n    ).map(({ emailAddress, fullName }) => {\n      return {\n        id: emailAddress,\n        primary: fullName,\n        secondary: [emailAddress],\n        selected: selectedItems.includes(emailAddress)\n      };\n    });\n\n    const isValid = externalValidator?.(filterValue);\n\n    return ((filterValue && externalValidator && isValid) || (filterValue && !externalValidator)) &&\n      !compose\n      ? [\n          {\n            id: filterValue,\n            primary: `${t('use')}: ${filterValue}`,\n            selected: selectedItems.includes(filterValue)\n          },\n          ...filteredItems\n        ]\n      : filteredItems;\n  }, [emailParticipants, selectedItems, filterRegex]);\n\n  const toggleSelectedItems = (id: string) => {\n    let newSelectedItems = mode === 'single-select' ? [] : [...selectedItems];\n\n    if (selectedItems.includes(id)) {\n      // Unselect an already selected item\n      newSelectedItems = newSelectedItems.filter(value => value !== id);\n    } else {\n      setFilterValue('');\n      const filteredItem = menuHelpers.getItem(emailsToRender, id);\n\n      if (!filteredItem?.secondary) {\n        // New value addition to the list\n        if (!externalValidator) {\n          setEmailParticipants([\n            ...emailParticipants,\n            {\n              shortName: '',\n              fullName: '',\n              emailAddress: filterValue\n            }\n          ]);\n          newSelectedItems = [...newSelectedItems, id];\n        } else {\n          const isValid = externalValidator?.(filterValue);\n          if (isValid) {\n            setEmailParticipants([\n              ...emailParticipants,\n              {\n                shortName: '',\n                fullName: '',\n                emailAddress: filterValue\n              }\n            ]);\n            newSelectedItems = [...newSelectedItems, id];\n          }\n        }\n      } else {\n        // Existing value to be selected\n        newSelectedItems = [...newSelectedItems, id];\n      }\n    }\n\n    onSelectedItemChange(newSelectedItems, label);\n  };\n\n  const getSelectedItems = () => {\n    if (mode === 'single-select') {\n      return { id: selectedItems[0], text: selectedItems[0] };\n    }\n    return selectedItems.map(value => ({ id: value, text: value }));\n  };\n\n  const clearSelection = () => {\n    onSelectedItemChange([], label);\n  };\n\n  const comboBoxProps = {\n    value: filterValue,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      if (!e.target.value) clearSelection();\n      setFilterValue(e.target.value);\n    },\n    onBlur: () => {\n      setFilterValue('');\n    },\n    menu: {\n      items: emailsToRender,\n      accent: filterRegex,\n      onItemClick: toggleSelectedItems\n    },\n    selected: {\n      items: getSelectedItems(),\n      onRemove: toggleSelectedItems\n    },\n    label,\n    mode,\n    required,\n    status,\n    info\n  };\n\n  return <ComboBox {...comboBoxProps} />;\n};\n\nexport default EmailSelector;\n"]}

package/lib/components/Email/EmailShell.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { EmailShellProps } from './Email.types';
+declare const EmailShell: FunctionComponent<EmailShellProps & ForwardProps>;
+export default EmailShell;
+//# sourceMappingURL=EmailShell.d.ts.map

package/lib/components/Email/EmailShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailShell.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAQ,YAAY,EAAqC,MAAM,yBAAyB,CAAC;AAGhG,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAchD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAwFjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Email/EmailShell.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { Flex, Icon, registerIcon, Text, useI18n } from '@pega/cosmos-react-core';
+import * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';
+import EmailConversation, { StyledEmailConversation, StyledEmailInConversation, StyledUnReadCount } from './EmailConversation';
+import { StyledEmailConversationList, StyledEmailShell, StyledEmailShellHeader } from './Email.styles';
+registerIcon(mailIcon);
+const EmailShell = forwardRef(function EmailShell(props, ref) {
+    const { conversations, headerProps, autoCollapse = false, ...restProps } = props;
+    const t = useI18n();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const singleConversation = conversations?.length === 1;
+    const renderConversations = () => {
+        if (!conversations)
+            return;
+        if (singleConversation) {
+            const conversation = conversations[0];
+            return (_jsxs(StyledEmailConversation, { singleConversation: singleConversation, showHeader: !!headerProps, children: [!!conversation.unReadEmailCount && (_jsx(Text, { as: StyledUnReadCount, variant: 'secondary', children: t('new_emails_count', [conversation.unReadEmailCount], {
+                            count: conversation.unReadEmailCount
+                        }) })), conversation.emails?.map(email => {
+                        return _jsx(StyledEmailInConversation, { ...email }, email.id);
+                    })] }));
+        }
+        // Multiple conversations
+        return autoCollapse
+            ? conversations?.map((conversation, index) => {
+                const { onExpand, isCollapsed, ...rest } = conversation;
+                const collapsed = index !== activeIndex;
+                return (_jsx(EmailConversation, { onExpand: () => {
+                        setActiveIndex(index);
+                        if (onExpand)
+                            onExpand();
+                    }, isCollapsed: collapsed, ...rest }, conversation.id));
+            })
+            : conversations?.map(conversation => {
+                return _jsx(EmailConversation, { ...conversation }, conversation.id);
+            });
+    };
+    return (_jsxs(Flex, { ...restProps, as: StyledEmailShell, container: { direction: 'column', gap: singleConversation ? undefined : 1 }, ref: ref, singleConversation: singleConversation, children: [headerProps && (_jsxs(Flex, { container: {
+                    alignItems: 'center',
+                    justify: 'between',
+                    pad: 1
+                }, as: StyledEmailShellHeader, children: [_jsxs(Flex, { container: { gap: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: 'mail' }), _jsx(Text, { variant: 'h3', children: headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email') })] }), headerProps?.actions] })), _jsx(StyledEmailConversationList, { "aria-multiselectable": !autoCollapse, children: renderConversations() })] }));
+});
+export default EmailShell;
+//# sourceMappingURL=EmailShell.js.map

package/lib/components/Email/EmailShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailShell.js","sourceRoot":"","sources":["../../../src/components/Email/EmailShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,IAAI,EAAgB,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAGxF,OAAO,iBAAiB,EAAE,EACxB,uBAAuB,EACvB,yBAAyB,EACzB,iBAAiB,EAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,2BAA2B,EAC3B,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,gBAAgB,CAAC;AAExB,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,UAAU,GAAsD,UAAU,CAC9E,SAAS,UAAU,CAAC,KAAuC,EAAE,GAA2B;IACtF,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,MAAM,kBAAkB,GAAG,aAAa,EAAE,MAAM,KAAK,CAAC,CAAC;IAEvD,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,IAAI,kBAAkB,EAAE;YACtB,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;YACtC,OAAO,CACL,MAAC,uBAAuB,IACtB,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,CAAC,CAAC,WAAW,aAExB,CAAC,CAAC,YAAY,CAAC,gBAAgB,IAAI,CAClC,KAAC,IAAI,IAAC,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAC,WAAW,YAC7C,CAAC,CAAC,kBAAkB,EAAE,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE;4BACtD,KAAK,EAAE,YAAY,CAAC,gBAAgB;yBACrC,CAAC,GACG,CACR,EACA,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE;wBAChC,OAAO,KAAC,yBAAyB,OAAoB,KAAK,IAAnB,KAAK,CAAC,EAAE,CAAe,CAAC;oBACjE,CAAC,CAAC,IACsB,CAC3B,CAAC;SACH;QAED,yBAAyB;QACzB,OAAO,YAAY;YACjB,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE;gBACzC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,YAAY,CAAC;gBACxD,MAAM,SAAS,GAAG,KAAK,KAAK,WAAW,CAAC;gBACxC,OAAO,CACL,KAAC,iBAAiB,IAEhB,QAAQ,EAAE,GAAG,EAAE;wBACb,cAAc,CAAC,KAAK,CAAC,CAAC;wBACtB,IAAI,QAAQ;4BAAE,QAAQ,EAAE,CAAC;oBAC3B,CAAC,EACD,WAAW,EAAE,SAAS,KAClB,IAAI,IANH,YAAY,CAAC,EAAE,CAOpB,CACH,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,YAAY,CAAC,EAAE;gBAChC,OAAO,KAAC,iBAAiB,OAA2B,YAAY,IAAjC,YAAY,CAAC,EAAE,CAAsB,CAAC;YACvE,CAAC,CAAC,CAAC;IACT,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,EAC3E,GAAG,EAAE,GAAG,EACR,kBAAkB,EAAE,kBAAkB,aAErC,WAAW,IAAI,CACd,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,SAAS;oBAClB,GAAG,EAAE,CAAC;iBACP,EACD,EAAE,EAAE,sBAAsB,aAE1B,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YACf,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW,EAAE,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAC3E,IACF,EACN,WAAW,EAAE,OAAO,IAChB,CACR,EACD,KAAC,2BAA2B,4BAAuB,CAAC,YAAY,YAC7D,mBAAmB,EAAE,GACM,IACzB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, useState } from 'react';\n\nimport { Flex, ForwardProps, Icon, registerIcon, Text, useI18n } from '@pega/cosmos-react-core';\nimport * as mailIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mail.icon';\n\nimport { EmailShellProps } from './Email.types';\nimport EmailConversation, {\n  StyledEmailConversation,\n  StyledEmailInConversation,\n  StyledUnReadCount\n} from './EmailConversation';\nimport {\n  StyledEmailConversationList,\n  StyledEmailShell,\n  StyledEmailShellHeader\n} from './Email.styles';\n\nregisterIcon(mailIcon);\n\nconst EmailShell: FunctionComponent<EmailShellProps & ForwardProps> = forwardRef(\n  function EmailShell(props: PropsWithoutRef<EmailShellProps>, ref: EmailShellProps['ref']) {\n    const { conversations, headerProps, autoCollapse = false, ...restProps } = props;\n\n    const t = useI18n();\n\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    const singleConversation = conversations?.length === 1;\n\n    const renderConversations = () => {\n      if (!conversations) return;\n\n      if (singleConversation) {\n        const conversation = conversations[0];\n        return (\n          <StyledEmailConversation\n            singleConversation={singleConversation}\n            showHeader={!!headerProps}\n          >\n            {!!conversation.unReadEmailCount && (\n              <Text as={StyledUnReadCount} variant='secondary'>\n                {t('new_emails_count', [conversation.unReadEmailCount], {\n                  count: conversation.unReadEmailCount\n                })}\n              </Text>\n            )}\n            {conversation.emails?.map(email => {\n              return <StyledEmailInConversation key={email.id} {...email} />;\n            })}\n          </StyledEmailConversation>\n        );\n      }\n\n      // Multiple conversations\n      return autoCollapse\n        ? conversations?.map((conversation, index) => {\n            const { onExpand, isCollapsed, ...rest } = conversation;\n            const collapsed = index !== activeIndex;\n            return (\n              <EmailConversation\n                key={conversation.id}\n                onExpand={() => {\n                  setActiveIndex(index);\n                  if (onExpand) onExpand();\n                }}\n                isCollapsed={collapsed}\n                {...rest}\n              />\n            );\n          })\n        : conversations?.map(conversation => {\n            return <EmailConversation key={conversation.id} {...conversation} />;\n          });\n    };\n\n    return (\n      <Flex\n        {...restProps}\n        as={StyledEmailShell}\n        container={{ direction: 'column', gap: singleConversation ? undefined : 1 }}\n        ref={ref}\n        singleConversation={singleConversation}\n      >\n        {headerProps && (\n          <Flex\n            container={{\n              alignItems: 'center',\n              justify: 'between',\n              pad: 1\n            }}\n            as={StyledEmailShellHeader}\n          >\n            <Flex container={{ gap: 1, alignItems: 'center' }}>\n              <Icon name='mail' />\n              <Text variant='h3'>\n                {headerProps?.subject ? `${t('subject')}: ${headerProps?.subject} ` : t('email')}\n              </Text>\n            </Flex>\n            {headerProps?.actions}\n          </Flex>\n        )}\n        <StyledEmailConversationList aria-multiselectable={!autoCollapse}>\n          {renderConversations()}\n        </StyledEmailConversationList>\n      </Flex>\n    );\n  }\n);\n\nexport default EmailShell;\n"]}

package/lib/components/Email/EmailSummaryItem.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { EmailSummaryItemProps } from './Email.types';
+export declare const StyledMessageAndDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface StyledEmailSummaryItemProps extends EmailSummaryItemProps {
+    isEmailItemActive: boolean;
+}
+export declare const StyledEmailSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, StyledEmailSummaryItemProps & ForwardProps, never>;
+declare const EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps>;
+export default EmailSummaryItem;
+//# sourceMappingURL=EmailSummaryItem.d.ts.map

package/lib/components/Email/EmailSummaryItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI1E,OAAO,EAEL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAkBtD,eAAO,MAAM,oBAAoB,yGAEhC,CAAC;AAqBF,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAID,eAAO,MAAM,sBAAsB,gJAiClC,CAAC;AAMF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAqH7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryItem.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { mix } from 'polished';
+import { defaultThemeProp, Text, Flex, Count, Sentiment, MetaList, DateTimeDisplay, Status, tryCatch, useI18n, replaceMatchWithElement, Mark, createStringMatcher } from '@pega/cosmos-react-core';
+import { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';
+const StyledMessage = styled(Flex)(({ unreadEmailCount, theme }) => {
+    return css `
+    width: ${theme.base['content-width'].md};
+    text-align: start;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-inline-end: ${theme.base.spacing};
+    margin-block-end: ${theme.base.spacing};
+    ${unreadEmailCount !== undefined &&
+        unreadEmailCount > 0 &&
+        css `
+      color: ${theme.base.palette.interactive};
+    `}
+  `;
+});
+export const StyledMessageAndDate = styled.div `
+  white-space: nowrap;
+`;
+const StyledParticipants = styled(Flex)(({ unreadEmailCount, theme }) => {
+    return css `
+    ${unreadEmailCount !== undefined &&
+        unreadEmailCount > 0 &&
+        css `
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        inset-inline: calc(-1.5 * ${theme.base.spacing});
+        inset-block-start: calc(0.8 * ${theme.base.spacing});
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        background-color: ${theme.base.palette.interactive};
+      }
+    `}
+  `;
+});
+const StyledStatuses = styled.div ``;
+export const StyledEmailSummaryItem = styled.li(({ theme }) => {
+    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+      width: 100%;
+      color: ${theme.base.palette['foreground-color']};
+      background-color: ${theme.base.palette['primary-background']};
+      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
+      outline: none;
+      cursor: pointer;
+      ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {
+        margin-block-start: ${theme.base.spacing};
+      }
+      & + & {
+        margin-inline-start: 0;
+      }
+
+      &[aria-selected='true'],
+      &[data-current='true'] {
+        background-color: ${theme.base.palette['secondary-background']};
+      }
+
+      &:hover,
+      &:focus-within {
+        background-color: ${hoverColor};
+      }
+      &:not(:last-child) {
+        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      }
+    `;
+});
+StyledEmailSummaryItem.defaultProps = defaultThemeProp;
+StyledParticipants.defaultProps = defaultThemeProp;
+StyledMessage.defaultProps = defaultThemeProp;
+const EmailSummaryItem = forwardRef(function EmailSummaryItem({ id, activeParticipants, sentiment, message, timeStamp, topic, urgency, active = false, onSelect, unreadEmailCount, drafts, undelivered, searchQuery, ...restProps }, ref) {
+    const t = useI18n();
+    const items = useMemo(() => {
+        const itemList = [];
+        if (typeof topic === 'string' && topic.length > 0) {
+            itemList.push(_jsx(Status, { variant: 'info', children: topic }, 'info'));
+        }
+        if (sentiment) {
+            itemList.push(_jsx(Sentiment, { variant: sentiment.variant, labelHidden: true }));
+        }
+        if (typeof urgency === 'number') {
+            itemList.push(_jsx(Text, { variant: 'secondary', children: `${t('priority')} ${urgency}` }));
+        }
+        return itemList;
+    }, [sentiment, topic, urgency]);
+    const emailParticipants = useMemo(() => {
+        let participants = '';
+        if (activeParticipants.length > 0) {
+            participants =
+                activeParticipants.length === 1
+                    ? activeParticipants[0].fullName
+                    : activeParticipants.map(participant => `${participant.shortName}`).join(', ');
+        }
+        return participants;
+    }, [activeParticipants]);
+    const itemStatus = `${unreadEmailCount ? `${t('unread')}, ` : ''}${undelivered ? `${t('undelivered')}, ` : ''}${drafts ? `${t('drafts')}, ` : ''}`;
+    return (_jsxs(StyledEmailSummaryItem, { ref: ref, ...restProps, id: id, onClick: () => onSelect(id), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                onSelect(id);
+            }
+        }, "aria-selected": active, "aria-label": `${itemStatus}${emailParticipants}, ${message} ${timeStamp} ${topic} ${sentiment?.variant} ${t('priority')} ${urgency}`, tabIndex: active ? 0 : -1, children: [_jsxs(StyledParticipants, { unreadEmailCount: unreadEmailCount, container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h4', children: searchQuery
+                            ? replaceMatchWithElement(emailParticipants, createStringMatcher(searchQuery, 'contains', 'ig'), match => _jsx(Mark, { children: match }))
+                            : emailParticipants }), typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (_jsx(Count, { children: unreadEmailCount }))] }), _jsxs(Flex, { container: {
+                    justify: 'between'
+                }, as: StyledMessageAndDate, children: [_jsx(StyledMessage, { unreadEmailCount: unreadEmailCount, children: message }), _jsx(DateTimeDisplay, { value: timeStamp, variant: 'date', format: 'short' })] }), _jsx(MetaList, { items: items }), (undelivered || drafts) && (_jsxs(Flex, { container: {
+                    justify: 'start',
+                    gap: 1
+                }, as: StyledStatuses, children: [undelivered && _jsx(Status, { variant: 'urgent', children: t('undelivered') }), drafts && _jsx(Status, { variant: 'pending', children: t('draft', [], { count: Infinity }) })] }))] }));
+});
+export default EmailSummaryItem;
+//# sourceMappingURL=EmailSummaryItem.js.map

package/lib/components/Email/EmailSummaryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSummaryItem.js","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  defaultThemeProp,\n  ForwardProps,\n  Text,\n  Flex,\n  Count,\n  Sentiment,\n  MetaList,\n  DateTimeDisplay,\n  Status,\n  tryCatch,\n  useI18n,\n  replaceMatchWithElement,\n  Mark,\n  createStringMatcher\n} from '@pega/cosmos-react-core';\nimport { StyledMetaList } from '@pega/cosmos-react-core/lib/components/MetaList/MetaList';\n\nimport { EmailSummaryItemProps } from './Email.types';\n\nconst StyledMessage = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n  return css`\n    width: ${theme.base['content-width'].md};\n    text-align: start;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    margin-inline-end: ${theme.base.spacing};\n    margin-block-end: ${theme.base.spacing};\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      color: ${theme.base.palette.interactive};\n    `}\n  `;\n});\n\nexport const StyledMessageAndDate = styled.div`\n  white-space: nowrap;\n`;\n\nconst StyledParticipants = styled(Flex)<EmailSummaryItemProps>(({ unreadEmailCount, theme }) => {\n  return css`\n    ${unreadEmailCount !== undefined &&\n    unreadEmailCount > 0 &&\n    css`\n      position: relative;\n      &::before {\n        content: '';\n        position: absolute;\n        inset-inline: calc(-1.5 * ${theme.base.spacing});\n        inset-block-start: calc(0.8 * ${theme.base.spacing});\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 50%;\n        background-color: ${theme.base.palette.interactive};\n      }\n    `}\n  `;\n});\ninterface StyledEmailSummaryItemProps extends EmailSummaryItemProps {\n  isEmailItemActive: boolean;\n}\n\nconst StyledStatuses = styled.div``;\n\nexport const StyledEmailSummaryItem = styled.li<StyledEmailSummaryItemProps & ForwardProps>(\n  ({ theme }) => {\n    const hoverColor = tryCatch(() =>\n      mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n    );\n    return css`\n      width: 100%;\n      color: ${theme.base.palette['foreground-color']};\n      background-color: ${theme.base.palette['primary-background']};\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n      outline: none;\n      cursor: pointer;\n      ${StyledMetaList}, ${StyledMessageAndDate}, ${StyledStatuses} {\n        margin-block-start: ${theme.base.spacing};\n      }\n      & + & {\n        margin-inline-start: 0;\n      }\n\n      &[aria-selected='true'],\n      &[data-current='true'] {\n        background-color: ${theme.base.palette['secondary-background']};\n      }\n\n      &:hover,\n      &:focus-within {\n        background-color: ${hoverColor};\n      }\n      &:not(:last-child) {\n        border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      }\n    `;\n  }\n);\n\nStyledEmailSummaryItem.defaultProps = defaultThemeProp;\nStyledParticipants.defaultProps = defaultThemeProp;\nStyledMessage.defaultProps = defaultThemeProp;\n\nconst EmailSummaryItem: FunctionComponent<EmailSummaryItemProps & ForwardProps> = forwardRef(\n  function EmailSummaryItem(\n    {\n      id,\n      activeParticipants,\n      sentiment,\n      message,\n      timeStamp,\n      topic,\n      urgency,\n      active = false,\n      onSelect,\n      unreadEmailCount,\n      drafts,\n      undelivered,\n      searchQuery,\n      ...restProps\n    },\n    ref: EmailSummaryItemProps['ref']\n  ) {\n    const t = useI18n();\n    const items = useMemo(() => {\n      const itemList: ReactNode[] = [];\n\n      if (typeof topic === 'string' && topic.length > 0) {\n        itemList.push(\n          <Status variant='info' key='info'>\n            {topic}\n          </Status>\n        );\n      }\n\n      if (sentiment) {\n        itemList.push(<Sentiment variant={sentiment.variant} labelHidden />);\n      }\n\n      if (typeof urgency === 'number') {\n        itemList.push(<Text variant='secondary'>{`${t('priority')} ${urgency}`}</Text>);\n      }\n\n      return itemList;\n    }, [sentiment, topic, urgency]);\n\n    const emailParticipants = useMemo(() => {\n      let participants = '';\n      if (activeParticipants.length > 0) {\n        participants =\n          activeParticipants.length === 1\n            ? activeParticipants[0].fullName\n            : activeParticipants.map(participant => `${participant.shortName}`).join(', ');\n      }\n      return participants;\n    }, [activeParticipants]);\n    const itemStatus = `${unreadEmailCount ? `${t('unread')}, ` : ''}${\n      undelivered ? `${t('undelivered')}, ` : ''\n    }${drafts ? `${t('drafts')}, ` : ''}`;\n    return (\n      <StyledEmailSummaryItem\n        ref={ref}\n        {...restProps}\n        id={id}\n        onClick={() => onSelect(id)}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            onSelect(id);\n          }\n        }}\n        aria-selected={active}\n        aria-label={`${itemStatus}${emailParticipants}, ${message} ${timeStamp} ${topic} ${\n          sentiment?.variant\n        } ${t('priority')} ${urgency}`}\n        tabIndex={active ? 0 : -1}\n      >\n        <StyledParticipants\n          unreadEmailCount={unreadEmailCount}\n          container={{ justify: 'between', alignItems: 'center' }}\n        >\n          <Text variant='h4'>\n            {searchQuery\n              ? replaceMatchWithElement(\n                  emailParticipants,\n                  createStringMatcher(searchQuery, 'contains', 'ig'),\n                  match => <Mark>{match}</Mark>\n                )\n              : emailParticipants}\n          </Text>\n          {typeof unreadEmailCount === 'number' && unreadEmailCount > 0 && (\n            <Count>{unreadEmailCount}</Count>\n          )}\n        </StyledParticipants>\n        <Flex\n          container={{\n            justify: 'between'\n          }}\n          as={StyledMessageAndDate}\n        >\n          <StyledMessage unreadEmailCount={unreadEmailCount}>{message}</StyledMessage>\n          <DateTimeDisplay value={timeStamp} variant='date' format='short' />\n        </Flex>\n        <MetaList items={items} />\n        {(undelivered || drafts) && (\n          <Flex\n            container={{\n              justify: 'start',\n              gap: 1\n            }}\n            as={StyledStatuses}\n          >\n            {undelivered && <Status variant='urgent'>{t('undelivered')}</Status>}\n            {/* Passing count as infinity so that translation engine select correct form of draft,\n                 with [](second argument) as empty so that count is not shown */}\n            {drafts && <Status variant='pending'>{t('draft', [], { count: Infinity })}</Status>}\n          </Flex>\n        )}\n      </StyledEmailSummaryItem>\n    );\n  }\n);\n\nexport default EmailSummaryItem;\n"]}

package/lib/components/Email/EmailSummaryList.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { EmailSummaryListProps } from './Email.types';
+declare const EmailSummaryList: FunctionComponent<EmailSummaryListProps & ForwardProps>;
+export default EmailSummaryList;
+//# sourceMappingURL=EmailSummaryList.d.ts.map

package/lib/components/Email/EmailSummaryList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailSummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailSummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EAElB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAgBb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAyB,qBAAqB,EAAE,MAAM,eAAe,CAAC;AA6C7E,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAsJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Email/EmailSummaryList.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, useMemo, useState, useEffect, forwardRef, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, Count, defaultThemeProp, Flex, Icon, registerIcon, MenuButton, useConsolidatedRef, useI18n, menuHelpers, Progress, useItemIntersection, usePrevious, VisuallyHiddenText, EmptyState, calculateFontSize, StyledText, useArrows, debounce } from '@pega/cosmos-react-core';
+import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
+import EmailSummaryItem from './EmailSummaryItem';
+import { StyledEmailSummaryList, StyledLoadMore } from './Email.styles';
+registerIcon(filterIcon);
+const StyledEmailSummaryListContainer = styled(Flex)(({ theme }) => {
+    return css `
+    height: 100%;
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledEmailSummaryListContainer.defaultProps = defaultThemeProp;
+const StyledEmailSummaryListHeader = styled.div(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing}) ${theme.base.spacing};
+  `;
+});
+StyledEmailSummaryListHeader.defaultProps = defaultThemeProp;
+const StyledActionWrapper = styled(Flex)(({ theme }) => {
+    return css `
+    padding-block-start: ${theme.base.spacing};
+  `;
+});
+StyledActionWrapper.defaultProps = defaultThemeProp;
+const StyledFilterButton = styled(Button) `
+  margin-inline-start: auto;
+`;
+const StyledWorklist = styled(MenuButton)(({ theme }) => {
+    const { 'font-size': fontSize, 'font-scale': fontScale } = theme.base;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+    ${StyledText} {
+      font-weight: ${theme.base['font-weight']['semi-bold']};
+      font-size: ${fontSizes.m};
+    }
+  `;
+});
+StyledWorklist.defaultProps = defaultThemeProp;
+const EmailSummaryList = forwardRef(function EmailSummaryList({ loading = false, onLoadMore, categories, onCategoryClick, items, unreadEmailCount, filters, onFilterChange, onItemClick, emptyMessage, currentItemId, selectable = true, searchQuery, ...restProps }, ref) {
+    const t = useI18n();
+    const tablistRef = useConsolidatedRef(ref);
+    const tabRefs = items.map(() => createRef());
+    const prevEmail = usePrevious(items);
+    const [announcement, setAnnouncement] = useState('');
+    useArrows(tablistRef, {
+        cycle: true,
+        selector: ':scope > li',
+        dir: 'up-down',
+        updateTabIndex: false
+    }, [items]);
+    const buttonText = useMemo(() => {
+        if (categories)
+            return (menuHelpers.getSelected(categories)[0]?.primary ??
+                menuHelpers.flatten(categories)[0].primary);
+    }, [categories]);
+    const handleLoadMore = useCallback(debounce(() => {
+        if (!loading) {
+            onLoadMore?.();
+        }
+    }, 200), [loading]);
+    useItemIntersection(tablistRef, items.length - 1, handleLoadMore, ':scope > li');
+    useEffect(() => {
+        if (loading)
+            setAnnouncement(t('loading_email'));
+    }, [loading]);
+    useEffect(() => {
+        if (prevEmail) {
+            const difference = items.length - prevEmail.length;
+            if (difference)
+                setAnnouncement(t('new_emails_count', [difference], { count: difference }));
+        }
+    }, [items]);
+    useEffect(() => {
+        if (tabRefs.length > 0 && currentItemId) {
+            tabRefs[items.findIndex(item => item.id === currentItemId)]?.current?.focus();
+        }
+    }, [currentItemId]);
+    return (_jsxs(StyledEmailSummaryListContainer, { container: { direction: 'column' }, ...restProps, children: [!!(categories?.length || searchQuery) && (_jsx(StyledEmailSummaryListHeader, { children: _jsxs(StyledActionWrapper, { container: { justify: 'space-between', alignItems: 'center', gap: 0.5 }, children: [_jsx(Flex, { item: { shrink: 1 }, children: searchQuery ? (_jsx(StyledText, { variant: 'h3', children: t('search_results') })) : (_jsx(StyledWorklist, { text: buttonText, variant: 'text', popover: { portal: true }, menu: {
+                                    mode: 'single-select',
+                                    items: categories,
+                                    onItemClick: onCategoryClick
+                                } })) }), !searchQuery && typeof unreadEmailCount === 'number' && (_jsx(Count, { "aria-label": t('unread_email_count', [unreadEmailCount], {
+                                count: unreadEmailCount
+                            }), children: unreadEmailCount })), filters && (_jsx(StyledFilterButton, { variant: 'simple', label: t('email_filters'), icon: true, children: _jsx(Icon, { name: 'filter' }) }))] }) })), items.length > 0 ? (_jsxs(Flex, { role: selectable ? 'tablist' : undefined, container: { direction: 'column' }, as: StyledEmailSummaryList, ref: tablistRef, children: [_jsx(VisuallyHiddenText, { "aria-live": 'polite', children: announcement }), items.map((emailItem, i) => {
+                        const { id, ...emailItemProps } = emailItem;
+                        return (_jsx(EmailSummaryItem, { searchQuery: searchQuery, ref: tabRefs[i], id: id, ...emailItemProps, onSelect: (selectedItemId) => {
+                                onItemClick(selectedItemId);
+                            }, role: selectable ? 'tab' : undefined, active: selectable ? currentItemId === id : undefined }, id));
+                    }), loading && (_jsx(Flex, { container: { justify: 'center' }, as: StyledLoadMore, children: _jsx(Progress, { placement: 'inline' }) }))] })) : (_jsx(EmptyState, { message: emptyMessage }))] }));
+});
+export default EmailSummaryList;
+//# sourceMappingURL=EmailSummaryList.js.map