@pega/cosmos-react-core 3.0.0-dev.22.0 → 3.0.0-dev.23.2

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 (96) hide show
  1. package/lib/components/AppShell/AppShell.d.ts.map +1 -1
  2. package/lib/components/AppShell/AppShell.js +18 -10
  3. package/lib/components/AppShell/AppShell.js.map +1 -1
  4. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  5. package/lib/components/AppShell/AppShell.styles.js +2 -0
  6. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  7. package/lib/components/AppShell/AppShell.types.d.ts +2 -0
  8. package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
  9. package/lib/components/AppShell/AppShell.types.js.map +1 -1
  10. package/lib/components/AppShell/AppShellContext.d.ts +3 -1
  11. package/lib/components/AppShell/AppShellContext.d.ts.map +1 -1
  12. package/lib/components/AppShell/AppShellContext.js +3 -1
  13. package/lib/components/AppShell/AppShellContext.js.map +1 -1
  14. package/lib/components/AppShell/AppShellSearch.d.ts.map +1 -1
  15. package/lib/components/AppShell/AppShellSearch.js +11 -3
  16. package/lib/components/AppShell/AppShellSearch.js.map +1 -1
  17. package/lib/components/AppShell/AppShellSearch.styles.d.ts +1 -1
  18. package/lib/components/AppShell/AppShellSearch.styles.d.ts.map +1 -1
  19. package/lib/components/AppShell/AppShellSearch.styles.js +7 -4
  20. package/lib/components/AppShell/AppShellSearch.styles.js.map +1 -1
  21. package/lib/components/AppShell/Drawer.d.ts.map +1 -1
  22. package/lib/components/AppShell/Drawer.js +6 -2
  23. package/lib/components/AppShell/Drawer.js.map +1 -1
  24. package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
  25. package/lib/components/AppShell/NavigationList.js +4 -3
  26. package/lib/components/AppShell/NavigationList.js.map +1 -1
  27. package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map +1 -1
  28. package/lib/components/AppShell/NavigationListItemWrapper.js +66 -9
  29. package/lib/components/AppShell/NavigationListItemWrapper.js.map +1 -1
  30. package/lib/components/Button/BareRoleButton.d.ts.map +1 -1
  31. package/lib/components/Button/BareRoleButton.js +3 -1
  32. package/lib/components/Button/BareRoleButton.js.map +1 -1
  33. package/lib/components/Checkbox/Checkbox.d.ts +3 -1
  34. package/lib/components/Checkbox/Checkbox.d.ts.map +1 -1
  35. package/lib/components/Checkbox/Checkbox.js.map +1 -1
  36. package/lib/components/DateTime/DurationDisplay.js +3 -3
  37. package/lib/components/DateTime/DurationDisplay.js.map +1 -1
  38. package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
  39. package/lib/components/DateTime/Input/DateInput.js +4 -3
  40. package/lib/components/DateTime/Input/DateInput.js.map +1 -1
  41. package/lib/components/DateTime/Input/DateRangeInput.d.ts.map +1 -1
  42. package/lib/components/DateTime/Input/DateRangeInput.js +6 -7
  43. package/lib/components/DateTime/Input/DateRangeInput.js.map +1 -1
  44. package/lib/components/DateTime/Input/DateTimeInput.d.ts.map +1 -1
  45. package/lib/components/DateTime/Input/DateTimeInput.js +8 -7
  46. package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
  47. package/lib/components/DateTime/Input/Duration/NumberUnit.d.ts.map +1 -1
  48. package/lib/components/DateTime/Input/Duration/NumberUnit.js +30 -33
  49. package/lib/components/DateTime/Input/Duration/NumberUnit.js.map +1 -1
  50. package/lib/components/DateTime/Input/Duration/Time.d.ts.map +1 -1
  51. package/lib/components/DateTime/Input/Duration/Time.js +5 -4
  52. package/lib/components/DateTime/Input/Duration/Time.js.map +1 -1
  53. package/lib/components/DateTime/Input/MonthInput.d.ts.map +1 -1
  54. package/lib/components/DateTime/Input/MonthInput.js +21 -24
  55. package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
  56. package/lib/components/DateTime/Input/QuarterInput.d.ts.map +1 -1
  57. package/lib/components/DateTime/Input/QuarterInput.js +22 -23
  58. package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
  59. package/lib/components/DateTime/Input/TimeInput.d.ts.map +1 -1
  60. package/lib/components/DateTime/Input/TimeInput.js +5 -4
  61. package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
  62. package/lib/components/DateTime/Input/WeekInput.d.ts.map +1 -1
  63. package/lib/components/DateTime/Input/WeekInput.js +8 -3
  64. package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
  65. package/lib/components/DateTime/Input/utils.d.ts.map +1 -1
  66. package/lib/components/DateTime/Input/utils.js +2 -1
  67. package/lib/components/DateTime/Input/utils.js.map +1 -1
  68. package/lib/components/DateTime/Picker/Calendar.d.ts.map +1 -1
  69. package/lib/components/DateTime/Picker/Calendar.js +15 -5
  70. package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
  71. package/lib/components/DateTime/Picker/Weeks.d.ts.map +1 -1
  72. package/lib/components/DateTime/Picker/Weeks.js +14 -6
  73. package/lib/components/DateTime/Picker/Weeks.js.map +1 -1
  74. package/lib/components/DateTime/utils.d.ts +2 -2
  75. package/lib/components/DateTime/utils.d.ts.map +1 -1
  76. package/lib/components/DateTime/utils.js +18 -4
  77. package/lib/components/DateTime/utils.js.map +1 -1
  78. package/lib/components/HTML/HTML.d.ts.map +1 -1
  79. package/lib/components/HTML/HTML.js +13 -13
  80. package/lib/components/HTML/HTML.js.map +1 -1
  81. package/lib/components/RadioButton/RadioButton.d.ts +3 -1
  82. package/lib/components/RadioButton/RadioButton.d.ts.map +1 -1
  83. package/lib/components/RadioButton/RadioButton.js.map +1 -1
  84. package/lib/hooks/useI18n.d.ts +11 -17
  85. package/lib/hooks/useI18n.d.ts.map +1 -1
  86. package/lib/hooks/useTransitionState.js +1 -1
  87. package/lib/hooks/useTransitionState.js.map +1 -1
  88. package/lib/i18n/default.d.ts +11 -17
  89. package/lib/i18n/default.d.ts.map +1 -1
  90. package/lib/i18n/default.js +11 -17
  91. package/lib/i18n/default.js.map +1 -1
  92. package/lib/i18n/i18n.d.ts +11 -17
  93. package/lib/i18n/i18n.d.ts.map +1 -1
  94. package/lib/init.js +1 -1
  95. package/lib/init.js.map +1 -1
  96. package/package.json +1 -1
@@ -4,8 +4,9 @@ import styled, { css } from 'styled-components';
4
4
  import Flex from '../../Flex';
5
5
  import { defaultThemeProp } from '../../../theme';
6
6
  import Text from '../../Text';
7
+ import { cap } from '../../../utils';
7
8
  import { getDateOfISOWeek, getWeek, parseToDate, toUTCDateString } from '../Input/utils';
8
- import { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';
9
+ import { useConfiguration, useConsolidatedRef, useFocusWithin } from '../../../hooks';
9
10
  import { CALENDAR_TYPES } from '../Input/local';
10
11
  import { StyledColumnLabel, StyledPick } from './Calendar.styles';
11
12
  import { getWeeksOfMonth } from './utils';
@@ -30,6 +31,7 @@ const StyledWeekNumber = styled(StyledPick)(props => {
30
31
  StyledWeekNumber.defaultProps = defaultThemeProp;
31
32
  const Weeks = forwardRef((props, ref) => {
32
33
  const { selected, current = selected ? new Date(selected.getTime()) : new Date(), calendarType = CALENDAR_TYPES.ISO_8601, onSelect, onFocus, disabled = false, size = 'short' } = props;
34
+ const { locale } = useConfiguration();
33
35
  const [focusedWeek, setFocusedWeek] = useState(current);
34
36
  useLayoutEffect(() => {
35
37
  setFocusedWeek(current);
@@ -73,8 +75,14 @@ const Weeks = forwardRef((props, ref) => {
73
75
  return (toUTCDateString(day) ===
74
76
  toUTCDateString(getDateOfISOWeek(getWeek(focusedWeek, calendarType), focusedWeek.getFullYear())));
75
77
  };
76
- const t = useI18n();
77
- const weekText = t('week_label_a11y');
78
+ const displayNames = new Intl.DisplayNames(locale, {
79
+ style: 'long',
80
+ type: 'dateTimeField'
81
+ });
82
+ const displayNamesShort = new Intl.DisplayNames(locale, {
83
+ style: 'short',
84
+ type: 'dateTimeField'
85
+ });
78
86
  const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {
79
87
  const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());
80
88
  return (_jsxs(StyledWeekNumber, { variant: 'simple', icon: false, type: 'button', loading: false, ref: isFocused(dateOfISOWeek)
@@ -82,13 +90,13 @@ const Weeks = forwardRef((props, ref) => {
82
90
  if (hasFocus)
83
91
  focusedRef?.focus();
84
92
  }
85
- : undefined, tabIndex: isFocused(dateOfISOWeek) ? 0 : -1, disabled: isDisabled(dateOfISOWeek), "aria-selected": isChecked(dateOfISOWeek) || undefined, "aria-label": `${t('week_label_a11y')} ${weekNo.toString()} ${current
93
+ : undefined, tabIndex: isFocused(dateOfISOWeek) ? 0 : -1, disabled: isDisabled(dateOfISOWeek), "aria-selected": isChecked(dateOfISOWeek) || undefined, "aria-label": `${displayNames.of('weekOfYear')} ${weekNo.toString()} ${current
86
94
  .getUTCFullYear()
87
95
  .toString()}`, onClick: () => {
88
96
  onSelect?.(dateOfISOWeek);
89
- }, children: [size === 'long' && `${weekText} `, weekNo.toString()] }, weekNo));
97
+ }, children: [size === 'long' && `${cap(displayNames.of('weekOfYear'))} `, weekNo.toString()] }, weekNo));
90
98
  });
91
- const label = size === 'short' ? (_jsx(Text, { as: StyledColumnLabel, forwardedAs: 'abbr', title: weekText, children: t('week_text_short') })) : (_jsx(Text, { as: StyledColumnLabel, children: weekText }));
99
+ const label = size === 'short' ? (_jsx(Text, { as: StyledColumnLabel, forwardedAs: 'abbr', title: cap(displayNames.of('weekOfYear')), children: cap(displayNamesShort.of('weekOfYear')) })) : (_jsx(Text, { as: StyledColumnLabel, children: cap(displayNames.of('weekOfYear')) }));
92
100
  return (_jsxs(Flex, { as: StyledWeekNumbers, container: { direction: 'column' }, ref: containerRef, onKeyDown: onKeyDown, children: [label, weeks] }));
93
101
  });
94
102
  export default Weeks;
@@ -1 +1 @@
1
- {"version":3,"file":"Weeks.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Weeks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n useLayoutEffect,\n KeyboardEvent,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { defaultThemeProp } from '../../../theme';\nimport Text from '../../Text';\nimport { getDateOfISOWeek, getWeek, parseToDate, toUTCDateString } from '../Input/utils';\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport { ForwardProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\n\nimport { StyledColumnLabel, StyledPick } from './Calendar.styles';\nimport { getWeeksOfMonth } from './utils';\n\nexport interface WeeksProps {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /**\n * Defines default week that will be selected when the Date Picker is opened.\n */\n selected?: Date;\n /**\n * Defines default week that will be focused initially when the Date Picker is opened.\n * @default new Date()\n */\n current?: Date;\n /** Callback fired when user focuses new week. */\n onFocus?: (date: Date) => void;\n /** Callback fired when new week is selected. */\n onSelect?: (date: Date) => void;\n /** Sets the type of calendar to be used. This will be determined by locale if no value is provided. */\n calendarType?: string;\n /** Defines minimum available value that can be selected by the user. */\n min?: string | number | Date;\n /** Defines maximum available value that can be selected by the user. */\n max?: string | number | Date;\n /** Set the calendar to disabled state, ie. non-interactive. */\n disabled?: boolean;\n /** Should text be in long or short format (ie. only number). */\n size?: 'short' | 'long';\n}\n\nexport const StyledWeekNumbers = styled.div`\n margin-inline-end: ${props => props.theme.base.spacing};\n color: rgba(0, 0, 0, 0.75);\n`;\n\nStyledWeekNumbers.defaultProps = defaultThemeProp;\n\nconst StyledWeekNumber = styled(StyledPick)(props => {\n const {\n theme: {\n base: { 'border-radius': borderRadius }\n }\n } = props;\n\n return css`\n &:disabled {\n &:nth-child(2) {\n border-radius: calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;\n }\n &:last-child {\n border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});\n }\n }\n `;\n});\n\nStyledWeekNumber.defaultProps = defaultThemeProp;\n\nconst Weeks: FC<WeeksProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<WeeksProps>, ref: Ref<HTMLButtonElement>) => {\n const {\n selected,\n current = selected ? new Date(selected.getTime()) : new Date(),\n calendarType = CALENDAR_TYPES.ISO_8601,\n onSelect,\n onFocus,\n disabled = false,\n size = 'short'\n } = props;\n\n const [focusedWeek, setFocusedWeek] = useState(current);\n useLayoutEffect(() => {\n setFocusedWeek(current);\n }, [current.getUTCFullYear(), current.getUTCMonth()]);\n\n let newFocused: Date;\n const onKeyDown = (ev: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown', 'Enter'].includes(ev.key)) ev.preventDefault();\n switch (ev.key) {\n case 'ArrowUp':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() - 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'ArrowDown':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() + 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'Enter':\n onSelect?.(focusedWeek);\n break;\n default:\n }\n };\n\n const containerRef = useConsolidatedRef(ref);\n const hasFocus = useFocusWithin([containerRef]);\n\n const min = props.min ? parseToDate(props.min) : -Infinity;\n const max = props.max ? parseToDate(props.max) : Infinity;\n const isDisabled = (day: Date) => {\n return disabled || min > day.getTime() || day.getTime() > max;\n };\n\n const isChecked = (day: Date) => {\n return (\n selected &&\n toUTCDateString(day) ===\n toUTCDateString(getDateOfISOWeek(getWeek(selected, calendarType), selected.getFullYear()))\n );\n };\n\n const isFocused = (day: Date) => {\n return (\n toUTCDateString(day) ===\n toUTCDateString(\n getDateOfISOWeek(getWeek(focusedWeek, calendarType), focusedWeek.getFullYear())\n )\n );\n };\n\n const t = useI18n();\n\n const weekText = t('week_label_a11y');\n\n const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {\n const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());\n return (\n <StyledWeekNumber\n key={weekNo}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isFocused(dateOfISOWeek)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isFocused(dateOfISOWeek) ? 0 : -1}\n disabled={isDisabled(dateOfISOWeek)}\n aria-selected={isChecked(dateOfISOWeek) || undefined}\n aria-label={`${t('week_label_a11y')} ${weekNo.toString()} ${current\n .getUTCFullYear()\n .toString()}`}\n onClick={() => {\n onSelect?.(dateOfISOWeek);\n }}\n >\n {size === 'long' && `${weekText} `}\n {weekNo.toString()}\n </StyledWeekNumber>\n );\n });\n\n const label =\n size === 'short' ? (\n <Text as={StyledColumnLabel} forwardedAs='abbr' title={weekText}>\n {t('week_text_short')}\n </Text>\n ) : (\n <Text as={StyledColumnLabel}>{weekText}</Text>\n );\n\n return (\n <Flex\n as={StyledWeekNumbers}\n container={{ direction: 'column' }}\n ref={containerRef}\n onKeyDown={onKeyDown}\n >\n {label}\n {weeks}\n </Flex>\n );\n }\n);\n\nexport default Weeks;\n"]}
1
+ {"version":3,"file":"Weeks.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/Weeks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n useLayoutEffect,\n KeyboardEvent,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport { defaultThemeProp } from '../../../theme';\nimport Text from '../../Text';\nimport { cap } from '../../../utils';\nimport { getDateOfISOWeek, getWeek, parseToDate, toUTCDateString } from '../Input/utils';\nimport { useConfiguration, useConsolidatedRef, useFocusWithin } from '../../../hooks';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport { ForwardProps } from '../../../types';\nimport { FormControlProps } from '../../FormControl';\n\nimport { StyledColumnLabel, StyledPick } from './Calendar.styles';\nimport { getWeeksOfMonth } from './utils';\n\nexport interface WeeksProps {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /**\n * Defines default week that will be selected when the Date Picker is opened.\n */\n selected?: Date;\n /**\n * Defines default week that will be focused initially when the Date Picker is opened.\n * @default new Date()\n */\n current?: Date;\n /** Callback fired when user focuses new week. */\n onFocus?: (date: Date) => void;\n /** Callback fired when new week is selected. */\n onSelect?: (date: Date) => void;\n /** Sets the type of calendar to be used. This will be determined by locale if no value is provided. */\n calendarType?: string;\n /** Defines minimum available value that can be selected by the user. */\n min?: string | number | Date;\n /** Defines maximum available value that can be selected by the user. */\n max?: string | number | Date;\n /** Set the calendar to disabled state, ie. non-interactive. */\n disabled?: boolean;\n /** Should text be in long or short format (ie. only number). */\n size?: 'short' | 'long';\n}\n\nexport const StyledWeekNumbers = styled.div`\n margin-inline-end: ${props => props.theme.base.spacing};\n color: rgba(0, 0, 0, 0.75);\n`;\n\nStyledWeekNumbers.defaultProps = defaultThemeProp;\n\nconst StyledWeekNumber = styled(StyledPick)(props => {\n const {\n theme: {\n base: { 'border-radius': borderRadius }\n }\n } = props;\n\n return css`\n &:disabled {\n &:nth-child(2) {\n border-radius: calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius}) 0 0;\n }\n &:last-child {\n border-radius: 0 0 calc(0.5 * ${borderRadius}) calc(0.5 * ${borderRadius});\n }\n }\n `;\n});\n\nStyledWeekNumber.defaultProps = defaultThemeProp;\n\nconst Weeks: FC<WeeksProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<WeeksProps>, ref: Ref<HTMLButtonElement>) => {\n const {\n selected,\n current = selected ? new Date(selected.getTime()) : new Date(),\n calendarType = CALENDAR_TYPES.ISO_8601,\n onSelect,\n onFocus,\n disabled = false,\n size = 'short'\n } = props;\n\n const { locale } = useConfiguration();\n\n const [focusedWeek, setFocusedWeek] = useState(current);\n useLayoutEffect(() => {\n setFocusedWeek(current);\n }, [current.getUTCFullYear(), current.getUTCMonth()]);\n\n let newFocused: Date;\n const onKeyDown = (ev: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown', 'Enter'].includes(ev.key)) ev.preventDefault();\n switch (ev.key) {\n case 'ArrowUp':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() - 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'ArrowDown':\n newFocused = new Date(focusedWeek);\n newFocused.setUTCDate(focusedWeek.getUTCDate() + 7);\n setFocusedWeek(newFocused);\n onFocus?.(newFocused);\n break;\n case 'Enter':\n onSelect?.(focusedWeek);\n break;\n default:\n }\n };\n\n const containerRef = useConsolidatedRef(ref);\n const hasFocus = useFocusWithin([containerRef]);\n\n const min = props.min ? parseToDate(props.min) : -Infinity;\n const max = props.max ? parseToDate(props.max) : Infinity;\n const isDisabled = (day: Date) => {\n return disabled || min > day.getTime() || day.getTime() > max;\n };\n\n const isChecked = (day: Date) => {\n return (\n selected &&\n toUTCDateString(day) ===\n toUTCDateString(getDateOfISOWeek(getWeek(selected, calendarType), selected.getFullYear()))\n );\n };\n\n const isFocused = (day: Date) => {\n return (\n toUTCDateString(day) ===\n toUTCDateString(\n getDateOfISOWeek(getWeek(focusedWeek, calendarType), focusedWeek.getFullYear())\n )\n );\n };\n\n const displayNames = new Intl.DisplayNames(locale, {\n style: 'long',\n type: 'dateTimeField'\n }) as Intl.DateTimeDisplayNames;\n const displayNamesShort = new Intl.DisplayNames(locale, {\n style: 'short',\n type: 'dateTimeField'\n }) as Intl.DateTimeDisplayNames;\n\n const weeks = getWeeksOfMonth(current, calendarType).map(weekNo => {\n const dateOfISOWeek = getDateOfISOWeek(weekNo, current.getUTCFullYear());\n return (\n <StyledWeekNumber\n key={weekNo}\n variant='simple'\n icon={false}\n type='button'\n loading={false}\n ref={\n isFocused(dateOfISOWeek)\n ? (focusedRef: HTMLButtonElement) => {\n if (hasFocus) focusedRef?.focus();\n }\n : undefined\n }\n tabIndex={isFocused(dateOfISOWeek) ? 0 : -1}\n disabled={isDisabled(dateOfISOWeek)}\n aria-selected={isChecked(dateOfISOWeek) || undefined}\n aria-label={`${displayNames.of('weekOfYear')} ${weekNo.toString()} ${current\n .getUTCFullYear()\n .toString()}`}\n onClick={() => {\n onSelect?.(dateOfISOWeek);\n }}\n >\n {size === 'long' && `${cap(displayNames.of('weekOfYear'))} `}\n {weekNo.toString()}\n </StyledWeekNumber>\n );\n });\n\n const label =\n size === 'short' ? (\n <Text as={StyledColumnLabel} forwardedAs='abbr' title={cap(displayNames.of('weekOfYear'))}>\n {cap(displayNamesShort.of('weekOfYear'))}\n </Text>\n ) : (\n <Text as={StyledColumnLabel}>{cap(displayNames.of('weekOfYear'))}</Text>\n );\n\n return (\n <Flex\n as={StyledWeekNumbers}\n container={{ direction: 'column' }}\n ref={containerRef}\n onKeyDown={onKeyDown}\n >\n {label}\n {weeks}\n </Flex>\n );\n }\n);\n\nexport default Weeks;\n"]}
@@ -10,9 +10,9 @@ interface DateTimeFormatOptions {
10
10
  }
11
11
  export declare function formatDateTime(value: Date, { t, locale, format, variant, clockFormat }: DateTimeFormatOptions): string;
12
12
  interface DurationFormatOptions {
13
- t: TranslationFunction<TranslationPack>;
13
+ locale: string;
14
14
  significantUnits: 4 | 3 | 2 | 1;
15
15
  }
16
- export declare function formatDuration(valueInMs: number, { t, significantUnits }: DurationFormatOptions): string;
16
+ export declare function formatDuration(valueInMs: number, { locale, significantUnits }: DurationFormatOptions): string;
17
17
  export {};
18
18
  //# sourceMappingURL=utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,eAAe,EAChB,MAAM,gEAAgE,CAAC;AAExE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElE,OAAO,EACL,WAAW,EAMZ,MAAM,eAAe,CAAC;AAsBvB,UAAU,qBAAqB;IAC7B,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,IAAI,EACX,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,qBAAqB,UAoGnE;AAOD,UAAU,qBAAqB;IAC7B,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACxC,gBAAgB,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,gBAAgB,EAAE,EAAE,qBAAqB,UAuB/F"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,eAAe,EAChB,MAAM,gEAAgE,CAAC;AAExE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlE,OAAO,EACL,WAAW,EAMZ,MAAM,eAAe,CAAC;AAsBvB,UAAU,qBAAqB;IAC7B,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,IAAI,EACX,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,qBAAqB,UA0GnE;AAOD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,EAAE,MAAM,EAAE,gBAAgB,EAAE,EAAE,qBAAqB,UAiCpD"}
@@ -1,3 +1,4 @@
1
+ import { cap } from '../../utils';
1
2
  import { getEndOfWeek, getQuarter, getStartOfWeek, getWeek, getWeekYear } from './Input/utils';
2
3
  const unitsInMs = {
3
4
  year: 24 * 60 * 60 * 1000 * 365,
@@ -79,9 +80,13 @@ export function formatDateTime(value, { t, locale, format, variant, clockFormat
79
80
  return relativeTimeFormatter(Math.round(elapsed / unitsInMs[unit]), unit);
80
81
  };
81
82
  const getFormattedWeek = (date) => {
83
+ const displayNames = new Intl.DisplayNames(locale, {
84
+ style: 'long',
85
+ type: 'dateTimeField'
86
+ });
82
87
  const startDate = getFormattedDate(getStartOfWeek(date), 'week');
83
88
  const endDate = getFormattedDate(getEndOfWeek(date), 'week');
84
- return `${t('week_text')} ${getWeek(date)}, ${getWeekYear(date)} (${startDate} - ${endDate})`;
89
+ return `${cap(displayNames.of('weekOfYear'))} ${getWeek(date)}, ${getWeekYear(date)} (${startDate} - ${endDate})`;
85
90
  };
86
91
  const getFormattedQuarterYear = (date) => {
87
92
  const formattedYear = getFormattedDate(date, 'year');
@@ -103,11 +108,16 @@ const dayInMs = 24 * 60 * 60 * 1000;
103
108
  const hourInMs = 60 * 60 * 1000;
104
109
  const minuteInMs = 60 * 1000;
105
110
  const secondInMs = 1000;
106
- export function formatDuration(valueInMs, { t, significantUnits }) {
111
+ export function formatDuration(valueInMs, { locale, significantUnits }) {
112
+ const numberFormatterSeconds = new Intl.NumberFormat(locale, {
113
+ style: 'unit',
114
+ unit: 'second',
115
+ unitDisplay: 'narrow'
116
+ });
107
117
  const sign = valueInMs < 0 ? '-' : '';
108
118
  const absMs = Math.abs(valueInMs);
109
119
  if (absMs < secondInMs) {
110
- return `0${t('second_text_short')}`;
120
+ return numberFormatterSeconds.format(0);
111
121
  }
112
122
  const durationParts = [
113
123
  { unit: 'day', value: Math.floor(absMs / dayInMs) },
@@ -118,7 +128,11 @@ export function formatDuration(valueInMs, { t, significantUnits }) {
118
128
  const result = [];
119
129
  for (let i = 0; result.length < significantUnits && i < durationParts.length; i += 1) {
120
130
  if (durationParts[i].value > 0) {
121
- result.push(`${durationParts[i].value + t(`${durationParts[i].unit}_text_short`)}`);
131
+ result.push(new Intl.NumberFormat(locale, {
132
+ style: 'unit',
133
+ unit: durationParts[i].unit,
134
+ unitDisplay: 'narrow'
135
+ }).format(durationParts[i].value));
122
136
  }
123
137
  }
124
138
  return `${sign}${result.join(' ')}`;
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DateTime/utils.ts"],"names":[],"mappings":"AAQA,OAAO,EAEL,YAAY,EACZ,UAAU,EACV,cAAc,EACd,OAAO,EACP,WAAW,EACZ,MAAM,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,GAAG;IAC/B,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,GAAG,CAAC,GAAG,EAAE;IACvC,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IACxB,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI;IACpB,MAAM,EAAE,EAAE,GAAG,IAAI;IACjB,MAAM,EAAE,IAAI;CACJ,CAAC;AAqBX,MAAM,UAAU,cAAc,CAC5B,KAAW,EACX,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAyB;IAElE,MAAM,SAAS,GAAc;QAC3B,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS;KACrD,CAAC;IACF,MAAM,QAAQ,GAAa;QACzB,GAAG,SAAS;QACZ,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS;KACrD,CAAC;IACF,MAAM,aAAa,GAAG;QACpB,IAAI,EAAE;YACJ,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAW;YACnE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAW;YACjE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAW;SACxE;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAW;YACjF,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAW;YAC9E,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAW;SACtF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;SACnB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAW;YAClC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAW;YAChC,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAW;SACvC;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAW;YACnC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAW;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAW;SACtC;QACD,SAAS,EAAE;YACT,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAW;YACnD,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAW;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAW;SACxD;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAW;YAClD,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAW;YAChD,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAW;SACvD;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAW;YAClD,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAW;YACjD,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAW;SACtD;KACF,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,WAAoD,EAAE,EAAE;QAC5F,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;YACrC,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;YACrC,QAAQ,EAAE,KAAK;SAChB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,aAAqB,EAAE,IAAc,EAAE,EAAE;QACtE,OAAO,IAAI,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAC/E,aAAa,EACb,IAAI,CACL,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE;QACrC,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC1C,4CAA4C;QAC5C,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK;YAAE,OAAO,GAAG,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC,CAAa,CAAC,CAAC;YAC3F,QAAQ,CAAa,CAAC;QACxB,OAAO,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5E,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAE,EAAE;QACtC,MAAM,SAAS,GAAG,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;QACjE,MAAM,OAAO,GAAG,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC;QAC7D,OAAO,GAAG,CAAC,CAAC,WAAW,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,WAAW,CAAC,IAAI,CAAC,KAAK,SAAS,MAAM,OAAO,GAAG,CAAC;IAChG,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,IAAU,EAAE,EAAE;QAC7C,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACrD,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QACvC,OAAO,GAAG,CAAC,CAAC,iBAAiB,aAAa,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;IACnE,CAAC,CAAC;IAEF,QAAQ,OAAO,EAAE;QACf,KAAK,UAAU;YACb,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;QAChC,KAAK,MAAM;YACT,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACjC,KAAK,aAAa;YAChB,OAAO,uBAAuB,CAAC,KAAK,CAAC,CAAC;QACxC;YACE,OAAO,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3C;AACH,CAAC;AAED,MAAM,OAAO,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AACpC,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAChC,MAAM,UAAU,GAAG,EAAE,GAAG,IAAI,CAAC;AAC7B,MAAM,UAAU,GAAG,IAAI,CAAC;AAOxB,MAAM,UAAU,cAAc,CAAC,SAAiB,EAAE,EAAE,CAAC,EAAE,gBAAgB,EAAyB;IAC9F,MAAM,IAAI,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAClC,IAAI,KAAK,GAAG,UAAU,EAAE;QACtB,OAAO,IAAI,CAAC,CAAC,mBAAmB,CAAC,EAAE,CAAC;KACrC;IACD,MAAM,aAAa,GAAG;QACpB,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,EAAE;QACnD,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE;QACjE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE;QACtE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC,EAAE;KACzE,CAAC;IACF,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,gBAAgB,IAAI,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE;QACpF,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE;YAC9B,MAAM,CAAC,IAAI,CACT,GACE,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,aAAsC,CAC3F,EAAE,CACH,CAAC;SACH;KACF;IACD,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AACtC,CAAC","sourcesContent":["import {\n AbsoluteVariant,\n DateTimeFormat,\n DateTimeVariant\n} from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\n\nimport { TranslationFunction, TranslationPack } from '../../i18n';\n\nimport {\n ClockFormat,\n getEndOfWeek,\n getQuarter,\n getStartOfWeek,\n getWeek,\n getWeekYear\n} from './Input/utils';\n\nconst unitsInMs = {\n year: 24 * 60 * 60 * 1000 * 365,\n month: (24 * 60 * 60 * 1000 * 365) / 12,\n day: 24 * 60 * 60 * 1000,\n hour: 60 * 60 * 1000,\n minute: 60 * 1000,\n second: 1000\n} as const;\n\ntype TimeUnit = keyof typeof unitsInMs;\n\ninterface TimeShort {\n hour: 'numeric';\n minute: 'numeric';\n hour12: boolean | undefined;\n}\ninterface TimeLong extends TimeShort {\n second: 'numeric';\n}\n\ninterface DateTimeFormatOptions {\n t: TranslationFunction<TranslationPack>;\n locale: string;\n format: DateTimeFormat;\n variant: DateTimeVariant;\n clockFormat?: ClockFormat;\n}\n\nexport function formatDateTime(\n value: Date,\n { t, locale, format, variant, clockFormat }: DateTimeFormatOptions\n) {\n const timeShort: TimeShort = {\n hour: 'numeric',\n minute: 'numeric',\n hour12: clockFormat ? clockFormat === 12 : undefined\n };\n const timeLong: TimeLong = {\n ...timeShort,\n second: 'numeric',\n hour12: clockFormat ? clockFormat === 12 : undefined\n };\n const formatMapping = {\n date: {\n short: { year: 'numeric', month: 'short', day: 'numeric' } as const,\n long: { year: 'numeric', month: 'long', day: 'numeric' } as const,\n numeric: { year: 'numeric', month: 'numeric', day: 'numeric' } as const\n },\n datetime: {\n short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort } as const,\n long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong } as const,\n numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort } as const\n },\n time: {\n short: timeShort,\n long: timeLong,\n numeric: timeShort\n },\n month: {\n short: { month: 'short' } as const,\n long: { month: 'long' } as const,\n numeric: { month: 'numeric' } as const\n },\n year: {\n short: { year: 'numeric' } as const,\n long: { year: 'numeric' } as const,\n numeric: { year: '2-digit' } as const\n },\n monthyear: {\n short: { year: 'numeric', month: 'short' } as const,\n long: { year: 'numeric', month: 'long' } as const,\n numeric: { year: 'numeric', month: 'numeric' } as const\n },\n week: {\n short: { month: 'short', day: 'numeric' } as const,\n long: { month: 'long', day: 'numeric' } as const,\n numeric: { month: 'numeric', day: 'numeric' } as const\n },\n relative: {\n short: { style: 'long', numeric: 'auto' } as const,\n long: { style: 'long', numeric: 'auto' } as const,\n numeric: { style: 'short', numeric: 'auto' } as const\n }\n };\n\n const getFormattedDate = (date: Date, dateVariant: Exclude<AbsoluteVariant, 'quarteryear'>) => {\n return new Intl.DateTimeFormat(locale, {\n ...formatMapping[dateVariant][format],\n timeZone: 'UTC'\n }).format(date);\n };\n\n const relativeTimeFormatter = (relativeValue: number, unit: TimeUnit) => {\n return new Intl.RelativeTimeFormat(locale, formatMapping.relative[format]).format(\n relativeValue,\n unit\n );\n };\n\n const getRelativeTime = (date: Date) => {\n let elapsed = date.getTime() - Date.now();\n // Deliberately reduce precision to 1 minute\n if (Math.abs(elapsed) < 60000) elapsed = 0;\n const unit = (Object.keys(unitsInMs).find(u => Math.abs(elapsed) >= unitsInMs[u as TimeUnit]) ||\n 'second') as TimeUnit;\n return relativeTimeFormatter(Math.round(elapsed / unitsInMs[unit]), unit);\n };\n\n const getFormattedWeek = (date: Date) => {\n const startDate = getFormattedDate(getStartOfWeek(date), 'week');\n const endDate = getFormattedDate(getEndOfWeek(date), 'week');\n return `${t('week_text')} ${getWeek(date)}, ${getWeekYear(date)} (${startDate} - ${endDate})`;\n };\n\n const getFormattedQuarterYear = (date: Date) => {\n const formattedYear = getFormattedDate(date, 'year');\n const quarterNumber = getQuarter(date);\n return `${t(`date_quarter_q${quarterNumber}`, [formattedYear])}`;\n };\n\n switch (variant) {\n case 'relative':\n return getRelativeTime(value);\n case 'week':\n return getFormattedWeek(value);\n case 'quarteryear':\n return getFormattedQuarterYear(value);\n default:\n return getFormattedDate(value, variant);\n }\n}\n\nconst dayInMs = 24 * 60 * 60 * 1000;\nconst hourInMs = 60 * 60 * 1000;\nconst minuteInMs = 60 * 1000;\nconst secondInMs = 1000;\n\ninterface DurationFormatOptions {\n t: TranslationFunction<TranslationPack>;\n significantUnits: 4 | 3 | 2 | 1;\n}\n\nexport function formatDuration(valueInMs: number, { t, significantUnits }: DurationFormatOptions) {\n const sign = valueInMs < 0 ? '-' : '';\n const absMs = Math.abs(valueInMs);\n if (absMs < secondInMs) {\n return `0${t('second_text_short')}`;\n }\n const durationParts = [\n { unit: 'day', value: Math.floor(absMs / dayInMs) },\n { unit: 'hour', value: Math.floor((absMs % dayInMs) / hourInMs) },\n { unit: 'minute', value: Math.floor((absMs % hourInMs) / minuteInMs) },\n { unit: 'second', value: Math.floor((absMs % minuteInMs) / secondInMs) }\n ];\n const result = [];\n for (let i = 0; result.length < significantUnits && i < durationParts.length; i += 1) {\n if (durationParts[i].value > 0) {\n result.push(\n `${\n durationParts[i].value + t(`${durationParts[i].unit}_text_short` as keyof TranslationPack)\n }`\n );\n }\n }\n return `${sign}${result.join(' ')}`;\n}\n"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DateTime/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n AbsoluteVariant,\n DateTimeFormat,\n DateTimeVariant\n} from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\n\nimport { TranslationFunction, TranslationPack } from '../../i18n';\nimport { cap } from '../../utils';\n\nimport {\n ClockFormat,\n getEndOfWeek,\n getQuarter,\n getStartOfWeek,\n getWeek,\n getWeekYear\n} from './Input/utils';\n\nconst unitsInMs = {\n year: 24 * 60 * 60 * 1000 * 365,\n month: (24 * 60 * 60 * 1000 * 365) / 12,\n day: 24 * 60 * 60 * 1000,\n hour: 60 * 60 * 1000,\n minute: 60 * 1000,\n second: 1000\n} as const;\n\ntype TimeUnit = keyof typeof unitsInMs;\n\ninterface TimeShort {\n hour: 'numeric';\n minute: 'numeric';\n hour12: boolean | undefined;\n}\ninterface TimeLong extends TimeShort {\n second: 'numeric';\n}\n\ninterface DateTimeFormatOptions {\n t: TranslationFunction<TranslationPack>;\n locale: string;\n format: DateTimeFormat;\n variant: DateTimeVariant;\n clockFormat?: ClockFormat;\n}\n\nexport function formatDateTime(\n value: Date,\n { t, locale, format, variant, clockFormat }: DateTimeFormatOptions\n) {\n const timeShort: TimeShort = {\n hour: 'numeric',\n minute: 'numeric',\n hour12: clockFormat ? clockFormat === 12 : undefined\n };\n const timeLong: TimeLong = {\n ...timeShort,\n second: 'numeric',\n hour12: clockFormat ? clockFormat === 12 : undefined\n };\n const formatMapping = {\n date: {\n short: { year: 'numeric', month: 'short', day: 'numeric' } as const,\n long: { year: 'numeric', month: 'long', day: 'numeric' } as const,\n numeric: { year: 'numeric', month: 'numeric', day: 'numeric' } as const\n },\n datetime: {\n short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort } as const,\n long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong } as const,\n numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort } as const\n },\n time: {\n short: timeShort,\n long: timeLong,\n numeric: timeShort\n },\n month: {\n short: { month: 'short' } as const,\n long: { month: 'long' } as const,\n numeric: { month: 'numeric' } as const\n },\n year: {\n short: { year: 'numeric' } as const,\n long: { year: 'numeric' } as const,\n numeric: { year: '2-digit' } as const\n },\n monthyear: {\n short: { year: 'numeric', month: 'short' } as const,\n long: { year: 'numeric', month: 'long' } as const,\n numeric: { year: 'numeric', month: 'numeric' } as const\n },\n week: {\n short: { month: 'short', day: 'numeric' } as const,\n long: { month: 'long', day: 'numeric' } as const,\n numeric: { month: 'numeric', day: 'numeric' } as const\n },\n relative: {\n short: { style: 'long', numeric: 'auto' } as const,\n long: { style: 'long', numeric: 'auto' } as const,\n numeric: { style: 'short', numeric: 'auto' } as const\n }\n };\n\n const getFormattedDate = (date: Date, dateVariant: Exclude<AbsoluteVariant, 'quarteryear'>) => {\n return new Intl.DateTimeFormat(locale, {\n ...formatMapping[dateVariant][format],\n timeZone: 'UTC'\n }).format(date);\n };\n\n const relativeTimeFormatter = (relativeValue: number, unit: TimeUnit) => {\n return new Intl.RelativeTimeFormat(locale, formatMapping.relative[format]).format(\n relativeValue,\n unit\n );\n };\n\n const getRelativeTime = (date: Date) => {\n let elapsed = date.getTime() - Date.now();\n // Deliberately reduce precision to 1 minute\n if (Math.abs(elapsed) < 60000) elapsed = 0;\n const unit = (Object.keys(unitsInMs).find(u => Math.abs(elapsed) >= unitsInMs[u as TimeUnit]) ||\n 'second') as TimeUnit;\n return relativeTimeFormatter(Math.round(elapsed / unitsInMs[unit]), unit);\n };\n\n const getFormattedWeek = (date: Date) => {\n const displayNames = new Intl.DisplayNames(locale, {\n style: 'long',\n type: 'dateTimeField'\n }) as Intl.DateTimeDisplayNames;\n const startDate = getFormattedDate(getStartOfWeek(date), 'week');\n const endDate = getFormattedDate(getEndOfWeek(date), 'week');\n return `${cap(displayNames.of('weekOfYear'))} ${getWeek(date)}, ${getWeekYear(\n date\n )} (${startDate} - ${endDate})`;\n };\n\n const getFormattedQuarterYear = (date: Date) => {\n const formattedYear = getFormattedDate(date, 'year');\n const quarterNumber = getQuarter(date);\n return `${t(`date_quarter_q${quarterNumber}`, [formattedYear])}`;\n };\n\n switch (variant) {\n case 'relative':\n return getRelativeTime(value);\n case 'week':\n return getFormattedWeek(value);\n case 'quarteryear':\n return getFormattedQuarterYear(value);\n default:\n return getFormattedDate(value, variant);\n }\n}\n\nconst dayInMs = 24 * 60 * 60 * 1000;\nconst hourInMs = 60 * 60 * 1000;\nconst minuteInMs = 60 * 1000;\nconst secondInMs = 1000;\n\ninterface DurationFormatOptions {\n locale: string;\n significantUnits: 4 | 3 | 2 | 1;\n}\n\nexport function formatDuration(\n valueInMs: number,\n { locale, significantUnits }: DurationFormatOptions\n) {\n const numberFormatterSeconds = new Intl.NumberFormat(locale, {\n style: 'unit',\n unit: 'second',\n unitDisplay: 'narrow'\n });\n const sign = valueInMs < 0 ? '-' : '';\n const absMs = Math.abs(valueInMs);\n if (absMs < secondInMs) {\n return numberFormatterSeconds.format(0);\n }\n\n const durationParts = [\n { unit: 'day', value: Math.floor(absMs / dayInMs) },\n { unit: 'hour', value: Math.floor((absMs % dayInMs) / hourInMs) },\n { unit: 'minute', value: Math.floor((absMs % hourInMs) / minuteInMs) },\n { unit: 'second', value: Math.floor((absMs % minuteInMs) / secondInMs) }\n ];\n\n const result = [];\n for (let i = 0; result.length < significantUnits && i < durationParts.length; i += 1) {\n if (durationParts[i].value > 0) {\n result.push(\n new Intl.NumberFormat(locale, {\n style: 'unit',\n unit: durationParts[i].unit,\n unitDisplay: 'narrow'\n }).format(durationParts[i].value)\n );\n }\n }\n return `${sign}${result.join(' ')}`;\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAmBrB,CAAC;AAiBH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAerD,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM9D,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGtE,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,cAAc;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,wDA2CtB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,YAAY,2DA2BjD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,YAAY,WAwDhD,CAAC;AAEF,eAAO,MAAM,UAAU,6EAmBrB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA4BrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -153,25 +153,25 @@ export const StyledHTML = styled.div(({ theme }) => {
153
153
  `;
154
154
  });
155
155
  StyledHTML.defaultProps = defaultThemeProp;
156
- dompurify.addHook('uponSanitizeAttribute', node => {
157
- const href = node.getAttribute('href');
158
- if (node.tagName === 'A' && href) {
159
- const fullURL = new URL(/^[a-z][a-z0-9.+-]*:/i.test(href) ? href : `https:${href}`);
160
- if (!sameOrigin(window.location, fullURL)) {
161
- node.setAttribute('target', '_blank');
162
- node.setAttribute('rel', 'noopener');
163
- }
164
- else {
165
- node.removeAttribute('target');
166
- }
167
- }
168
- });
169
156
  const HTML = forwardRef(({ content, ...restProps }, ref) => {
170
157
  const [mounted, setMounted] = useState(false);
171
158
  const sanitizedHtml = useMemo(() => {
172
159
  return mounted ? dompurify.sanitize(content) : '';
173
160
  }, [content, mounted]);
174
161
  useEffect(() => {
162
+ dompurify.addHook('uponSanitizeAttribute', node => {
163
+ const href = node.getAttribute('href');
164
+ if (node.tagName === 'A' && href) {
165
+ const fullURL = new URL(/^[a-z][a-z0-9.+-]*:/i.test(href) ? href : `https:${href}`);
166
+ if (!sameOrigin(window.location, fullURL)) {
167
+ node.setAttribute('target', '_blank');
168
+ node.setAttribute('rel', 'noopener');
169
+ }
170
+ else {
171
+ node.removeAttribute('target');
172
+ }
173
+ }
174
+ });
175
175
  setMounted(true);
176
176
  }, []);
177
177
  return sanitizedHtml ? (_jsx(StyledHTML, { dangerouslySetInnerHTML: { __html: sanitizedHtml }, ref: ref, ...restProps })) : null;
@@ -1 +1 @@
1
- {"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useEffect,\n useMemo\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { sameOrigin } from '../../utils';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n content: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n border-collapse: collapse;\n\n td {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n min-width: 6.25rem;\n }\n\n tr:first-child {\n td:first-child {\n border-top-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-top-right-radius: 0.125rem;\n }\n }\n\n tr:last-child {\n td:first-child {\n border-bottom-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-bottom-right-radius: 0.125rem;\n }\n }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return `\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n height: auto;\n border-radius: 0.25rem;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n return css`\n width: 100%;\n overflow-x: auto;\n ${getHtmlStyles(theme)}\n\n ${StyledPopover} ul {\n ul {\n padding-inline-start: 0;\n }\n ol {\n padding-inline-start: 0;\n }\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\ndompurify.addHook('uponSanitizeAttribute', node => {\n const href = node.getAttribute('href');\n if (node.tagName === 'A' && href) {\n const fullURL = new URL(/^[a-z][a-z0-9.+-]*:/i.test(href) ? href : `https:${href}`);\n if (!sameOrigin(window.location, fullURL)) {\n node.setAttribute('target', '_blank');\n node.setAttribute('rel', 'noopener');\n } else {\n node.removeAttribute('target');\n }\n }\n});\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n ({ content, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n const [mounted, setMounted] = useState(false);\n const sanitizedHtml = useMemo(() => {\n return mounted ? dompurify.sanitize(content) : '';\n }, [content, mounted]);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n return sanitizedHtml ? (\n <StyledHTML dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} {...restProps} />\n ) : null;\n }\n);\n\nexport default HTML;\n"]}
1
+ {"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useState,\n useEffect,\n useMemo\n} from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport dompurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { sameOrigin } from '../../utils';\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp {\n content: string;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n border-collapse: collapse;\n\n td {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n min-width: 6.25rem;\n }\n\n tr:first-child {\n td:first-child {\n border-top-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-top-right-radius: 0.125rem;\n }\n }\n\n tr:last-child {\n td:first-child {\n border-bottom-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-bottom-right-radius: 0.125rem;\n }\n }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return `\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n height: auto;\n border-radius: 0.25rem;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n return css`\n width: 100%;\n overflow-x: auto;\n ${getHtmlStyles(theme)}\n\n ${StyledPopover} ul {\n ul {\n padding-inline-start: 0;\n }\n ol {\n padding-inline-start: 0;\n }\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(\n ({ content, ...restProps }: PropsWithoutRef<HTMLProps>, ref: HTMLProps['ref']) => {\n const [mounted, setMounted] = useState(false);\n const sanitizedHtml = useMemo(() => {\n return mounted ? dompurify.sanitize(content) : '';\n }, [content, mounted]);\n\n useEffect(() => {\n dompurify.addHook('uponSanitizeAttribute', node => {\n const href = node.getAttribute('href');\n if (node.tagName === 'A' && href) {\n const fullURL = new URL(/^[a-z][a-z0-9.+-]*:/i.test(href) ? href : `https:${href}`);\n if (!sameOrigin(window.location, fullURL)) {\n node.setAttribute('target', '_blank');\n node.setAttribute('rel', 'noopener');\n } else {\n node.removeAttribute('target');\n }\n }\n });\n\n setMounted(true);\n }, []);\n\n return sanitizedHtml ? (\n <StyledHTML dangerouslySetInnerHTML={{ __html: sanitizedHtml }} ref={ref} {...restProps} />\n ) : null;\n }\n);\n\nexport default HTML;\n"]}
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import { ChangeEvent, FC } from 'react';
2
2
  import { FormControlProps } from '../FormControl';
3
3
  import { RadioCheckProps } from '../RadioCheck';
4
4
  import type { ForwardProps, NoChildrenProp } from '../../types';
@@ -27,6 +27,8 @@ export interface RadioButtonProps extends NoChildrenProp {
27
27
  * @default false
28
28
  */
29
29
  indeterminate?: RadioCheckProps['indeterminate'];
30
+ /** Callback invoked when this particular radio button is selected. */
31
+ onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
30
32
  }
31
33
  declare const RB: FC<RadioButtonProps & ForwardProps>;
32
34
  export default RB;
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CAClD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAI3C,CAAC;AAKF,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAI3C,CAAC;AAKF,eAAe,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAO,MAAM,OAAO,CAAC;AAG5C,OAAO,UAA+B,MAAM,eAAe,CAAC;AA8B5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CACxD,CAAC,KAAuB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACvD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,GAAI,CACjD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: RadioCheckProps['checked'];\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: RadioCheckProps['defaultChecked'];\n /**\n * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n * @default false\n */\n indeterminate?: RadioCheckProps['indeterminate'];\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(\n (props: RadioButtonProps, ref: Ref<HTMLInputElement>) => (\n <RadioCheck {...props} type='radio' ref={ref} />\n )\n);\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}
1
+ {"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CACxD,CAAC,KAAuB,EAAE,GAA0B,EAAE,EAAE,CAAC,CACvD,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,GAAI,CACjD,CACF,CAAC;AAEF,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { ChangeEvent, FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: RadioCheckProps['checked'];\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: RadioCheckProps['defaultChecked'];\n /**\n * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n * @default false\n */\n indeterminate?: RadioCheckProps['indeterminate'];\n /** Callback invoked when this particular radio button is selected. */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(\n (props: RadioButtonProps, ref: Ref<HTMLInputElement>) => (\n <RadioCheck {...props} type='radio' ref={ref} />\n )\n);\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}
@@ -90,36 +90,21 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
90
90
  current: string;
91
91
  not_started: string;
92
92
  empty_value: string;
93
- day_label_a11y: string;
94
93
  day_placeholder: string;
95
- quarter_label_a11y: string;
96
- month_label_a11y: string;
97
94
  month_placeholder: string;
98
- year_label_a11y: string;
99
95
  year_placeholder: string;
100
- hour_label_a11y: string;
101
96
  hour_placeholder: string;
102
- minute_label_a11y: string;
103
97
  minute_placeholder: string;
104
- second_label_a11y: string;
105
98
  second_placeholder: string;
106
- meridiem_label_a11y: string;
107
99
  meridiem_value_am: string;
108
100
  meridiem_value_pm: string;
109
- week_label_a11y: string;
110
101
  week_placeholder: string;
111
- week_text: string;
112
102
  seconds_text: string;
113
103
  minutes_text: string;
114
104
  hours_text: string;
115
105
  days_text: string;
116
106
  time_text: string;
117
107
  time_format_info: string;
118
- week_text_short: string;
119
- day_text_short: string;
120
- hour_text_short: string;
121
- minute_text_short: string;
122
- second_text_short: string;
123
108
  date_quarter_q1: string;
124
109
  date_quarter_q2: string;
125
110
  date_quarter_q3: string;
@@ -401,6 +386,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
401
386
  call_panel_call_on_hold: string;
402
387
  call_panel_consult_call_menu_item: string;
403
388
  call_panel_transfer_call_menu_item: string;
389
+ call_panel_menu_item_call_only: string;
390
+ call_panel_menu_item_call_with_interaction: string;
404
391
  call_panel_send_dtmf_menu_item: string;
405
392
  call_panel_conference_call_menu_item: string;
406
393
  call_panel_hangup_call_menu_item: string;
@@ -411,9 +398,16 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
411
398
  call_panel_contacts_favorites_heading: string;
412
399
  call_panel_contacts_dial_pad_heading: string;
413
400
  call_panel_new_call_heading: string;
414
- call_panel_consult_with_heading: string;
401
+ call_panel_interaction_transfer_heading: string;
402
+ call_panel_interaction_transfer_complete_button_label: string;
415
403
  call_panel_conference_heading: string;
416
- call_panel_transfer_call_heading: string;
404
+ call_panel_consult_with_call_heading: string;
405
+ call_panel_consult_with_call_and_interactions_heading: string;
406
+ call_panel_transfer_with_call_heading: string;
407
+ call_panel_transfer_with_call_and_interactions_heading: string;
408
+ call_panel_conference_submit: string;
409
+ call_panel_transfer_call_submit: string;
410
+ call_panel_consult_call_submit: string;
417
411
  call_panel_handover_reason_label: string;
418
412
  call_panel_handover_to_label: string;
419
413
  call_panel_handover_comments_label: string;
@@ -1 +1 @@
1
- {"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -31,7 +31,7 @@ const useTransitionState = ({ ref, property, states = {
31
31
  return () => {
32
32
  el.removeEventListener('transitionend', onTransitionEnd);
33
33
  };
34
- }, [onTransitionEnd]);
34
+ }, [onTransitionEnd, ref.current]);
35
35
  const set = useCallback((wantsToGo) => {
36
36
  setState(cur => {
37
37
  if (wantsToGo === states.high && cur !== 'high')
@@ -1 +1 @@
1
- {"version":3,"file":"useTransitionState.js","sourceRoot":"","sources":["../../src/hooks/useTransitionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC;IAChD,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,YAAY;CACb,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3C,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC,CAAC;AAEZ,MAAM,kBAAkB,GAAG,CAKzB,EACA,GAAG,EACH,QAAQ,EACR,MAAM,GAAG;IACP,GAAG,EAAE,KAAY;IACjB,MAAM,EAAE,QAAkB;IAC1B,IAAI,EAAE,MAAc;IACpB,OAAO,EAAE,SAAoB;CAC9B,EACD,YAAY,GAAG,MAAM,CAAC,GAAG,EAa1B,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAC3D,YAAY,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAC9C,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACxE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,SAAqB,EAAE,EAAE;QAChD,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,SAAS,KAAK,MAAM,CAAC,IAAI,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO,QAAQ,CAAC;YACjE,IAAI,SAAS,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,KAAK;gBAAE,OAAO,SAAS,CAAC;YAChE,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,SAAS;gBAAE,OAAO,QAAQ,CAAC;YACxD,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,QAAQ;gBAAE,OAAO,SAAS,CAAC;YACzD,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAkC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { CSSProperties, RefObject, useCallback, useEffect, useState } from 'react';\n\nexport const expandCollapseStates = Object.freeze({\n low: 'collapsed',\n rising: 'expanding',\n high: 'expanded',\n falling: 'collapsing'\n} as const);\n\nexport const openCloseStates = Object.freeze({\n low: 'closed',\n rising: 'opening',\n high: 'open',\n falling: 'closing'\n} as const);\n\nconst useTransitionState = <\n Low extends string = 'low',\n Rising extends string = 'rising',\n High extends string = 'high',\n Falling extends string = 'falling'\n>({\n ref,\n property,\n states = {\n low: 'low' as Low,\n rising: 'rising' as Rising,\n high: 'high' as High,\n falling: 'falling' as Falling\n },\n defaultState = states.low\n}: {\n ref: RefObject<HTMLElement>;\n property: keyof CSSProperties;\n} & (\n | {\n states: { low: Low; rising: Rising; high: High; falling: Falling };\n defaultState?: Low | High;\n }\n | {\n states?: { low: 'low'; rising: 'rising'; high: 'high'; falling: 'falling' };\n defaultState?: 'low' | 'high';\n }\n)) => {\n const [state, setState] = useState<keyof typeof states>(() =>\n defaultState === states.high ? 'high' : 'low'\n );\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.propertyName !== property || e.target !== e.currentTarget) return;\n setState(cur => (cur === 'falling' ? 'low' : 'high'));\n },\n [property]\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n el.addEventListener('transitionend', onTransitionEnd);\n return () => {\n el.removeEventListener('transitionend', onTransitionEnd);\n };\n }, [onTransitionEnd]);\n\n const set = useCallback((wantsToGo: Low | High) => {\n setState(cur => {\n if (wantsToGo === states.high && cur !== 'high') return 'rising';\n if (wantsToGo === states.low && cur !== 'low') return 'falling';\n return cur;\n });\n }, []);\n\n const toggle = useCallback(() => {\n setState(cur => {\n if (cur === 'low' || cur === 'falling') return 'rising';\n if (cur === 'high' || cur === 'rising') return 'falling';\n return cur;\n });\n }, []);\n\n return { state: states[state] as Low | Rising | High | Falling, set, toggle };\n};\n\nexport default useTransitionState;\n"]}
1
+ {"version":3,"file":"useTransitionState.js","sourceRoot":"","sources":["../../src/hooks/useTransitionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC;IAChD,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,YAAY;CACb,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3C,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC,CAAC;AAEZ,MAAM,kBAAkB,GAAG,CAKzB,EACA,GAAG,EACH,QAAQ,EACR,MAAM,GAAG;IACP,GAAG,EAAE,KAAY;IACjB,MAAM,EAAE,QAAkB;IAC1B,IAAI,EAAE,MAAc;IACpB,OAAO,EAAE,SAAoB;CAC9B,EACD,YAAY,GAAG,MAAM,CAAC,GAAG,EAa1B,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAC3D,YAAY,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAC9C,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACxE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnC,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,SAAqB,EAAE,EAAE;QAChD,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,SAAS,KAAK,MAAM,CAAC,IAAI,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO,QAAQ,CAAC;YACjE,IAAI,SAAS,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,KAAK;gBAAE,OAAO,SAAS,CAAC;YAChE,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,SAAS;gBAAE,OAAO,QAAQ,CAAC;YACxD,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,QAAQ;gBAAE,OAAO,SAAS,CAAC;YACzD,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAkC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { CSSProperties, RefObject, useCallback, useEffect, useState } from 'react';\n\nexport const expandCollapseStates = Object.freeze({\n low: 'collapsed',\n rising: 'expanding',\n high: 'expanded',\n falling: 'collapsing'\n} as const);\n\nexport const openCloseStates = Object.freeze({\n low: 'closed',\n rising: 'opening',\n high: 'open',\n falling: 'closing'\n} as const);\n\nconst useTransitionState = <\n Low extends string = 'low',\n Rising extends string = 'rising',\n High extends string = 'high',\n Falling extends string = 'falling'\n>({\n ref,\n property,\n states = {\n low: 'low' as Low,\n rising: 'rising' as Rising,\n high: 'high' as High,\n falling: 'falling' as Falling\n },\n defaultState = states.low\n}: {\n ref: RefObject<HTMLElement>;\n property: keyof CSSProperties;\n} & (\n | {\n states: { low: Low; rising: Rising; high: High; falling: Falling };\n defaultState?: Low | High;\n }\n | {\n states?: { low: 'low'; rising: 'rising'; high: 'high'; falling: 'falling' };\n defaultState?: 'low' | 'high';\n }\n)) => {\n const [state, setState] = useState<keyof typeof states>(() =>\n defaultState === states.high ? 'high' : 'low'\n );\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.propertyName !== property || e.target !== e.currentTarget) return;\n setState(cur => (cur === 'falling' ? 'low' : 'high'));\n },\n [property]\n );\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n el.addEventListener('transitionend', onTransitionEnd);\n return () => {\n el.removeEventListener('transitionend', onTransitionEnd);\n };\n }, [onTransitionEnd, ref.current]);\n\n const set = useCallback((wantsToGo: Low | High) => {\n setState(cur => {\n if (wantsToGo === states.high && cur !== 'high') return 'rising';\n if (wantsToGo === states.low && cur !== 'low') return 'falling';\n return cur;\n });\n }, []);\n\n const toggle = useCallback(() => {\n setState(cur => {\n if (cur === 'low' || cur === 'falling') return 'rising';\n if (cur === 'high' || cur === 'rising') return 'falling';\n return cur;\n });\n }, []);\n\n return { state: states[state] as Low | Rising | High | Falling, set, toggle };\n};\n\nexport default useTransitionState;\n"]}
@@ -86,36 +86,21 @@ declare const _default: {
86
86
  current: string;
87
87
  not_started: string;
88
88
  empty_value: string;
89
- day_label_a11y: string;
90
89
  day_placeholder: string;
91
- quarter_label_a11y: string;
92
- month_label_a11y: string;
93
90
  month_placeholder: string;
94
- year_label_a11y: string;
95
91
  year_placeholder: string;
96
- hour_label_a11y: string;
97
92
  hour_placeholder: string;
98
- minute_label_a11y: string;
99
93
  minute_placeholder: string;
100
- second_label_a11y: string;
101
94
  second_placeholder: string;
102
- meridiem_label_a11y: string;
103
95
  meridiem_value_am: string;
104
96
  meridiem_value_pm: string;
105
- week_label_a11y: string;
106
97
  week_placeholder: string;
107
- week_text: string;
108
98
  seconds_text: string;
109
99
  minutes_text: string;
110
100
  hours_text: string;
111
101
  days_text: string;
112
102
  time_text: string;
113
103
  time_format_info: string;
114
- week_text_short: string;
115
- day_text_short: string;
116
- hour_text_short: string;
117
- minute_text_short: string;
118
- second_text_short: string;
119
104
  date_quarter_q1: string;
120
105
  date_quarter_q2: string;
121
106
  date_quarter_q3: string;
@@ -397,6 +382,8 @@ declare const _default: {
397
382
  call_panel_call_on_hold: string;
398
383
  call_panel_consult_call_menu_item: string;
399
384
  call_panel_transfer_call_menu_item: string;
385
+ call_panel_menu_item_call_only: string;
386
+ call_panel_menu_item_call_with_interaction: string;
400
387
  call_panel_send_dtmf_menu_item: string;
401
388
  call_panel_conference_call_menu_item: string;
402
389
  call_panel_hangup_call_menu_item: string;
@@ -407,9 +394,16 @@ declare const _default: {
407
394
  call_panel_contacts_favorites_heading: string;
408
395
  call_panel_contacts_dial_pad_heading: string;
409
396
  call_panel_new_call_heading: string;
410
- call_panel_consult_with_heading: string;
397
+ call_panel_interaction_transfer_heading: string;
398
+ call_panel_interaction_transfer_complete_button_label: string;
411
399
  call_panel_conference_heading: string;
412
- call_panel_transfer_call_heading: string;
400
+ call_panel_consult_with_call_heading: string;
401
+ call_panel_consult_with_call_and_interactions_heading: string;
402
+ call_panel_transfer_with_call_heading: string;
403
+ call_panel_transfer_with_call_and_interactions_heading: string;
404
+ call_panel_conference_submit: string;
405
+ call_panel_transfer_call_submit: string;
406
+ call_panel_consult_call_submit: string;
413
407
  call_panel_handover_reason_label: string;
414
408
  call_panel_handover_to_label: string;
415
409
  call_panel_handover_comments_label: string;
@@ -1 +1 @@
1
- {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAs2BE"}
1
+ {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAm2BE"}