@transferwise/components 46.28.0 → 46.29.1

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 (112) hide show
  1. package/build/i18n/hu.json +1 -1
  2. package/build/index.js +141 -686
  3. package/build/index.js.map +1 -1
  4. package/build/index.mjs +144 -686
  5. package/build/index.mjs.map +1 -1
  6. package/build/main.css +16 -5
  7. package/build/styles/logo/Logo.css +16 -0
  8. package/build/styles/main.css +16 -5
  9. package/build/types/alert/Alert.d.ts.map +1 -1
  10. package/build/types/common/hooks/index.d.ts +0 -1
  11. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  12. package/build/types/flowNavigation/FlowNavigation.d.ts +3 -3
  13. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  14. package/build/types/index.d.ts +0 -1
  15. package/build/types/index.d.ts.map +1 -1
  16. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  17. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  18. package/build/types/inputs/_Popover.d.ts.map +1 -1
  19. package/build/types/loader/Loader.d.ts.map +1 -1
  20. package/build/types/logo/Logo.d.ts.map +1 -1
  21. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  22. package/build/types/popover/Popover.d.ts.map +1 -1
  23. package/build/types/segmentedControl/SegmentedControl.d.ts +2 -2
  24. package/build/types/segmentedControl/SegmentedControl.d.ts.map +1 -1
  25. package/build/types/select/Select.d.ts.map +1 -1
  26. package/build/types/stepper/deviceDetection.d.ts.map +1 -1
  27. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  28. package/package.json +10 -8
  29. package/src/accordion/Accordion.story.tsx +1 -1
  30. package/src/alert/Alert.tsx +2 -1
  31. package/src/avatar/colors/colors.ts +1 -1
  32. package/src/body/Body.spec.tsx +1 -1
  33. package/src/body/Body.story.tsx +8 -8
  34. package/src/checkbox/Checkbox.js +1 -1
  35. package/src/checkboxButton/CheckboxButton.spec.tsx +0 -1
  36. package/src/common/Option/Option.tsx +1 -1
  37. package/src/common/deviceDetection/deviceDetection.js +1 -1
  38. package/src/common/deviceDetection/deviceDetection.spec.js +4 -2
  39. package/src/common/hooks/index.js +0 -1
  40. package/src/common/responsivePanel/ResponsivePanel.spec.js +11 -15
  41. package/src/decision/Decision.spec.js +0 -2
  42. package/src/dimmer/Dimmer.tsx +6 -2
  43. package/src/flowNavigation/FlowNavigation.spec.js +7 -22
  44. package/src/flowNavigation/FlowNavigation.tsx +20 -33
  45. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +2 -2
  46. package/src/i18n/hu.json +1 -1
  47. package/src/index.ts +0 -1
  48. package/src/inlineAlert/InlineAlert.story.tsx +8 -7
  49. package/src/inputs/SelectInput.tsx +1 -0
  50. package/src/inputs/_BottomSheet.tsx +33 -28
  51. package/src/inputs/_Popover.tsx +23 -20
  52. package/src/link/Link.story.tsx +16 -16
  53. package/src/loader/Loader.tsx +0 -1
  54. package/src/logo/Logo.css +16 -0
  55. package/src/logo/Logo.js +4 -9
  56. package/src/logo/Logo.less +16 -0
  57. package/src/logo/__snapshots__/Logo.spec.js.snap +104 -8
  58. package/src/main.css +16 -5
  59. package/src/main.less +0 -1
  60. package/src/moneyInput/MoneyInput.story.tsx +3 -3
  61. package/src/nudge/Nudge.spec.tsx +5 -5
  62. package/src/phoneNumberInput/PhoneNumberInput.tsx +2 -1
  63. package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts +1 -1
  64. package/src/popover/Popover.tsx +2 -1
  65. package/src/promoCard/PromoCard.tsx +1 -1
  66. package/src/provider/theme/ThemeProvider.story.tsx +21 -0
  67. package/src/radioGroup/RadioGroup.spec.js +1 -1
  68. package/src/section/Section.story.tsx +2 -1
  69. package/src/segmentedControl/SegmentedControl.spec.tsx +88 -2
  70. package/src/segmentedControl/SegmentedControl.story.tsx +54 -16
  71. package/src/segmentedControl/SegmentedControl.tsx +21 -33
  72. package/src/select/Select.js +2 -3
  73. package/src/stepper/deviceDetection.js +1 -2
  74. package/src/stepper/deviceDetection.spec.js +8 -3
  75. package/src/test-utils/index.js +1 -1
  76. package/src/test-utils/story-config.ts +1 -1
  77. package/src/title/Title.spec.tsx +1 -1
  78. package/src/typeahead/Typeahead.spec.js +4 -2
  79. package/src/upload/Upload.spec.js +8 -4
  80. package/src/uploadInput/uploadButton/UploadButton.tsx +1 -0
  81. package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +0 -5
  82. package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts +0 -11
  83. package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts.map +0 -1
  84. package/build/types/common/requirements.d.ts +0 -3
  85. package/build/types/common/requirements.d.ts.map +0 -1
  86. package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts +0 -21
  87. package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts.map +0 -1
  88. package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts +0 -12
  89. package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts.map +0 -1
  90. package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts +0 -2
  91. package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts.map +0 -1
  92. package/build/types/dynamicFieldDefinitionList/index.d.ts +0 -2
  93. package/build/types/dynamicFieldDefinitionList/index.d.ts.map +0 -1
  94. package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts +0 -2
  95. package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts.map +0 -1
  96. package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts +0 -2
  97. package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts.map +0 -1
  98. package/src/common/hooks/useClientWidth/useClientWidth.spec.js +0 -77
  99. package/src/common/hooks/useClientWidth/useClientWidth.tsx +0 -47
  100. package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +0 -41
  101. package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.spec.js +0 -21
  102. package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.story.js +0 -134
  103. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +0 -5
  104. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +0 -73
  105. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.less +0 -4
  106. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.spec.js +0 -200
  107. package/src/dynamicFieldDefinitionList/FormattedValue/index.js +0 -1
  108. package/src/dynamicFieldDefinitionList/index.js +0 -1
  109. package/src/dynamicFieldDefinitionList/utils/createDefinitions.js +0 -33
  110. package/src/dynamicFieldDefinitionList/utils/createDefinitions.spec.js +0 -83
  111. package/src/dynamicFieldDefinitionList/utils/text-format.js +0 -46
  112. package/src/dynamicFieldDefinitionList/utils/text-format.spec.js +0 -43
package/src/segmentedControl/SegmentedControl.tsx CHANGED
@@ -13,7 +13,7 @@ export type Segments = readonly Segment[] | readonly SegmentWithControls[];
13
13
 
14
14
  type SegmentedControlPropsBase = {
15
15
  name: string;
16
- defaultValue: string;
16
+ value: string;
17
17
  mode: 'input' | 'view';
18
18
  onChange: (value: string) => void;
19
19
  };
@@ -33,12 +33,11 @@ export type SegmentedControlProps = SegmentedControlPropsBase &
33
33
 
34
34
  const SegmentedControl = ({
35
35
  name,
36
- defaultValue,
36
+ value,
37
37
  mode = 'input',
38
38
  segments,
39
39
  onChange,
40
40
  }: SegmentedControlProps) => {
41
- const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
42
41
  const [animate, setAnimate] = useState(false);
43
42
 
44
43
  const segmentsRef = useRef<HTMLDivElement>(null);
@@ -55,9 +54,7 @@ const SegmentedControl = ({
55
54
  }));
56
55
 
57
56
  const updateSegmentPosition = () => {
58
- const selectedSegmentRef = segmentsWithRefs.find(
59
- (segment) => segment.value === selectedValue,
60
- )?.ref;
57
+ const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;
61
58
 
62
59
  // We grab the active segments style object from the ref
63
60
  // and set the css variables to the selected segments width and x position.
@@ -70,6 +67,7 @@ const SegmentedControl = ({
70
67
  };
71
68
 
72
69
  useEffect(() => {
70
+ setAnimate(true);
73
71
  updateSegmentPosition();
74
72
 
75
73
  const handleWindowSizeChange = () => {
@@ -83,11 +81,7 @@ const SegmentedControl = ({
83
81
  };
84
82
 
85
83
  // eslint-disable-next-line react-hooks/exhaustive-deps
86
- }, [segmentsWithRefs, selectedValue]);
87
-
88
- useEffect(() => {
89
- onChange(selectedValue);
90
- }, [onChange, selectedValue]);
84
+ }, [segmentsWithRefs, value]);
91
85
 
92
86
  return (
93
87
  <div
@@ -103,14 +97,18 @@ const SegmentedControl = ({
103
97
  })}
104
98
  role={mode !== 'input' ? 'tablist' : undefined}
105
99
  >
106
- {segmentsWithRefs.map((segment) =>
107
- mode === 'input' ? (
100
+ {segmentsWithRefs.map((segment) => {
101
+ const onSelect = () => {
102
+ setAnimate(true);
103
+ onChange(segment.value);
104
+ };
105
+ return mode === 'input' ? (
108
106
  <label
109
107
  ref={segment.ref as React.RefObject<HTMLLabelElement>}
110
108
  key={segment.id}
111
109
  htmlFor={segment.id}
112
110
  className={classNames('segmented-control__segment', {
113
- 'segmented-control__selected-segment': selectedValue === segment.value,
111
+ 'segmented-control__selected-segment': value === segment.value,
114
112
  })}
115
113
  >
116
114
  <input
@@ -119,19 +117,14 @@ const SegmentedControl = ({
119
117
  id={segment.id}
120
118
  name={name}
121
119
  value={segment.value}
122
- checked={selectedValue === segment.value}
123
- onChange={() => {
124
- setAnimate(true);
125
- setSelectedValue(segment.value);
126
- }}
120
+ checked={value === segment.value}
121
+ onChange={onSelect}
127
122
  />
128
123
  <Body
129
124
  className="segmented-control__text"
130
125
  as="span"
131
126
  type={
132
- selectedValue === segment.value
133
- ? Typography.BODY_DEFAULT_BOLD
134
- : Typography.BODY_DEFAULT
127
+ value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT
135
128
  }
136
129
  >
137
130
  {segment.label}
@@ -145,29 +138,24 @@ const SegmentedControl = ({
145
138
  role="tab"
146
139
  id={segment.id}
147
140
  aria-controls={segment.controls}
148
- aria-selected={selectedValue === segment.value}
141
+ aria-selected={value === segment.value}
149
142
  className={classNames('segmented-control__segment', 'segmented-control__button', {
150
- 'segmented-control__selected-segment': selectedValue === segment.value,
143
+ 'segmented-control__selected-segment': value === segment.value,
151
144
  })}
152
- onClick={() => {
153
- setAnimate(true);
154
- setSelectedValue(segment.value);
155
- }}
145
+ onClick={onSelect}
156
146
  >
157
147
  <Body
158
148
  as="span"
159
149
  className="segmented-control__text"
160
150
  type={
161
- selectedValue === segment.value
162
- ? Typography.BODY_DEFAULT_BOLD
163
- : Typography.BODY_DEFAULT
151
+ value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT
164
152
  }
165
153
  >
166
154
  {segment.label}
167
155
  </Body>
168
156
  </button>
169
- ),
170
- )}
157
+ );
158
+ })}
171
159
  </div>
172
160
  </div>
173
161
  );
package/src/select/Select.js CHANGED
@@ -246,8 +246,8 @@ export default function Select({
246
246
  };
247
247
 
248
248
  function selectKeyboardFocusedOption() {
249
- if (keyboardFocusedOptionIndex != null) {
250
- selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
249
+ if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
250
+ selectOption(selectableOptions[keyboardFocusedOptionIndex]);
251
251
  }
252
252
  }
253
253
 
@@ -511,7 +511,6 @@ export default function Select({
511
511
  disabled={disabled}
512
512
  aria-controls={listboxId}
513
513
  aria-expanded={open}
514
- aria-autocomplete="none"
515
514
  onClick={handleOnClick}
516
515
  {...buttonProps}
517
516
  >
package/src/stepper/deviceDetection.js CHANGED
@@ -1,6 +1,5 @@
1
1
  function supportsTouchEvents() {
2
2
  const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
3
- // eslint-disable-next-line compat/compat
4
3
  const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
5
4
  const documentTouchIsDefined =
6
5
  typeof window !== 'undefined' &&
@@ -21,7 +20,7 @@ function userAgentSuggestsTouchDevice() {
21
20
  'bada',
22
21
  ];
23
22
  const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
24
- const regex = new RegExp(matchString, 'ig');
23
+ const regex = new RegExp(matchString, 'gi');
25
24
  return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
26
25
  }
27
26
  // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
package/src/stepper/deviceDetection.spec.js CHANGED
@@ -2,12 +2,17 @@ import { isTouchDevice } from './deviceDetection';
2
2
 
3
3
  describe('Device detection', () => {
4
4
  function fakeUserAgent(userAgent) {
5
- navigator.__defineGetter__('userAgent', () => userAgent);
6
- // need to use this instead of defineProperty, as it's blocked from overriding
5
+ Object.defineProperty(navigator, 'userAgent', {
6
+ value: userAgent,
7
+ configurable: true,
8
+ });
7
9
  }
8
10
 
9
11
  function fakeMaxTouchPoints(maxTouchPoints) {
10
- navigator.__defineGetter__('maxTouchPoints', () => maxTouchPoints);
12
+ Object.defineProperty(navigator, 'maxTouchPoints', {
13
+ value: maxTouchPoints,
14
+ configurable: true,
15
+ });
11
16
  }
12
17
 
13
18
  // We don't test DocumentTouch api as it's basically impossible to test :(
package/src/test-utils/index.js CHANGED
@@ -13,7 +13,7 @@ import en from '../i18n/en.json';
13
13
  */
14
14
  function customRender(ui, { locale = DEFAULT_LOCALE, messages = en, ...renderOptions } = {}) {
15
15
  // eslint-disable-next-line react/prop-types
16
- var Wrapper = ({ children }) => {
16
+ const Wrapper = ({ children }) => {
17
17
  return <Provider i18n={{ locale, messages }}>{children}</Provider>;
18
18
  };
19
19
  return render(ui, { wrapper: Wrapper, ...renderOptions });
package/src/test-utils/story-config.ts CHANGED
@@ -30,7 +30,7 @@ interface StoryConfig {
30
30
 
31
31
  const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {
32
32
  if (viewport.styles && typeof viewport.styles === 'object') {
33
- return parseInt(viewport.styles.width);
33
+ return Number.parseInt(viewport.styles.width, 10);
34
34
  }
35
35
  throw new Error('Unknown viewport styles');
36
36
  };
package/src/title/Title.spec.tsx CHANGED
@@ -34,7 +34,7 @@ describe('Title', () => {
34
34
 
35
35
  it('handles unsupported typography type', () => {
36
36
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
37
- // @ts-ignore
37
+ // @ts-expect-error
38
38
  render(<Title type={Typography.BODY_LARGE_BOLD}>Test</Title>);
39
39
  const copy = screen.getByText('Test');
40
40
  expect(copy).toBeInTheDocument();
package/src/typeahead/Typeahead.spec.js CHANGED
@@ -314,7 +314,9 @@ describe('Typeahead', () => {
314
314
  let selectedOption;
315
315
 
316
316
  component.setProps({
317
- onChange: (selections) => (selectedOption = selections[0]),
317
+ onChange: (selections) => {
318
+ selectedOption = selections[0];
319
+ },
318
320
  options: options,
319
321
  });
320
322
 
@@ -340,7 +342,7 @@ describe('Typeahead', () => {
340
342
  it('renders all options', () => {
341
343
  const options = option().map((optNode) => optNode.text());
342
344
  expect(options).toHaveLength(props.options.length);
343
- expect(options.every((label, i) => label === props.options[i].label));
345
+ expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
344
346
  });
345
347
 
346
348
  it('does not render new option if showNewEntry is false', () => {
package/src/upload/Upload.spec.js CHANGED
@@ -8,7 +8,7 @@ import Upload from '.';
8
8
 
9
9
  jest.useFakeTimers();
10
10
  jest.mock('./utils/postData', () => ({
11
- postData: () => new Promise((resolve) => resolve('ServerResponse')),
11
+ postData: async () => 'ServerResponse',
12
12
  }));
13
13
 
14
14
  jest.mock('./utils/asyncFileRead');
@@ -88,7 +88,7 @@ describe('Upload', () => {
88
88
  let component;
89
89
  beforeEach(() => {
90
90
  component = shallow(<Upload {...props} />).dive();
91
- asyncFileRead.mockImplementation(() => new Promise((resolve) => resolve('a value')));
91
+ asyncFileRead.mockImplementation(async () => 'a value');
92
92
  });
93
93
 
94
94
  afterEach(() => {
@@ -183,7 +183,9 @@ describe('Upload', () => {
183
183
  });
184
184
 
185
185
  it('step ProcessingStep is called with error props', async () => {
186
- asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
186
+ asyncFileRead.mockImplementation(async () => {
187
+ throw 'An error';
188
+ });
187
189
 
188
190
  await component.instance().fileDropped(TEST_FILE);
189
191
  jest.advanceTimersByTime(props.animationDelay);
@@ -230,7 +232,9 @@ describe('Upload', () => {
230
232
  it('step CompleteStep is called with error props', async () => {
231
233
  component = mount(<Upload {...props} />);
232
234
  const upload = component.children();
233
- asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
235
+ asyncFileRead.mockImplementation(async () => {
236
+ throw 'An error';
237
+ });
234
238
 
235
239
  await upload.instance().fileDropped(TEST_FILE);
236
240
  jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);
package/src/uploadInput/uploadButton/UploadButton.tsx CHANGED
@@ -225,6 +225,7 @@ const UploadButton = ({
225
225
  data-testid={TEST_IDS.uploadInput}
226
226
  onChange={filesSelected}
227
227
  />
228
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
228
229
  <label
229
230
  htmlFor={id}
230
231
  className={classNames('btn', 'np-upload-accent', 'np-upload-button', {
package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css DELETED
@@ -1,5 +0,0 @@
1
- .formatted-value__h3-custom-alignment {
2
- margin-bottom: 16px;
3
- margin-bottom: var(--size-16);
4
- line-height: 24px;
5
- }
package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts DELETED
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- type FlowNavigationProps = {
3
- ref: React.RefObject<HTMLElement> | Window | undefined;
4
- throttleMs?: number;
5
- };
6
- export declare const useClientWidth: {
7
- ({ ref, throttleMs }: FlowNavigationProps): (number | null)[];
8
- THROTTLE_MS: number;
9
- };
10
- export {};
11
- //# sourceMappingURL=useClientWidth.d.ts.map
package/build/types/common/hooks/useClientWidth/useClientWidth.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useClientWidth.d.ts","sourceRoot":"","sources":["../../../../../src/common/hooks/useClientWidth/useClientWidth.tsx"],"names":[],"mappings":";AAOA,KAAK,mBAAmB,GAAG;IACzB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,cAAc;0BAAuC,mBAAmB;;CAgCpF,CAAC"}
package/build/types/common/requirements.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export function prepFields(fields: any, model: any, validationMessages: any): any;
2
- export function getControlType(field: any): any;
3
- //# sourceMappingURL=requirements.d.ts.map
package/build/types/common/requirements.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"requirements.d.ts","sourceRoot":"","sources":["../../../src/common/requirements.js"],"names":[],"mappings":"AAqCA,kFAgBC;AAuTD,gDAsBC"}
package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import * as React from 'react';
2
-
3
- export interface DynamicFieldDefinitionListModel {
4
- }
5
-
6
- export interface DynamicFieldDefinitionListFields {
7
- }
8
-
9
- export type DynamicFieldDefinitionListLayout = "VERTICAL_TWO_COLUMN" | "VERTICAL_ONE_COLUMN" | "HORIZONTAL_JUSTIFIED" | "HORIZONTAL_LEFT_ALIGNED";
10
-
11
- export interface DynamicFieldDefinitionListProps {
12
- model: DynamicFieldDefinitionListModel;
13
- fields: DynamicFieldDefinitionListFields;
14
- title?: string;
15
- layout?: DynamicFieldDefinitionListLayout;
16
- }
17
-
18
- declare const DynamicFieldDefinitionList: React.FC<DynamicFieldDefinitionListProps>;
19
-
20
- export default DynamicFieldDefinitionList;
21
-
package/build/types/dynamicFieldDefinitionList/DynamicFieldDefinitionList.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"DynamicFieldDefinitionList.d.ts","sourceRoot":"","sources":["../../../src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js"],"names":[],"mappings":";AASA;;;;;gCAYC"}
package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts DELETED
@@ -1,12 +0,0 @@
1
- export default FormattedValue;
2
- declare function FormattedValue({ field, value }: {
3
- field: any;
4
- value: any;
5
- }): import("react").JSX.Element;
6
- declare namespace FormattedValue {
7
- namespace propTypes {
8
- const field: any;
9
- const value: any;
10
- }
11
- }
12
- //# sourceMappingURL=FormattedValue.d.ts.map
package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"FormattedValue.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js"],"names":[],"mappings":";AAuBA;;;gCA+BC"}
package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from "./FormattedValue";
2
- //# sourceMappingURL=index.d.ts.map
package/build/types/dynamicFieldDefinitionList/FormattedValue/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/FormattedValue/index.js"],"names":[],"mappings":""}
package/build/types/dynamicFieldDefinitionList/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from "./DynamicFieldDefinitionList";
2
- //# sourceMappingURL=index.d.ts.map
package/build/types/dynamicFieldDefinitionList/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dynamicFieldDefinitionList/index.js"],"names":[],"mappings":""}
package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export default function createDefinitions(fields: any, model: any): any;
2
- //# sourceMappingURL=createDefinitions.d.ts.map
package/build/types/dynamicFieldDefinitionList/utils/createDefinitions.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"createDefinitions.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/utils/createDefinitions.js"],"names":[],"mappings":"AAIA,wEAIC"}
package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export function formatUsingPattern(value: string | undefined, pattern: any): string;
2
- //# sourceMappingURL=text-format.d.ts.map
package/build/types/dynamicFieldDefinitionList/utils/text-format.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"text-format.d.ts","sourceRoot":"","sources":["../../../../src/dynamicFieldDefinitionList/utils/text-format.js"],"names":[],"mappings":"AAAA,oFAgCC"}
package/src/common/hooks/useClientWidth/useClientWidth.spec.js DELETED
@@ -1,77 +0,0 @@
1
- import { act, renderHook } from '@testing-library/react-hooks';
2
-
3
- import { fireEvent } from '../../../test-utils';
4
-
5
- import { useClientWidth } from './useClientWidth';
6
-
7
- jest.mock('lodash.throttle', () => jest.fn((fn) => fn));
8
-
9
- describe('useClientWidth', () => {
10
- describe('when invalid ref is provided', () => {
11
- it('returns 0', () => {
12
- const reference = { invalid: true };
13
- const {
14
- result: { current },
15
- } = renderHook(() => useClientWidth({ ref: reference }));
16
-
17
- expect(current).toStrictEqual([null]);
18
- });
19
- });
20
-
21
- describe('when valid ref is provided', () => {
22
- it('returns initial ref width', () => {
23
- const reference = { current: { clientWidth: 500 } };
24
- const {
25
- result: { current },
26
- } = renderHook(() => useClientWidth({ ref: reference }));
27
-
28
- expect(current).toStrictEqual([500]);
29
- });
30
-
31
- it('updates the ref width on window resize', () => {
32
- const reference = { current: { clientWidth: 500 } };
33
- const { result } = renderHook(() => useClientWidth({ ref: reference }));
34
-
35
- expect(result.current).toStrictEqual([500]);
36
-
37
- act(() => {
38
- reference.current.clientWidth = 700;
39
- fireEvent(window, new Event('resize'));
40
- });
41
- expect(result.current).toStrictEqual([700]);
42
-
43
- act(() => {
44
- reference.current.clientWidth = 800;
45
- fireEvent(window, new Event('resize'));
46
- });
47
- expect(result.current).toStrictEqual([800]);
48
- });
49
- });
50
-
51
- describe('when window ref is provided', () => {
52
- it('returns window innerWidth', () => {
53
- window.innerWidth = 600;
54
- const {
55
- result: { current },
56
- } = renderHook(() => useClientWidth({ ref: window }));
57
-
58
- expect(current).toStrictEqual([600]);
59
- });
60
- });
61
-
62
- describe('when cleanup runs the event is not longer attached to window', () => {
63
- it('returns window innerWidth', () => {
64
- const reference = { current: { clientWidth: 500 } };
65
- const { result, unmount } = renderHook(() => useClientWidth({ ref: reference }));
66
-
67
- unmount();
68
-
69
- act(() => {
70
- reference.current.clientWidth = 700;
71
- fireEvent(window, new Event('resize'));
72
- });
73
-
74
- expect(result.current).toStrictEqual([500]);
75
- });
76
- });
77
- });
package/src/common/hooks/useClientWidth/useClientWidth.tsx DELETED
@@ -1,47 +0,0 @@
1
- import throttle from 'lodash.throttle';
2
- import { useLayoutEffect, useState, useEffect, RefObject } from 'react';
3
-
4
- const THROTTLE_MS = 100;
5
-
6
- const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
7
-
8
- type FlowNavigationProps = {
9
- ref: React.RefObject<HTMLElement> | Window | undefined;
10
- throttleMs?: number;
11
- };
12
-
13
- export const useClientWidth = ({ ref, throttleMs = THROTTLE_MS }: FlowNavigationProps) => {
14
- const [clientWidth, setClientWidth] = useState<number | null>(null);
15
-
16
- useIsomorphicLayoutEffect(() => {
17
- // eslint-disable-next-line unicorn/consistent-function-scoping
18
- const updateClientWidth = () => {
19
- if (ref) {
20
- // when `ref` is a window
21
- if ('innerWidth' in ref) {
22
- setClientWidth(ref.innerWidth);
23
- }
24
- // when `ref` is an element
25
- else if (ref.current) {
26
- setClientWidth(ref.current.clientWidth);
27
- }
28
- }
29
- };
30
- // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
31
- // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
32
- // won't get removed even if the component is unmounted.
33
- const attachedFunction = throttle(updateClientWidth, throttleMs);
34
-
35
- window.addEventListener('resize', attachedFunction, true);
36
-
37
- // using requestAnimationFrame to perform the calculation before the next repaint
38
- // getting width earlier causes issues in animations when used with react-transition-group
39
- window.requestAnimationFrame(updateClientWidth);
40
-
41
- return () => window.removeEventListener('resize', attachedFunction, true);
42
- }, []);
43
-
44
- return [clientWidth];
45
- };
46
-
47
- useClientWidth.THROTTLE_MS = THROTTLE_MS;
package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js DELETED
@@ -1,41 +0,0 @@
1
- import PropTypes from 'prop-types';
2
-
3
- import { Typography, Layout } from '../common';
4
- import { prepFields } from '../common/requirements';
5
- import DefinitionList from '../definitionList';
6
- import Title from '../title';
7
-
8
- import createDefinitions from './utils/createDefinitions';
9
-
10
- const DynamicFieldDefinitionList = ({ model, title, layout, fields }) => (
11
- <>
12
- {title && (
13
- <div className="m-t-1 m-b-3">
14
- <Title type={Typography.TITLE_BODY} className="p-t-3">
15
- {title}
16
- </Title>
17
- </div>
18
- )}
19
-
20
- <DefinitionList layout={layout} definitions={createDefinitions(prepFields(fields), model)} />
21
- </>
22
- );
23
-
24
- DynamicFieldDefinitionList.propTypes = {
25
- model: PropTypes.shape({}).isRequired,
26
- fields: PropTypes.shape({}).isRequired,
27
- title: PropTypes.string,
28
- layout: PropTypes.oneOf([
29
- 'VERTICAL_TWO_COLUMN',
30
- 'VERTICAL_ONE_COLUMN',
31
- 'HORIZONTAL_JUSTIFIED',
32
- 'HORIZONTAL_LEFT_ALIGNED',
33
- ]),
34
- };
35
-
36
- DynamicFieldDefinitionList.defaultProps = {
37
- title: null,
38
- layout: Layout.VERTICAL_TWO_COLUMN,
39
- };
40
-
41
- export default DynamicFieldDefinitionList;
package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.spec.js DELETED
@@ -1,21 +0,0 @@
1
- import { shallow } from 'enzyme';
2
-
3
- import { DynamicFieldDefinitionList } from '..';
4
- import Title from '../title';
5
-
6
- describe('DynamicFieldDefinitionList', () => {
7
- it('has title when title is passed', () => {
8
- const component = shallow(
9
- <DynamicFieldDefinitionList model={{}} fields={{}} title="A title" />,
10
- );
11
-
12
- expect(component.find(Title).exists()).toBe(true);
13
- expect(component.find(Title).props().children).toBe('A title');
14
- });
15
-
16
- it('has no title when no title is passed', () => {
17
- const component = shallow(<DynamicFieldDefinitionList model={{}} fields={{}} />);
18
-
19
- expect(component.find('.np-text-body-title').exists()).toBe(false);
20
- });
21
- });