npm - @pega/cosmos-react-cs - Versions diffs - 4.0.0-dev.9.1 → 4.0.0 - Mend

@pega/cosmos-react-cs 4.0.0-dev.9.1 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/lib/components/CallControlPanel/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,~~gDAAgD;IAChD,~~KAAK,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1F,MAAM,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAAC;QAC/C,IAAI,YAAY,GAAG,WAAW,EAAE;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,WAAW,EAAE,mBAAmB,GAAG,cAAc;gBACjD,eAAe,EAAE,QAAQ;aAC1B,CAAC;SACH;QACD,QAAQ,IAAI,CAAC,CAAC;QACd,cAAc,GAAG,WAAW,CAAC;KAC9B;IACD,OAAO;QACL,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,QAAQ;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '@pega/cosmos-react-core';\n\nexport const formatDuration = (millis: number): string => {\n const seconds = Math.round(millis / 1000);\n return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nexport const calculateSla = (\n callDuration: number,\n slaConfig?: number[]\n): {\n slaTimeout?: number;\n slaDuration?: number;\n currentSlaLevel?: number;\n} => {\n let slaLevel = 0;\n let lastSlaTimeout = 0;\n if (!slaConfig) {\n return {\n slaTimeout: undefined,\n slaDuration: undefined,\n currentSlaLevel: undefined\n };\n }\n ~~// eslint-disable-next-line no-restricted-syntax\n~~ for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {\n const slaInMillis = slaTimeoutInSeconds * 1000;\n if (callDuration < slaInMillis) {\n return {\n slaTimeout: slaInMillis,\n slaDuration: slaTimeoutInSeconds - prevSlaTimeout,\n currentSlaLevel: slaLevel\n };\n }\n slaLevel += 1;\n lastSlaTimeout = slaInMillis;\n }\n return {\n slaTimeout: lastSlaTimeout,\n slaDuration: 0,\n currentSlaLevel: slaLevel\n };\n};\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,KAAK,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1F,MAAM,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAAC;QAC/C,IAAI,YAAY,GAAG,WAAW,EAAE;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,WAAW,EAAE,mBAAmB,GAAG,cAAc;gBACjD,eAAe,EAAE,QAAQ;aAC1B,CAAC;SACH;QACD,QAAQ,IAAI,CAAC,CAAC;QACd,cAAc,GAAG,WAAW,CAAC;KAC9B;IACD,OAAO;QACL,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,QAAQ;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '@pega/cosmos-react-core';\n\nexport const formatDuration = (millis: number): string => {\n const seconds = Math.round(millis / 1000);\n return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nexport const calculateSla = (\n callDuration: number,\n slaConfig?: number[]\n): {\n slaTimeout?: number;\n slaDuration?: number;\n currentSlaLevel?: number;\n} => {\n let slaLevel = 0;\n let lastSlaTimeout = 0;\n if (!slaConfig) {\n return {\n slaTimeout: undefined,\n slaDuration: undefined,\n currentSlaLevel: undefined\n };\n }\n for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {\n const slaInMillis = slaTimeoutInSeconds * 1000;\n if (callDuration < slaInMillis) {\n return {\n slaTimeout: slaInMillis,\n slaDuration: slaTimeoutInSeconds - prevSlaTimeout,\n currentSlaLevel: slaLevel\n };\n }\n slaLevel += 1;\n lastSlaTimeout = slaInMillis;\n }\n return {\n slaTimeout: lastSlaTimeout,\n slaDuration: 0,\n currentSlaLevel: slaLevel\n };\n};\n"]}

package/lib/components/DialPad/DialPad.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGzF,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,~~CAuC3D~~,CAAC;~~AAEF~~,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGzF,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAoC1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/DialPad/DialPad.js CHANGED Viewed

@@ -16,7 +16,7 @@ const StyledDialPad = styled.div(({ theme: { base } }) => {
   `;
 });
 StyledDialPad.defaultProps = defaultThemeProp;
-const DialPad = forwardRef(({ value, onCallClick, onChange, mode }, ref) => {
+const DialPad = forwardRef(function DialPad({ value, onCallClick, onChange, mode }, ref) {
     const t = useI18n();
     const onDialButtonClick = (charCode) => {
         const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);

package/lib/components/DialPad/DialPad.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAA2C,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAe1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,~~CACxE~~,~~CACE~~,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB~~,EACxB,EAAE~~;~~IACF~~,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,~~GACZ~~,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;~~QAChF~~,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC3B,CAAC,gBACW,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,WAAW,IAAI,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,4BAA4B,EAAE,CAAC,KAAK,CAAC,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,YAE3B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,eAAe,OAAO,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n defaultThemeProp,\n Input,\n Button,\n useI18n,\n Flex,\n StyledIcon,\n StyledFlex,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n /** Entered number. /\n value: string;\n /* Callback fired when user types in the input or clicks on dialpad. /\n onChange: (value: string) => void;\n /* Callback fired when user clicks call button. /\n onCallClick?: () => void;\n /* Keypad mode, regular or DTMF. /\n mode: DialPadKeyboardProps['mode'];\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n return css`\n ${StyledFlex} {\n margin: 0 auto ${base.spacing} auto;\n padding: ${base.spacing} 0;\n }\n\n ${StyledFlex} ${StyledIcon} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(\n ~~(\n~~ { value, onCallClick, onChange, mode }: PropsWithoutRef<DialPadProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n\n const onDialButtonClick = (charCode: number) => {\n const newValue ~~=\n~~ charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);\n onChange(newValue);\n };\n\n return (\n <StyledDialPad ref={ref}>\n <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n <Input\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n onChange(e.target.value);\n }}\n aria-label={t('dial_pad_phone_number_input_label')}\n readOnly={mode === 'DTMF'}\n />\n {mode !== 'DTMF' && onCallClick && (\n <Button\n variant='primary'\n onClick={onCallClick}\n aria-label={t('dial_pad_call_button_label', [value])}\n disabled={value.length === 0}\n >\n {t('dial_pad_call_button_label')}\n </Button>\n )}\n </Flex>\n <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n </StyledDialPad>\n );\n }\n);\n\nexport default DialPad;\n"]}
1	+ {"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAA2C,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAe1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC/F,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC3B,CAAC,gBACW,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,WAAW,IAAI,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,4BAA4B,EAAE,CAAC,KAAK,CAAC,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,YAE3B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n defaultThemeProp,\n Input,\n Button,\n useI18n,\n Flex,\n StyledIcon,\n StyledFlex,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n /** Entered number. /\n value: string;\n /* Callback fired when user types in the input or clicks on dialpad. /\n onChange: (value: string) => void;\n /* Callback fired when user clicks call button. /\n onCallClick?: () => void;\n /* Keypad mode, regular or DTMF. /\n mode: DialPadKeyboardProps['mode'];\n /* Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n return css`\n ${StyledFlex} {\n margin: 0 auto ${base.spacing} auto;\n padding: ${base.spacing} 0;\n }\n\n ${StyledFlex} ${StyledIcon} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(function DialPad(\n { value, onCallClick, onChange, mode }: PropsWithoutRef<DialPadProps>,\n ref: Ref<HTMLDivElement>\n) {\n const t = useI18n();\n\n const onDialButtonClick = (charCode: number) => {\n const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);\n onChange(newValue);\n };\n\n return (\n <StyledDialPad ref={ref}>\n <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n <Input\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n onChange(e.target.value);\n }}\n aria-label={t('dial_pad_phone_number_input_label')}\n readOnly={mode === 'DTMF'}\n />\n {mode !== 'DTMF' && onCallClick && (\n <Button\n variant='primary'\n onClick={onCallClick}\n aria-label={t('dial_pad_call_button_label', [value])}\n disabled={value.length === 0}\n >\n {t('dial_pad_call_button_label')}\n </Button>\n )}\n </Flex>\n <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n </StyledDialPad>\n );\n});\n\nexport default DialPad;\n"]}

package/lib/components/DialPad/DialPad.types.d.ts CHANGED Viewed

@@ -10,13 +10,13 @@ export interface DialButtonRow {
     rowId: number;
     dialButtons: DialButton[];
 }
-export declare type KeyDownNavigateOptions = {
+export type KeyDownNavigateOptions = {
     [key: string]: (previousId: number) => number;
 };
-export declare type KeyDownDialButtonOptions = {
+export type KeyDownDialButtonOptions = {
     [key: string]: DialButton;
 };
-export declare type Index = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type Index = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface NavigationGraphElement {
     sign?: string;
     alt?: string;

package/lib/components/DialPad/DialPad.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPad.types.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,~~oBAAY~~,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,~~oBAAY~~,wBAAwB,GAAG;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,~~oBAAY~~,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}
1	+ {"version":3,"file":"DialPad.types.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}

package/lib/components/DialPad/DialPadDialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,~~CA+DxD~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAgExD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/DialPad/DialPadDialog.js CHANGED Viewed

@@ -19,6 +19,7 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
     return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
             {
                 name: 'flip',
+                enabled: true,
                 options: {
                     fallbackPlacements: ['bottom-end', 'left', 'right']
                 }

package/lib/components/DialPad/DialPadDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n getFocusables,\n Icon,\n Popover,\n Text,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n target: HTMLElement \| null;\n onClose: () => void;\n onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n target,\n onClose: onCloseProp,\n onDialButtonClick\n}: DialPadDialogProps) => {\n const t = useI18n();\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const onClose = () => {\n onCloseProp();\n target?.focus();\n };\n\n useOuterEvent('mousedown', [popoverRef], onClose);\n useEscape(onClose, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n const [phoneNumber, setPhoneNumber] = useState('');\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n heading={t('call_panel_send_dtmf_heading')}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </CardHeader>\n <CardContent>\n <DialPad\n value={phoneNumber}\n onChange={inputText => {\n setPhoneNumber(inputText);\n // In DTMF mode only dialpad can be used for input without possibility to delete,\n // so always last character can be send to the parent component.\n onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n }}\n mode='DTMF'\n />\n </CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default DialPadDialog;\n"]}
1	+ {"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n getFocusables,\n Icon,\n Popover,\n Text,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n target: HTMLElement \| null;\n onClose: () => void;\n onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n target,\n onClose: onCloseProp,\n onDialButtonClick\n}: DialPadDialogProps) => {\n const t = useI18n();\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const onClose = () => {\n onCloseProp();\n target?.focus();\n };\n\n useOuterEvent('mousedown', [popoverRef], onClose);\n useEscape(onClose, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n const [phoneNumber, setPhoneNumber] = useState('');\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n enabled: true,\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n heading={t('call_panel_send_dtmf_heading')}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </CardHeader>\n <CardContent>\n <DialPad\n value={phoneNumber}\n onChange={inputText => {\n setPhoneNumber(inputText);\n // In DTMF mode only dialpad can be used for input without possibility to delete,\n // so always last character can be send to the parent component.\n onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n }}\n mode='DTMF'\n />\n </CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default DialPadDialog;\n"]}

package/lib/components/DialPad/DialPadKeyboard.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export declare type DialPadKeyboardMode = 'default' | 'DTMF';
+export type DialPadKeyboardMode = 'default' | 'DTMF';
 export interface DialPadKeyboardProps extends NoChildrenProp {
     /** Callback fired on dial button click */
     onDialButtonClick: (charCode: number) => void;

package/lib/components/DialPad/DialPadKeyboard.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPadKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAEZ,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAUjC,~~oBAAY~~,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAkJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"DialPadKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAEZ,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAkJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DialPad/DialPadKeyboard.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPa
 import { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';
 import { getDialButtonIndex, isNavigationEvent } from './utils';
 registerIcon(backspaceIcon);
-const DialPadKeyboard = forwardRef(({ onDialButtonClick, mode = 'default' }, ref) => {
+const DialPadKeyboard = forwardRef(function DialPadKeyboard({ onDialButtonClick, mode = 'default' }, ref) {
     const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;
     const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;
     const t = useI18n();

package/lib/components/DialPad/DialPadKeyboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAKL,UAAU,EACV,MAAM,EACN,WAAW,EACZ,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,IAAI,EAEJ,YAAY,EACZ,OAAO,EACP,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,kEAAkE,CAAC;AAElG,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAElG,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEhE,YAAY,CAAC,aAAa,CAAC,CAAC;AAW5B,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EAAE,iBAAiB,EAAE,IAAI,GAAG,SAAS,EAAyC,EAC9E,GAAqB,EACrB,EAAE;IACF,MAAM,cAAc,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;IAClE,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAExE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,mBAAmB,GAAG,YAAY,CACtC,GAAG,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,UAAU,IAAI,EAAE,CAAC,EAC5D,GAAG,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CACpD,CAAC;IACF,uGAAuG;IACvG,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC/B,sDAAsD;QACtD,OAAO,CAAC,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,qBAAqB,GAAG,CAAC,CAAyC,EAAE,KAAa,EAAE,EAAE;QACzF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,EAAE,CAAC;YAAE,OAAO;QAC3D,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC/B,iBAAiB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,CAAyC,EAAE,EAAE;QACzE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,UAAU;YAAE,OAAO;QAC9C,QAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC/B,iBAAiB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,CAAyC,EAAE,EAAE;QAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,iBAAiB,CAAC,MAAM,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAC,CAAC;SAClE;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAmC,EAAE,EAAE;QAChE,OAAO,cAAc,CAAC,IAAI,CACxB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,MAAM,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC,CACnE,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,+BAA+B,GAAG,CACtC,KAA6B,EAC7B,CAAyC,EACtB,EAAE;QACrB,OAAO;YACL,OAAO,EAAE,KAAK,CAAC,EAAE;YACjB,SAAS,EAAE,KAAK,CAAC,IAAI;YACrB,SAAS,EAAE,KAAK,CAAC,IAAI;YACrB,UAAU,EAAE,KAAK,CAAC,KAAK;SACxB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,CAAyC,EAAE,EAAE;QAC1E,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACnC,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,MAAM,WAAW,GAAG,+BAA+B,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9D,IAAI,WAAW,KAAK,SAAS;YAAE,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACnF,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,CAAmC,EAAE,EAAE;QACtC,MAAM,KAAK,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC;QACpC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,qBAAqB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;SACjC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YACxB,oBAAoB,CAAC,CAAC,CAAC,CAAC;SACzB;aAAM,IAAI,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC/B,qBAAqB,CAAC,CAAC,CAAC,CAAC;SAC1B;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,wBAAwB,EACnC,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,MAAM,gBACC,CAAC,CAAC,mBAAmB,CAAC,EAClC,SAAS,EAAE;YACT,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,CAAC;YACT,YAAY,EAAE,QAAQ;SACvB,YAEA,UAAU,CAAC,GAAG,CAAC,CAAC,GAA6B,EAAE,KAAa,EAAE,EAAE;YAC/D,IAAI,IAAI,KAAK,SAAS,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;gBACxD,OAAO;gBACL,oDAAoD;gBACpD,cAAK,IAAI,EAAC,KAAK,YACZ,GAAG,CAAC,GAAG,CAAC,CAAC,UAAkC,EAAE,EAAE,CAC9C,UAAU,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CACvB,MAAC,gBAAgB,IAEf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,KAAK,EAAE,UAAU,CAAC,OAAO,KACrB,mBAAmB,aAEtB,UAAU,CAAC,IAAI,IAAI,yBAAO,UAAU,CAAC,IAAI,GAAQ,EACjD,UAAU,CAAC,GAAG,IAAI,yBAAO,UAAU,CAAC,GAAG,GAAQ,KAT3C,UAAU,CAAC,OAAO,CAUN,CACpB,CAAC,CAAC,CAAC,CACF,MAAC,gBAAgB,IAEf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,EACpD,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,UAAU,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAC9B,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACzD,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,KAAK,EAAE,UAAU,CAAC,OAAO,aAExB,UAAU,CAAC,IAAI,IAAI,yBAAO,UAAU,CAAC,IAAI,GAAQ,EACjD,UAAU,CAAC,GAAG,IAAI,yBAAO,UAAU,CAAC,GAAG,GAAQ,EAC/C,UAAU,CAAC,OAAO,IAAI,KAAC,aAAa,cAAE,UAAU,CAAC,OAAO,GAAiB,EACzE,UAAU,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,GAAI,KAb9C,UAAU,CAAC,OAAO,CAcN,CACpB,CACF,IAjCkB,OAAO,KAAK,EAAE,CAkC7B,CACP,CAAC;aACH;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC,GACoB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n KeyboardEvent,\n forwardRef,\n useRef,\n useCallback\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n NoChildrenProp,\n registerIcon,\n useI18n,\n useLongPress\n} from '@pega/cosmos-react-core';\nimport * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nregisterIcon(backspaceIcon);\n\nexport type DialPadKeyboardMode = 'default' \| 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n /** Callback fired on dial button click /\n onDialButtonClick: (charCode: number) => void;\n /* Dial Pad Keyboard mode */\n mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n (\n { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n ref: Ref<HTMLElement>\n ) => {\n const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n const t = useI18n();\n const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n () => onDialButtonClick(buttonNavGraph[10].altKeyCode \|\| 43),\n () => onDialButtonClick(buttonNavGraph[10].keyCode)\n );\n // This is not a violation of the rules, as the array length is constant and order the always the same.\n buttonNavGraph.forEach(element => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n element.ref = useRef<HTMLButtonElement>(null);\n });\n\n const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[index];\n if (!buttonEl \|\| (mode === 'DTMF' && index === 12)) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.keyCode);\n };\n\n const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[10];\n if (!buttonEl \|\| !buttonEl.altKeyCode) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.altKeyCode);\n };\n\n const handleEnterEvent = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n }\n },\n [onDialButtonClick]\n );\n\n const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n return buttonNavGraph.find(\n el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n );\n };\n\n const getTargetIndexOnNavigationEvent = (\n btnEl: NavigationGraphElement,\n e: React.KeyboardEvent<HTMLButtonElement>\n ): Index \| undefined => {\n return {\n ArrowUp: btnEl.up,\n ArrowLeft: btnEl.left,\n ArrowDown: btnEl.down,\n ArrowRight: btnEl.right\n }[e.key];\n };\n\n const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n const btnEl = findButtonInGraph(e);\n if (!btnEl) return;\n const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n };\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n const index = getDialButtonIndex(e);\n if (index !== -1) {\n handleDialButtonEvent(e, index);\n } else if (e.key === '+') {\n handlePlusDialButton(e);\n } else if (isNavigationEvent(e)) {\n handleNavigationEvent(e);\n }\n },\n [onDialButtonClick]\n );\n\n return (\n <StyledDialPadKeyboard\n ref={ref}\n onKeyDown={handleKeyboardNavigation}\n dir='ltr'\n role='grid'\n aria-label={t('dial_pad_keyboard')}\n container={{\n cols: '1fr',\n rowGap: 1,\n justifyItems: 'center'\n }}\n >\n {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n if (mode === 'default' \|\| (mode === 'DTMF' && index < 4)) {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div role='row' key={`row-${index}`}>\n {row.map((dialButton: NavigationGraphElement) =>\n dialButton.alt === '+' ? (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n tabIndex={-1}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n {...zeroButtonLongPress}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n </StyledDialButton>\n ) : (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n onClick={() => onDialButtonClick(dialButton.keyCode)}\n onKeyDown={handleEnterEvent}\n tabIndex={dialButton.sign === '1' ? 0 : -1}\n aria-label={dialButton.icon ? dialButton.icon : undefined}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n {dialButton.icon && <Icon name={dialButton.icon} />}\n </StyledDialButton>\n )\n )}\n </div>\n );\n }\n return undefined;\n })}\n </StyledDialPadKeyboard>\n );\n }\n);\n\nexport default DialPadKeyboard;\n"]}
1	+ {"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n KeyboardEvent,\n forwardRef,\n useRef,\n useCallback\n} from 'react';\n\nimport {\n ForwardProps,\n Icon,\n NoChildrenProp,\n registerIcon,\n useI18n,\n useLongPress\n} from '@pega/cosmos-react-core';\nimport * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nregisterIcon(backspaceIcon);\n\nexport type DialPadKeyboardMode = 'default' \| 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n /** Callback fired on dial button click /\n onDialButtonClick: (charCode: number) => void;\n /* Dial Pad Keyboard mode */\n mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n function DialPadKeyboard(\n { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n ref: Ref<HTMLElement>\n ) {\n const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n const t = useI18n();\n const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n () => onDialButtonClick(buttonNavGraph[10].altKeyCode \|\| 43),\n () => onDialButtonClick(buttonNavGraph[10].keyCode)\n );\n // This is not a violation of the rules, as the array length is constant and order the always the same.\n buttonNavGraph.forEach(element => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n element.ref = useRef<HTMLButtonElement>(null);\n });\n\n const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[index];\n if (!buttonEl \|\| (mode === 'DTMF' && index === 12)) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.keyCode);\n };\n\n const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n const buttonEl = buttonNavGraph[10];\n if (!buttonEl \|\| !buttonEl.altKeyCode) return;\n buttonEl.ref?.current?.focus();\n onDialButtonClick(buttonEl.altKeyCode);\n };\n\n const handleEnterEvent = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n }\n },\n [onDialButtonClick]\n );\n\n const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n return buttonNavGraph.find(\n el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n );\n };\n\n const getTargetIndexOnNavigationEvent = (\n btnEl: NavigationGraphElement,\n e: React.KeyboardEvent<HTMLButtonElement>\n ): Index \| undefined => {\n return {\n ArrowUp: btnEl.up,\n ArrowLeft: btnEl.left,\n ArrowDown: btnEl.down,\n ArrowRight: btnEl.right\n }[e.key];\n };\n\n const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n e.preventDefault();\n const btnEl = findButtonInGraph(e);\n if (!btnEl) return;\n const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n };\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n const index = getDialButtonIndex(e);\n if (index !== -1) {\n handleDialButtonEvent(e, index);\n } else if (e.key === '+') {\n handlePlusDialButton(e);\n } else if (isNavigationEvent(e)) {\n handleNavigationEvent(e);\n }\n },\n [onDialButtonClick]\n );\n\n return (\n <StyledDialPadKeyboard\n ref={ref}\n onKeyDown={handleKeyboardNavigation}\n dir='ltr'\n role='grid'\n aria-label={t('dial_pad_keyboard')}\n container={{\n cols: '1fr',\n rowGap: 1,\n justifyItems: 'center'\n }}\n >\n {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n if (mode === 'default' \|\| (mode === 'DTMF' && index < 4)) {\n return (\n // eslint-disable-next-line react/no-array-index-key\n <div role='row' key={`row-${index}`}>\n {row.map((dialButton: NavigationGraphElement) =>\n dialButton.alt === '+' ? (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n tabIndex={-1}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n {...zeroButtonLongPress}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n </StyledDialButton>\n ) : (\n <StyledDialButton\n key={dialButton.keyCode}\n type='button'\n role='gridcell'\n onClick={() => onDialButtonClick(dialButton.keyCode)}\n onKeyDown={handleEnterEvent}\n tabIndex={dialButton.sign === '1' ? 0 : -1}\n aria-label={dialButton.icon ? dialButton.icon : undefined}\n ref={dialButton.ref}\n value={dialButton.keyCode}\n >\n {dialButton.sign && <span>{dialButton.sign}</span>}\n {dialButton.alt && <span>{dialButton.alt}</span>}\n {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n {dialButton.icon && <Icon name={dialButton.icon} />}\n </StyledDialButton>\n )\n )}\n </div>\n );\n }\n return undefined;\n })}\n </StyledDialPadKeyboard>\n );\n }\n);\n\nexport default DialPadKeyboard;\n"]}

package/lib/components/DialPad/KeyboardNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// ~~cSpell~~:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n {\n sign: '1',\n keyCode: 49,\n ref: undefined,\n right: 1,\n down: 3\n },\n {\n sign: '2',\n alt: 'ABC',\n keyCode: 50,\n ref: undefined,\n right: 2,\n down: 4,\n left: 0\n },\n {\n sign: '3',\n alt: 'DEF',\n keyCode: 51,\n ref: undefined,\n down: 5,\n left: 1\n },\n {\n sign: '4',\n alt: 'GHI',\n keyCode: 52,\n ref: undefined,\n up: 0,\n right: 4,\n down: 6\n },\n {\n sign: '5',\n alt: 'JKL',\n keyCode: 53,\n ref: undefined,\n up: 1,\n right: 5,\n down: 7,\n left: 3\n },\n {\n sign: '6',\n alt: 'MNO',\n keyCode: 54,\n ref: undefined,\n up: 2,\n down: 8,\n left: 4\n },\n {\n sign: '7',\n alt: 'PQRS',\n keyCode: 55,\n ref: undefined,\n up: 3,\n right: 7,\n down: 9\n },\n {\n sign: '8',\n alt: 'TUV',\n keyCode: 56,\n ref: undefined,\n up: 4,\n right: 8,\n down: 10,\n left: 6\n },\n {\n sign: '9',\n alt: 'WXYZ',\n keyCode: 57,\n ref: undefined,\n up: 5,\n down: 11,\n left: 7\n },\n {\n special: '*',\n keyCode: 42,\n ref: undefined,\n up: 6,\n right: 10,\n down: 12\n }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n {\n sign: '0',\n alt: '+',\n keyCode: 48,\n altKeyCode: 43,\n ref: undefined,\n up: 7,\n right: 11,\n left: 9\n },\n {\n special: '#',\n keyCode: 35,\n ref: undefined,\n up: 8,\n left: 10\n },\n {\n icon: 'backspace',\n keyCode: 127,\n ref: undefined,\n up: 10\n }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n {\n sign: '0',\n alt: '+',\n keyCode: 48,\n altKeyCode: 43,\n ref: undefined,\n up: 7,\n right: 11,\n down: 12,\n left: 9\n },\n {\n special: '#',\n keyCode: 35,\n ref: undefined,\n up: 8,\n down: 12,\n left: 10\n },\n {\n icon: 'backspace',\n keyCode: 127,\n ref: undefined,\n up: 10\n }\n]);\n\nexport const defaultButtonGrid = [\n [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}
1	+ {"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// cspell:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n {\n sign: '1',\n keyCode: 49,\n ref: undefined,\n right: 1,\n down: 3\n },\n {\n sign: '2',\n alt: 'ABC',\n keyCode: 50,\n ref: undefined,\n right: 2,\n down: 4,\n left: 0\n },\n {\n sign: '3',\n alt: 'DEF',\n keyCode: 51,\n ref: undefined,\n down: 5,\n left: 1\n },\n {\n sign: '4',\n alt: 'GHI',\n keyCode: 52,\n ref: undefined,\n up: 0,\n right: 4,\n down: 6\n },\n {\n sign: '5',\n alt: 'JKL',\n keyCode: 53,\n ref: undefined,\n up: 1,\n right: 5,\n down: 7,\n left: 3\n },\n {\n sign: '6',\n alt: 'MNO',\n keyCode: 54,\n ref: undefined,\n up: 2,\n down: 8,\n left: 4\n },\n {\n sign: '7',\n alt: 'PQRS',\n keyCode: 55,\n ref: undefined,\n up: 3,\n right: 7,\n down: 9\n },\n {\n sign: '8',\n alt: 'TUV',\n keyCode: 56,\n ref: undefined,\n up: 4,\n right: 8,\n down: 10,\n left: 6\n },\n {\n sign: '9',\n alt: 'WXYZ',\n keyCode: 57,\n ref: undefined,\n up: 5,\n down: 11,\n left: 7\n },\n {\n special: '*',\n keyCode: 42,\n ref: undefined,\n up: 6,\n right: 10,\n down: 12\n }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n {\n sign: '0',\n alt: '+',\n keyCode: 48,\n altKeyCode: 43,\n ref: undefined,\n up: 7,\n right: 11,\n left: 9\n },\n {\n special: '#',\n keyCode: 35,\n ref: undefined,\n up: 8,\n left: 10\n },\n {\n icon: 'backspace',\n keyCode: 127,\n ref: undefined,\n up: 10\n }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n {\n sign: '0',\n alt: '+',\n keyCode: 48,\n altKeyCode: 43,\n ref: undefined,\n up: 7,\n right: 11,\n down: 12,\n left: 9\n },\n {\n special: '#',\n keyCode: 35,\n ref: undefined,\n up: 8,\n down: 12,\n left: 10\n },\n {\n icon: 'backspace',\n keyCode: 127,\n ref: undefined,\n up: 10\n }\n]);\n\nexport const defaultButtonGrid = [\n [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}

package/lib/components/DialPad/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 export { default } from './DialPad';
 export { default as DialPadDialog } from './DialPadDialog';
-export { DialPadKeyboardProps } from './DialPadKeyboard';
+export type { DialPadKeyboardProps } from './DialPadKeyboard';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/DialPad/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,~~OAAO~~,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/DialPad/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './DialPad';\nexport { default as DialPadDialog } from './DialPadDialog';\nexport { DialPadKeyboardProps } from './DialPadKeyboard';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './DialPad';\nexport { default as DialPadDialog } from './DialPadDialog';\nexport type { DialPadKeyboardProps } from './DialPadKeyboard';\n"]}

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

@@ -0,0 +1,15 @@
+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 ADDED Viewed

@@ -0,0 +1 @@

+ {"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/{AcceptButton.js → CountdownButton.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useEffect, useState } from 'react';
+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';
@@ -7,7 +7,7 @@ const StyledAcceptButton = styled(Button)(({ theme }) => css `
     gap: ${theme.base.spacing};
   `);
 StyledAcceptButton.defaultProps = defaultThemeProp;
-const AcceptButton = memo(({ startTime, timeout, onTimerEnd, onClick }) => {
+const CountdownButton = forwardRef(function CountdownButton({ startTime, timeout, onTimerEnd, children, ...restProps }, ref) {
     const timeoutMs = timeout * 1000;
     const start = Number(startTime);
     const endTime = start + timeoutMs;
@@ -27,18 +27,16 @@ const AcceptButton = memo(({ startTime, timeout, onTimerEnd, onClick }) => {
         }
         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.
-     */
+    // 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, { variant: 'primary', "aria-describedby": descriptionId, onClick: onClick, children: [t('accept'), _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
+    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 AcceptButton;
-//# sourceMappingURL=AcceptButton.js.map
+export default CountdownButton;
+//# sourceMappingURL=CountdownButton.js.map

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

@@ -0,0 +1 @@

+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
 import { StatusProps, ForwardProps, FieldValueListProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { AcceptButtonProps } from './AcceptButton';
+import { CountdownButtonProps } from './CountdownButton';
 export interface InteractionNotificationProps extends NoChildrenProp {
     /** Ref to Component. */
     ref?: Ref<HTMLDivElement>;
@@ -21,9 +21,9 @@ export interface InteractionNotificationProps extends NoChildrenProp {
     fields?: FieldValueListProps['fields'];
     /** Timeout definition */
     incomingNotificationTimeout?: {
-        startTime: AcceptButtonProps['startTime'];
-        answerTimeout: AcceptButtonProps['timeout'];
-        onTimerEnd?: AcceptButtonProps['onTimerEnd'];
+        startTime: CountdownButtonProps['startTime'];
+        answerTimeout: CountdownButtonProps['timeout'];
+        onTimerEnd?: CountdownButtonProps['onTimerEnd'];
     };
     /** Callback when accept button is clicked. */
     onAccept: () => void;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,~~EAAE~~,MAAM,OAAO,CAAC;~~AAG5E~~,OAAO,EAOL,WAAW,EACX,YAAY,~~EASZ~~,mBAAmB,EAEnB,cAAc,~~EAGf~~,MAAM,yBAAyB,CAAC;~~AAKjC~~,~~OAAqB~~,EAAE,~~iBAAiB~~,EAAE,MAAM,~~gBAAgB~~,CAAC;~~AAEjE~~,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,~~iBAAiB~~,CAAC,WAAW,CAAC,CAAC;~~QAC1C~~,aAAa,EAAE,~~iBAAiB~~,CAAC,SAAS,CAAC,CAAC;~~QAC5C~~,UAAU,CAAC,EAAE,~~iBAAiB~~,CAAC,YAAY,CAAC,CAAC;~~KAC9C~~,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;~~AAmED~~,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,~~CAsEzF~~,CAAC;~~AAEJ~~,eAAe,uBAAuB,CAAC"}
1	+ {"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 CHANGED Viewed

@@ -1,24 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, CardFooter, StyledFieldValueList, StyledButton, useI18n, useDirection, Icon, StyledLabel } from '@pega/cosmos-react-core';
+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 { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
-import AcceptButton from './AcceptButton';
+import CountdownButton from './CountdownButton';
 const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
     const { rtl } = useDirection();
     return css `
     position: fixed;
-    inset-inline-end: 1rem;
-    inset-block-start: 4rem;
-    width: clamp(21.5rem, calc(100% - 2rem), 25rem);
+    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};
-    &:not(& &) {
+    &&& {
       background-color: ${base.colors.slate['extra-dark']};
     }
@@ -38,14 +38,9 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
       }
     }
-    ${StyledCardHeader} {
-      ${StyledButton} {
-        margin-inline-start: calc(2 * ${base.spacing});
-      }
-    }
     ${StyledCardContent} {
       margin: calc(2 * ${base.spacing}) 0;
+      overflow: auto;
       ${StyledText} {
         color: ${base.colors.white};
@@ -58,21 +53,58 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
     }
     ${StyledFieldValueList} {
-      border-top: solid 0.0625rem ${base.colors.gray.medium};
-      padding-top: calc(2 * ${base.spacing});
+      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;
-const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) => {
+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 acceptButton = incomingNotificationTimeout ? (_jsx(AcceptButton, { startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, onClick: onAccept })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }));
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsx(CardContent, { 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(CardFooter, { justify: 'between', children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) })), onDecline ? (_jsxs(Flex, { as: StyledCardFooter, container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })) : (_jsx(Flex, { as: StyledCardFooter, container: { direction: 'row-reverse' }, children: acceptButton }))] }));
+    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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, 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 StatusProps,\n ForwardProps,\n defaultThemeProp,\n Flex,\n StyledText,\n FieldValueList,\n CardFooter,\n StyledFieldValueList,\n StyledButton,\n useI18n,\n FieldValueListProps,\n useDirection,\n NoChildrenProp,\n Icon,\n StyledLabel\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nimport AcceptButton, { AcceptButtonProps } from './AcceptButton';\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: AcceptButtonProps['startTime'];\n answerTimeout: AcceptButtonProps['timeout'];\n onTimerEnd?: AcceptButtonProps['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-inline-end: 1rem;\n inset-block-start: 4rem;\n width: clamp(21.5rem, calc(100% - 2rem), 25rem);\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\n &:not(& &) {\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 ${StyledCardHeader} {\n ${StyledButton} {\n margin-inline-start: calc(2 * ${base.spacing});\n }\n }\n\n ${StyledCardContent} {\n margin: calc(2 * ${base.spacing}) 0;\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-top: solid 0.0625rem ${base.colors.gray.medium};\n padding-top: calc(2 * ${base.spacing});\n color: ${base.colors.white};\n\n ${StyledLabel} {\n color: ${base.colors.white};\n }\n }\n `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n forwardRef(\n (\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\n const acceptButton = incomingNotificationTimeout ? (\n <AcceptButton\n startTime={incomingNotificationTimeout.startTime}\n timeout={incomingNotificationTimeout.answerTimeout}\n onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n onClick={onAccept}\n />\n ) : (\n <Button variant='primary' onClick={onAccept}>\n {t('accept')}\n </Button>\n );\n\n return (\n <StyledInteractionNotification ref={ref}>\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>\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 </CardContent>\n {fields && fields.length !== 0 && (\n <CardFooter justify='between'>\n <FieldValueList variant='inline' fields={fields} />\n </CardFooter>\n )}\n {onDecline ? (\n <Flex as={StyledCardFooter} container={{ direction: 'row', justify: 'between' }}>\n <Button onClick={onDecline}>{t('decline')}</Button>\n {acceptButton}\n </Flex>\n ) : (\n <Flex as={StyledCardFooter} container={{ direction: 'row-reverse' }}>\n {acceptButton}\n </Flex>\n )}\n </StyledInteractionNotification>\n );\n }\n );\n\nexport default InteractionNotification;\n"]}
1	+ {"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/InteractionTimer/InteractionTimer.d.ts CHANGED Viewed

@@ -23,7 +23,7 @@ export interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp
 export declare const StyledInteractionTimerIconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInteractionTimerIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInteractionTimerMetaText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<InteractionTimerProps, "sla"> & Required<Pick<InteractionTimerProps, "sla">>, never>;
+export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<InteractionTimerProps, "progress" | "icon" | "meta" | "children" | "ref" | "as" | "className" | "forwardedAs" | "ariaLabel" | "hasNotifications"> & Required<Pick<InteractionTimerProps, "sla">>, never>;
 declare const InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps>;
 export default InteractionTimer;
 //# sourceMappingURL=InteractionTimer.d.ts.map

package/lib/components/InteractionTimer/InteractionTimer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAc~~,iBAAiB,~~EAAmB~~,GAAG,~~EAAE~~,MAAM,OAAO,CAAC;~~AAG5E~~,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,~~EACf~~,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC9E,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,~~gOAgElC~~,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,~~CA+C7E~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC9E,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,4SAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAmE7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}