@pega/cosmos-react-work 9.0.0-build.14.1 → 9.0.0-build.14.10

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} from '@pega/cosmos-react-core';\nimport type {\n  StatusProps,\n  ForwardRefForwardPropsComponent,\n  FieldValueListProps,\n  NoChildrenProp,\n  RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\nexport type InteractionNotificationProps = RequireAtLeastOne<\n  NoChildrenProp & {\n    /** Ref to Component. */\n    ref?: Ref<HTMLDivElement>;\n    /** Name of the icon used in header. */\n    icon: string;\n    /** Interaction title. */\n    title: string;\n    /** Primary information of the notification. For example caller name . */\n    primaryText: string;\n    /** Secondary information of the notification. For example phone number of the caller */\n    secondaryText?: string;\n    /** Represents the current status of interaction. */\n    status: { variant: StatusProps['variant']; text: string };\n    /** Information structured as field values to be displayed below main section. */\n    fields?: FieldValueListProps['fields'];\n    /** Timeout definition */\n    incomingNotificationTimeout?: {\n      startTime: CountdownButtonProps['startTime'];\n      answerTimeout: CountdownButtonProps['timeout'];\n      onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n    };\n    /** Callback when accept button is clicked. */\n    onAccept?: () => void;\n    /** Callback when decline or 'x' button is clicked. */\n    onDismiss?: () => void;\n  },\n  'onAccept' | 'onDismiss'\n>;\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\n    z-index: ${base['z-index'].backdrop - 1};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n    box-shadow: ${base.shadow.low};\n\n    &&& {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst InteractionNotification: ForwardRefForwardPropsComponent<InteractionNotificationProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDismiss\n    }: PropsWithoutRef<InteractionNotificationProps>,\n    ref: InteractionNotificationProps['ref']\n  ) {\n    const t = useI18n();\n    const { announceAssertive } = useLiveLog();\n    const containerRef = useConsolidatedRef(ref);\n    const returnRef = useRef<HTMLElement>();\n    const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n      onDismiss?.();\n    });\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDismiss?.();\n      },\n      containerRef.current,\n      [onDismiss]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDismiss\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAccept}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n        ref={acceptButtonRef}\n      >\n        {t('accept')}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n        {t('accept')}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification\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            <Text variant='h1' as='span'>\n              {primaryText}\n            </Text>\n            {secondaryText && (\n              <Text variant='h5' as='span'>\n                {secondaryText}\n              </Text>\n            )}\n            <Status variant={status.variant}>{status.text}</Status>\n          </Flex>\n          {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n        </CardContent>\n\n        {onAccept ? (\n          <CardFooter justify={onDismiss ? 'between' : 'end'}>\n            {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n            {acceptButton}\n          </CardFooter>\n        ) : (\n          <CardFooter justify='end'>\n            <Button variant='primary' onClick={onDismiss}>\n              {t('close')}\n            </Button>\n          </CardFooter>\n        )}\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}
+{"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,EACnB,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,eAAe,MAAM,mBAAmB,CAAC;AA4DhD,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;iBACD,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;;MAS5B,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;IAE7C,MAAM,IAAI,GAAG,CACX,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAC,MAAM,YAC9B,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,GAC7B,CACR,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,0BACE,KAAC,kBAAkB,cAAE,GAAG,OAAO,CAAC,WAAW,KAAK,GAAsB,EACrE,IAAI,IACD,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,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;QACjF,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CACP,GAAG,EAAE;QACH,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3B,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,EACD,YAAY,CAAC,OAAO,EACpB,CAAC,SAAS,CAAC,CACZ,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,SAAS;gBACzB,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,QAAQ,EACjB,SAAS,EAAE,2BAA2B,CAAC,SAAS,EAChD,OAAO,EAAE,2BAA2B,CAAC,aAAa,EAClD,UAAU,EAAE,2BAA2B,CAAC,UAAU,IAAI,SAAS,EAC/D,GAAG,EAAE,eAAe,YAEnB,CAAC,CAAC,QAAQ,CAAC,GACI,CACnB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,YAC9D,CAAC,CAAC,QAAQ,CAAC,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,QAAQ,CAAC,CAAC,CAAC,CACV,MAAC,UAAU,IAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,aAC/C,SAAS,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,SAAS,YAAG,CAAC,CAAC,SAAS,CAAC,GAAU,EAChE,YAAY,IACF,CACd,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,OAAO,EAAC,KAAK,YACvB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,SAAS,YACzC,CAAC,CAAC,OAAO,CAAC,GACJ,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} from '@pega/cosmos-react-core';\nimport type {\n  StatusProps,\n  ForwardRefForwardPropsComponent,\n  FieldValueListProps,\n  NoChildrenProp,\n  RequireAtLeastOne\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton from './CountdownButton';\nimport type { CountdownButtonProps } from './CountdownButton';\n\ninterface InfoText {\n  /** Visually hidden description for accessibility purposes. */\n  description: string;\n  /** Information text. */\n  text: string;\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?: () => void;\n    /** Callback when decline or 'x' button is clicked. */\n    onDismiss?: () => void;\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: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst NotificationText = ({ content, variant = 'h5' }: NotificationTextProps) => {\n  const isString = typeof content === 'string';\n\n  const text = (\n    <Text variant={variant} as='span'>\n      {isString ? content : content.text}\n    </Text>\n  );\n\n  return isString ? (\n    text\n  ) : (\n    <div>\n      <VisuallyHiddenText>{`${content.description} - `}</VisuallyHiddenText>\n      {text}\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 { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n      onDismiss?.();\n    });\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDismiss?.();\n      },\n      containerRef.current,\n      [onDismiss]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${\n          typeof primaryText === 'string' ? primaryText : primaryText.description\n        } ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDismiss\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAccept}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDismiss}\n        ref={acceptButtonRef}\n      >\n        {t('accept')}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n        {t('accept')}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification\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        {onAccept ? (\n          <CardFooter justify={onDismiss ? 'between' : 'end'}>\n            {onDismiss && <Button onClick={onDismiss}>{t('decline')}</Button>}\n            {acceptButton}\n          </CardFooter>\n        ) : (\n          <CardFooter justify='end'>\n            <Button variant='primary' onClick={onDismiss}>\n              {t('close')}\n            </Button>\n          </CardFooter>\n        )}\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}

package/lib/components/UtilitiesLayout/UtilitiesLayout.styles.js

@@ -9,7 +9,7 @@ const StyledUtilitiesLayout = styled.div(({ utilitiesExpanded, lgOrAbove, theme
     padding-block: calc(2 * ${theme.base.spacing});
     position: sticky;
     inset-block-start: ${headerHeight};
-    height: calc(100vh - ${headerHeight} - 2rem);
+    height: calc(100vh - ${headerHeight});
     ${lgOrAbove &&
         utilitiesExpanded &&
         css `

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

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesLayout.styles.js","sourceRoot":"","sources":["../../../src/components/UtilitiesLayout/UtilitiesLayout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iEAAiE,CAAC;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAE5E,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAGrC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,OAAO,GAAG,CAAA;;8BAEkB,KAAK,CAAC,IAAI,CAAC,OAAO;;yBAEvB,YAAY;2BACV,YAAY;MACjC,SAAS;QACX,iBAAiB;QACjB,GAAG,CAAA;oCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEjD;;MAEC,gBAAgB,KAAK,yBAAyB;;;GAGjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,eAAe,qBAAqB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { headerHeight } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\nimport { StyledFullscreen } from '@pega/cosmos-react-core/lib/components/Fullscreen/Fullscreen';\n\nimport { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';\n\nconst StyledUtilitiesLayout = styled.div<{\n  utilitiesExpanded?: boolean;\n  lgOrAbove?: boolean;\n}>(({ utilitiesExpanded, lgOrAbove, theme }) => {\n  return css`\n    width: 3rem;\n    padding-block: calc(2 * ${theme.base.spacing});\n    position: sticky;\n    inset-block-start: ${headerHeight};\n    height: calc(100vh - ${headerHeight} - 2rem);\n    ${lgOrAbove &&\n    utilitiesExpanded &&\n    css`\n      margin-inline-end: calc(2 * ${theme.base.spacing});\n      width: 25rem;\n    `}\n\n    ${StyledFullscreen}, ${StyledGenAICoachContainer} {\n      height: 100%;\n    }\n  `;\n});\n\nStyledUtilitiesLayout.defaultProps = defaultThemeProp;\n\nexport default StyledUtilitiesLayout;\n"]}
+{"version":3,"file":"UtilitiesLayout.styles.js","sourceRoot":"","sources":["../../../src/components/UtilitiesLayout/UtilitiesLayout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,iEAAiE,CAAC;AAC/F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAE5E,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAGrC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,OAAO,GAAG,CAAA;;8BAEkB,KAAK,CAAC,IAAI,CAAC,OAAO;;yBAEvB,YAAY;2BACV,YAAY;MACjC,SAAS;QACX,iBAAiB;QACjB,GAAG,CAAA;oCAC6B,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEjD;;MAEC,gBAAgB,KAAK,yBAAyB;;;GAGjD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,eAAe,qBAAqB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport { headerHeight } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\nimport { StyledFullscreen } from '@pega/cosmos-react-core/lib/components/Fullscreen/Fullscreen';\n\nimport { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';\n\nconst StyledUtilitiesLayout = styled.div<{\n  utilitiesExpanded?: boolean;\n  lgOrAbove?: boolean;\n}>(({ utilitiesExpanded, lgOrAbove, theme }) => {\n  return css`\n    width: 3rem;\n    padding-block: calc(2 * ${theme.base.spacing});\n    position: sticky;\n    inset-block-start: ${headerHeight};\n    height: calc(100vh - ${headerHeight});\n    ${lgOrAbove &&\n    utilitiesExpanded &&\n    css`\n      margin-inline-end: calc(2 * ${theme.base.spacing});\n      width: 25rem;\n    `}\n\n    ${StyledFullscreen}, ${StyledGenAICoachContainer} {\n      height: 100%;\n    }\n  `;\n});\n\nStyledUtilitiesLayout.defaultProps = defaultThemeProp;\n\nexport default StyledUtilitiesLayout;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "9.0.0-build.14.1",
+  "version": "9.0.0-build.14.10",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
   "sideEffects": false,
@@ -14,8 +14,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "9.0.0-build.14.1",
-    "@pega/cosmos-react-rte": "9.0.0-build.14.1",
+    "@pega/cosmos-react-core": "9.0.0-build.14.10",
+    "@pega/cosmos-react-rte": "9.0.0-build.14.10",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
     "@types/styled-components": "^5.1.26",
@@ -31,6 +31,6 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/dompurify": "^3.0.5",
     "dompurify": "^3.1.6",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.3"
   }
 }