@pega/cosmos-react-work 10.0.0-build.4.20 → 10.0.0-build.4.22

package/lib/components/AppAnnouncement/AppAnnouncement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAiBlD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACjF,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRA4EhC,CAAC;;;;AAsFH,wBAAuE"}
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAiBlD,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACjF,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oGAAoG;IACpG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAaD,eAAO,MAAM,4BAA4B,6NAiCvC,CAAC;AAIH,eAAO,MAAM,qBAAqB,kRAwGhC,CAAC;;;;AAsFH,wBAAuE"}

package/lib/components/AppAnnouncement/AppAnnouncement.js

@@ -44,7 +44,7 @@ export const StyledAppAnnouncementContent = styled.div(props => {
 });
 StyledAppAnnouncementContent.defaultProps = defaultThemeProp;
 export const StyledAppAnnouncement = styled.article(props => {
-    const { theme: { base: { shadow, spacing }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
+    const { theme: { base: { shadow, spacing, 'content-width': contentWidth }, components: { card: { 'border-radius': borderRadius }, announcement: { background, 'foreground-color': foregroundColor } } }, image } = props;
     const { end } = useDirection();
     const color = calculateForegroundColor(background, foregroundColor);
     return css `
@@ -54,7 +54,35 @@ export const StyledAppAnnouncement = styled.article(props => {
     color: ${color};
     position: relative;
 
-    ${props.fitToParent && 'block-size: 100%;'};
+    ${props.fitToParent &&
+        css `
+      min-block-size: 100%;
+      display: flex;
+      flex-direction: column;
+
+      > div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+
+        ${StyledAppAnnouncementContent} {
+          flex: 1;
+          min-height: 0;
+          max-height: none;
+        }
+
+        ${StyledButton} {
+          align-self: flex-start;
+        }
+      }
+
+      @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {
+        ${StyledAppAnnouncementContent} {
+          overflow-y: unset;
+        }
+      }
+    `};
 
     &::after {
       background: url('${image}') no-repeat;

package/lib/components/AppAnnouncement/AppAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  useDirection,\n  calculateForegroundColor,\n  HTML,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { getAppAnnouncementTestIds } from './AppAnnouncement.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n  headingUrl?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /**\n   * Whether to fit AppAnnouncement widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n  color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    max-height: 12rem;\n    overflow-y: auto;\n    margin-block-start: calc(1.5 * ${spacing});\n    margin-inline: calc(-2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n\n    p,\n    ul {\n      line-height: 1.4;\n    }\n\n    ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n\n    p + ul {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n\n    li {\n      &:not(:last-child) {\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n  Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n  const {\n    theme: {\n      base: { shadow, spacing },\n      components: {\n        card: { 'border-radius': borderRadius },\n        announcement: { background, 'foreground-color': foregroundColor }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = calculateForegroundColor(background, foregroundColor);\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${background};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    ${props.fitToParent && 'block-size: 100%;'};\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus-visible {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      position: relative;\n      z-index: 2;\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        white-space: normal;\n\n        &:enabled:focus-visible,\n        &:not([disabled]):focus-visible {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      headingUrl,\n      image,\n      onDismiss,\n      testId,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getAppAnnouncementTestIds);\n\n    const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n    return (\n      <StyledAppAnnouncement data-testid={testIds.root} {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2' data-testid={testIds.heading}>\n          {headingUrl ? (\n            <StyledHeadingLink\n              variant='link'\n              href={headingUrl}\n              target='_blank'\n              rel='noopener noreferrer'\n            >\n              {resolvedHeading}\n            </StyledHeadingLink>\n          ) : (\n            resolvedHeading\n          )}\n        </Text>\n        <div>\n          <StyledAppAnnouncementContent>\n            {description && <HTML as='p' content={description} data-testid={testIds.description} />}\n            {!!details?.length && (\n              <ul>\n                {details.map((item, index) => {\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={index}>\n                      <HTML content={item} />\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </StyledAppAnnouncementContent>\n          {!headingUrl && whatsNewLink && (\n            <Button\n              variant='secondary'\n              href={whatsNewLink}\n              target='_blank'\n              data-testid={testIds.whatsNew}\n            >\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default withTestIds(AppAnnouncement, getAppAnnouncementTestIds);\n"]}
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../src/components/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  StyledButton,\n  Text,\n  Icon,\n  registerIcon,\n  useI18n,\n  defaultThemeProp,\n  useDirection,\n  calculateForegroundColor,\n  HTML,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  TestIdProp\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport { getAppAnnouncementTestIds } from './AppAnnouncement.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface AppAnnouncementProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Heading text for the announcement. */\n  heading?: string;\n  /** Description text for the announcement. */\n  description?: string;\n  /** Announcement details to be displayed in form of bulleted list. */\n  details?: string[];\n  /** Url to open with What's new link. */\n  whatsNewLink?: string;\n  /** Content to populate the announcement button. */\n  whatsNewText?: string;\n  /** When provided, the heading renders as a link to this URL and the What's new button is hidden. */\n  headingUrl?: string;\n  /** An image source for the decorative background. */\n  image?: string;\n  /**\n   * Whether to fit AppAnnouncement widget in the parent element.\n   */\n  fitToParent?: boolean;\n  /** Callback when user dismisses the announcements. */\n  onDismiss?: () => void;\n  ref?: Ref<HTMLElement>;\n}\n\nconst StyledDismissButton = styled.button`\n  font-size: 1.25rem;\n  border: none;\n`;\n\nconst StyledHeadingLink = styled(Button)`\n  color: inherit;\n`;\n\nStyledHeadingLink.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncementContent = styled.div(props => {\n  const {\n    theme: {\n      base: { spacing }\n    }\n  } = props;\n\n  return css`\n    max-height: 12rem;\n    overflow-y: auto;\n    margin-block-start: calc(1.5 * ${spacing});\n    margin-inline: calc(-2 * ${spacing});\n    padding-inline: calc(2 * ${spacing});\n\n    p,\n    ul {\n      line-height: 1.4;\n    }\n\n    ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n\n    p + ul {\n      margin-block-start: calc(1.5 * ${spacing});\n    }\n\n    li {\n      &:not(:last-child) {\n        margin-block-end: ${spacing};\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncementContent.defaultProps = defaultThemeProp;\n\nexport const StyledAppAnnouncement = styled.article<\n  Pick<AppAnnouncementProps, 'image' | 'fitToParent'>\n>(props => {\n  const {\n    theme: {\n      base: { shadow, spacing, 'content-width': contentWidth },\n      components: {\n        card: { 'border-radius': borderRadius },\n        announcement: { background, 'foreground-color': foregroundColor }\n      }\n    },\n    image\n  } = props;\n\n  const { end } = useDirection();\n  const color = calculateForegroundColor(background, foregroundColor);\n\n  return css`\n    padding: calc(2 * ${spacing});\n    background: ${background};\n    border-radius: ${borderRadius};\n    color: ${color};\n    position: relative;\n\n    ${props.fitToParent &&\n    css`\n      min-block-size: 100%;\n      display: flex;\n      flex-direction: column;\n\n      > div {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n\n        ${StyledAppAnnouncementContent} {\n          flex: 1;\n          min-height: 0;\n          max-height: none;\n        }\n\n        ${StyledButton} {\n          align-self: flex-start;\n        }\n      }\n\n      @container dynamic-layout-item (block-size <= ${contentWidth.sm}) {\n        ${StyledAppAnnouncementContent} {\n          overflow-y: unset;\n        }\n      }\n    `};\n\n    &::after {\n      background: url('${image}') no-repeat;\n      background-position: ${end} bottom;\n      background-size: contain;\n      background-origin: content-box;\n      opacity: 0.2;\n      content: '';\n      display: block;\n      position: absolute;\n      width: 50%;\n      height: 100%;\n      inset-inline-end: 0;\n      bottom: 0;\n      padding: calc(2 * ${spacing});\n    }\n\n    h2 {\n      position: relative;\n      z-index: 2;\n    }\n\n    ${StyledDismissButton} {\n      position: absolute;\n      top: 0.75rem;\n      inset-inline-end: 0.75rem;\n      color: inherit;\n      z-index: 3;\n      &:enabled:hover {\n        background: #ffffff19;\n      }\n      &:enabled:focus-visible {\n        box-shadow: ${shadow.focus};\n      }\n    }\n\n    > div {\n      position: relative;\n      z-index: 2;\n\n      ${StyledButton} {\n        margin-top: calc(2 * ${spacing});\n        white-space: normal;\n\n        &:enabled:focus-visible,\n        &:not([disabled]):focus-visible {\n          box-shadow: ${shadow.focus};\n        }\n      }\n    }\n  `;\n});\n\nStyledAppAnnouncement.defaultProps = defaultThemeProp;\n\nconst AppAnnouncement: ForwardRefForwardPropsComponent<AppAnnouncementProps> = forwardRef(\n  function AppAnnouncement(\n    props: PropsWithoutRef<AppAnnouncementProps>,\n    ref: AppAnnouncementProps['ref']\n  ) {\n    const t = useI18n();\n    const {\n      heading,\n      description,\n      details,\n      whatsNewLink,\n      whatsNewText = t('app_announcement_whats_new_button_label'),\n      headingUrl,\n      image,\n      onDismiss,\n      testId,\n      ...restProps\n    } = props;\n\n    const testIds = useTestIds(testId, getAppAnnouncementTestIds);\n\n    const resolvedHeading = heading || t('app_announcement_details_list_header');\n\n    return (\n      <StyledAppAnnouncement data-testid={testIds.root} {...restProps} ref={ref} image={image}>\n        {onDismiss && (\n          <Button\n            as={StyledDismissButton}\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            aria-label={t('app_announcement_dismiss_button_label_a11y')}\n          >\n            <Icon name='times' />\n          </Button>\n        )}\n        <Text variant='h2' data-testid={testIds.heading}>\n          {headingUrl ? (\n            <StyledHeadingLink\n              variant='link'\n              href={headingUrl}\n              target='_blank'\n              rel='noopener noreferrer'\n            >\n              {resolvedHeading}\n            </StyledHeadingLink>\n          ) : (\n            resolvedHeading\n          )}\n        </Text>\n        <div>\n          <StyledAppAnnouncementContent>\n            {description && <HTML as='p' content={description} data-testid={testIds.description} />}\n            {!!details?.length && (\n              <ul>\n                {details.map((item, index) => {\n                  return (\n                    // eslint-disable-next-line react/no-array-index-key\n                    <li key={index}>\n                      <HTML content={item} />\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </StyledAppAnnouncementContent>\n          {!headingUrl && whatsNewLink && (\n            <Button\n              variant='secondary'\n              href={whatsNewLink}\n              target='_blank'\n              data-testid={testIds.whatsNew}\n            >\n              {whatsNewText}\n            </Button>\n          )}\n        </div>\n      </StyledAppAnnouncement>\n    );\n  }\n);\n\nexport default withTestIds(AppAnnouncement, getAppAnnouncementTestIds);\n"]}

package/lib/components/InteractionNotification/InteractionNotification.d.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
 import type { StatusProps, ForwardRefForwardPropsComponent, FieldValueListProps, NoChildrenProp, RequireAtLeastOne, LinkProps } from '@pega/cosmos-react-core';
 import type { CountdownButtonProps } from './CountdownButton';
-interface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview'>> {
+interface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview' | 'onClick'>> {
     /** Visually hidden description for accessibility purposes. */
     description: string;
     /** Information text. */

package/lib/components/InteractionNotification/InteractionNotification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AA4BlD,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACV,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,UAAU,QAAS,SAAQ,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IACvE,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,kFAAkF;AAClF,KAAK,kBAAkB,GACnB,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC,GAAG,CACE;IACE,wEAAwE;IACxE,WAAW,EAAE,QAAQ,CAAC;IACtB,yFAAyF;IACzF,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,gFAAgF;IAChF,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACE,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACJ,EACH,UAAU,GAAG,WAAW,CACzB,CAAC;AAmHF,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,CAqHvF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AA4BlD,OAAO,KAAK,EACV,WAAW,EACX,+BAA+B,EAC/B,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,SAAS,EACV,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,UAAU,QAAS,SAAQ,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;IACnF,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,kFAAkF;AAClF,KAAK,kBAAkB,GACnB,CAAC,MAAM,IAAI,CAAC,GACZ;IACE,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAC1D,cAAc,GAAG;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC,GAAG,CACE;IACE,wEAAwE;IACxE,WAAW,EAAE,QAAQ,CAAC;IACtB,yFAAyF;IACzF,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,gFAAgF;IAChF,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACE,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACJ,EACH,UAAU,GAAG,WAAW,CACzB,CAAC;AAyHF,QAAA,MAAM,uBAAuB,EAAE,+BAA+B,CAAC,4BAA4B,CAqHvF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -78,9 +78,9 @@ registerAction({
 });
 const NotificationText = ({ content, variant = 'h5' }) => {
     const isString = typeof content === 'string';
-    const { text, href, onPreview } = isString ? { text: content } : content;
+    const { text, href, onPreview, onClick } = isString ? { text: content } : content;
     const textElement = (_jsx(Text, { variant: variant, as: 'span', children: text }));
-    const contentElement = href ? (_jsx(Link, { href: href, previewable: !!onPreview, onPreview: onPreview, hideNewTabIcon: true, children: textElement })) : (textElement);
+    const contentElement = href ? (_jsx(Link, { href: href, previewable: !!onPreview, onPreview: onPreview, hideNewTabIcon: true, onClick: onClick, children: textElement })) : (textElement);
     return isString ? (textElement) : (_jsxs("div", { children: [_jsx(VisuallyHiddenText, { children: `${content.description} - ` }), contentElement] }));
 };
 const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, tertiaryText, status, fields, incomingNotificationTimeout, onAccept, onDismiss }, ref) {

package/lib/components/InteractionNotification/InteractionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  useI18n,\n  useDirection,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  useConsolidatedRef,\n  useEscape,\n  CardFooter,\n  VisuallyHiddenText,\n  Link\n} from '@pega/cosmos-react-core';\nimport type {\n  StatusProps,\n  ForwardRefForwardPropsComponent,\n  FieldValueListProps,\n  NoChildrenProp,\n  RequireAtLeastOne,\n  LinkProps\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview'>> {\n  /** Visually hidden description for accessibility purposes. */\n  description: string;\n  /** Information text. */\n  text: string;\n}\n\n/** A simple callback or an object to customize notification button properties. */\ntype NotificationAction =\n  | (() => void)\n  | {\n      /** Custom label for the button. */\n      text?: string;\n      /** Handler invoked when the button is clicked. */\n      handler: () => void;\n    };\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n  NoChildrenProp & {\n    /** Ref to Component. */\n    ref?: Ref<HTMLDivElement>;\n    /** Name of the icon used in header. */\n    icon: string;\n    /** Interaction title. */\n    title: string;\n    /** Represents the current status of interaction. */\n    status: { variant: StatusProps['variant']; text: string };\n    /** Information structured as field values to be displayed below main section. */\n    fields?: FieldValueListProps['fields'];\n    /** Timeout definition */\n    incomingNotificationTimeout?: {\n      startTime: CountdownButtonProps['startTime'];\n      answerTimeout: CountdownButtonProps['timeout'];\n      onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n    };\n    /** Callback when accept button is clicked. */\n    onAccept?: NotificationAction;\n    /** Callback when dismiss button is clicked. */\n    onDismiss?: NotificationAction;\n  } & (\n      | {\n          /** Primary information of the notification. For example caller name. */\n          primaryText: InfoText;\n          /** Secondary information of the notification. For example phone number of the caller. */\n          secondaryText?: InfoText;\n          /** Tertiary information of the notification. For example role of the caller. */\n          tertiaryText?: InfoText;\n        }\n      | {\n          /** Primary information of the notification. For example caller name. */\n          primaryText: string;\n          /** Secondary information of the notification. For example phone number of the caller. */\n          secondaryText?: string;\n          /** Tertiary information of the notification. For example role of the caller. */\n          tertiaryText?: string;\n        }\n    ),\n  'onAccept' | 'onDismiss'\n>;\n\ninterface NotificationTextProps {\n  /** Information of the notification. */\n  content: InfoText | string;\n  /** Heading variant for the notification text. */\n  variant?: 'h1' | 'h5';\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\n    z-index: ${base['z-index'].backdrop - 1};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n    box-shadow: ${base.shadow.low};\n\n    &&& {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\n\n      ${StyledText} {\n        color: inherit;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n  const isString = typeof content === 'string';\n  const { text, href, onPreview } = isString ? { text: content } : content;\n\n  const textElement = (\n    <Text variant={variant} as='span'>\n      {text}\n    </Text>\n  );\n\n  const contentElement = href ? (\n    <Link href={href} previewable={!!onPreview} onPreview={onPreview} hideNewTabIcon>\n      {textElement}\n    </Link>\n  ) : (\n    textElement\n  );\n\n  return isString ? (\n    textElement\n  ) : (\n    <div>\n      <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n      {contentElement}\n    </div>\n  );\n};\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      tertiaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDismiss\n    }: PropsWithoutRef<InteractionNotificationProps>,\n    ref: InteractionNotificationProps['ref']\n  ) {\n    const t = useI18n();\n    const { announceAssertive } = useLiveLog();\n    const containerRef = useConsolidatedRef(ref);\n    const returnRef = useRef<HTMLElement>();\n    const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onAcceptHandler = typeof onAccept === 'function' ? onAccept : onAccept?.handler;\n    const onDismissHandler = typeof onDismiss === 'function' ? onDismiss : onDismiss?.handler;\n    const acceptLabel = typeof onAccept !== 'function' ? onAccept?.text : t('accept');\n    const dismissLabel = typeof onDismiss !== 'function' ? onDismiss?.text : undefined;\n\n    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () =>\n      onDismissHandler?.()\n    );\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDismissHandler?.();\n      },\n      containerRef.current,\n      [onDismissHandler]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${\n          typeof primaryText === 'string' ? primaryText : primaryText.description\n        } ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDismissHandler\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAcceptHandler}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismissHandler}\n        ref={acceptButtonRef}\n      >\n        {acceptLabel}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAcceptHandler} ref={acceptButtonRef}>\n        {acceptLabel}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification\n        ref={containerRef}\n        data-app-region\n        role='alertdialog'\n        aria-label={title}\n      >\n        <CardHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Icon name={icon} />\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n        </CardHeader>\n        <CardContent container={{ gap: 2 }}>\n          <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n            <NotificationText content={primaryText} variant='h1' />\n            {secondaryText && <NotificationText content={secondaryText} />}\n            {tertiaryText && <NotificationText content={tertiaryText} />}\n            <Status variant={status.variant}>{status.text}</Status>\n          </Flex>\n          {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n        </CardContent>\n\n        {onAcceptHandler ? (\n          <CardFooter justify={onDismissHandler ? 'between' : 'end'}>\n            {onDismissHandler && (\n              <Button onClick={onDismissHandler}>{dismissLabel ?? t('decline')}</Button>\n            )}\n            {acceptButton}\n          </CardFooter>\n        ) : (\n          <CardFooter justify='end'>\n            <Button variant='primary' onClick={onDismissHandler}>\n              {dismissLabel ?? t('close')}\n            </Button>\n          </CardFooter>\n        )}\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,oBAAoB,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,IAAI,EACL,MAAM,yBAAyB,CAAC;AASjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAsEhD,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;kCAEsB,IAAI,CAAC,OAAO;iCACb,IAAI,CAAC,OAAO;oCACT,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;eAE7C,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,GAAG,CAAC;aAC9B,IAAI,CAAC,MAAM,CAAC,KAAK;kCACI,IAAI,CAAC,SAAS,CAAC,KAAK;2BAC3B,IAAI,CAAC,OAAO;kBACrB,IAAI,CAAC,MAAM,CAAC,GAAG;;;0BAGP,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;;;;;UAK/C,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;;;;;;;MAQP,iBAAiB;yBACE,IAAI,CAAC,OAAO;;;QAG7B,UAAU;;;;;;;;;;MAUZ,oBAAoB;4CACkB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;sCACjC,IAAI,CAAC,OAAO;eACnC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAExB,WAAW;iBACF,IAAI,CAAC,MAAM,CAAC,KAAK;;;;8BAIJ,IAAI,CAAC,WAAW,CAAC,EAAE;oCACb,IAAI,CAAC,OAAO;;;GAG7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,cAAc,CACZ;IACE,EAAE,EAAE,yBAAyB;IAC7B,iBAAiB,EAAE,WAAW;CAC/B,EACD;IACE,EAAE,EAAE,4BAA4B;IAChC,iBAAiB,EAAE,OAAO;CAC3B,CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,EAAyB,EAAE,EAAE;IAC9E,MAAM,QAAQ,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC;IAC7C,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAElF,MAAM,WAAW,GAAG,CAClB,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAC,MAAM,YAC9B,IAAI,GACA,CACR,CAAC;IAEF,MAAM,cAAc,GAAG,IAAI,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAC,CAAC,SAAS,EACxB,SAAS,EAAE,SAAS,EACpB,cAAc,QACd,OAAO,EAAE,OAAO,YAEf,WAAW,GACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAW,CACZ,CAAC,CAAC,CAAC,CACF,0BACE,KAAC,kBAAkB,cAAE,GAAG,OAAO,CAAC,WAAW,KAAK,GAAsB,EACrE,cAAc,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAC3B,UAAU,CAAC,SAAS,uBAAuB,CACzC,EACE,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,YAAY,EACZ,MAAM,EACN,MAAM,EACN,2BAA2B,EAC3B,QAAQ,EACR,SAAS,EACqC,EAChD,GAAwC;IAExC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,EAAe,CAAC;IACxC,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC;IACtF,MAAM,gBAAgB,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC;IAC1F,MAAM,WAAW,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAClF,MAAM,YAAY,GAAG,OAAO,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnF,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,yBAAyB,EAAE,GAAG,EAAE;QAC3E,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,SAAS,CAAC,OAAO,GAAI,QAAQ,CAAC,aAA6B,IAAI,SAAS,CAAC;YACzE,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IACH,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC,4BAA4B,EAAE,GAAG,EAAE,CACjF,gBAAgB,EAAE,EAAE,CACrB,CAAC;IAEF,SAAS,CACP,GAAG,EAAE;QACH,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3B,gBAAgB,EAAE,EAAE,CAAC;IACvB,CAAC,EACD,YAAY,CAAC,OAAO,EACpB,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC;YAChB,OAAO,EAAE,GAAG,KAAK,IACf,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,WAC9D,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,KAC5B,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAgC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EACrE,GACE,cAAc,IAAI,gBAAgB;gBAChC,CAAC,CAAC,CAAC,CAAC,mCAAmC,EAAE,CAAC,cAAc,CAAC,CAAC;gBAC1D,CAAC,CAAC,EACN,EAAE;YACF,IAAI,EAAE,OAAO;SACd,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,2BAA2B,CAAC,CAAC,CAAC,CACjD,KAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,2BAA2B,CAAC,SAAS,EAChD,OAAO,EAAE,2BAA2B,CAAC,aAAa,EAClD,UAAU,EAAE,2BAA2B,CAAC,UAAU,IAAI,gBAAgB,EACtE,GAAG,EAAE,eAAe,YAEnB,WAAW,GACI,CACnB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,YACrE,WAAW,GACL,CACV,CAAC;IAEF,OAAO,CACL,MAAC,6BAA6B,IAC5B,GAAG,EAAE,YAAY,2BAEjB,IAAI,EAAC,aAAa,gBACN,KAAK,aAEjB,KAAC,UAAU,cACT,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,IAC5B,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aAChC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACpE,KAAC,gBAAgB,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAC,IAAI,GAAG,EACtD,aAAa,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,aAAa,GAAI,EAC7D,YAAY,IAAI,KAAC,gBAAgB,IAAC,OAAO,EAAE,YAAY,GAAI,EAC5D,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,IAAI,GAAU,IAClD,EACN,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,IACzE,EAEb,eAAe,CAAC,CAAC,CAAC,CACjB,MAAC,UAAU,IAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,aACtD,gBAAgB,IAAI,CACnB,KAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,YAAG,YAAY,IAAI,CAAC,CAAC,SAAS,CAAC,GAAU,CAC3E,EACA,YAAY,IACF,CACd,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAC,KAAK,YACvB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,gBAAgB,YAChD,YAAY,IAAI,CAAC,CAAC,OAAO,CAAC,GACpB,GACE,CACd,IAC6B,CACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,eAAe,uBAAuB,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  useI18n,\n  useDirection,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  useConsolidatedRef,\n  useEscape,\n  CardFooter,\n  VisuallyHiddenText,\n  Link\n} from '@pega/cosmos-react-core';\nimport type {\n  StatusProps,\n  ForwardRefForwardPropsComponent,\n  FieldValueListProps,\n  NoChildrenProp,\n  RequireAtLeastOne,\n  LinkProps\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText extends Partial<Pick<LinkProps, 'href' | 'onPreview' | 'onClick'>> {\n  /** Visually hidden description for accessibility purposes. */\n  description: string;\n  /** Information text. */\n  text: string;\n}\n\n/** A simple callback or an object to customize notification button properties. */\ntype NotificationAction =\n  | (() => void)\n  | {\n      /** Custom label for the button. */\n      text?: string;\n      /** Handler invoked when the button is clicked. */\n      handler: () => void;\n    };\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n  NoChildrenProp & {\n    /** Ref to Component. */\n    ref?: Ref<HTMLDivElement>;\n    /** Name of the icon used in header. */\n    icon: string;\n    /** Interaction title. */\n    title: string;\n    /** Represents the current status of interaction. */\n    status: { variant: StatusProps['variant']; text: string };\n    /** Information structured as field values to be displayed below main section. */\n    fields?: FieldValueListProps['fields'];\n    /** Timeout definition */\n    incomingNotificationTimeout?: {\n      startTime: CountdownButtonProps['startTime'];\n      answerTimeout: CountdownButtonProps['timeout'];\n      onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n    };\n    /** Callback when accept button is clicked. */\n    onAccept?: NotificationAction;\n    /** Callback when dismiss button is clicked. */\n    onDismiss?: NotificationAction;\n  } & (\n      | {\n          /** Primary information of the notification. For example caller name. */\n          primaryText: InfoText;\n          /** Secondary information of the notification. For example phone number of the caller. */\n          secondaryText?: InfoText;\n          /** Tertiary information of the notification. For example role of the caller. */\n          tertiaryText?: InfoText;\n        }\n      | {\n          /** Primary information of the notification. For example caller name. */\n          primaryText: string;\n          /** Secondary information of the notification. For example phone number of the caller. */\n          secondaryText?: string;\n          /** Tertiary information of the notification. For example role of the caller. */\n          tertiaryText?: string;\n        }\n    ),\n  'onAccept' | 'onDismiss'\n>;\n\ninterface NotificationTextProps {\n  /** Information of the notification. */\n  content: InfoText | string;\n  /** Heading variant for the notification text. */\n  variant?: 'h1' | 'h5';\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\n    z-index: ${base['z-index'].backdrop - 1};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n    box-shadow: ${base.shadow.low};\n\n    &&& {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\n\n      ${StyledText} {\n        color: inherit;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n  const isString = typeof content === 'string';\n  const { text, href, onPreview, onClick } = isString ? { text: content } : content;\n\n  const textElement = (\n    <Text variant={variant} as='span'>\n      {text}\n    </Text>\n  );\n\n  const contentElement = href ? (\n    <Link\n      href={href}\n      previewable={!!onPreview}\n      onPreview={onPreview}\n      hideNewTabIcon\n      onClick={onClick}\n    >\n      {textElement}\n    </Link>\n  ) : (\n    textElement\n  );\n\n  return isString ? (\n    textElement\n  ) : (\n    <div>\n      <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n      {contentElement}\n    </div>\n  );\n};\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      tertiaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDismiss\n    }: PropsWithoutRef<InteractionNotificationProps>,\n    ref: InteractionNotificationProps['ref']\n  ) {\n    const t = useI18n();\n    const { announceAssertive } = useLiveLog();\n    const containerRef = useConsolidatedRef(ref);\n    const returnRef = useRef<HTMLElement>();\n    const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n    const onAcceptHandler = typeof onAccept === 'function' ? onAccept : onAccept?.handler;\n    const onDismissHandler = typeof onDismiss === 'function' ? onDismiss : onDismiss?.handler;\n    const acceptLabel = typeof onAccept !== 'function' ? onAccept?.text : t('accept');\n    const dismissLabel = typeof onDismiss !== 'function' ? onDismiss?.text : undefined;\n\n    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () =>\n      onDismissHandler?.()\n    );\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDismissHandler?.();\n      },\n      containerRef.current,\n      [onDismissHandler]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${\n          typeof primaryText === 'string' ? primaryText : primaryText.description\n        } ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDismissHandler\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAcceptHandler}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismissHandler}\n        ref={acceptButtonRef}\n      >\n        {acceptLabel}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAcceptHandler} ref={acceptButtonRef}>\n        {acceptLabel}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification\n        ref={containerRef}\n        data-app-region\n        role='alertdialog'\n        aria-label={title}\n      >\n        <CardHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Icon name={icon} />\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n        </CardHeader>\n        <CardContent container={{ gap: 2 }}>\n          <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n            <NotificationText content={primaryText} variant='h1' />\n            {secondaryText && <NotificationText content={secondaryText} />}\n            {tertiaryText && <NotificationText content={tertiaryText} />}\n            <Status variant={status.variant}>{status.text}</Status>\n          </Flex>\n          {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n        </CardContent>\n\n        {onAcceptHandler ? (\n          <CardFooter justify={onDismissHandler ? 'between' : 'end'}>\n            {onDismissHandler && (\n              <Button onClick={onDismissHandler}>{dismissLabel ?? t('decline')}</Button>\n            )}\n            {acceptButton}\n          </CardFooter>\n        ) : (\n          <CardFooter justify='end'>\n            <Button variant='primary' onClick={onDismissHandler}>\n              {dismissLabel ?? t('close')}\n            </Button>\n          </CardFooter>\n        )}\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "10.0.0-build.4.20",
+  "version": "10.0.0-build.4.22",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "10.0.0-build.4.20",
-    "@pega/cosmos-react-rte": "10.0.0-build.4.20",
+    "@pega/cosmos-react-core": "10.0.0-build.4.22",
+    "@pega/cosmos-react-rte": "10.0.0-build.4.22",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "polished": "^4.1.0",