@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.
Files changed (83) hide show
  1. package/build/index.js +524 -15
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +524 -17
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +5 -0
  6. package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +5 -0
  7. package/build/styles/main.css +5 -0
  8. package/build/types/alert/Alert.d.ts.map +1 -1
  9. package/build/types/common/requirements.d.ts +3 -0
  10. package/build/types/common/requirements.d.ts.map +1 -0
  11. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  12. package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts +21 -0
  13. package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts.map +1 -0
  14. package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts +12 -0
  15. package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts.map +1 -0
  16. package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts +2 -0
  17. package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts.map +1 -0
  18. package/build/types/dynamicFieldDefinitionList/index.d.ts +2 -0
  19. package/build/types/dynamicFieldDefinitionList/index.d.ts.map +1 -0
  20. package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts +2 -0
  21. package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts.map +1 -0
  22. package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts +2 -0
  23. package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts.map +1 -0
  24. package/build/types/index.d.ts +1 -0
  25. package/build/types/index.d.ts.map +1 -1
  26. package/build/types/loader/Loader.d.ts.map +1 -1
  27. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  28. package/build/types/popover/Popover.d.ts.map +1 -1
  29. package/build/types/select/Select.d.ts.map +1 -1
  30. package/build/types/stepper/deviceDetection.d.ts.map +1 -1
  31. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  32. package/package.json +3 -3
  33. package/src/accordion/Accordion.story.tsx +1 -1
  34. package/src/alert/Alert.tsx +2 -1
  35. package/src/avatar/colors/colors.ts +1 -1
  36. package/src/body/Body.spec.tsx +1 -1
  37. package/src/body/Body.story.tsx +8 -8
  38. package/src/checkbox/Checkbox.js +1 -1
  39. package/src/checkboxButton/CheckboxButton.spec.tsx +0 -1
  40. package/src/common/Option/Option.tsx +1 -1
  41. package/src/common/deviceDetection/deviceDetection.js +1 -1
  42. package/src/common/deviceDetection/deviceDetection.spec.js +4 -2
  43. package/src/common/responsivePanel/ResponsivePanel.spec.js +11 -15
  44. package/src/decision/Decision.spec.js +0 -1
  45. package/src/dimmer/Dimmer.tsx +6 -2
  46. package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +41 -0
  47. package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.spec.js +21 -0
  48. package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.story.js +134 -0
  49. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +5 -0
  50. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +73 -0
  51. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.less +4 -0
  52. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.spec.js +200 -0
  53. package/src/dynamicFieldDefinitionList/FormattedValue/index.js +1 -0
  54. package/src/dynamicFieldDefinitionList/index.js +1 -0
  55. package/src/dynamicFieldDefinitionList/utils/createDefinitions.js +33 -0
  56. package/src/dynamicFieldDefinitionList/utils/createDefinitions.spec.js +83 -0
  57. package/src/dynamicFieldDefinitionList/utils/text-format.js +46 -0
  58. package/src/dynamicFieldDefinitionList/utils/text-format.spec.js +43 -0
  59. package/src/index.ts +1 -0
  60. package/src/inlineAlert/InlineAlert.story.tsx +8 -7
  61. package/src/link/Link.story.tsx +16 -16
  62. package/src/loader/Loader.tsx +0 -1
  63. package/src/logo/Logo.js +2 -2
  64. package/src/main.css +5 -0
  65. package/src/main.less +1 -0
  66. package/src/moneyInput/MoneyInput.story.tsx +3 -3
  67. package/src/nudge/Nudge.spec.tsx +5 -5
  68. package/src/phoneNumberInput/PhoneNumberInput.tsx +2 -1
  69. package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts +1 -1
  70. package/src/popover/Popover.tsx +2 -1
  71. package/src/promoCard/PromoCard.tsx +1 -1
  72. package/src/radioGroup/RadioGroup.spec.js +1 -1
  73. package/src/section/Section.story.tsx +2 -1
  74. package/src/segmentedControl/SegmentedControl.spec.tsx +2 -2
  75. package/src/select/Select.js +2 -3
  76. package/src/stepper/deviceDetection.js +1 -2
  77. package/src/stepper/deviceDetection.spec.js +8 -3
  78. package/src/test-utils/index.js +1 -1
  79. package/src/test-utils/story-config.ts +1 -1
  80. package/src/title/Title.spec.tsx +1 -1
  81. package/src/typeahead/Typeahead.spec.js +4 -2
  82. package/src/upload/Upload.spec.js +8 -4
  83. 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, 'ig');
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
- dimmerReference.current && dimmerManager.add(dimmerReference.current);
1352
+ if (dimmerReference.current) {
1353
+ dimmerManager.add(dimmerReference.current);
1354
+ }
1351
1355
  };
1352
1356
  const onExited = () => {
1353
1357
  setHasNotExited(false);
1354
- dimmerReference.current && dimmerManager.remove(dimmerReference.current);
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 = '&lt;';
4330
4838
  const ESCAPED_CLOSING_CHEVRON = '&gt;';
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, 'ig');
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 = /^$|^(\+)|([\d]+)/g;
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
- return setBroadcastedValue(internalValue);
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` || undefined,
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
- selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
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