@pega/cosmos-react-social 10.0.0-build.1.9 → 10.0.0-build.2.0

package/lib/components/Chat/ChatSettingsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAS3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAClD,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAG,YAAY,CAmB7D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAc/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ChatSettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIxE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAS3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAClD,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAG,YAAY,CAiB7D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CAc/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/Chat/ChatSettingsPanel.js

@@ -5,7 +5,7 @@ import { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppSh
 import { StyledChatControlPanelIcon, StyledUserStatusIcon, userAvailabilityTheme } from './ChatSettingsPanel.styles';
 registerIcon(chatIcon);
 export const ChatControlPanelIcon = ({ status, label, ...restProps }) => {
-    return (_jsxs(StyledChatControlPanelIcon, { as: StyledAvatar, ...restProps, shape: 'circle', size: 'm', userStatus: status, children: [_jsx(Icon, { name: 'chat' }), status && userAvailabilityTheme[status].icon && (_jsx(StyledUserStatusIcon, { userStatus: status, children: _jsx(Icon, { name: userAvailabilityTheme[status].icon }) })), _jsx(VisuallyHiddenText, { children: label })] }));
+    return (_jsxs(StyledChatControlPanelIcon, { ...(status ? { as: StyledAvatar, shape: 'circle', size: 'm' } : {}), ...restProps, userStatus: status, children: [_jsx(Icon, { name: 'chat' }), status && userAvailabilityTheme[status].icon && (_jsx(StyledUserStatusIcon, { userStatus: status, children: _jsx(Icon, { name: userAvailabilityTheme[status].icon }) })), _jsx(VisuallyHiddenText, { children: label })] }));
 };
 const ChatSettingsPanel = ({ status, label, onClick, ...restProps }) => {
     const t = useI18n();

package/lib/components/Chat/ChatSettingsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,oBAAoB,GAE7B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,MAAC,0BAA0B,IACzB,EAAE,EAAE,YAAY,KACZ,SAAS,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,EACR,UAAU,EAAE,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,MAAM,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAC/C,KAAC,oBAAoB,IAAC,UAAU,EAAE,MAAM,YACtC,KAAC,IAAI,IAAC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAK,GAAI,GAC9B,CACxB,EACD,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACrB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAA6D,CAAC,EACnF,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACnD,MAAM,EAAE,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,GAAI,EAC7E,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n  Icon,\n  registerIcon,\n  StyledAvatar,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as chatIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { ChatSettingsPanelProps } from './Chat.types';\nimport {\n  StyledChatControlPanelIcon,\n  StyledUserStatusIcon,\n  userAvailabilityTheme\n} from './ChatSettingsPanel.styles';\n\nregisterIcon(chatIcon);\n\nexport const ChatControlPanelIcon: FunctionComponent<\n  OmitStrict<ChatSettingsPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, ...restProps }) => {\n  return (\n    <StyledChatControlPanelIcon\n      as={StyledAvatar}\n      {...restProps}\n      shape='circle'\n      size='m'\n      userStatus={status}\n    >\n      <Icon name='chat' />\n      {status && userAvailabilityTheme[status].icon && (\n        <StyledUserStatusIcon userStatus={status}>\n          <Icon name={userAvailabilityTheme[status].icon!} />\n        </StyledUserStatusIcon>\n      )}\n      <VisuallyHiddenText>{label}</VisuallyHiddenText>\n    </StyledChatControlPanelIcon>\n  );\n};\n\nconst ChatSettingsPanel: FunctionComponent<ChatSettingsPanelProps & ForwardProps> = ({\n  status,\n  label,\n  onClick,\n  ...restProps\n}) => {\n  const t = useI18n();\n  return (\n    <NavigationListItem\n      primary={status ? `${label} (${t(status)})` : label}\n      visual={<ChatControlPanelIcon status={status} label={label} {...restProps} />}\n      onClick={onClick}\n    />\n  );\n};\n\nexport default ChatSettingsPanel;\n"]}
+{"version":3,"file":"ChatSettingsPanel.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gEAAgE,CAAC;AAGpG,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,MAAM,CAAC,MAAM,oBAAoB,GAE7B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IACtC,OAAO,CACL,MAAC,0BAA0B,OACrB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAChE,SAAS,EACb,UAAU,EAAE,MAAM,aAElB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACnB,MAAM,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAC/C,KAAC,oBAAoB,IAAC,UAAU,EAAE,MAAM,YACtC,KAAC,IAAI,IAAC,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,IAAK,GAAI,GAC9B,CACxB,EACD,KAAC,kBAAkB,cAAE,KAAK,GAAsB,IACrB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAA6D,CAAC,EACnF,MAAM,EACN,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,KAAC,kBAAkB,IACjB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACnD,MAAM,EAAE,KAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,SAAS,GAAI,EAC7E,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport {\n  Icon,\n  registerIcon,\n  StyledAvatar,\n  useI18n,\n  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, OmitStrict } from '@pega/cosmos-react-core';\nimport * as chatIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat.icon';\nimport { NavigationListItem } from '@pega/cosmos-react-core/lib/components/AppShell/NavigationList';\n\nimport type { ChatSettingsPanelProps } from './Chat.types';\nimport {\n  StyledChatControlPanelIcon,\n  StyledUserStatusIcon,\n  userAvailabilityTheme\n} from './ChatSettingsPanel.styles';\n\nregisterIcon(chatIcon);\n\nexport const ChatControlPanelIcon: FunctionComponent<\n  OmitStrict<ChatSettingsPanelProps, 'onClick'> & ForwardProps\n> = ({ status, label, ...restProps }) => {\n  return (\n    <StyledChatControlPanelIcon\n      {...(status ? { as: StyledAvatar, shape: 'circle', size: 'm' } : {})}\n      {...restProps}\n      userStatus={status}\n    >\n      <Icon name='chat' />\n      {status && userAvailabilityTheme[status].icon && (\n        <StyledUserStatusIcon userStatus={status}>\n          <Icon name={userAvailabilityTheme[status].icon!} />\n        </StyledUserStatusIcon>\n      )}\n      <VisuallyHiddenText>{label}</VisuallyHiddenText>\n    </StyledChatControlPanelIcon>\n  );\n};\n\nconst ChatSettingsPanel: FunctionComponent<ChatSettingsPanelProps & ForwardProps> = ({\n  status,\n  label,\n  onClick,\n  ...restProps\n}) => {\n  const t = useI18n();\n  return (\n    <NavigationListItem\n      primary={status ? `${label} (${t(status)})` : label}\n      visual={<ChatControlPanelIcon status={status} label={label} {...restProps} />}\n      onClick={onClick}\n    />\n  );\n};\n\nexport default ChatSettingsPanel;\n"]}

package/lib/components/Chat/ChatSettingsPanel.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIjE,eAAO,MAAM,qBAAqB,EAAE,MAAM,CACxC,gBAAgB,EAChB;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAKvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBACd,gBAAgB;YAkB9B,CAAC;AAIF,eAAO,MAAM,oBAAoB;iBAtBlB,gBAAgB;;;mBAqC7B,CAAC;AAIH,eAAO,MAAM,0BAA0B;iBAzCxB,gBAAgB;;;mBAkD9B,CAAC"}
+{"version":3,"file":"ChatSettingsPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIjE,eAAO,MAAM,qBAAqB,EAAE,MAAM,CACxC,gBAAgB,EAChB;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,UAAU,CAAA;CAAE,CAKvC,CAAC;AAEF,eAAO,MAAM,gBAAgB;iBACd,gBAAgB;YAqB9B,CAAC;AAIF,eAAO,MAAM,oBAAoB;iBAzBlB,gBAAgB;;;mBAwC7B,CAAC;AAIH,eAAO,MAAM,0BAA0B;iBA5CxB,gBAAgB;;;mBAqD9B,CAAC"}

package/lib/components/Chat/ChatSettingsPanel.styles.js

@@ -9,9 +9,12 @@ export const userAvailabilityTheme = {
     temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }
 };
 export const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }) => {
-    const [colorName, colorVariant] = userStatus
-        ? userAvailabilityTheme[userStatus].color
-        : ['slate', 'light'];
+    if (!userStatus) {
+        return css `
+        background-color: transparent;
+      `;
+    }
+    const [colorName, colorVariant] = userAvailabilityTheme[userStatus].color;
     const bgColor = colors[colorName][colorVariant];
     const fgColor = readableColor(bgColor);
     return css `

package/lib/components/Chat/ChatSettingsPanel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSettingsPanel.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,mCAAmC,EACpC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AAItF,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;IACxC,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;IACxD,sBAAsB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAe,UAAU;QACtD,CAAC,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK;QACzC,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvB,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,eAAe,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnF,OAAO,GAAG,CAAA;;8BAEkB,eAAe;;MAEvC,UAAU;;;;;GAKb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;IAC9D,oBAAoB;;;;;;;;CAQvB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  registerIcon,\n  StyledIcon,\n  readableColor,\n  calculateBackgroundAndContrastColor\n} from '@pega/cosmos-react-core';\nimport type { IconName } from '@pega/cosmos-react-core';\nimport * as minus from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as clock from '@pega/cosmos-react-core/lib/components/Icon/icons/clock.icon';\n\nimport type { ColorTheme, UserAvailability } from './Chat.types';\n\nregisterIcon(minus, clock);\n\nexport const userAvailabilityTheme: Record<\n  UserAvailability,\n  { icon?: IconName; color: ColorTheme }\n> = {\n  available: { color: ['green', 'light'] },\n  unavailable: { icon: 'minus', color: ['red', 'medium'] },\n  temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }\n};\n\nexport const StyledStatusIcon = styled.div<{\n  userStatus?: UserAvailability;\n}>(\n  ({\n    theme: {\n      base: { colors }\n    },\n    userStatus\n  }) => {\n    const [colorName, colorVariant]: ColorTheme = userStatus\n      ? userAvailabilityTheme[userStatus].color\n      : ['slate', 'light'];\n    const bgColor = colors[colorName][colorVariant];\n    const fgColor = readableColor(bgColor);\n    return css`\n      background-color: ${bgColor};\n      color: ${fgColor};\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n  return css`\n    border-radius: 50%;\n    border: 0.0625rem solid ${backgroundColor};\n\n    ${StyledIcon} {\n      display: block;\n      width: 100%;\n      margin: 0 auto;\n    }\n  `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledChatControlPanelIcon = styled(StyledStatusIcon)`\n  ${StyledUserStatusIcon} {\n    position: absolute;\n    width: 0.875rem;\n    height: 0.875rem;\n    z-index: 1;\n    inset-block-start: -0.25rem;\n    inset-inline-end: -0.25rem;\n  }\n`;\n"]}
+{"version":3,"file":"ChatSettingsPanel.styles.js","sourceRoot":"","sources":["../../../src/components/Chat/ChatSettingsPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,mCAAmC,EACpC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,8DAA8D,CAAC;AAItF,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE3B,MAAM,CAAC,MAAM,qBAAqB,GAG9B;IACF,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;IACxC,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE;IACxD,sBAAsB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGxC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,GAAG,CAAA;;OAET,CAAC;IACJ,CAAC;IACD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAe,qBAAqB,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC;IACtF,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;IAC3D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACzE,MAAM,EAAE,eAAe,EAAE,GAAG,mCAAmC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEnF,OAAO,GAAG,CAAA;;8BAEkB,eAAe;;MAEvC,UAAU;;;;;GAKb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;IAC9D,oBAAoB;;;;;;;;CAQvB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  registerIcon,\n  StyledIcon,\n  readableColor,\n  calculateBackgroundAndContrastColor\n} from '@pega/cosmos-react-core';\nimport type { IconName } from '@pega/cosmos-react-core';\nimport * as minus from '@pega/cosmos-react-core/lib/components/Icon/icons/minus.icon';\nimport * as clock from '@pega/cosmos-react-core/lib/components/Icon/icons/clock.icon';\n\nimport type { ColorTheme, UserAvailability } from './Chat.types';\n\nregisterIcon(minus, clock);\n\nexport const userAvailabilityTheme: Record<\n  UserAvailability,\n  { icon?: IconName; color: ColorTheme }\n> = {\n  available: { color: ['green', 'light'] },\n  unavailable: { icon: 'minus', color: ['red', 'medium'] },\n  temporarilyUnavailable: { icon: 'clock', color: ['orange', 'light'] }\n};\n\nexport const StyledStatusIcon = styled.div<{\n  userStatus?: UserAvailability;\n}>(\n  ({\n    theme: {\n      base: { colors }\n    },\n    userStatus\n  }) => {\n    if (!userStatus) {\n      return css`\n        background-color: transparent;\n      `;\n    }\n    const [colorName, colorVariant]: ColorTheme = userAvailabilityTheme[userStatus].color;\n    const bgColor = colors[colorName][colorVariant];\n    const fgColor = readableColor(bgColor);\n    return css`\n      background-color: ${bgColor};\n      color: ${fgColor};\n    `;\n  }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n\n  return css`\n    border-radius: 50%;\n    border: 0.0625rem solid ${backgroundColor};\n\n    ${StyledIcon} {\n      display: block;\n      width: 100%;\n      margin: 0 auto;\n    }\n  `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledChatControlPanelIcon = styled(StyledStatusIcon)`\n  ${StyledUserStatusIcon} {\n    position: absolute;\n    width: 0.875rem;\n    height: 0.875rem;\n    z-index: 1;\n    inset-block-start: -0.25rem;\n    inset-inline-end: -0.25rem;\n  }\n`;\n"]}

package/lib/components/Email/Email.styles.js

@@ -196,9 +196,9 @@ export const StyledHeader = styled.header(({ theme }) => {
 StyledHeader.defaultProps = defaultThemeProp;
 export const StyledList = styled.div(() => {
     return css `
-    --list-height: calc(100vh - var(--appshell-offset));
+    --list-height: calc(100vh - var(--appshell-top-offset));
     position: sticky;
-    inset-block-start: var(--appshell-offset);
+    inset-block-start: var(--appshell-top-offset);
     height: calc(
       var(--list-height) - var(--header-height, 0rem) - calc(2 * var(--email-container-padding))
     );
@@ -211,7 +211,7 @@ export const StyledList = styled.div(() => {
 StyledList.defaultProps = defaultThemeProp;
 export const StyledEmailCaseViewHeader = styled.header(() => {
     return css `
-    top: var(--appshell-offset);
+    top: var(--appshell-top-offset);
     height: 4rem;
     padding-inline-start: 0;
   `;
@@ -225,7 +225,7 @@ export const StyledUtilitiesContainer = styled.div(({ showExpandedUtilities }) =
           `
         : css `
             position: sticky;
-            top: calc(var(--appshell-offset));
+            top: calc(var(--appshell-top-offset));
             height: fit-content;
           `}
     `;
@@ -233,17 +233,17 @@ export const StyledUtilitiesContainer = styled.div(({ showExpandedUtilities }) =
 export const StyledGridContainer = styled.div(({ theme, showExpandedUtilities }) => {
     return css `
     min-height: calc(
-      100vh - var(--appshell-offset, 0rem) - calc(2 * var(--email-container-padding))
+      100vh - var(--appshell-top-offset, 0rem) - calc(2 * var(--email-container-padding))
     );
     background-color: ${theme.base.palette['app-background']};
-    inset-block-start: var(--appshell-offset);
+    inset-block-start: var(--appshell-top-offset);
     ${!showExpandedUtilities &&
         css `
       width: auto;
     `}
 
     ${StyledUtilitiesContainer} {
-      inset-block-start: var(--appshell-offset);
+      inset-block-start: var(--appshell-top-offset);
     }
   `;
 });
@@ -313,7 +313,7 @@ export const StyledEmailCaseViewColumns = styled.div(() => {
     &:has(${StyledEmailCaseViewHeader}) {
       --case-view-header-height: 4rem;
       ${StyledUtilitiesContainer} {
-        inset-inline-start: calc(var(--appshell-offset) + var(--case-view-header-height));
+        inset-inline-start: calc(var(--appshell-top-offset) + var(--case-view-header-height));
       }
     }
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"Email.styles.js","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  EmailDisplay,\n  FieldValueList,\n  MenuButton,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledInlineFieldValueRow,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual,\n  tryCatch,\n  readableColor,\n  readableHue,\n  nlpColors,\n  StyledPopover,\n  StyledButton,\n  StyledEmptyState,\n  calculateBackgroundAndContrastColor,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport type { EmailEntityProps, EmailShellProps } from './Email.types';\nimport { StyledEmailSummaryItem, StyledMessageAndDate } from './EmailSummaryItem';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n  min-height: 0.5rem;\n  min-width: 0.5rem;\n  flex-shrink: 0;\n`;\n\nexport const StyledImportantText = styled(Text)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n  `;\n});\n\nStyledImportantText.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-inline-end: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nStyledAttachmentButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n  return css`\n    grid-column-gap: ${theme.base.spacing};\n    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n    ${StyledVisual},${StyledSummaryItemActions} {\n      align-self: flex-start;\n    }\n    ${StyledSecondary} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesButton = styled(Button)(({ theme }) => {\n  return css`\n    & + & {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesButton.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesMenuButton = styled(MenuButton)(({ theme }) => {\n  return css`\n    &&& {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailBody = styled.div``;\n\nexport const StyledFromEmailDisplay = styled(EmailDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSize.m};\n  `;\n});\n\nStyledFromEmailDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledEmailDisplay = styled.span`\n  font-size: inherit;\n`;\n\nexport const StyledEmailPrimaryFieldValueList = styled(FieldValueList)`\n  grid-template-columns: auto 1fr;\n`;\n\nexport const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ theme }) => {\n  return css`\n    grid-template-columns: 1fr;\n    gap: 0;\n    padding: ${theme.base.spacing} 0;\n    ${StyledInlineFieldValueRow}:not(:last-child) > ${StyledFieldValue},\n    ${StyledFieldValue}:not(:last-child) {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledFieldName} {\n      margin-bottom: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailMoreInfoPopover = styled.div`\n  max-width: 30rem;\n`;\n\nStyledEmailMoreInfoPopover.defaultProps = defaultThemeProp;\n\nexport const StyledSecondarySeparator = styled.div(({ theme }) => {\n  return css`\n    margin: 0 calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledSecondarySeparator.defaultProps = defaultThemeProp;\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const variant = entity.variant;\n  const backgroundColor = readableHue(\n    nlpColors[variant % nlpColors.length],\n    theme.base.palette['primary-background']\n  );\n  const textColor = tryCatch(() => readableColor(backgroundColor));\n  return css`\n    border-radius: calc(${theme.base['border-radius']} / 3);\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${backgroundColor};\n    color: ${textColor};\n    display: inline-block;\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nexport const StyledEntityList = styled(FieldValueList)(({ theme }) => {\n  const textColor = tryCatch(() => readableColor(theme.base.palette['primary-background']));\n  return css`\n    ${StyledFieldName} {\n      color: ${textColor};\n    }\n    ${StyledEmailEntity} {\n      padding: 0 calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEntityList.defaultProps = defaultThemeProp;\n\nexport const StyledForwardedContentToggle = styled(Button)`\n  align-self: flex-start;\n`;\n\nexport const StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin: ${theme.base.spacing} 0;\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenuFieldSelector = styled.div<{\n  selected?: boolean;\n}>(({ theme, selected }) => {\n  const background = selected\n    ? theme.base.colors.green.medium\n    : theme.base.palette['primary-background'];\n  const borderColor = selected\n    ? theme.base.colors.green['extra-light']\n    : theme.base.palette['primary-background'];\n  return css`\n    background-color: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n    background-clip: content-box;\n    padding: 0.0625rem;\n  `;\n});\n\nStyledContextMenuFieldSelector.defaultProps = defaultThemeProp;\n\nexport const StyledEmailShellHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps & { singleConversation?: boolean }>(\n  props => {\n    const {\n      theme: { base },\n      singleConversation\n    } = props;\n    return css`\n      min-width: 25rem;\n      height: 100%;\n      border-radius: ${base['border-radius']};\n      > ${StyledEmailShellHeader} {\n        padding-inline: calc(2 * ${base.spacing}) ${base.spacing};\n        padding-block: ${base.spacing};\n        background: ${base.palette['primary-background']};\n        border-radius: ${base['border-radius']};\n\n        ${singleConversation &&\n        `\n          border-radius: ${base['border-radius']} ${base['border-radius']} 0 0;\n          border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      `}\n      }\n      > ${StyledEmailConversationList} {\n        height: 100%;\n        overflow-y: auto;\n        list-style-type: none;\n      }\n    `;\n  }\n);\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenu = styled.div(({ theme }) => {\n  return css`\n    header {\n      background-color: ${theme.base.palette['secondary-background']};\n    }\n  `;\n});\n\nStyledContextMenu.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  return css`\n    height: var(--header-height);\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(() => {\n  return css`\n    --list-height: calc(100vh - var(--appshell-offset));\n    position: sticky;\n    inset-block-start: var(--appshell-offset);\n    height: calc(\n      var(--list-height) - var(--header-height, 0rem) - calc(2 * var(--email-container-padding))\n    );\n\n    &:has(${StyledHeader}) {\n      --header-height: 3rem;\n    }\n  `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewHeader = styled.header(() => {\n  return css`\n    top: var(--appshell-offset);\n    height: 4rem;\n    padding-inline-start: 0;\n  `;\n});\n\nexport const StyledUtilitiesContainer = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities }) => {\n    return css`\n      ${showExpandedUtilities\n        ? css`\n            flex-shrink: 0;\n            max-width: 23rem;\n          `\n        : css`\n            position: sticky;\n            top: calc(var(--appshell-offset));\n            height: fit-content;\n          `}\n    `;\n  }\n);\n\nexport const StyledGridContainer = styled.div<{\n  showExpandedUtilities?: boolean;\n}>(({ theme, showExpandedUtilities }) => {\n  return css`\n    min-height: calc(\n      100vh - var(--appshell-offset, 0rem) - calc(2 * var(--email-container-padding))\n    );\n    background-color: ${theme.base.palette['app-background']};\n    inset-block-start: var(--appshell-offset);\n    ${!showExpandedUtilities &&\n    css`\n      width: auto;\n    `}\n\n    ${StyledUtilitiesContainer} {\n      inset-block-start: var(--appshell-offset);\n    }\n  `;\n});\n\nStyledGridContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCollapsedUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: center;\n  `;\n});\n\nStyledCollapsedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: flex-end;\n    margin-inline-end: 0.375rem;\n    height: var(--case-view-header-height, 0);\n  `;\n});\n\nStyledExpandedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: end;\n    margin-block-start: 3rem;\n  `;\n});\n\nStyledDrawerUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities }) => {\n    return css`\n      width: inherit;\n      ${!showExpandedUtilities &&\n      css`\n        display: none;\n      `}\n    `;\n  }\n);\n\nexport const StyledEmailActions = styled.div(() => {\n  return css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n    ${StyledButton} + ${StyledPopover} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nexport const StyledUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities, theme }) => {\n    return css`\n      ${showExpandedUtilities &&\n      css`\n        width: 25rem;\n      `}\n      margin-inline-end: calc(2 * ${theme.base.spacing});\n    `;\n  }\n);\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewColumns = styled.div(() => {\n  return css`\n    --case-view-header-height: 0;\n    ${StyledEmptyState} {\n      flex-grow: 1;\n    }\n    ${StyledEmailShell} {\n      min-width: 0;\n    }\n    &:has(${StyledEmailCaseViewHeader}) {\n      --case-view-header-height: 4rem;\n      ${StyledUtilitiesContainer} {\n        inset-inline-start: calc(var(--appshell-offset) + var(--case-view-header-height));\n      }\n    }\n  `;\n});\n\nexport const StyledEmailCaseViewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: calc(100vh - 3rem);\n    z-index: ${theme.base['z-index'].drawer - 1};\n    top: 3rem;\n  `;\n});\n\nStyledEmailCaseViewDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewContainer = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledEmailCaseViewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailManagerContainer = styled.div(({ theme }) => {\n  return css`\n    --email-container-padding: calc(2 * ${theme.base.spacing});\n    padding: var(--email-container-padding);\n    ${StyledEmailCaseViewContainer} {\n      padding-inline: 0;\n    }\n  `;\n});\n\nStyledEmailManagerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailSummaryList = styled.ol(({ theme }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus {\n      ${StyledEmailSummaryItem}[data-current='true'] {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailNotificationList = styled(StyledEmailSummaryList)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  return css`\n    ${StyledEmailSummaryItem} {\n      background: ${backgroundColor};\n      &:hover,\n      &:focus-within {\n        background-color: ${hoverColor};\n      }\n    }\n    ${StyledMessageAndDate} {\n      flex-wrap: wrap;\n    }\n  `;\n});\n\nStyledEmailNotificationList.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Email.styles.js","sourceRoot":"","sources":["../../../src/components/Email/Email.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  EmailDisplay,\n  FieldValueList,\n  MenuButton,\n  StyledFieldName,\n  StyledFieldValue,\n  StyledInlineFieldValueRow,\n  StyledSecondary,\n  StyledSummaryItemActions,\n  StyledVisual,\n  tryCatch,\n  readableColor,\n  readableHue,\n  nlpColors,\n  StyledPopover,\n  StyledButton,\n  StyledEmptyState,\n  calculateBackgroundAndContrastColor,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport type { EmailEntityProps, EmailShellProps } from './Email.types';\nimport { StyledEmailSummaryItem, StyledMessageAndDate } from './EmailSummaryItem';\n\nexport const StyledEmailMoreInfoButton = styled.button`\n  min-height: 0.5rem;\n  min-width: 0.5rem;\n  flex-shrink: 0;\n`;\n\nexport const StyledImportantText = styled(Text)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n  `;\n});\n\nStyledImportantText.defaultProps = defaultThemeProp;\n\nexport const StyledAttachmentButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-inline-end: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nStyledAttachmentButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailHeader = styled.div(({ theme }) => {\n  return css`\n    grid-column-gap: ${theme.base.spacing};\n    padding: 0 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n    ${StyledVisual},${StyledSummaryItemActions} {\n      align-self: flex-start;\n    }\n    ${StyledSecondary} {\n      margin-top: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailHeader.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesButton = styled(Button)(({ theme }) => {\n  return css`\n    & + & {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesButton.defaultProps = defaultThemeProp;\n\nexport const StyledSuggestedRepliesMenuButton = styled(MenuButton)(({ theme }) => {\n  return css`\n    &&& {\n      margin-inline-start: 0;\n    }\n    margin-block-start: ${theme.base.spacing};\n    :not(:last-child) {\n      margin-inline-end: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledSuggestedRepliesMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledEmailBody = styled.div``;\n\nexport const StyledFromEmailDisplay = styled(EmailDisplay)(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    font-size: ${fontSize.m};\n  `;\n});\n\nStyledFromEmailDisplay.defaultProps = defaultThemeProp;\n\nexport const StyledEmailDisplay = styled.span`\n  font-size: inherit;\n`;\n\nexport const StyledEmailPrimaryFieldValueList = styled(FieldValueList)`\n  grid-template-columns: auto 1fr;\n`;\n\nexport const StyledEmailSecondaryFieldValueList = styled(FieldValueList)(({ theme }) => {\n  return css`\n    grid-template-columns: 1fr;\n    gap: 0;\n    padding: ${theme.base.spacing} 0;\n    ${StyledInlineFieldValueRow}:not(:last-child) > ${StyledFieldValue},\n    ${StyledFieldValue}:not(:last-child) {\n      margin-bottom: calc(2 * ${theme.base.spacing});\n    }\n    ${StyledFieldName} {\n      margin-bottom: calc(0.25 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEmailSecondaryFieldValueList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailMoreInfoPopover = styled.div`\n  max-width: 30rem;\n`;\n\nStyledEmailMoreInfoPopover.defaultProps = defaultThemeProp;\n\nexport const StyledSecondarySeparator = styled.div(({ theme }) => {\n  return css`\n    margin: 0 calc(${theme.base.spacing} / 2);\n  `;\n});\n\nStyledSecondarySeparator.defaultProps = defaultThemeProp;\n\nexport const StyledEmailEntity = styled.mark<EmailEntityProps>(({ entity, theme }) => {\n  const variant = entity.variant;\n  const backgroundColor = readableHue(\n    nlpColors[variant % nlpColors.length],\n    theme.base.palette['primary-background']\n  );\n  const textColor = tryCatch(() => readableColor(backgroundColor));\n  return css`\n    border-radius: calc(${theme.base['border-radius']} / 3);\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${backgroundColor};\n    color: ${textColor};\n    display: inline-block;\n  `;\n});\n\nStyledEmailEntity.defaultProps = defaultThemeProp;\n\nexport const StyledEntityList = styled(FieldValueList)(({ theme }) => {\n  const textColor = tryCatch(() => readableColor(theme.base.palette['primary-background']));\n  return css`\n    ${StyledFieldName} {\n      color: ${textColor};\n    }\n    ${StyledEmailEntity} {\n      padding: 0 calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledEntityList.defaultProps = defaultThemeProp;\n\nexport const StyledForwardedContentToggle = styled(Button)`\n  align-self: flex-start;\n`;\n\nexport const StyledLoadMore = styled.div(({ theme }) => {\n  return css`\n    margin: ${theme.base.spacing} 0;\n    min-height: 2rem;\n    min-width: 2rem;\n  `;\n});\n\nStyledLoadMore.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenuFieldSelector = styled.div<{\n  selected?: boolean;\n}>(({ theme, selected }) => {\n  const background = selected\n    ? theme.base.colors.green.medium\n    : theme.base.palette['primary-background'];\n  const borderColor = selected\n    ? theme.base.colors.green['extra-light']\n    : theme.base.palette['primary-background'];\n  return css`\n    background-color: ${background};\n    border: 0.0625rem solid ${borderColor};\n    border-radius: 100%;\n    display: inline-block;\n    height: 0.625rem;\n    width: 0.625rem;\n    background-clip: content-box;\n    padding: 0.0625rem;\n  `;\n});\n\nStyledContextMenuFieldSelector.defaultProps = defaultThemeProp;\n\nexport const StyledEmailShellHeader = styled.header``;\nexport const StyledEmailConversationList = styled.ul``;\nexport const StyledEmailShell = styled.div<EmailShellProps & { singleConversation?: boolean }>(\n  props => {\n    const {\n      theme: { base },\n      singleConversation\n    } = props;\n    return css`\n      min-width: 25rem;\n      height: 100%;\n      border-radius: ${base['border-radius']};\n      > ${StyledEmailShellHeader} {\n        padding-inline: calc(2 * ${base.spacing}) ${base.spacing};\n        padding-block: ${base.spacing};\n        background: ${base.palette['primary-background']};\n        border-radius: ${base['border-radius']};\n\n        ${singleConversation &&\n        `\n          border-radius: ${base['border-radius']} ${base['border-radius']} 0 0;\n          border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      `}\n      }\n      > ${StyledEmailConversationList} {\n        height: 100%;\n        overflow-y: auto;\n        list-style-type: none;\n      }\n    `;\n  }\n);\n\nStyledEmailShell.defaultProps = defaultThemeProp;\n\nexport const StyledContextMenu = styled.div(({ theme }) => {\n  return css`\n    header {\n      background-color: ${theme.base.palette['secondary-background']};\n    }\n  `;\n});\n\nStyledContextMenu.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  return css`\n    height: var(--header-height);\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.div(() => {\n  return css`\n    --list-height: calc(100vh - var(--appshell-top-offset));\n    position: sticky;\n    inset-block-start: var(--appshell-top-offset);\n    height: calc(\n      var(--list-height) - var(--header-height, 0rem) - calc(2 * var(--email-container-padding))\n    );\n\n    &:has(${StyledHeader}) {\n      --header-height: 3rem;\n    }\n  `;\n});\n\nStyledList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewHeader = styled.header(() => {\n  return css`\n    top: var(--appshell-top-offset);\n    height: 4rem;\n    padding-inline-start: 0;\n  `;\n});\n\nexport const StyledUtilitiesContainer = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities }) => {\n    return css`\n      ${showExpandedUtilities\n        ? css`\n            flex-shrink: 0;\n            max-width: 23rem;\n          `\n        : css`\n            position: sticky;\n            top: calc(var(--appshell-top-offset));\n            height: fit-content;\n          `}\n    `;\n  }\n);\n\nexport const StyledGridContainer = styled.div<{\n  showExpandedUtilities?: boolean;\n}>(({ theme, showExpandedUtilities }) => {\n  return css`\n    min-height: calc(\n      100vh - var(--appshell-top-offset, 0rem) - calc(2 * var(--email-container-padding))\n    );\n    background-color: ${theme.base.palette['app-background']};\n    inset-block-start: var(--appshell-top-offset);\n    ${!showExpandedUtilities &&\n    css`\n      width: auto;\n    `}\n\n    ${StyledUtilitiesContainer} {\n      inset-block-start: var(--appshell-top-offset);\n    }\n  `;\n});\n\nStyledGridContainer.defaultProps = defaultThemeProp;\n\nexport const StyledCollapsedUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: center;\n  `;\n});\n\nStyledCollapsedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: flex-end;\n    margin-inline-end: 0.375rem;\n    height: var(--case-view-header-height, 0);\n  `;\n});\n\nStyledExpandedUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerUtilitiesToggle = styled.button(({ theme }) => {\n  return css`\n    color: ${theme.base.palette['foreground-color']};\n    align-self: end;\n    margin-block-start: 3rem;\n  `;\n});\n\nStyledDrawerUtilitiesToggle.defaultProps = defaultThemeProp;\n\nexport const StyledExpandedUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities }) => {\n    return css`\n      width: inherit;\n      ${!showExpandedUtilities &&\n      css`\n        display: none;\n      `}\n    `;\n  }\n);\n\nexport const StyledEmailActions = styled.div(() => {\n  return css`\n    ${StyledButton} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n    ${StyledButton} + ${StyledPopover} + ${StyledButton} {\n      margin-inline-start: 0;\n    }\n  `;\n});\n\nexport const StyledUtilities = styled.div<{ showExpandedUtilities: boolean }>(\n  ({ showExpandedUtilities, theme }) => {\n    return css`\n      ${showExpandedUtilities &&\n      css`\n        width: 25rem;\n      `}\n      margin-inline-end: calc(2 * ${theme.base.spacing});\n    `;\n  }\n);\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewColumns = styled.div(() => {\n  return css`\n    --case-view-header-height: 0;\n    ${StyledEmptyState} {\n      flex-grow: 1;\n    }\n    ${StyledEmailShell} {\n      min-width: 0;\n    }\n    &:has(${StyledEmailCaseViewHeader}) {\n      --case-view-header-height: 4rem;\n      ${StyledUtilitiesContainer} {\n        inset-inline-start: calc(var(--appshell-top-offset) + var(--case-view-header-height));\n      }\n    }\n  `;\n});\n\nexport const StyledEmailCaseViewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: calc(100vh - 3rem);\n    z-index: ${theme.base['z-index'].drawer - 1};\n    top: 3rem;\n  `;\n});\n\nStyledEmailCaseViewDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailCaseViewContainer = styled.div(({ theme }) => {\n  return css`\n    padding-inline: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledEmailCaseViewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailManagerContainer = styled.div(({ theme }) => {\n  return css`\n    --email-container-padding: calc(2 * ${theme.base.spacing});\n    padding: var(--email-container-padding);\n    ${StyledEmailCaseViewContainer} {\n      padding-inline: 0;\n    }\n  `;\n});\n\nStyledEmailManagerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmailSummaryList = styled.ol(({ theme }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus {\n      ${StyledEmailSummaryItem}[data-current='true'] {\n        box-shadow: ${theme.base.shadow['focus-inset']};\n      }\n    }\n  `;\n});\nStyledEmailSummaryList.defaultProps = defaultThemeProp;\n\nexport const StyledEmailNotificationList = styled(StyledEmailSummaryList)(({ theme }) => {\n  const navBg = theme.components['app-shell'].nav.background;\n  const navFgColor = theme.components['app-shell'].nav['foreground-color'];\n  const { backgroundColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n\n  return css`\n    ${StyledEmailSummaryItem} {\n      background: ${backgroundColor};\n      &:hover,\n      &:focus-within {\n        background-color: ${hoverColor};\n      }\n    }\n    ${StyledMessageAndDate} {\n      flex-wrap: wrap;\n    }\n  `;\n});\n\nStyledEmailNotificationList.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"EmailCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailCaseView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAgBjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAiB5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAwKxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"EmailCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/Email/EmailCaseView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAgBjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAiB5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,GAAG,YAAY,CAqKxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Email/EmailCaseView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState, useMemo, useRef } from 'react';
-import { Button, Drawer, Flex, Icon, useBreakpoint, useDirection, useI18n, Text, windowIsAvailable, useScrollStick, useElement, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { Button, Drawer, Flex, Icon, useBreakpoint, useComputedLengthPx, useDirection, useI18n, Text, useScrollStick, useElement, useConsolidatedRef } from '@pega/cosmos-react-core';
 import UtilitiesSummary from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';
 import { StyledCaseDrawerContent } from '@pega/cosmos-react-work';
 import { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
@@ -12,15 +12,12 @@ const EmailCaseView = ({ header, content, banners, utilities, utilitiesSummaryIt
     const emailCaseRef = useConsolidatedRef(setEmailCaseEl);
     const isMediumOrAbove = useBreakpoint('md', { breakpointRef: emailCaseRef });
     const [showExpandedUtilities, setShowExpandedUtilities] = useState(defaultUtilitiesExpanded || false);
+    const appshellOffsetPx = useComputedLengthPx(emailCaseEl, '--appshell-top-offset');
     // Apply sticky columns
     const scrollStickOptions = useRef({
         elements: [null, null]
     });
-    const scrollOffset = useMemo(() => {
-        if (!windowIsAvailable || !emailCaseEl)
-            return 0;
-        return parseFloat(window.getComputedStyle(emailCaseEl).getPropertyValue('--appshell-offset'));
-    }, [emailCaseEl]);
+    const scrollOffset = appshellOffsetPx;
     useScrollStick(isMediumOrAbove ? { ...scrollStickOptions.current, offset: scrollOffset } : undefined);
     const utilitiesIcon = showExpandedUtilities
         ? `move-${direction.end}-solid`

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

@@ -1 +1 @@
-{"version":3,"file":"EmailCaseView.js","sourceRoot":"","sources":["../../../src/components/Email/EmailCaseView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACd,UAAU,EACV,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,gBAAgB,MAAM,kEAAkE,CAAC;AAChG,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,oEAAoE,CAAC;AAEpG,OAAO,EACL,0BAA0B,EAC1B,uBAAuB,EACvB,wBAAwB,EACxB,8BAA8B,EAC9B,6BAA6B,EAC7B,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,EACzB,4BAA4B,EAC7B,MAAM,gBAAgB,CAAC;AAGxB,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,wBAAwB,EACxB,GAAG,SAAS,EACwB,EAAE,EAAE;IACxC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,UAAU,EAAkB,CAAC;IACnE,MAAM,YAAY,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,CAAC;IAE7E,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAChE,wBAAwB,IAAI,KAAK,CAClC,CAAC;IAEF,uBAAuB;IACvB,MAAM,kBAAkB,GAAG,MAAM,CAAqB;QACpD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;KACvB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,iBAAiB,IAAI,CAAC,WAAW;YAAE,OAAO,CAAC,CAAC;QAEjD,OAAO,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAChG,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,cAAc,CACZ,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,kBAAkB,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CACtF,CAAC;IAEF,MAAM,aAAa,GAAG,qBAAqB;QACzC,CAAC,CAAC,QAAQ,SAAS,CAAC,GAAG,QAAQ;QAC/B,CAAC,CAAC,QAAQ,SAAS,CAAC,KAAK,QAAQ,CAAC;IAEpC,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAA6B,EAAE,EAAE;QACtE,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAK,CAAmB,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACjE,OAAO;QACT,CAAC;QAED,wBAAwB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,kBAAkB,GAAG,CACzB,8BACG,qBAAqB,IAAI,CACxB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,iBAAiB,EAC1B,EAAE,EAAE,6BAA6B,EACjC,KAAK,EAAE,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,wBAAwB,CAAC,YAEvF,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,GAAI,GACtB,CACV,EACD,KAAC,IAAI,IACH,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,qBAAqB,EAAE,qBAAqB,YAE3C,SAAS,GACL,IACN,CACJ,CAAC;QAEF,MAAM,oBAAoB,GAAG,CAC3B,KAAC,MAAM,IACL,EAAE,EAAE,yBAAyB,EAC7B,IAAI,EAAE,qBAAqB,EAC3B,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,SAAS,CAAC,GAAG,EACxB,MAAM,QACN,cAAc,kBAEd,MAAC,IAAI,IAAC,EAAE,EAAE,uBAAuB,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC3E,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,iBAAiB,EAC1B,EAAE,EAAE,2BAA2B,EAC/B,KAAK,EAAE,CAAC,CAAC,0BAA0B,CAAC,YAEpC,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,SAAS,CAAC,GAAG,QAAQ,GAAI,GACtC,GACJ,EACN,SAAS,IACL,GACA,CACV,CAAC;QAEF,OAAO,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAoB,CAAC;IACrE,CAAC,EAAE,CAAC,eAAe,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3E,OAAO,CACL,KAAC,4BAA4B,OAAK,SAAS,EAAE,GAAG,EAAE,YAAY,YAC5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,0BAA0B,aACzD,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,YAC5C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAC1C,GAAG,EAAE,CAAC,EAAyB,EAAE,EAAE;4BACjC,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;wBAC9C,CAAC,aAEA,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,yBAAyB,aAE5B,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,EACA,OAAO,IAAI,wBAAM,OAAO,GAAO,EAC/B,OAAO,IAAI,wBAAM,OAAO,GAAO,IAC3B,GACF,EAEN,CAAC,SAAS,IAAI,qBAAqB,CAAC,IAAI,CACvC,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,EAC7D,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAC5B,EAAE,EAAE,wBAAwB,EAC5B,qBAAqB,EAAE,qBAAqB,EAC5C,GAAG,EAAE,CAAC,EAAkB,EAAE,EAAE;wBAC1B,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;oBAC9C,CAAC,aAEA,iBAAiB,EACjB,CAAC,qBAAqB,IAAI,CACzB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,iBAAiB,EAC1B,EAAE,EAAE,8BAA8B,mBACnB,KAAK,EACpB,KAAK,EAAE,CAAC,CACN,qBAAqB,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,wBAAwB,CAC9E,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,GAAI,GACtB,CACV,EAEA,CAAC,qBAAqB;4BACrB,qBAAqB;4BACrB,qBAAqB,CAAC,MAAM,GAAG,CAAC,IAAI,CAClC,KAAC,gBAAgB,IAAC,KAAK,EAAE,qBAAqB,GAAI,CACnD,IACE,CACR,IACI,GACsB,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useCallback, useState, useMemo, useRef } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\n\nimport {\n  Button,\n  Drawer,\n  Flex,\n  Icon,\n  useBreakpoint,\n  useDirection,\n  useI18n,\n  Text,\n  windowIsAvailable,\n  useScrollStick,\n  useElement,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport type { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport UtilitiesSummary from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';\nimport { StyledCaseDrawerContent } from '@pega/cosmos-react-work';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\n\nimport {\n  StyledEmailCaseViewColumns,\n  StyledExpandedUtilities,\n  StyledUtilitiesContainer,\n  StyledCollapsedUtilitiesToggle,\n  StyledExpandedUtilitiesToggle,\n  StyledDrawerUtilitiesToggle,\n  StyledEmailCaseViewDrawer,\n  StyledEmailCaseViewHeader,\n  StyledEmailCaseViewContainer\n} from './Email.styles';\nimport type { EmailCaseViewProps } from './Email.types';\n\nconst EmailCaseView: FC<EmailCaseViewProps & ForwardProps> = ({\n  header,\n  content,\n  banners,\n  utilities,\n  utilitiesSummaryItems,\n  defaultUtilitiesExpanded,\n  ...restProps\n}: PropsWithoutRef<EmailCaseViewProps>) => {\n  const direction = useDirection();\n  const t = useI18n();\n\n  const [emailCaseEl, setEmailCaseEl] = useElement<HTMLDivElement>();\n  const emailCaseRef = useConsolidatedRef(setEmailCaseEl);\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: emailCaseRef });\n\n  const [showExpandedUtilities, setShowExpandedUtilities] = useState(\n    defaultUtilitiesExpanded || false\n  );\n\n  // Apply sticky columns\n  const scrollStickOptions = useRef<ScrollStickOptions>({\n    elements: [null, null]\n  });\n\n  const scrollOffset = useMemo(() => {\n    if (!windowIsAvailable || !emailCaseEl) return 0;\n\n    return parseFloat(window.getComputedStyle(emailCaseEl).getPropertyValue('--appshell-offset'));\n  }, [emailCaseEl]);\n\n  useScrollStick(\n    isMediumOrAbove ? { ...scrollStickOptions.current, offset: scrollOffset } : undefined\n  );\n\n  const utilitiesIcon = showExpandedUtilities\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  const onToggleUtilities = useCallback((e: KeyboardEvent | MouseEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setShowExpandedUtilities(prevState => !prevState);\n  }, []);\n\n  const expandedUtilities = useMemo(() => {\n    if (!utilities) {\n      return null;\n    }\n\n    const largeScreenUtility = (\n      <>\n        {showExpandedUtilities && (\n          <Button\n            variant='simple'\n            icon\n            onClick={onToggleUtilities}\n            as={StyledExpandedUtilitiesToggle}\n            label={t(showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n          >\n            <Icon name={utilitiesIcon} />\n          </Button>\n        )}\n        <Flex\n          as={StyledExpandedUtilities}\n          container={{ direction: 'column', gap: 2 }}\n          showExpandedUtilities={showExpandedUtilities}\n        >\n          {utilities}\n        </Flex>\n      </>\n    );\n\n    const smallScreenUtilities = (\n      <Drawer\n        as={StyledEmailCaseViewDrawer}\n        open={showExpandedUtilities}\n        position='fixed'\n        placement={direction.end}\n        shadow\n        nullWhenClosed\n      >\n        <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={onToggleUtilities}\n              as={StyledDrawerUtilitiesToggle}\n              label={t('collapse_utilities_panel')}\n            >\n              <Icon name={`move-${direction.end}-solid`} />\n            </Button>\n          </Flex>\n          {utilities}\n        </Flex>\n      </Drawer>\n    );\n\n    return isMediumOrAbove ? largeScreenUtility : smallScreenUtilities;\n  }, [isMediumOrAbove, onToggleUtilities, showExpandedUtilities, utilities]);\n\n  return (\n    <StyledEmailCaseViewContainer {...restProps} ref={emailCaseRef}>\n      <Flex container={{ gap: 2 }} as={StyledEmailCaseViewColumns}>\n        <Flex item={{ grow: 1, shrink: 1, basis: '0' }}>\n          <Flex\n            container={{ gap: 1, direction: 'column' }}\n            ref={(el: HTMLDivElement | null) => {\n              scrollStickOptions.current.elements[0] = el;\n            }}\n          >\n            {header && (\n              <Flex\n                container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n                as={StyledEmailCaseViewHeader}\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            {banners && <div>{banners}</div>}\n            {content && <div>{content}</div>}\n          </Flex>\n        </Flex>\n\n        {(utilities || utilitiesSummaryItems) && (\n          <Flex\n            container={{ direction: 'column', alignItems: 'end', gap: 2 }}\n            item={{ alignSelf: 'start' }}\n            as={StyledUtilitiesContainer}\n            showExpandedUtilities={showExpandedUtilities}\n            ref={(el: HTMLDivElement) => {\n              scrollStickOptions.current.elements[1] = el;\n            }}\n          >\n            {expandedUtilities}\n            {!showExpandedUtilities && (\n              <Button\n                variant='simple'\n                icon\n                onClick={onToggleUtilities}\n                as={StyledCollapsedUtilitiesToggle}\n                aria-expanded={false}\n                label={t(\n                  showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n                )}\n              >\n                <Icon name={utilitiesIcon} />\n              </Button>\n            )}\n\n            {!showExpandedUtilities &&\n              utilitiesSummaryItems &&\n              utilitiesSummaryItems.length > 0 && (\n                <UtilitiesSummary items={utilitiesSummaryItems} />\n              )}\n          </Flex>\n        )}\n      </Flex>\n    </StyledEmailCaseViewContainer>\n  );\n};\n\nexport default EmailCaseView;\n"]}
+{"version":3,"file":"EmailCaseView.js","sourceRoot":"","sources":["../../../src/components/Email/EmailCaseView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useState, useMemo, useRef } from 'react';\nimport type { FC, PropsWithoutRef } from 'react';\n\nimport {\n  Button,\n  Drawer,\n  Flex,\n  Icon,\n  useBreakpoint,\n  useComputedLengthPx,\n  useDirection,\n  useI18n,\n  Text,\n  useScrollStick,\n  useElement,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport type { ScrollStickOptions } from '@pega/cosmos-react-core/lib/hooks/useScrollStick';\nimport UtilitiesSummary from '@pega/cosmos-react-work/lib/components/CaseView/UtilitiesSummary';\nimport { StyledCaseDrawerContent } from '@pega/cosmos-react-work';\nimport { StyledPageIcon } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\n\nimport {\n  StyledEmailCaseViewColumns,\n  StyledExpandedUtilities,\n  StyledUtilitiesContainer,\n  StyledCollapsedUtilitiesToggle,\n  StyledExpandedUtilitiesToggle,\n  StyledDrawerUtilitiesToggle,\n  StyledEmailCaseViewDrawer,\n  StyledEmailCaseViewHeader,\n  StyledEmailCaseViewContainer\n} from './Email.styles';\nimport type { EmailCaseViewProps } from './Email.types';\n\nconst EmailCaseView: FC<EmailCaseViewProps & ForwardProps> = ({\n  header,\n  content,\n  banners,\n  utilities,\n  utilitiesSummaryItems,\n  defaultUtilitiesExpanded,\n  ...restProps\n}: PropsWithoutRef<EmailCaseViewProps>) => {\n  const direction = useDirection();\n  const t = useI18n();\n\n  const [emailCaseEl, setEmailCaseEl] = useElement<HTMLDivElement>();\n  const emailCaseRef = useConsolidatedRef(setEmailCaseEl);\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: emailCaseRef });\n\n  const [showExpandedUtilities, setShowExpandedUtilities] = useState(\n    defaultUtilitiesExpanded || false\n  );\n  const appshellOffsetPx = useComputedLengthPx(emailCaseEl, '--appshell-top-offset');\n\n  // Apply sticky columns\n  const scrollStickOptions = useRef<ScrollStickOptions>({\n    elements: [null, null]\n  });\n\n  const scrollOffset = appshellOffsetPx;\n\n  useScrollStick(\n    isMediumOrAbove ? { ...scrollStickOptions.current, offset: scrollOffset } : undefined\n  );\n\n  const utilitiesIcon = showExpandedUtilities\n    ? `move-${direction.end}-solid`\n    : `move-${direction.start}-solid`;\n\n  const onToggleUtilities = useCallback((e: KeyboardEvent | MouseEvent) => {\n    if (e.type === 'keydown' && (e as KeyboardEvent).key !== 'Enter') {\n      return;\n    }\n\n    setShowExpandedUtilities(prevState => !prevState);\n  }, []);\n\n  const expandedUtilities = useMemo(() => {\n    if (!utilities) {\n      return null;\n    }\n\n    const largeScreenUtility = (\n      <>\n        {showExpandedUtilities && (\n          <Button\n            variant='simple'\n            icon\n            onClick={onToggleUtilities}\n            as={StyledExpandedUtilitiesToggle}\n            label={t(showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel')}\n          >\n            <Icon name={utilitiesIcon} />\n          </Button>\n        )}\n        <Flex\n          as={StyledExpandedUtilities}\n          container={{ direction: 'column', gap: 2 }}\n          showExpandedUtilities={showExpandedUtilities}\n        >\n          {utilities}\n        </Flex>\n      </>\n    );\n\n    const smallScreenUtilities = (\n      <Drawer\n        as={StyledEmailCaseViewDrawer}\n        open={showExpandedUtilities}\n        position='fixed'\n        placement={direction.end}\n        shadow\n        nullWhenClosed\n      >\n        <Flex as={StyledCaseDrawerContent} container={{ direction: 'column', gap: 2 }}>\n          <Flex container={{ justify: 'end' }}>\n            <Button\n              variant='simple'\n              icon\n              onClick={onToggleUtilities}\n              as={StyledDrawerUtilitiesToggle}\n              label={t('collapse_utilities_panel')}\n            >\n              <Icon name={`move-${direction.end}-solid`} />\n            </Button>\n          </Flex>\n          {utilities}\n        </Flex>\n      </Drawer>\n    );\n\n    return isMediumOrAbove ? largeScreenUtility : smallScreenUtilities;\n  }, [isMediumOrAbove, onToggleUtilities, showExpandedUtilities, utilities]);\n\n  return (\n    <StyledEmailCaseViewContainer {...restProps} ref={emailCaseRef}>\n      <Flex container={{ gap: 2 }} as={StyledEmailCaseViewColumns}>\n        <Flex item={{ grow: 1, shrink: 1, basis: '0' }}>\n          <Flex\n            container={{ gap: 1, direction: 'column' }}\n            ref={(el: HTMLDivElement | null) => {\n              scrollStickOptions.current.elements[0] = el;\n            }}\n          >\n            {header && (\n              <Flex\n                container={{ alignItems: 'center', pad: [0, 0, 0, 2], gap: 1 }}\n                as={StyledEmailCaseViewHeader}\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            {banners && <div>{banners}</div>}\n            {content && <div>{content}</div>}\n          </Flex>\n        </Flex>\n\n        {(utilities || utilitiesSummaryItems) && (\n          <Flex\n            container={{ direction: 'column', alignItems: 'end', gap: 2 }}\n            item={{ alignSelf: 'start' }}\n            as={StyledUtilitiesContainer}\n            showExpandedUtilities={showExpandedUtilities}\n            ref={(el: HTMLDivElement) => {\n              scrollStickOptions.current.elements[1] = el;\n            }}\n          >\n            {expandedUtilities}\n            {!showExpandedUtilities && (\n              <Button\n                variant='simple'\n                icon\n                onClick={onToggleUtilities}\n                as={StyledCollapsedUtilitiesToggle}\n                aria-expanded={false}\n                label={t(\n                  showExpandedUtilities ? 'collapse_utilities_panel' : 'expand_utilities_panel'\n                )}\n              >\n                <Icon name={utilitiesIcon} />\n              </Button>\n            )}\n\n            {!showExpandedUtilities &&\n              utilitiesSummaryItems &&\n              utilitiesSummaryItems.length > 0 && (\n                <UtilitiesSummary items={utilitiesSummaryItems} />\n              )}\n          </Flex>\n        )}\n      </Flex>\n    </StyledEmailCaseViewContainer>\n  );\n};\n\nexport default EmailCaseView;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-social",
-  "version": "10.0.0-build.1.9",
+  "version": "10.0.0-build.2.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": [
@@ -17,9 +17,9 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.1.9",
-    "@pega/cosmos-react-rte": "10.0.0-build.1.9",
-    "@pega/cosmos-react-work": "10.0.0-build.1.9",
+    "@pega/cosmos-react-core": "10.0.0-build.2.0",
+    "@pega/cosmos-react-rte": "10.0.0-build.2.0",
+    "@pega/cosmos-react-work": "10.0.0-build.2.0",
     "@types/parse5": "^6.0.0",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",