@transferwise/components 0.0.0-experimental-6030e58 → 0.0.0-experimental-06df8d2

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 (12) hide show
  1. package/build/index.js +2 -1
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +2 -1
  4. package/build/index.mjs.map +1 -1
  5. package/build/types/dateInput/DateInput.d.ts +2 -2
  6. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  7. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +1 -1
  8. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/dateInput/DateInput.tsx +4 -4
  11. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +16 -22
  12. package/src/phoneNumberInput/PhoneNumberInput.tsx +3 -2
package/build/types/dateInput/DateInput.d.ts CHANGED
@@ -9,8 +9,8 @@ export interface DateInputProps {
9
9
  size?: SizeSmall | SizeMedium | SizeLarge;
10
10
  value?: Date | string;
11
11
  onChange: (value: string | null) => void;
12
- onFocus?: React.FocusEventHandler<HTMLDivElement>;
13
- onBlur?: React.FocusEventHandler<HTMLDivElement>;
12
+ onFocus?: React.FocusEventHandler<HTMLInputElement>;
13
+ onBlur?: React.FocusEventHandler<HTMLInputElement>;
14
14
  dayLabel?: string;
15
15
  dayAutoComplete?: string;
16
16
  monthLabel?: string;
package/build/types/dateInput/DateInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAM1F,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCA6ShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}
package/build/types/phoneNumberInput/PhoneNumberInput.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface PhoneNumberInputProps {
9
9
  initialValue?: string;
10
10
  onChange: (value: string | null, prefix: string) => void;
11
11
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
12
- onBlur?: React.FocusEventHandler<HTMLInputElement>;
12
+ onBlur?: () => void;
13
13
  countryCode?: string;
14
14
  searchPlaceholder?: string;
15
15
  size?: SizeSmall | SizeMedium | SizeLarge;
package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,+LAenB,qBAAqB,gCAwIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,+LAenB,qBAAqB,gCAyIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-6030e58",
3
+ "version": "0.0.0-experimental-06df8d2",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/dateInput/DateInput.tsx CHANGED
@@ -17,8 +17,8 @@ export interface DateInputProps {
17
17
  size?: SizeSmall | SizeMedium | SizeLarge;
18
18
  value?: Date | string;
19
19
  onChange: (value: string | null) => void;
20
- onFocus?: React.FocusEventHandler<HTMLDivElement>;
21
- onBlur?: React.FocusEventHandler<HTMLDivElement>;
20
+ onFocus?: React.FocusEventHandler<HTMLInputElement>;
21
+ onBlur?: React.FocusEventHandler<HTMLInputElement>;
22
22
  dayLabel?: string;
23
23
  dayAutoComplete?: string;
24
24
  monthLabel?: string;
@@ -308,10 +308,10 @@ const DateInput = ({
308
308
  aria-labelledby={ariaLabelledBy}
309
309
  aria-label={ariaLabel}
310
310
  role="group" // Add role attribute to indicate container for interactive elements
311
- onFocus={(event) =>
311
+ onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
312
312
  shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()
313
313
  }
314
- onBlur={(event) =>
314
+ onBlur={(event: React.FocusEvent<HTMLInputElement>) =>
315
315
  shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()
316
316
  }
317
317
  >
package/src/phoneNumberInput/PhoneNumberInput.story.tsx CHANGED
@@ -1,29 +1,23 @@
1
- import { select, boolean, object } from '@storybook/addon-knobs';
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
2
 
3
3
  import PhoneNumberInput from './PhoneNumberInput';
4
4
 
5
- export default {
5
+ const meta = {
6
6
  component: PhoneNumberInput,
7
7
  title: 'Forms/PhoneNumberInput',
8
- };
8
+ tags: ['autodocs'],
9
+ } satisfies Meta<typeof PhoneNumberInput>;
9
10
 
10
- export const Basic = () => {
11
- const disabled = boolean('disabled', false);
12
- const required = boolean('required', false);
13
- const size = select('size', ['sm', 'md', 'lg'], 'md');
14
- const selectProps = object('selectProps', {
15
- className: 'custom-class',
16
- });
11
+ export default meta;
17
12
 
18
- return (
19
- <PhoneNumberInput
20
- disabled={disabled}
21
- required={required}
22
- size={size}
23
- selectProps={selectProps}
24
- searchPlaceholder="searchPlaceholder"
25
- placeholder="placeholder"
26
- onChange={console.log}
27
- />
28
- );
29
- };
13
+ type Story = StoryObj<typeof meta>;
14
+
15
+ export const Basic = {
16
+ args: {
17
+ searchPlaceholder: 'searchPlaceholder',
18
+ placeholder: 'placeholder',
19
+ selectProps: {
20
+ className: 'custom-class',
21
+ },
22
+ },
23
+ } satisfies Story;
package/src/phoneNumberInput/PhoneNumberInput.tsx CHANGED
@@ -28,7 +28,7 @@ export interface PhoneNumberInputProps {
28
28
  initialValue?: string;
29
29
  onChange: (value: string | null, prefix: string) => void;
30
30
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
31
- onBlur?: React.FocusEventHandler<HTMLInputElement>;
31
+ onBlur?: () => void;
32
32
  countryCode?: string;
33
33
  searchPlaceholder?: string;
34
34
  size?: SizeSmall | SizeMedium | SizeLarge;
@@ -168,6 +168,7 @@ const PhoneNumberInput = ({
168
168
  const country = prefix != null ? findCountryByPrefix(prefix) : null;
169
169
  setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
170
170
  }}
171
+ onClose={() => onBlur?.()}
171
172
  {...selectProps}
172
173
  />
173
174
  </div>
@@ -186,7 +187,7 @@ const PhoneNumberInput = ({
186
187
  onChange={onSuffixChange}
187
188
  onPaste={onPaste}
188
189
  onFocus={onFocus}
189
- onBlur={onBlur}
190
+ onBlur={() => onBlur?.()}
190
191
  />
191
192
  </div>
192
193
  </div>