@transferwise/components 0.0.0-experimental-7a83d86 → 0.0.0-experimental-b2a535a
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/build/index.js +17 -22
- package/build/index.js.map +1 -1
- package/build/index.mjs +17 -22
- package/build/index.mjs.map +1 -1
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/loader/Loader.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- package/build/types/popover/Popover.d.ts.map +1 -1
- package/build/types/segmentedControl/SegmentedControl.d.ts +2 -2
- package/build/types/segmentedControl/SegmentedControl.d.ts.map +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/stepper/deviceDetection.d.ts.map +1 -1
- package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/accordion/Accordion.story.tsx +1 -1
- package/src/alert/Alert.tsx +1 -2
- package/src/avatar/colors/colors.ts +1 -1
- package/src/body/Body.spec.tsx +1 -1
- package/src/body/Body.story.tsx +8 -8
- package/src/checkbox/Checkbox.js +1 -1
- package/src/checkboxButton/CheckboxButton.spec.tsx +1 -0
- package/src/common/Option/Option.tsx +1 -1
- package/src/common/deviceDetection/deviceDetection.js +1 -1
- package/src/common/deviceDetection/deviceDetection.spec.js +2 -4
- package/src/common/responsivePanel/ResponsivePanel.spec.js +15 -11
- package/src/decision/Decision.spec.js +1 -0
- package/src/dimmer/Dimmer.tsx +2 -6
- package/src/inlineAlert/InlineAlert.story.tsx +7 -8
- package/src/link/Link.story.tsx +16 -16
- package/src/loader/Loader.tsx +1 -0
- package/src/logo/Logo.js +2 -2
- package/src/moneyInput/MoneyInput.story.tsx +3 -3
- package/src/nudge/Nudge.spec.tsx +5 -5
- package/src/phoneNumberInput/PhoneNumberInput.tsx +1 -2
- package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts +1 -1
- package/src/popover/Popover.tsx +1 -2
- package/src/promoCard/PromoCard.tsx +1 -1
- package/src/radioGroup/RadioGroup.spec.js +1 -1
- package/src/section/Section.story.tsx +1 -2
- package/src/segmentedControl/SegmentedControl.spec.tsx +41 -3
- package/src/segmentedControl/SegmentedControl.story.tsx +51 -13
- package/src/segmentedControl/SegmentedControl.tsx +3 -4
- package/src/select/Select.js +3 -2
- package/src/stepper/deviceDetection.js +2 -1
- package/src/stepper/deviceDetection.spec.js +3 -8
- package/src/test-utils/index.js +1 -1
- package/src/test-utils/story-config.ts +1 -1
- package/src/title/Title.spec.tsx +1 -1
- package/src/typeahead/Typeahead.spec.js +2 -4
- package/src/upload/Upload.spec.js +4 -8
- package/src/uploadInput/uploadButton/UploadButton.tsx +0 -1
package/build/index.js
CHANGED
|
@@ -95,7 +95,7 @@ var HistoryNavigator$1 = HistoryNavigator;
|
|
|
95
95
|
function isIosDevice() {
|
|
96
96
|
const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];
|
|
97
97
|
const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
|
|
98
|
-
const regex = new RegExp(matchString, '
|
|
98
|
+
const regex = new RegExp(matchString, 'ig');
|
|
99
99
|
return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
|
|
100
100
|
}
|
|
101
101
|
|
|
@@ -941,9 +941,8 @@ function resolveType(type) {
|
|
|
941
941
|
return 'neutral';
|
|
942
942
|
case 'error':
|
|
943
943
|
return 'negative';
|
|
944
|
-
default:
|
|
945
|
-
return type;
|
|
946
944
|
}
|
|
945
|
+
return type;
|
|
947
946
|
}
|
|
948
947
|
function Alert({
|
|
949
948
|
arrow,
|
|
@@ -1089,7 +1088,7 @@ const hashSeed = seed => {
|
|
|
1089
1088
|
const modulo = avatarColors.length;
|
|
1090
1089
|
let hashValue = 0;
|
|
1091
1090
|
let basePow = 1;
|
|
1092
|
-
for (let i = 0; i < seed.length; i
|
|
1091
|
+
for (let i = 0; i < seed.length; i++) {
|
|
1093
1092
|
hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
|
|
1094
1093
|
basePow = basePow * base % modulo;
|
|
1095
1094
|
}
|
|
@@ -1381,15 +1380,11 @@ const Dimmer = ({
|
|
|
1381
1380
|
}, [onClose]);
|
|
1382
1381
|
const onEnter = () => {
|
|
1383
1382
|
setHasNotExited(true);
|
|
1384
|
-
|
|
1385
|
-
dimmerManager.add(dimmerReference.current);
|
|
1386
|
-
}
|
|
1383
|
+
dimmerReference.current && dimmerManager.add(dimmerReference.current);
|
|
1387
1384
|
};
|
|
1388
1385
|
const onExited = () => {
|
|
1389
1386
|
setHasNotExited(false);
|
|
1390
|
-
|
|
1391
|
-
dimmerManager.remove(dimmerReference.current);
|
|
1392
|
-
}
|
|
1387
|
+
dimmerReference.current && dimmerManager.remove(dimmerReference.current);
|
|
1393
1388
|
};
|
|
1394
1389
|
React.useEffect(() => {
|
|
1395
1390
|
const localReferenceCopy = dimmerReference.current;
|
|
@@ -5206,6 +5201,7 @@ const Tooltip = ({
|
|
|
5206
5201
|
|
|
5207
5202
|
function supportsTouchEvents() {
|
|
5208
5203
|
const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
|
|
5204
|
+
// eslint-disable-next-line compat/compat
|
|
5209
5205
|
const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
|
|
5210
5206
|
const documentTouchIsDefined = typeof window !== 'undefined' && window.DocumentTouch && document instanceof window.DocumentTouch;
|
|
5211
5207
|
return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
|
|
@@ -5213,7 +5209,7 @@ function supportsTouchEvents() {
|
|
|
5213
5209
|
function userAgentSuggestsTouchDevice() {
|
|
5214
5210
|
const sampleTouchDevices = ['android', 'iemobile', 'iphone', 'ipad', 'ipod', 'blackberry', 'bada'];
|
|
5215
5211
|
const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
|
|
5216
|
-
const regex = new RegExp(matchString, '
|
|
5212
|
+
const regex = new RegExp(matchString, 'ig');
|
|
5217
5213
|
return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
|
|
5218
5214
|
}
|
|
5219
5215
|
// Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
|
|
@@ -5619,9 +5615,8 @@ function resolvePlacement(preferredPlacement) {
|
|
|
5619
5615
|
case 'bottom-left':
|
|
5620
5616
|
case 'bottom-right':
|
|
5621
5617
|
return 'bottom';
|
|
5622
|
-
default:
|
|
5623
|
-
return preferredPlacement;
|
|
5624
5618
|
}
|
|
5619
|
+
return preferredPlacement;
|
|
5625
5620
|
}
|
|
5626
5621
|
function Popover$1({
|
|
5627
5622
|
children,
|
|
@@ -7184,6 +7179,7 @@ const Loader = ({
|
|
|
7184
7179
|
}, 1000);
|
|
7185
7180
|
}
|
|
7186
7181
|
return () => {
|
|
7182
|
+
// eslint-disable-next-line fp/no-mutation
|
|
7187
7183
|
cancelled = true;
|
|
7188
7184
|
clearTimeout(timeout);
|
|
7189
7185
|
};
|
|
@@ -9120,7 +9116,7 @@ const explodeNumberModel = number => {
|
|
|
9120
9116
|
};
|
|
9121
9117
|
};
|
|
9122
9118
|
|
|
9123
|
-
const DIGITS_MATCH = /^$|^(\+)|(\d+)/g;
|
|
9119
|
+
const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
|
|
9124
9120
|
const cleanNumber = number => number.match(DIGITS_MATCH)?.join('') ?? '';
|
|
9125
9121
|
|
|
9126
9122
|
function sortArrayByProperty(arrayToSort, property) {
|
|
@@ -9206,8 +9202,7 @@ const PhoneNumberInput = ({
|
|
|
9206
9202
|
};
|
|
9207
9203
|
React.useEffect(() => {
|
|
9208
9204
|
if (broadcastedValue === null) {
|
|
9209
|
-
setBroadcastedValue(internalValue);
|
|
9210
|
-
return;
|
|
9205
|
+
return setBroadcastedValue(internalValue);
|
|
9211
9206
|
}
|
|
9212
9207
|
const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
|
|
9213
9208
|
const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
|
|
@@ -9480,7 +9475,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
|
|
|
9480
9475
|
const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
|
|
9481
9476
|
...commonProps,
|
|
9482
9477
|
'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
|
|
9483
|
-
'aria-describedby': `${componentId}-title
|
|
9478
|
+
'aria-describedby': `${componentId}-title` || undefined,
|
|
9484
9479
|
'aria-disabled': isDisabled,
|
|
9485
9480
|
'data-value': value ?? undefined,
|
|
9486
9481
|
role: type === 'checkbox' || type === 'radio' ? type : undefined,
|
|
@@ -10133,8 +10128,8 @@ function Select({
|
|
|
10133
10128
|
}
|
|
10134
10129
|
};
|
|
10135
10130
|
function selectKeyboardFocusedOption() {
|
|
10136
|
-
if (keyboardFocusedOptionIndex != null
|
|
10137
|
-
selectOption(selectableOptions[keyboardFocusedOptionIndex]);
|
|
10131
|
+
if (keyboardFocusedOptionIndex != null) {
|
|
10132
|
+
selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
|
|
10138
10133
|
}
|
|
10139
10134
|
}
|
|
10140
10135
|
function moveFocusWithDifference(difference) {
|
|
@@ -10361,6 +10356,7 @@ function Select({
|
|
|
10361
10356
|
disabled: disabled,
|
|
10362
10357
|
"aria-controls": listboxId,
|
|
10363
10358
|
"aria-expanded": open,
|
|
10359
|
+
"aria-autocomplete": "none",
|
|
10364
10360
|
onClick: handleOnClick,
|
|
10365
10361
|
...buttonProps,
|
|
10366
10362
|
children: [selected ? /*#__PURE__*/jsxRuntime.jsx(Option$1, {
|
|
@@ -10476,12 +10472,11 @@ Select.defaultProps = {
|
|
|
10476
10472
|
|
|
10477
10473
|
const SegmentedControl = ({
|
|
10478
10474
|
name,
|
|
10479
|
-
|
|
10475
|
+
selectedValue,
|
|
10480
10476
|
mode = 'input',
|
|
10481
10477
|
segments,
|
|
10482
10478
|
onChange
|
|
10483
10479
|
}) => {
|
|
10484
|
-
const [selectedValue, setSelectedValue] = React.useState(defaultValue || segments[0].value);
|
|
10485
10480
|
const [animate, setAnimate] = React.useState(false);
|
|
10486
10481
|
const segmentsRef = React.useRef(null);
|
|
10487
10482
|
if (segments.length > 3) {
|
|
@@ -10505,6 +10500,7 @@ const SegmentedControl = ({
|
|
|
10505
10500
|
}
|
|
10506
10501
|
};
|
|
10507
10502
|
React.useEffect(() => {
|
|
10503
|
+
setAnimate(true);
|
|
10508
10504
|
updateSegmentPosition();
|
|
10509
10505
|
const handleWindowSizeChange = () => {
|
|
10510
10506
|
setAnimate(false);
|
|
@@ -10530,7 +10526,6 @@ const SegmentedControl = ({
|
|
|
10530
10526
|
children: segmentsWithRefs.map(segment => {
|
|
10531
10527
|
const onSelect = () => {
|
|
10532
10528
|
setAnimate(true);
|
|
10533
|
-
setSelectedValue(segment.value);
|
|
10534
10529
|
onChange(segment.value);
|
|
10535
10530
|
};
|
|
10536
10531
|
return mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
|