@pega/cosmos-react-core 7.0.0-build.9.1 → 7.0.0-build.9.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.
- package/lib/components/DateTime/Picker/DatePicker.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.js +28 -4
- package/lib/components/DateTime/Picker/DatePicker.js.map +1 -1
- package/lib/components/Phone/PhoneInput.d.ts.map +1 -1
- package/lib/components/Phone/PhoneInput.js +8 -3
- package/lib/components/Phone/PhoneInput.js.map +1 -1
- package/lib/styles/mixins.d.ts +2 -0
- package/lib/styles/mixins.d.ts.map +1 -0
- package/lib/styles/mixins.js +8 -0
- package/lib/styles/mixins.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkB/C,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAkB/C,OAAO,KAAK,eAAe,MAAM,oBAAoB,CAAC;;;;AAmNtD,wBAA6D"}
|
|
@@ -41,8 +41,20 @@ const DatePicker = ({ testId, selected: initial, onChange, min, max, mode = 'dat
|
|
|
41
41
|
const { start, end } = useDirection();
|
|
42
42
|
return (_jsxs(StyledDatePicker, { "data-testid": testIds.root, "aria-label": t('calendar'), role: 'region', ...restProps, children: [_jsxs(Flex, { as: StyledMonthPicker, container: { justify: 'between', alignItems: 'end' }, children: [_jsx(Button, { "data-testid": testIds.previousMonth, variant: 'simple', icon: true, onClick: () => {
|
|
43
43
|
const newCurrent = new Date(current);
|
|
44
|
-
newCurrent.
|
|
45
|
-
|
|
44
|
+
const currentYear = newCurrent.getUTCFullYear();
|
|
45
|
+
const currentMonth = newCurrent.getUTCMonth();
|
|
46
|
+
const currentDay = newCurrent.getUTCDate();
|
|
47
|
+
const lastDayOfPreviousMonth = new Date(currentYear, currentMonth, 0).getDate();
|
|
48
|
+
if (currentDay > lastDayOfPreviousMonth) {
|
|
49
|
+
newCurrent.setUTCDate(1);
|
|
50
|
+
newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);
|
|
51
|
+
newCurrent.setUTCDate(lastDayOfPreviousMonth);
|
|
52
|
+
setCurrent(newCurrent);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);
|
|
56
|
+
setCurrent(newCurrent);
|
|
57
|
+
}
|
|
46
58
|
}, disabled: (() => {
|
|
47
59
|
const newCurrent = new Date(current);
|
|
48
60
|
newCurrent.setUTCDate(1);
|
|
@@ -65,8 +77,20 @@ const DatePicker = ({ testId, selected: initial, onChange, min, max, mode = 'dat
|
|
|
65
77
|
setCurrent(newCurrent);
|
|
66
78
|
}, min: min, max: max }), _jsx(VisuallyHiddenText, { "aria-live": 'polite', role: 'alert', children: current.toLocaleString(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }) }), _jsx(Button, { "data-testid": testIds.nextMonth, variant: 'simple', icon: true, onClick: () => {
|
|
67
79
|
const newCurrent = new Date(current);
|
|
68
|
-
newCurrent.
|
|
69
|
-
|
|
80
|
+
const currentYear = newCurrent.getUTCFullYear();
|
|
81
|
+
const currentMonth = newCurrent.getUTCMonth();
|
|
82
|
+
const currentDay = newCurrent.getUTCDate();
|
|
83
|
+
const lastDayOfNextMonth = new Date(currentYear, currentMonth + 2, 0).getDate();
|
|
84
|
+
if (currentDay > lastDayOfNextMonth) {
|
|
85
|
+
newCurrent.setUTCDate(1);
|
|
86
|
+
newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);
|
|
87
|
+
newCurrent.setUTCDate(lastDayOfNextMonth);
|
|
88
|
+
setCurrent(newCurrent);
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);
|
|
92
|
+
setCurrent(newCurrent);
|
|
93
|
+
}
|
|
70
94
|
}, disabled: (() => {
|
|
71
95
|
const newCurrent = new Date(current);
|
|
72
96
|
newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useDirection, useI18n, useTestIds } from '../../../hooks';\nimport { getCalendarTypeFromLocale, parseToDate } from '../Input/utils';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport TimeInput from '../Input/TimeInput';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { getDatePickerTestIds } from '../DateTime.test-ids';\nimport { withTestIds } from '../../../utils';\nimport { getAdjustedUTCDateTime } from '../utils';\n\nimport Calendar from './Calendar';\nimport type DatePickerProps from './DatePicker.types';\nimport { isValidDate, toDateTimeString } from './utils';\nimport {\n StyledDatePicker,\n StyledDatePickerMonthInput,\n StyledMonthPicker\n} from './DatePicker.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst DatePicker: FunctionComponent<DatePickerProps> = ({\n testId,\n selected: initial,\n onChange,\n min,\n max,\n mode = 'date',\n showWeekNumber,\n withSeconds,\n pickerInterval,\n clockFormat,\n ...restProps\n}: DatePickerProps) => {\n const testIds = useTestIds(testId, getDatePickerTestIds);\n\n const { locale } = useConfiguration();\n const t = useI18n();\n\n const [selected, setSelected] = useState(initial);\n const [current, setCurrent] = useState(\n selected && isValidDate(selected) ? selected : getAdjustedUTCDateTime()\n );\n\n useEffect(() => {\n if (toDateTimeString(initial, mode) !== toDateTimeString(selected, mode)) {\n setSelected(initial);\n setCurrent(initial || getAdjustedUTCDateTime());\n }\n }, [toDateTimeString(initial, mode)]);\n\n const calendarRef = useRef<HTMLTableElement>(null);\n useEffect(() => {\n // need to postpone focusing to make sure onFocusWithin has been attached\n setTimeout(() => {\n calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n });\n }, []);\n\n const calendarType = getCalendarTypeFromLocale(locale);\n const { start, end } = useDirection();\n\n return (\n <StyledDatePicker\n data-testid={testIds.root}\n aria-label={t('calendar')}\n role='region'\n {...restProps}\n >\n <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'end' }}>\n <Button\n data-testid={testIds.previousMonth}\n variant='simple'\n icon\n onClick={() => {\n const newCurrent = new Date(current);\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n setCurrent(newCurrent);\n }}\n disabled={(() => {\n const newCurrent = new Date(current);\n newCurrent.setUTCDate(1);\n\n return Boolean(min && min > newCurrent);\n })()}\n aria-label={t('picker_prev_month')}\n >\n <Icon name={`caret-${start}`} />\n </Button>\n <MonthInput\n testId={testIds.month}\n as={StyledDatePickerMonthInput}\n innerLabelsHidden={false}\n value={current}\n required\n role='group'\n aria-label={t('picker_jump_to_month_and_year')}\n onChange={({ valueAsTimestamp }) => {\n let newCurrent = new Date(valueAsTimestamp!);\n newCurrent.setUTCDate(current.getUTCDate());\n\n if (max) {\n const maxDate = parseToDate(max);\n maxDate.setUTCMinutes(maxDate.getUTCMinutes() - maxDate.getTimezoneOffset());\n if (newCurrent > maxDate) newCurrent = maxDate;\n }\n\n if (min) {\n const minDate = parseToDate(min);\n minDate.setUTCMinutes(minDate.getUTCMinutes() - minDate.getTimezoneOffset());\n if (newCurrent < minDate) newCurrent = minDate;\n }\n\n setCurrent(newCurrent);\n }}\n min={min}\n max={max}\n />\n <VisuallyHiddenText aria-live='polite' role='alert'>\n {current.toLocaleString(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' })}\n </VisuallyHiddenText>\n <Button\n data-testid={testIds.nextMonth}\n variant='simple'\n icon\n onClick={() => {\n const newCurrent = new Date(current);\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n setCurrent(newCurrent);\n }}\n disabled={(() => {\n const newCurrent = new Date(current);\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n newCurrent.setUTCDate(0);\n\n return Boolean(max && max < newCurrent);\n })()}\n aria-label={t('picker_next_month')}\n >\n <Icon name={`caret-${end}`} />\n </Button>\n </Flex>\n <Flex container={{ wrap: 'nowrap' }} dir='ltr'>\n <Calendar\n testId={testIds.calendar}\n ref={calendarRef}\n selected={selected && isValidDate(selected) ? selected : undefined}\n current={current}\n calendarType={mode === 'date' ? calendarType : CALENDAR_TYPES.ISO_8601}\n showWeekNumber={showWeekNumber}\n mode={mode === 'datetime' ? 'date' : mode}\n onFocus={setCurrent}\n onSelect={selectedDate => {\n const newDate = new Date(selectedDate);\n\n if (selected) {\n newDate.setUTCHours(selected.getUTCHours());\n newDate.setUTCMinutes(selected.getUTCMinutes());\n newDate.setUTCSeconds(selected.getUTCSeconds());\n }\n\n setCurrent(newDate);\n setSelected(newDate);\n onChange?.(newDate);\n }}\n min={min}\n max={max}\n />\n </Flex>\n\n {mode === 'datetime' && (\n <TimeInput\n testId={testIds.time}\n label={t('time_text')}\n value={selected}\n pickerInterval={pickerInterval}\n withSeconds={withSeconds}\n clockFormat={clockFormat}\n onChange={selectedTime => {\n if (selectedTime.state || !selectedTime.valueAsISOString) {\n return;\n }\n const newDate = selected ? new Date(selected) : new Date();\n const selectedTimeDateObject = new Date(selectedTime.valueAsISOString);\n newDate.setUTCHours(selectedTimeDateObject.getUTCHours());\n newDate.setUTCMinutes(selectedTimeDateObject.getUTCMinutes());\n newDate.setUTCSeconds(selectedTimeDateObject.getUTCSeconds());\n\n setSelected(newDate);\n onChange?.(newDate);\n }}\n min={min}\n max={max}\n />\n )}\n </StyledDatePicker>\n );\n};\n\nexport default withTestIds(DatePicker, getDatePickerTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport Flex from '../../Flex';\nimport MonthInput from '../Input/MonthInput';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as caretLeftIcon from '../../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../../Icon/icons/caret-right.icon';\nimport { useConfiguration, useDirection, useI18n, useTestIds } from '../../../hooks';\nimport { getCalendarTypeFromLocale, parseToDate } from '../Input/utils';\nimport { CALENDAR_TYPES } from '../Input/local';\nimport TimeInput from '../Input/TimeInput';\nimport VisuallyHiddenText from '../../VisuallyHiddenText';\nimport { getDatePickerTestIds } from '../DateTime.test-ids';\nimport { withTestIds } from '../../../utils';\nimport { getAdjustedUTCDateTime } from '../utils';\n\nimport Calendar from './Calendar';\nimport type DatePickerProps from './DatePicker.types';\nimport { isValidDate, toDateTimeString } from './utils';\nimport {\n StyledDatePicker,\n StyledDatePickerMonthInput,\n StyledMonthPicker\n} from './DatePicker.styles';\n\nregisterIcon(caretLeftIcon, caretRightIcon);\n\nconst DatePicker: FunctionComponent<DatePickerProps> = ({\n testId,\n selected: initial,\n onChange,\n min,\n max,\n mode = 'date',\n showWeekNumber,\n withSeconds,\n pickerInterval,\n clockFormat,\n ...restProps\n}: DatePickerProps) => {\n const testIds = useTestIds(testId, getDatePickerTestIds);\n\n const { locale } = useConfiguration();\n const t = useI18n();\n\n const [selected, setSelected] = useState(initial);\n const [current, setCurrent] = useState(\n selected && isValidDate(selected) ? selected : getAdjustedUTCDateTime()\n );\n\n useEffect(() => {\n if (toDateTimeString(initial, mode) !== toDateTimeString(selected, mode)) {\n setSelected(initial);\n setCurrent(initial || getAdjustedUTCDateTime());\n }\n }, [toDateTimeString(initial, mode)]);\n\n const calendarRef = useRef<HTMLTableElement>(null);\n useEffect(() => {\n // need to postpone focusing to make sure onFocusWithin has been attached\n setTimeout(() => {\n calendarRef.current?.querySelector<HTMLElement>('button[tabindex=\"0\"]:enabled')?.focus();\n });\n }, []);\n\n const calendarType = getCalendarTypeFromLocale(locale);\n const { start, end } = useDirection();\n\n return (\n <StyledDatePicker\n data-testid={testIds.root}\n aria-label={t('calendar')}\n role='region'\n {...restProps}\n >\n <Flex as={StyledMonthPicker} container={{ justify: 'between', alignItems: 'end' }}>\n <Button\n data-testid={testIds.previousMonth}\n variant='simple'\n icon\n onClick={() => {\n const newCurrent = new Date(current);\n const currentYear = newCurrent.getUTCFullYear();\n const currentMonth = newCurrent.getUTCMonth();\n const currentDay = newCurrent.getUTCDate();\n const lastDayOfPreviousMonth = new Date(currentYear, currentMonth, 0).getDate();\n\n if (currentDay > lastDayOfPreviousMonth) {\n newCurrent.setUTCDate(1);\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n newCurrent.setUTCDate(lastDayOfPreviousMonth);\n setCurrent(newCurrent);\n } else {\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() - 1);\n setCurrent(newCurrent);\n }\n }}\n disabled={(() => {\n const newCurrent = new Date(current);\n newCurrent.setUTCDate(1);\n\n return Boolean(min && min > newCurrent);\n })()}\n aria-label={t('picker_prev_month')}\n >\n <Icon name={`caret-${start}`} />\n </Button>\n <MonthInput\n testId={testIds.month}\n as={StyledDatePickerMonthInput}\n innerLabelsHidden={false}\n value={current}\n required\n role='group'\n aria-label={t('picker_jump_to_month_and_year')}\n onChange={({ valueAsTimestamp }) => {\n let newCurrent = new Date(valueAsTimestamp!);\n newCurrent.setUTCDate(current.getUTCDate());\n\n if (max) {\n const maxDate = parseToDate(max);\n maxDate.setUTCMinutes(maxDate.getUTCMinutes() - maxDate.getTimezoneOffset());\n if (newCurrent > maxDate) newCurrent = maxDate;\n }\n\n if (min) {\n const minDate = parseToDate(min);\n minDate.setUTCMinutes(minDate.getUTCMinutes() - minDate.getTimezoneOffset());\n if (newCurrent < minDate) newCurrent = minDate;\n }\n\n setCurrent(newCurrent);\n }}\n min={min}\n max={max}\n />\n <VisuallyHiddenText aria-live='polite' role='alert'>\n {current.toLocaleString(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' })}\n </VisuallyHiddenText>\n <Button\n data-testid={testIds.nextMonth}\n variant='simple'\n icon\n onClick={() => {\n const newCurrent = new Date(current);\n const currentYear = newCurrent.getUTCFullYear();\n const currentMonth = newCurrent.getUTCMonth();\n const currentDay = newCurrent.getUTCDate();\n const lastDayOfNextMonth = new Date(currentYear, currentMonth + 2, 0).getDate();\n\n if (currentDay > lastDayOfNextMonth) {\n newCurrent.setUTCDate(1);\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n newCurrent.setUTCDate(lastDayOfNextMonth);\n setCurrent(newCurrent);\n } else {\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n setCurrent(newCurrent);\n }\n }}\n disabled={(() => {\n const newCurrent = new Date(current);\n newCurrent.setUTCMonth(newCurrent.getUTCMonth() + 1);\n newCurrent.setUTCDate(0);\n return Boolean(max && max < newCurrent);\n })()}\n aria-label={t('picker_next_month')}\n >\n <Icon name={`caret-${end}`} />\n </Button>\n </Flex>\n <Flex container={{ wrap: 'nowrap' }} dir='ltr'>\n <Calendar\n testId={testIds.calendar}\n ref={calendarRef}\n selected={selected && isValidDate(selected) ? selected : undefined}\n current={current}\n calendarType={mode === 'date' ? calendarType : CALENDAR_TYPES.ISO_8601}\n showWeekNumber={showWeekNumber}\n mode={mode === 'datetime' ? 'date' : mode}\n onFocus={setCurrent}\n onSelect={selectedDate => {\n const newDate = new Date(selectedDate);\n\n if (selected) {\n newDate.setUTCHours(selected.getUTCHours());\n newDate.setUTCMinutes(selected.getUTCMinutes());\n newDate.setUTCSeconds(selected.getUTCSeconds());\n }\n\n setCurrent(newDate);\n setSelected(newDate);\n onChange?.(newDate);\n }}\n min={min}\n max={max}\n />\n </Flex>\n\n {mode === 'datetime' && (\n <TimeInput\n testId={testIds.time}\n label={t('time_text')}\n value={selected}\n pickerInterval={pickerInterval}\n withSeconds={withSeconds}\n clockFormat={clockFormat}\n onChange={selectedTime => {\n if (selectedTime.state || !selectedTime.valueAsISOString) {\n return;\n }\n const newDate = selected ? new Date(selected) : new Date();\n const selectedTimeDateObject = new Date(selectedTime.valueAsISOString);\n newDate.setUTCHours(selectedTimeDateObject.getUTCHours());\n newDate.setUTCMinutes(selectedTimeDateObject.getUTCMinutes());\n newDate.setUTCSeconds(selectedTimeDateObject.getUTCSeconds());\n\n setSelected(newDate);\n onChange?.(newDate);\n }}\n min={min}\n max={max}\n />\n )}\n </StyledDatePicker>\n );\n};\n\nexport default withTestIds(DatePicker, getDatePickerTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlF,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlF,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAiBvD,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC9F;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;;;;AAmKD,wBAA6D"}
|
|
@@ -12,7 +12,7 @@ import { StyledSelect } from '../Select/Select';
|
|
|
12
12
|
import Flex from '../Flex';
|
|
13
13
|
import { withTestIds } from '../../utils';
|
|
14
14
|
import callingCodes from './callingCodes';
|
|
15
|
-
import { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';
|
|
15
|
+
import { convertToCallbackParameter, formatPhone, formatPhoneNumber, getPhoneNumberParts } from './utils';
|
|
16
16
|
import { getPhoneInputTestIds } from './Phone.test-ids';
|
|
17
17
|
const StyledPhoneInput = styled.div(() => {
|
|
18
18
|
return css `
|
|
@@ -55,11 +55,16 @@ const PhoneInput = forwardRef(function PhoneInput(props, ref) {
|
|
|
55
55
|
const containerRef = useRef(null);
|
|
56
56
|
useFocusWithin([containerRef], onFocusChange);
|
|
57
57
|
const formatter = useCallback(number => {
|
|
58
|
+
if (value && readOnly && showCountryCode) {
|
|
59
|
+
const temp = formatPhone(value, { nationalFormat: !readOnly });
|
|
60
|
+
if (temp)
|
|
61
|
+
return temp;
|
|
62
|
+
}
|
|
58
63
|
return formatPhoneNumber(number.replace(/\D+/g, ''), countryCode);
|
|
59
|
-
}, [countryCode]);
|
|
64
|
+
}, [readOnly, countryCode, showCountryCode]);
|
|
60
65
|
const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
|
|
61
66
|
const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
|
|
62
|
-
const Comp = (_jsxs(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { "data-testid": testIds.control, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
|
|
67
|
+
const Comp = (_jsxs(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && !readOnly && (_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { "data-testid": testIds.control, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
|
|
63
68
|
return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', labelAs: 'legend', additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
|
|
64
69
|
});
|
|
65
70
|
export default withTestIds(PhoneInput, getPhoneInputTestIds);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useInputFormatter,\n useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds } from '../../utils';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /**\n * Display select with countries calling codes\n * @default false\n */\n showCountryCode?: boolean;\n /** Changes lists of countries calling codes */\n callingCodesList?: string[];\n /** Callback fired on input value change */\n onChange?: (value: string) => void;\n /** Callback fired when the component loses focus */\n onBlur?: (value: string) => void;\n /** CCallback fired when the component gets focus */\n onFocus?: (value: string) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n return css`\n border: 0;\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n function PhoneInput(props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) {\n const {\n testId,\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n onResolveSuggestion,\n additionalInfo,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getPhoneInputTestIds);\n\n const t = useI18n();\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const containerRef = useRef<HTMLElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n number => {\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n },\n [countryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n data-testid={testIds.root}\n as={StyledFormControl}\n forwardedAs={Flex as any}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {showCountryCode && (\n <Select\n data-testid={testIds.countryCode}\n value={countryCode}\n aria-label={t('select_country_code')}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete='tel-country-code'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n >\n {codesOptions}\n </Select>\n )}\n <Input\n data-testid={testIds.control}\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n aria-label={t('enter_a_number')}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete='tel-national'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n />\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n labelAs='legend'\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useFocusWithin,\n useI18n,\n useInputFormatter,\n useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds } from '../../utils';\n\nimport callingCodes from './callingCodes';\nimport {\n convertToCallbackParameter,\n formatPhone,\n formatPhoneNumber,\n getPhoneNumberParts\n} from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /**\n * Display select with countries calling codes\n * @default false\n */\n showCountryCode?: boolean;\n /** Changes lists of countries calling codes */\n callingCodesList?: string[];\n /** Callback fired on input value change */\n onChange?: (value: string) => void;\n /** Callback fired when the component loses focus */\n onBlur?: (value: string) => void;\n /** CCallback fired when the component gets focus */\n onFocus?: (value: string) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLInputElement>;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n return css`\n border: 0;\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n function PhoneInput(props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) {\n const {\n testId,\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n onResolveSuggestion,\n additionalInfo,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getPhoneInputTestIds);\n\n const t = useI18n();\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref);\n const containerRef = useRef<HTMLElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n number => {\n if (value && readOnly && showCountryCode) {\n const temp = formatPhone(value, { nationalFormat: !readOnly });\n if (temp) return temp;\n }\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n },\n [readOnly, countryCode, showCountryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n data-testid={testIds.root}\n as={StyledFormControl}\n forwardedAs={Flex as any}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {showCountryCode && !readOnly && (\n <Select\n data-testid={testIds.countryCode}\n value={countryCode}\n aria-label={t('select_country_code')}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete='tel-country-code'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n >\n {codesOptions}\n </Select>\n )}\n <Input\n data-testid={testIds.control}\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n aria-label={t('enter_a_number')}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete='tel-national'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n />\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n labelAs='legend'\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../src/styles/mixins.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,wDAI3B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mixins.js","sourceRoot":"","sources":["../../src/styles/mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,wDAAwD;AACxD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;CAIjC,CAAC","sourcesContent":["import { css } from 'styled-components';\n\n// eslint-disable-next-line import/prefer-default-export\nexport const elipsisOverflow = css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "7.0.0-build.9.
|
|
3
|
+
"version": "7.0.0-build.9.2",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|