@transferwise/components 0.0.0-experimental-29ce40f → 0.0.0-experimental-04e4d95
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 +524 -15
- package/build/index.js.map +1 -1
- package/build/index.mjs +524 -17
- package/build/index.mjs.map +1 -1
- package/build/main.css +5 -0
- package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +5 -0
- package/build/styles/main.css +5 -0
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/common/requirements.d.ts +3 -0
- package/build/types/common/requirements.d.ts.map +1 -0
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts +21 -0
- package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts.map +1 -0
- package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts +12 -0
- package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts.map +1 -0
- package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts +2 -0
- package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts.map +1 -0
- package/build/types/dynamicFieldDefinitionList/index.d.ts +2 -0
- package/build/types/dynamicFieldDefinitionList/index.d.ts.map +1 -0
- package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts +2 -0
- package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts.map +1 -0
- package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts +2 -0
- package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts.map +1 -0
- package/build/types/index.d.ts +1 -0
- package/build/types/index.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/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 +2 -1
- 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 +0 -1
- package/src/common/Option/Option.tsx +1 -1
- package/src/common/deviceDetection/deviceDetection.js +1 -1
- package/src/common/deviceDetection/deviceDetection.spec.js +4 -2
- package/src/common/responsivePanel/ResponsivePanel.spec.js +11 -15
- package/src/decision/Decision.spec.js +0 -1
- package/src/dimmer/Dimmer.tsx +6 -2
- package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +41 -0
- package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.spec.js +21 -0
- package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.story.js +134 -0
- package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +5 -0
- package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +73 -0
- package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.less +4 -0
- package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.spec.js +200 -0
- package/src/dynamicFieldDefinitionList/FormattedValue/index.js +1 -0
- package/src/dynamicFieldDefinitionList/index.js +1 -0
- package/src/dynamicFieldDefinitionList/utils/createDefinitions.js +33 -0
- package/src/dynamicFieldDefinitionList/utils/createDefinitions.spec.js +83 -0
- package/src/dynamicFieldDefinitionList/utils/text-format.js +46 -0
- package/src/dynamicFieldDefinitionList/utils/text-format.spec.js +43 -0
- package/src/index.ts +1 -0
- package/src/inlineAlert/InlineAlert.story.tsx +8 -7
- package/src/link/Link.story.tsx +16 -16
- package/src/loader/Loader.tsx +0 -1
- package/src/logo/Logo.js +2 -2
- package/src/main.css +5 -0
- package/src/main.less +1 -0
- package/src/moneyInput/MoneyInput.story.tsx +3 -3
- package/src/nudge/Nudge.spec.tsx +5 -5
- package/src/phoneNumberInput/PhoneNumberInput.tsx +2 -1
- package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts +1 -1
- package/src/popover/Popover.tsx +2 -1
- package/src/promoCard/PromoCard.tsx +1 -1
- package/src/radioGroup/RadioGroup.spec.js +1 -1
- package/src/section/Section.story.tsx +2 -1
- package/src/segmentedControl/SegmentedControl.spec.tsx +2 -2
- package/src/select/Select.js +2 -3
- package/src/stepper/deviceDetection.js +1 -2
- package/src/stepper/deviceDetection.spec.js +8 -3
- 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 +4 -2
- package/src/upload/Upload.spec.js +8 -4
- package/src/uploadInput/uploadButton/UploadButton.tsx +1 -0
package/build/index.mjs
CHANGED
|
@@ -8,7 +8,7 @@ import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import commonmark from 'commonmark';
|
|
10
10
|
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
11
|
-
import { formatDate, formatMoney, formatAmount } from '@transferwise/formatting';
|
|
11
|
+
import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
|
|
12
12
|
import { Transition, Listbox } from '@headlessui/react';
|
|
13
13
|
import mergeProps from 'merge-props';
|
|
14
14
|
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
|
|
@@ -24,6 +24,7 @@ import { Flag, Illustration } from '@wise/art';
|
|
|
24
24
|
import clamp$2 from 'lodash.clamp';
|
|
25
25
|
import debounce from 'lodash.debounce';
|
|
26
26
|
import requiredIf from 'react-required-if';
|
|
27
|
+
import toPairs from 'lodash.topairs';
|
|
27
28
|
import { Spring, animated } from '@react-spring/web';
|
|
28
29
|
|
|
29
30
|
class HistoryNavigator {
|
|
@@ -62,7 +63,7 @@ var HistoryNavigator$1 = HistoryNavigator;
|
|
|
62
63
|
function isIosDevice() {
|
|
63
64
|
const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];
|
|
64
65
|
const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
|
|
65
|
-
const regex = new RegExp(matchString, '
|
|
66
|
+
const regex = new RegExp(matchString, 'gi');
|
|
66
67
|
return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
|
|
67
68
|
}
|
|
68
69
|
|
|
@@ -908,8 +909,9 @@ function resolveType(type) {
|
|
|
908
909
|
return 'neutral';
|
|
909
910
|
case 'error':
|
|
910
911
|
return 'negative';
|
|
912
|
+
default:
|
|
913
|
+
return type;
|
|
911
914
|
}
|
|
912
|
-
return type;
|
|
913
915
|
}
|
|
914
916
|
function Alert({
|
|
915
917
|
arrow,
|
|
@@ -1055,7 +1057,7 @@ const hashSeed = seed => {
|
|
|
1055
1057
|
const modulo = avatarColors.length;
|
|
1056
1058
|
let hashValue = 0;
|
|
1057
1059
|
let basePow = 1;
|
|
1058
|
-
for (let i = 0; i < seed.length; i
|
|
1060
|
+
for (let i = 0; i < seed.length; i += 1) {
|
|
1059
1061
|
hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
|
|
1060
1062
|
basePow = basePow * base % modulo;
|
|
1061
1063
|
}
|
|
@@ -1347,11 +1349,15 @@ const Dimmer = ({
|
|
|
1347
1349
|
}, [onClose]);
|
|
1348
1350
|
const onEnter = () => {
|
|
1349
1351
|
setHasNotExited(true);
|
|
1350
|
-
|
|
1352
|
+
if (dimmerReference.current) {
|
|
1353
|
+
dimmerManager.add(dimmerReference.current);
|
|
1354
|
+
}
|
|
1351
1355
|
};
|
|
1352
1356
|
const onExited = () => {
|
|
1353
1357
|
setHasNotExited(false);
|
|
1354
|
-
|
|
1358
|
+
if (dimmerReference.current) {
|
|
1359
|
+
dimmerManager.remove(dimmerReference.current);
|
|
1360
|
+
}
|
|
1355
1361
|
};
|
|
1356
1362
|
useEffect(() => {
|
|
1357
1363
|
const localReferenceCopy = dimmerReference.current;
|
|
@@ -4326,6 +4332,508 @@ const DropFade = ({
|
|
|
4326
4332
|
});
|
|
4327
4333
|
};
|
|
4328
4334
|
|
|
4335
|
+
/* eslint-disable no-unused-vars */
|
|
4336
|
+
/* eslint-disable no-param-reassign */
|
|
4337
|
+
|
|
4338
|
+
const prepFields = (fields, model, validationMessages) => {
|
|
4339
|
+
if (!fields) {
|
|
4340
|
+
return {};
|
|
4341
|
+
}
|
|
4342
|
+
let preparedFields = copyOf(fields);
|
|
4343
|
+
preparedFields = flattenFieldsWithGroups(preparedFields);
|
|
4344
|
+
preparedFields = transformFieldArrayToMap(preparedFields);
|
|
4345
|
+
preparedFields = transformNestedKeysToNestedSpecs(preparedFields);
|
|
4346
|
+
Object.keys(preparedFields).forEach(key => {
|
|
4347
|
+
preparedFields[key] = prepField(preparedFields[key], model, validationMessages);
|
|
4348
|
+
});
|
|
4349
|
+
return preparedFields;
|
|
4350
|
+
};
|
|
4351
|
+
const prepField = (field, model, validationMessages) => {
|
|
4352
|
+
const preparedField = copyOf(field);
|
|
4353
|
+
prepLegacyProps(preparedField);
|
|
4354
|
+
prepType(preparedField);
|
|
4355
|
+
prepPattern(preparedField);
|
|
4356
|
+
prepValidationMessages(preparedField, validationMessages);
|
|
4357
|
+
return preparedField;
|
|
4358
|
+
};
|
|
4359
|
+
|
|
4360
|
+
/**
|
|
4361
|
+
* In an older format we had an extra fieldGroup level, here we flatten that out
|
|
4362
|
+
* So the inner arrays of fields within the different field groups are flattened
|
|
4363
|
+
* to a single array, which is returned.
|
|
4364
|
+
*
|
|
4365
|
+
* @param fields
|
|
4366
|
+
*/
|
|
4367
|
+
const flattenFieldsWithGroups = fields => {
|
|
4368
|
+
if (Array.isArray(fields)) {
|
|
4369
|
+
let flattenedFields = [];
|
|
4370
|
+
fields.forEach(field => {
|
|
4371
|
+
// If we've been given a group with nested fields, break them out.
|
|
4372
|
+
if (field.fields) {
|
|
4373
|
+
flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.fields));
|
|
4374
|
+
} else if (field.group) {
|
|
4375
|
+
flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.group));
|
|
4376
|
+
} else {
|
|
4377
|
+
// Otherwise it's a regular field, just add it.
|
|
4378
|
+
flattenedFields.push(field);
|
|
4379
|
+
}
|
|
4380
|
+
});
|
|
4381
|
+
return flattenedFields;
|
|
4382
|
+
}
|
|
4383
|
+
return fields;
|
|
4384
|
+
};
|
|
4385
|
+
const flattenFieldWithGroup = (field, subFields) => {
|
|
4386
|
+
// If first field doesn't have a label, use the one from the group
|
|
4387
|
+
if (field.name && subFields.length > 0 && !subFields[0].name) {
|
|
4388
|
+
subFields[0].name = field.name;
|
|
4389
|
+
}
|
|
4390
|
+
if (field.width && subFields.length > 0 && !subFields[0].width) {
|
|
4391
|
+
subFields[0].width = field.width;
|
|
4392
|
+
}
|
|
4393
|
+
|
|
4394
|
+
// If there was a tooltip at fieldGroup level move it to first field.
|
|
4395
|
+
if (field.tooltip && subFields.length > 0 && !subFields[0].help) {
|
|
4396
|
+
subFields[0].help = {
|
|
4397
|
+
message: field.tooltip
|
|
4398
|
+
};
|
|
4399
|
+
}
|
|
4400
|
+
if (field.info && subFields.length > 0 && !subFields[0].help) {
|
|
4401
|
+
subFields[0].help = {
|
|
4402
|
+
message: field.info
|
|
4403
|
+
};
|
|
4404
|
+
}
|
|
4405
|
+
|
|
4406
|
+
// If there are two parts of this group, render them side by side
|
|
4407
|
+
if (subFields.length === 2) {
|
|
4408
|
+
subFields.forEach(nestedField => {
|
|
4409
|
+
nestedField.width = 'md';
|
|
4410
|
+
});
|
|
4411
|
+
}
|
|
4412
|
+
|
|
4413
|
+
// If there are three parts, render the first two side by side
|
|
4414
|
+
if (subFields.length === 3) {
|
|
4415
|
+
subFields[0].width = 'md';
|
|
4416
|
+
subFields[1].width = 'md';
|
|
4417
|
+
}
|
|
4418
|
+
return subFields;
|
|
4419
|
+
};
|
|
4420
|
+
|
|
4421
|
+
/*
|
|
4422
|
+
* Some older requirements return an array of fields, where it should be a map
|
|
4423
|
+
* from the property name to the spec. This converts arrays to maps.
|
|
4424
|
+
*/
|
|
4425
|
+
const transformFieldArrayToMap = fields => {
|
|
4426
|
+
if (Array.isArray(fields)) {
|
|
4427
|
+
const fieldMap = {};
|
|
4428
|
+
fields.forEach(field => {
|
|
4429
|
+
const key = field.key || field.name;
|
|
4430
|
+
delete field.key;
|
|
4431
|
+
fieldMap[key] = copyOf(field);
|
|
4432
|
+
});
|
|
4433
|
+
return fieldMap;
|
|
4434
|
+
}
|
|
4435
|
+
return fields;
|
|
4436
|
+
};
|
|
4437
|
+
|
|
4438
|
+
/*
|
|
4439
|
+
* Some older format return keys like 'address.city', expecting the value of
|
|
4440
|
+
* city to be nested inside an address object. This function creates a spec of
|
|
4441
|
+
* type 'object', and nests such fields inside of it. When we render we pass
|
|
4442
|
+
* this object spec to a nested fieldset.
|
|
4443
|
+
*/
|
|
4444
|
+
const transformNestedKeysToNestedSpecs = fieldMap => {
|
|
4445
|
+
if (Array.isArray(fieldMap)) {
|
|
4446
|
+
throw new TypeError('Expecting a map of fields, not an array');
|
|
4447
|
+
}
|
|
4448
|
+
const nestedFields = {};
|
|
4449
|
+
Object.keys(fieldMap).forEach(key => {
|
|
4450
|
+
if (key.indexOf('.') > 0) {
|
|
4451
|
+
// If the key contains a period we need to nest the fields in another object
|
|
4452
|
+
const pathSections = key.split('.');
|
|
4453
|
+
const nestedKey = pathSections[0];
|
|
4454
|
+
|
|
4455
|
+
// If this sub object doesn't exist yet, create it
|
|
4456
|
+
if (!nestedFields[nestedKey]) {
|
|
4457
|
+
nestedFields[nestedKey] = {
|
|
4458
|
+
type: 'object',
|
|
4459
|
+
properties: {}
|
|
4460
|
+
};
|
|
4461
|
+
}
|
|
4462
|
+
nestedFields[nestedKey].properties[pathSections[1]] = fieldMap[key];
|
|
4463
|
+
} else {
|
|
4464
|
+
nestedFields[key] = fieldMap[key];
|
|
4465
|
+
}
|
|
4466
|
+
});
|
|
4467
|
+
return nestedFields;
|
|
4468
|
+
};
|
|
4469
|
+
const prepType = field => {
|
|
4470
|
+
const type = field.type && field.type.toLowerCase && field.type.toLowerCase();
|
|
4471
|
+
switch (type) {
|
|
4472
|
+
case 'text':
|
|
4473
|
+
field.type = 'string';
|
|
4474
|
+
break;
|
|
4475
|
+
case 'date':
|
|
4476
|
+
field.type = 'string';
|
|
4477
|
+
field.format = 'date';
|
|
4478
|
+
break;
|
|
4479
|
+
case 'password':
|
|
4480
|
+
field.type = 'string';
|
|
4481
|
+
field.control = 'password';
|
|
4482
|
+
break;
|
|
4483
|
+
case 'checkbox':
|
|
4484
|
+
field.type = 'boolean';
|
|
4485
|
+
break;
|
|
4486
|
+
case 'select':
|
|
4487
|
+
if (!field.control) {
|
|
4488
|
+
field.control = 'select';
|
|
4489
|
+
}
|
|
4490
|
+
delete field.type;
|
|
4491
|
+
break;
|
|
4492
|
+
case 'radio':
|
|
4493
|
+
field.control = 'radio';
|
|
4494
|
+
delete field.type;
|
|
4495
|
+
break;
|
|
4496
|
+
case 'upload':
|
|
4497
|
+
field.type = 'string';
|
|
4498
|
+
field.format = 'base64url';
|
|
4499
|
+
break;
|
|
4500
|
+
case 'tel':
|
|
4501
|
+
field.type = 'string';
|
|
4502
|
+
field.format = 'phone';
|
|
4503
|
+
break;
|
|
4504
|
+
case 'textarea':
|
|
4505
|
+
field.type = 'string';
|
|
4506
|
+
field.control = 'textarea';
|
|
4507
|
+
break;
|
|
4508
|
+
}
|
|
4509
|
+
if (!field.control && field.type !== 'object') {
|
|
4510
|
+
field.control = getControlType(field);
|
|
4511
|
+
}
|
|
4512
|
+
};
|
|
4513
|
+
const prepLegacyProps = field => {
|
|
4514
|
+
if (field.name && !field.title) {
|
|
4515
|
+
field.title = field.name;
|
|
4516
|
+
delete field.name;
|
|
4517
|
+
}
|
|
4518
|
+
if (field.validationRegexp) {
|
|
4519
|
+
field.pattern = field.validationRegexp;
|
|
4520
|
+
delete field.validationRegexp;
|
|
4521
|
+
}
|
|
4522
|
+
if (field.min) {
|
|
4523
|
+
field.minimum = field.min;
|
|
4524
|
+
delete field.min;
|
|
4525
|
+
}
|
|
4526
|
+
if (field.max) {
|
|
4527
|
+
field.maximum = field.max;
|
|
4528
|
+
delete field.max;
|
|
4529
|
+
}
|
|
4530
|
+
if (field.example && !field.placeholder) {
|
|
4531
|
+
field.placeholder = field.example;
|
|
4532
|
+
delete field.example;
|
|
4533
|
+
}
|
|
4534
|
+
if (field.tooltip && !field.help) {
|
|
4535
|
+
field.help = {
|
|
4536
|
+
message: field.tooltip
|
|
4537
|
+
};
|
|
4538
|
+
delete field.tooltip;
|
|
4539
|
+
}
|
|
4540
|
+
if (field.valuesAllowed && !field.values) {
|
|
4541
|
+
field.values = field.valuesAllowed;
|
|
4542
|
+
delete field.valuesAllowed;
|
|
4543
|
+
}
|
|
4544
|
+
if (field.values && field.values.map) {
|
|
4545
|
+
field.values = prepLegacyValues(field.values);
|
|
4546
|
+
}
|
|
4547
|
+
if (field.value && !field.default) {
|
|
4548
|
+
field.default = field.value;
|
|
4549
|
+
delete field.value;
|
|
4550
|
+
}
|
|
4551
|
+
if (field.values) {
|
|
4552
|
+
// In some legacy arrays the first value is a placeholder, extract it.
|
|
4553
|
+
if (field.values && field.values.length > 0 && field.values[0] && !field.values[0].value && field.values[0].label && !field.placeholder) {
|
|
4554
|
+
field.placeholder = field.values[0].label;
|
|
4555
|
+
field.values = field.values.slice(1);
|
|
4556
|
+
}
|
|
4557
|
+
}
|
|
4558
|
+
};
|
|
4559
|
+
const prepLegacyValues = values => values.map(prepLegacyValue);
|
|
4560
|
+
const prepLegacyValue = value => {
|
|
4561
|
+
if (!value.label && value.title) {
|
|
4562
|
+
value.label = value.title;
|
|
4563
|
+
delete value.title;
|
|
4564
|
+
}
|
|
4565
|
+
if (!value.label && value.name) {
|
|
4566
|
+
value.label = value.name;
|
|
4567
|
+
delete value.name;
|
|
4568
|
+
}
|
|
4569
|
+
if (!value.value && value.code) {
|
|
4570
|
+
value.value = value.code;
|
|
4571
|
+
delete value.code;
|
|
4572
|
+
}
|
|
4573
|
+
if (!value.value && value.key) {
|
|
4574
|
+
value.value = value.key;
|
|
4575
|
+
delete value.key;
|
|
4576
|
+
}
|
|
4577
|
+
return value;
|
|
4578
|
+
};
|
|
4579
|
+
const prepPattern = field => {
|
|
4580
|
+
if (field.pattern) {
|
|
4581
|
+
try {
|
|
4582
|
+
new RegExp(field.pattern);
|
|
4583
|
+
} catch {
|
|
4584
|
+
// eslint-disable-next-line no-console
|
|
4585
|
+
console.warn('API regexp is invalid');
|
|
4586
|
+
delete field.pattern;
|
|
4587
|
+
}
|
|
4588
|
+
} else {
|
|
4589
|
+
delete field.pattern;
|
|
4590
|
+
}
|
|
4591
|
+
};
|
|
4592
|
+
const prepValidationMessages = (field, validationMessages) => {
|
|
4593
|
+
field.validationMessages = field.validationMessages ? field.validationMessages : validationMessages;
|
|
4594
|
+
if (!field.validationMessages) {
|
|
4595
|
+
delete field.validationMessages;
|
|
4596
|
+
return;
|
|
4597
|
+
}
|
|
4598
|
+
if (field.validationMessages.minimum) {
|
|
4599
|
+
field.validationMessages.min = field.validationMessages.minimum;
|
|
4600
|
+
delete field.validationMessages.minimum;
|
|
4601
|
+
}
|
|
4602
|
+
if (field.validationMessages.maximum) {
|
|
4603
|
+
field.validationMessages.max = field.validationMessages.maximum;
|
|
4604
|
+
delete field.validationMessages.maximum;
|
|
4605
|
+
}
|
|
4606
|
+
};
|
|
4607
|
+
const getControlType = field => {
|
|
4608
|
+
if (field.control) {
|
|
4609
|
+
return field.control.toLowerCase();
|
|
4610
|
+
}
|
|
4611
|
+
if (field.hidden) {
|
|
4612
|
+
return 'hidden';
|
|
4613
|
+
}
|
|
4614
|
+
if (field.values && field.values.length > 0) {
|
|
4615
|
+
return getSelectionType(field);
|
|
4616
|
+
}
|
|
4617
|
+
switch (field.type) {
|
|
4618
|
+
case 'string':
|
|
4619
|
+
return getControlForStringFormat(field.format);
|
|
4620
|
+
case 'number':
|
|
4621
|
+
case 'integer':
|
|
4622
|
+
return 'number';
|
|
4623
|
+
case 'boolean':
|
|
4624
|
+
return 'checkbox';
|
|
4625
|
+
default:
|
|
4626
|
+
return 'text';
|
|
4627
|
+
}
|
|
4628
|
+
};
|
|
4629
|
+
const getControlForStringFormat = format => {
|
|
4630
|
+
switch (format) {
|
|
4631
|
+
case 'date':
|
|
4632
|
+
return 'date';
|
|
4633
|
+
case 'base64url':
|
|
4634
|
+
return 'file';
|
|
4635
|
+
case 'password':
|
|
4636
|
+
return 'password';
|
|
4637
|
+
case 'uri':
|
|
4638
|
+
return 'text';
|
|
4639
|
+
// 'url'; - not implemented
|
|
4640
|
+
case 'email':
|
|
4641
|
+
return 'text';
|
|
4642
|
+
// 'email'; - not implemented
|
|
4643
|
+
case 'phone':
|
|
4644
|
+
return 'tel';
|
|
4645
|
+
default:
|
|
4646
|
+
return 'text';
|
|
4647
|
+
}
|
|
4648
|
+
};
|
|
4649
|
+
const getSelectionType = field => {
|
|
4650
|
+
if (field.control) {
|
|
4651
|
+
return field.control;
|
|
4652
|
+
}
|
|
4653
|
+
if (field.type === 'select') {
|
|
4654
|
+
return 'select';
|
|
4655
|
+
}
|
|
4656
|
+
if (field.type === 'radio') {
|
|
4657
|
+
return 'radio';
|
|
4658
|
+
}
|
|
4659
|
+
if (field.values) {
|
|
4660
|
+
return field.values.length > 3 ? 'select' : 'radio';
|
|
4661
|
+
}
|
|
4662
|
+
return 'select';
|
|
4663
|
+
};
|
|
4664
|
+
const copyOf = object => JSON.parse(JSON.stringify(object));
|
|
4665
|
+
|
|
4666
|
+
const formatUsingPattern = (value = '', pattern) => {
|
|
4667
|
+
if (typeof pattern !== 'string') {
|
|
4668
|
+
return value;
|
|
4669
|
+
}
|
|
4670
|
+
let newPattern = pattern;
|
|
4671
|
+
if (newPattern.indexOf('||') > 0) {
|
|
4672
|
+
newPattern = newPattern.slice(0, Math.max(0, pattern.indexOf('||')));
|
|
4673
|
+
}
|
|
4674
|
+
let newValue = '';
|
|
4675
|
+
let separators = 0;
|
|
4676
|
+
let charactersToAllocate = value.length;
|
|
4677
|
+
let position = 0;
|
|
4678
|
+
while (charactersToAllocate) {
|
|
4679
|
+
if (positionIsSeparator(newPattern, position)) {
|
|
4680
|
+
newValue += newPattern[position];
|
|
4681
|
+
separators += 1;
|
|
4682
|
+
} else {
|
|
4683
|
+
newValue += value[position - separators];
|
|
4684
|
+
charactersToAllocate -= 1;
|
|
4685
|
+
}
|
|
4686
|
+
position += 1;
|
|
4687
|
+
}
|
|
4688
|
+
const separatorsAfterCursor = countSeparatorsAfterCursor(newPattern, position);
|
|
4689
|
+
if (separatorsAfterCursor) {
|
|
4690
|
+
newValue += newPattern.slice(position, separatorsAfterCursor);
|
|
4691
|
+
}
|
|
4692
|
+
return newValue;
|
|
4693
|
+
};
|
|
4694
|
+
const countSeparatorsAfterCursor = (newPattern, position) => {
|
|
4695
|
+
let separators = 0;
|
|
4696
|
+
while (positionIsSeparator(newPattern, position + separators)) {
|
|
4697
|
+
separators += 1;
|
|
4698
|
+
}
|
|
4699
|
+
return separators;
|
|
4700
|
+
};
|
|
4701
|
+
const positionIsSeparator = (newPattern, position) => newPattern[position] && newPattern[position] !== '*';
|
|
4702
|
+
|
|
4703
|
+
const getValueLabel = (options, value) => {
|
|
4704
|
+
const option = options.find(currentOption => currentOption.value === value);
|
|
4705
|
+
return option && option.label ? option.label : value;
|
|
4706
|
+
};
|
|
4707
|
+
|
|
4708
|
+
/**
|
|
4709
|
+
*
|
|
4710
|
+
* @param {string} value
|
|
4711
|
+
*/
|
|
4712
|
+
const mask = value => new Array(value.length + 1).join('*');
|
|
4713
|
+
const FormattedValue = ({
|
|
4714
|
+
field,
|
|
4715
|
+
value
|
|
4716
|
+
}) => {
|
|
4717
|
+
const {
|
|
4718
|
+
locale
|
|
4719
|
+
} = useIntl();
|
|
4720
|
+
const style = [];
|
|
4721
|
+
if (field.tagClassName && field.tagClassName.h3) {
|
|
4722
|
+
style.push('np-text-body-large-bold');
|
|
4723
|
+
style.push('formatted-value__h3-custom-alignment');
|
|
4724
|
+
}
|
|
4725
|
+
switch (field.control) {
|
|
4726
|
+
case 'select':
|
|
4727
|
+
case 'radio':
|
|
4728
|
+
return /*#__PURE__*/jsx("span", {
|
|
4729
|
+
children: getValueLabel(field.values, value)
|
|
4730
|
+
});
|
|
4731
|
+
case 'date':
|
|
4732
|
+
return /*#__PURE__*/jsx("span", {
|
|
4733
|
+
children: formatDate(value instanceof Date ? value : new Date(value), locale)
|
|
4734
|
+
});
|
|
4735
|
+
case 'number':
|
|
4736
|
+
return /*#__PURE__*/jsx("span", {
|
|
4737
|
+
children: formatNumber(value, locale)
|
|
4738
|
+
});
|
|
4739
|
+
case 'password':
|
|
4740
|
+
return /*#__PURE__*/jsx("span", {
|
|
4741
|
+
children: mask(value)
|
|
4742
|
+
});
|
|
4743
|
+
case 'file':
|
|
4744
|
+
return /*#__PURE__*/jsx("div", {
|
|
4745
|
+
className: "thumbnail",
|
|
4746
|
+
children: /*#__PURE__*/jsx("img", {
|
|
4747
|
+
alt: field.title,
|
|
4748
|
+
src: value
|
|
4749
|
+
})
|
|
4750
|
+
});
|
|
4751
|
+
case 'checkbox':
|
|
4752
|
+
return /*#__PURE__*/jsx("span", {
|
|
4753
|
+
children: JSON.stringify(value)
|
|
4754
|
+
});
|
|
4755
|
+
default:
|
|
4756
|
+
return /*#__PURE__*/jsx("span", {
|
|
4757
|
+
className: classNames(style),
|
|
4758
|
+
children: formatUsingPattern(value, field.displayFormat)
|
|
4759
|
+
});
|
|
4760
|
+
}
|
|
4761
|
+
};
|
|
4762
|
+
FormattedValue.propTypes = {
|
|
4763
|
+
field: PropTypes.shape({
|
|
4764
|
+
control: PropTypes.string.isRequired,
|
|
4765
|
+
displayFormat: PropTypes.string,
|
|
4766
|
+
refreshRequirementsOnChange: PropTypes.bool,
|
|
4767
|
+
title: PropTypes.string.isRequired,
|
|
4768
|
+
type: PropTypes.string.isRequired,
|
|
4769
|
+
width: PropTypes.string,
|
|
4770
|
+
tagClassName: PropTypes.shape({
|
|
4771
|
+
h3: PropTypes.bool
|
|
4772
|
+
}),
|
|
4773
|
+
values: PropTypes.arrayOf(PropTypes.shape({
|
|
4774
|
+
value: PropTypes.any
|
|
4775
|
+
}))
|
|
4776
|
+
}).isRequired,
|
|
4777
|
+
value: PropTypes.any.isRequired
|
|
4778
|
+
};
|
|
4779
|
+
var FormattedValue$1 = FormattedValue;
|
|
4780
|
+
|
|
4781
|
+
function createDefinitions(fields, model) {
|
|
4782
|
+
return toPairs(fields).map(([name, field]) => createDefinition(name, field, model)).filter(definition => !!definition);
|
|
4783
|
+
}
|
|
4784
|
+
function createDefinition(name, field, model) {
|
|
4785
|
+
const {
|
|
4786
|
+
title,
|
|
4787
|
+
group,
|
|
4788
|
+
hidden
|
|
4789
|
+
} = field;
|
|
4790
|
+
if (!model[name] || hidden) {
|
|
4791
|
+
return null;
|
|
4792
|
+
}
|
|
4793
|
+
return {
|
|
4794
|
+
title,
|
|
4795
|
+
value: group ? group.map((groupField, groupFieldIndex) => /*#__PURE__*/jsx(FormattedValue$1, {
|
|
4796
|
+
// eslint-disable-line react/no-array-index-key
|
|
4797
|
+
field: groupField,
|
|
4798
|
+
value: model[name]
|
|
4799
|
+
}, groupFieldIndex)) : /*#__PURE__*/jsx(FormattedValue$1, {
|
|
4800
|
+
field: field,
|
|
4801
|
+
value: model[name]
|
|
4802
|
+
}),
|
|
4803
|
+
key: name
|
|
4804
|
+
};
|
|
4805
|
+
}
|
|
4806
|
+
|
|
4807
|
+
const DynamicFieldDefinitionList = ({
|
|
4808
|
+
model,
|
|
4809
|
+
title,
|
|
4810
|
+
layout,
|
|
4811
|
+
fields
|
|
4812
|
+
}) => /*#__PURE__*/jsxs(Fragment, {
|
|
4813
|
+
children: [title && /*#__PURE__*/jsx("div", {
|
|
4814
|
+
className: "m-t-1 m-b-3",
|
|
4815
|
+
children: /*#__PURE__*/jsx(Title, {
|
|
4816
|
+
type: Typography.TITLE_BODY,
|
|
4817
|
+
className: "p-t-3",
|
|
4818
|
+
children: title
|
|
4819
|
+
})
|
|
4820
|
+
}), /*#__PURE__*/jsx(DefinitionList$1, {
|
|
4821
|
+
layout: layout,
|
|
4822
|
+
definitions: createDefinitions(prepFields(fields), model)
|
|
4823
|
+
})]
|
|
4824
|
+
});
|
|
4825
|
+
DynamicFieldDefinitionList.propTypes = {
|
|
4826
|
+
model: PropTypes.shape({}).isRequired,
|
|
4827
|
+
fields: PropTypes.shape({}).isRequired,
|
|
4828
|
+
title: PropTypes.string,
|
|
4829
|
+
layout: PropTypes.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED'])
|
|
4830
|
+
};
|
|
4831
|
+
DynamicFieldDefinitionList.defaultProps = {
|
|
4832
|
+
title: null,
|
|
4833
|
+
layout: Layout.VERTICAL_TWO_COLUMN
|
|
4834
|
+
};
|
|
4835
|
+
var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
|
|
4836
|
+
|
|
4329
4837
|
const ESCAPED_OPENING_CHEVRON = '<';
|
|
4330
4838
|
const ESCAPED_CLOSING_CHEVRON = '>';
|
|
4331
4839
|
class EmphasisHtmlTransformer {
|
|
@@ -4666,7 +5174,6 @@ const Tooltip = ({
|
|
|
4666
5174
|
|
|
4667
5175
|
function supportsTouchEvents() {
|
|
4668
5176
|
const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
|
|
4669
|
-
// eslint-disable-next-line compat/compat
|
|
4670
5177
|
const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
|
|
4671
5178
|
const documentTouchIsDefined = typeof window !== 'undefined' && window.DocumentTouch && document instanceof window.DocumentTouch;
|
|
4672
5179
|
return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
|
|
@@ -4674,7 +5181,7 @@ function supportsTouchEvents() {
|
|
|
4674
5181
|
function userAgentSuggestsTouchDevice() {
|
|
4675
5182
|
const sampleTouchDevices = ['android', 'iemobile', 'iphone', 'ipad', 'ipod', 'blackberry', 'bada'];
|
|
4676
5183
|
const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
|
|
4677
|
-
const regex = new RegExp(matchString, '
|
|
5184
|
+
const regex = new RegExp(matchString, 'gi');
|
|
4678
5185
|
return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
|
|
4679
5186
|
}
|
|
4680
5187
|
// Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
|
|
@@ -5080,8 +5587,9 @@ function resolvePlacement(preferredPlacement) {
|
|
|
5080
5587
|
case 'bottom-left':
|
|
5081
5588
|
case 'bottom-right':
|
|
5082
5589
|
return 'bottom';
|
|
5590
|
+
default:
|
|
5591
|
+
return preferredPlacement;
|
|
5083
5592
|
}
|
|
5084
|
-
return preferredPlacement;
|
|
5085
5593
|
}
|
|
5086
5594
|
function Popover$1({
|
|
5087
5595
|
children,
|
|
@@ -6644,7 +7152,6 @@ const Loader = ({
|
|
|
6644
7152
|
}, 1000);
|
|
6645
7153
|
}
|
|
6646
7154
|
return () => {
|
|
6647
|
-
// eslint-disable-next-line fp/no-mutation
|
|
6648
7155
|
cancelled = true;
|
|
6649
7156
|
clearTimeout(timeout);
|
|
6650
7157
|
};
|
|
@@ -8581,7 +9088,7 @@ const explodeNumberModel = number => {
|
|
|
8581
9088
|
};
|
|
8582
9089
|
};
|
|
8583
9090
|
|
|
8584
|
-
const DIGITS_MATCH = /^$|^(\+)|(
|
|
9091
|
+
const DIGITS_MATCH = /^$|^(\+)|(\d+)/g;
|
|
8585
9092
|
const cleanNumber = number => number.match(DIGITS_MATCH)?.join('') ?? '';
|
|
8586
9093
|
|
|
8587
9094
|
function sortArrayByProperty(arrayToSort, property) {
|
|
@@ -8667,7 +9174,8 @@ const PhoneNumberInput = ({
|
|
|
8667
9174
|
};
|
|
8668
9175
|
useEffect(() => {
|
|
8669
9176
|
if (broadcastedValue === null) {
|
|
8670
|
-
|
|
9177
|
+
setBroadcastedValue(internalValue);
|
|
9178
|
+
return;
|
|
8671
9179
|
}
|
|
8672
9180
|
const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
|
|
8673
9181
|
const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
|
|
@@ -8940,7 +9448,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
|
|
|
8940
9448
|
const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
|
|
8941
9449
|
...commonProps,
|
|
8942
9450
|
'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
|
|
8943
|
-
'aria-describedby': `${componentId}-title
|
|
9451
|
+
'aria-describedby': `${componentId}-title`,
|
|
8944
9452
|
'aria-disabled': isDisabled,
|
|
8945
9453
|
'data-value': value ?? undefined,
|
|
8946
9454
|
role: type === 'checkbox' || type === 'radio' ? type : undefined,
|
|
@@ -9593,8 +10101,8 @@ function Select({
|
|
|
9593
10101
|
}
|
|
9594
10102
|
};
|
|
9595
10103
|
function selectKeyboardFocusedOption() {
|
|
9596
|
-
if (keyboardFocusedOptionIndex != null) {
|
|
9597
|
-
|
|
10104
|
+
if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
|
|
10105
|
+
selectOption(selectableOptions[keyboardFocusedOptionIndex]);
|
|
9598
10106
|
}
|
|
9599
10107
|
}
|
|
9600
10108
|
function moveFocusWithDifference(difference) {
|
|
@@ -9821,7 +10329,6 @@ function Select({
|
|
|
9821
10329
|
disabled: disabled,
|
|
9822
10330
|
"aria-controls": listboxId,
|
|
9823
10331
|
"aria-expanded": open,
|
|
9824
|
-
"aria-autocomplete": "none",
|
|
9825
10332
|
onClick: handleOnClick,
|
|
9826
10333
|
...buttonProps,
|
|
9827
10334
|
children: [selected ? /*#__PURE__*/jsx(Option$1, {
|
|
@@ -14331,5 +14838,5 @@ const translations = {
|
|
|
14331
14838
|
'zh-HK': zhHK
|
|
14332
14839
|
};
|
|
14333
14840
|
|
|
14334
|
-
export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
|
|
14841
|
+
export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
|
|
14335
14842
|
//# sourceMappingURL=index.mjs.map
|