@pega/cosmos-react-cs 5.0.0-dev.1.0 → 5.0.0-dev.10.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "5.0.0-dev.1.0",
+  "version": "5.0.0-dev.10.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pegasystems/cosmos-react.git",
+    "url": "git+https://github.com/pegasystems/cosmos-react.git",
     "directory": "packages/cosmos-cs"
   },
   "license": "SEE LICENSE IN LICENSE",
@@ -12,33 +12,23 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
-    "LICENSE",
-    "README.md",
     "lib"
   ],
   "scripts": {
-    "build": "tsc -b"
+    "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "5.0.0-dev.1.0",
-    "@pega/cosmos-react-dnd": "5.0.0-dev.1.0",
-    "@types/react": "^16.14.24 || ^17.0.38",
-    "@types/react-dom": "^16.9.14 || ^17.0.11",
+    "@pega/cosmos-react-core": "5.0.0-dev.10.0",
+    "@pega/cosmos-react-dnd": "5.0.0-dev.10.0",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",
     "polished": "^4.1.0",
-    "react": "^16.14.0 || ^17.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "styled-components": "^5.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.0.24",
-    "@storybook/addon-actions": "^7.0.24",
-    "@storybook/addon-storysource": "^7.0.24",
-    "@storybook/addon-toolbars": "^7.0.24",
-    "@storybook/react": "^7.0.24",
-    "@storybook/theming": "^7.0.24",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
-    "typescript": "~5.0.2"
+    "typescript": "~5.2.2"
   }
 }

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

@@ -1,15 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { ButtonProps, ForwardProps } from '@pega/cosmos-react-core';
-export interface CountdownButtonProps extends ButtonProps {
-    /** Text or content for the Button. */
-    children: ReactNode;
-    /** Start time of incoming Interaction. */
-    startTime: Date | number;
-    /** The time the user has to accept the call in seconds. */
-    timeout: number;
-    /** Callback invoked when timeout ends. */
-    onTimerEnd?: () => void;
-}
-declare const CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps>;
-export default CountdownButton;
-//# sourceMappingURL=CountdownButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CountdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAG3F,OAAO,EAOL,WAAW,EACX,YAAY,EACb,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAUD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/InteractionNotification/CountdownButton.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { useI18n, Text, VisuallyHiddenText, useUID, Button, defaultThemeProp } from '@pega/cosmos-react-core';
-import { formatDuration } from '../CallControlPanel/utils';
-const StyledAcceptButton = styled(Button)(({ theme }) => css `
-    gap: ${theme.base.spacing};
-  `);
-StyledAcceptButton.defaultProps = defaultThemeProp;
-const CountdownButton = forwardRef(function CountdownButton({ startTime, timeout, onTimerEnd, children, ...restProps }, ref) {
-    const timeoutMs = timeout * 1000;
-    const start = Number(startTime);
-    const endTime = start + timeoutMs;
-    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());
-    const secondsRemaining = Math.round(msRemaining / 1000);
-    const t = useI18n();
-    const descriptionId = useUID();
-    useEffect(() => {
-        let timeoutId;
-        if (msRemaining > 0) {
-            timeoutId = window.setTimeout(() => {
-                setMsRemaining(endTime - Date.now());
-            }, 1000);
-        }
-        else {
-            onTimerEnd?.();
-        }
-        return () => clearTimeout(timeoutId);
-    }, 
-    // Omitting onTimerEnd as an effect trigger on purpose.
-    // An unstable function definition in the prop causes the effect to run more than necessary.
-    // The proper definition will be captured and used with any changes to msRemaining.
-    [msRemaining]);
-    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, ref: ref, children: [children, _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
-                    ? t('interaction_time_remaining', [secondsRemaining], {
-                        count: secondsRemaining
-                    })
-                    : t('interaction_time_expired') })] }));
-});
-export default CountdownButton;
-//# sourceMappingURL=CountdownButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAuC,EAC/F,GAA2B;IAE3B,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,uDAAuD;IACvD,4FAA4F;IAC5F,mFAAmF;IACnF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,OAAK,SAAS,sBAAoB,aAAa,EAAE,GAAG,EAAE,GAAG,aACzE,QAAQ,EACT,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp,\n  ButtonProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface CountdownButtonProps extends ButtonProps {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n}\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n  function CountdownButton(\n    { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      // Omitting onTimerEnd as an effect trigger on purpose.\n      // An unstable function definition in the prop causes the effect to run more than necessary.\n      // The proper definition will be captured and used with any changes to msRemaining.\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n          {children}\n          <Text aria-hidden='true'>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default CountdownButton;\n"]}

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

@@ -1,35 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { StatusProps, ForwardProps, FieldValueListProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { CountdownButtonProps } from './CountdownButton';
-export interface InteractionNotificationProps extends NoChildrenProp {
-    /** Ref to Component. */
-    ref?: Ref<HTMLDivElement>;
-    /** Name of the icon used in header. */
-    icon: string;
-    /** Interaction title. */
-    title: string;
-    /** Primary information of the notification. For example caller name . */
-    primaryText: string;
-    /** Secondary information of the notification. For example phone number of the caller */
-    secondaryText?: string;
-    /** Represents the current status of interaction. */
-    status: {
-        variant: StatusProps['variant'];
-        text: string;
-    };
-    /** Information structured as field values to be displayed below main section. */
-    fields?: FieldValueListProps['fields'];
-    /** Timeout definition */
-    incomingNotificationTimeout?: {
-        startTime: CountdownButtonProps['startTime'];
-        answerTimeout: CountdownButtonProps['timeout'];
-        onTimerEnd?: CountdownButtonProps['onTimerEnd'];
-    };
-    /** Callback when accept button is clicked. */
-    onAccept: () => void;
-    /** Callback when decline button is clicked. */
-    onDecline?: () => void;
-}
-declare const InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps>;
-export default InteractionNotification;
-//# sourceMappingURL=InteractionNotification.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAOZ,mBAAmB,EAEnB,cAAc,EASf,MAAM,yBAAyB,CAAC;AAGjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,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,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,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,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgFD,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAmGxF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -1,110 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape, CardFooter } from '@pega/cosmos-react-core';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import CountdownButton from './CountdownButton';
-const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
-    const { rtl } = useDirection();
-    return css `
-    position: fixed;
-    inset-block-start: calc(2 * ${base.spacing});
-    inset-inline-end: calc(2 * ${base.spacing});
-    width: min(calc(100% - 2rem), ${base['content-width'].md});
-    max-height: calc(100vh - 2rem);
-    z-index: ${base['z-index'].modal};
-    color: ${base.colors.white};
-    animation: SlideIn calc(4 * ${base.animation.speed});
-    padding: calc(0.75 * ${base.spacing}) 0;
-    box-shadow: ${base.shadow.low};
-
-    &&& {
-      background-color: ${base.colors.slate['extra-dark']};
-    }
-
-    @keyframes SlideIn {
-      0% {
-        ${rtl
-        ? css `
-              transform: translateX(calc(-100% - 1rem));
-            `
-        : css `
-              transform: translateX(calc(100% + 1rem));
-            `}
-      }
-
-      100% {
-        transform: translateX(0);
-      }
-    }
-
-    ${StyledCardContent} {
-      margin: calc(2 * ${base.spacing}) 0;
-      overflow: auto;
-
-      ${StyledText} {
-        color: ${base.colors.white};
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-        text-align: center;
-      }
-    }
-
-    ${StyledFieldValueList} {
-      border-block-start: solid 0.0625rem ${base.palette['border-line']};
-      padding-block-start: calc(2 * ${base.spacing});
-      color: ${base.colors.white};
-
-      ${StyledLabel} {
-        color: ${base.colors.white};
-      }
-    }
-
-    @media (min-width: calc(${base.breakpoints.md})) {
-      inset-block-start: calc(8 * ${base.spacing});
-      max-height: initial;
-    }
-  `;
-});
-StyledInteractionNotification.defaultProps = defaultThemeProp;
-registerAction({
-    id: 'GoToIncomingInteraction',
-    defaultKeyBinding: 'Alt+Enter'
-}, {
-    id: 'DismissIncomingInteraction',
-    defaultKeyBinding: 'Alt+Q'
-});
-const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) {
-    const t = useI18n();
-    const { announceAssertive } = useLiveLog();
-    const containerRef = useConsolidatedRef(ref);
-    const returnRef = useRef();
-    const acceptButtonRef = useRef(null);
-    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {
-        if (containerRef.current) {
-            returnRef.current = document.activeElement ?? undefined;
-            acceptButtonRef.current?.focus();
-        }
-    });
-    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {
-        onDecline?.();
-    });
-    useEscape(() => {
-        returnRef.current?.focus();
-        onDecline?.();
-    }, containerRef.current, [onDecline]);
-    useEffect(() => {
-        announceAssertive({
-            message: `${title} ${primaryText} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDecline
-                ? t('interaction_shortcut_dismiss_info', [dismissBinding])
-                : ''}`,
-            type: 'alert'
-        });
-    }, []);
-    const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, ref: acceptButtonRef, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, ref: acceptButtonRef, children: t('accept') }));
-    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && (_jsx(Text, { variant: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), _jsxs(CardFooter, { justify: onDecline ? 'between' : 'end', children: [onDecline && _jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })] }));
-});
-export default InteractionNotification;
-//# sourceMappingURL=InteractionNotification.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  useConsolidatedRef,\n  useEscape,\n  CardFooter\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\n\nexport interface InteractionNotificationProps extends 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 button is clicked. */\n  onDecline?: () => void;\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'].modal};\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: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDecline\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      onDecline?.();\n    });\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDecline?.();\n      },\n      containerRef.current,\n      [onDecline]\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 && onDecline\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 ?? onDecline}\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 ref={containerRef} data-app-region>\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        <CardFooter justify={onDecline ? 'between' : 'end'}>\n          {onDecline && <Button onClick={onDecline}>{t('decline')}</Button>}\n          {acceptButton}\n        </CardFooter>\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}

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

@@ -1,2 +0,0 @@
-export { default } from './InteractionNotification';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/components/InteractionNotification/index.js

@@ -1,2 +0,0 @@
-export { default } from './InteractionNotification';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { default } from './InteractionNotification';\n"]}