@transferwise/components 0.0.0-experimental-b2eafa7 → 0.0.0-experimental-b7402e7
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.esm.js +50 -178
- package/build/index.esm.js.map +1 -1
- package/build/index.js +50 -179
- package/build/index.js.map +1 -1
- package/build/main.css +0 -101
- package/build/styles/main.css +0 -101
- package/build/types/checkboxOption/CheckboxOption.d.ts +2 -2
- package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
- package/build/types/index.d.ts +2 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/snackbar/Snackbar.d.ts +30 -22
- package/build/types/snackbar/Snackbar.d.ts.map +1 -1
- package/build/types/snackbar/SnackbarContext.d.ts +7 -2
- package/build/types/snackbar/SnackbarContext.d.ts.map +1 -1
- package/build/types/snackbar/SnackbarProvider.d.ts +7 -12
- package/build/types/snackbar/SnackbarProvider.d.ts.map +1 -1
- package/build/types/snackbar/index.d.ts +2 -0
- package/build/types/snackbar/index.d.ts.map +1 -0
- package/build/types/snackbar/useSnackbar.d.ts +1 -1
- package/build/types/snackbar/useSnackbar.d.ts.map +1 -1
- package/build/types/withNextPortal/withNextPortal.d.ts +1 -1
- package/build/types/withNextPortal/withNextPortal.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/checkboxOption/CheckboxOption.tsx +2 -2
- package/src/index.ts +2 -2
- package/src/main.css +0 -101
- package/src/main.less +0 -1
- package/src/snackbar/{Snackbar.story.js → Snackbar.story.tsx} +2 -1
- package/src/snackbar/{Snackbar.js → Snackbar.tsx} +31 -32
- package/src/snackbar/SnackbarContext.ts +11 -0
- package/src/snackbar/SnackbarProvider.tsx +39 -0
- package/src/ssr.spec.js +0 -17
- package/src/withNextPortal/withNextPortal.tsx +1 -1
- package/build/styles/segmentedControl/SegmentedControl.css +0 -101
- package/build/types/segmentedControl/SegmentedControl.d.ts +0 -31
- package/build/types/segmentedControl/SegmentedControl.d.ts.map +0 -1
- package/build/types/segmentedControl/index.d.ts +0 -3
- package/build/types/segmentedControl/index.d.ts.map +0 -1
- package/src/segmentedControl/SegmentedControl.css +0 -101
- package/src/segmentedControl/SegmentedControl.less +0 -101
- package/src/segmentedControl/SegmentedControl.spec.tsx +0 -106
- package/src/segmentedControl/SegmentedControl.story.tsx +0 -55
- package/src/segmentedControl/SegmentedControl.tsx +0 -175
- package/src/segmentedControl/index.ts +0 -2
- package/src/snackbar/SnackbarContext.js +0 -4
- package/src/snackbar/SnackbarProvider.js +0 -51
- /package/src/snackbar/{index.js → index.ts} +0 -0
- /package/src/snackbar/{useSnackbar.js → useSnackbar.ts} +0 -0
package/build/main.css
CHANGED
|
@@ -4629,107 +4629,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4629
4629
|
.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
|
|
4630
4630
|
box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
|
|
4631
4631
|
}
|
|
4632
|
-
.segmented-control {
|
|
4633
|
-
box-sizing: border-box;
|
|
4634
|
-
--segment-highlight-width: 0;
|
|
4635
|
-
--segment-highlight-x: var(--size-4);
|
|
4636
|
-
}
|
|
4637
|
-
.segmented-control__segments {
|
|
4638
|
-
display: inline-flex;
|
|
4639
|
-
position: relative;
|
|
4640
|
-
padding: 4px;
|
|
4641
|
-
padding: var(--size-4);
|
|
4642
|
-
width: 100%;
|
|
4643
|
-
justify-content: center;
|
|
4644
|
-
align-items: center;
|
|
4645
|
-
background: rgba(134,167,189,0.10196);
|
|
4646
|
-
background: var(--color-background-neutral);
|
|
4647
|
-
border-radius: 24px;
|
|
4648
|
-
border-radius: var(--size-24);
|
|
4649
|
-
transition: outline 300ms;
|
|
4650
|
-
outline: 2px solid transparent;
|
|
4651
|
-
}
|
|
4652
|
-
.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
|
|
4653
|
-
outline: 2px solid var(--color-interactive-primary);
|
|
4654
|
-
}
|
|
4655
|
-
.segmented-control__segments::after {
|
|
4656
|
-
content: "";
|
|
4657
|
-
position: absolute;
|
|
4658
|
-
width: var(--segment-highlight-width);
|
|
4659
|
-
top: 4px;
|
|
4660
|
-
top: var(--size-4);
|
|
4661
|
-
bottom: 4px;
|
|
4662
|
-
bottom: var(--size-4);
|
|
4663
|
-
left: var(--segment-highlight-x);
|
|
4664
|
-
z-index: 0;
|
|
4665
|
-
background: #ffffff;
|
|
4666
|
-
background: var(--color-background-screen);
|
|
4667
|
-
border-radius: 24px;
|
|
4668
|
-
border-radius: var(--size-24);
|
|
4669
|
-
transition: left 300ms;
|
|
4670
|
-
}
|
|
4671
|
-
.segmented-control__segments--no-animate::after {
|
|
4672
|
-
transition: none !important;
|
|
4673
|
-
}
|
|
4674
|
-
.segmented-control__segment {
|
|
4675
|
-
position: relative;
|
|
4676
|
-
flex: 1 1 100%;
|
|
4677
|
-
flex-flow: column;
|
|
4678
|
-
padding: 8px 16px;
|
|
4679
|
-
padding: var(--size-8) var(--size-16);
|
|
4680
|
-
margin: 0 0 0 4px;
|
|
4681
|
-
margin: 0 0 0 var(--size-4);
|
|
4682
|
-
min-width: 0;
|
|
4683
|
-
line-height: inherit;
|
|
4684
|
-
align-items: center;
|
|
4685
|
-
text-align: center;
|
|
4686
|
-
vertical-align: middle;
|
|
4687
|
-
border-radius: 24px;
|
|
4688
|
-
border-radius: var(--size-24);
|
|
4689
|
-
z-index: 1;
|
|
4690
|
-
cursor: pointer;
|
|
4691
|
-
transition: background 300ms;
|
|
4692
|
-
color: var(--color-interactive-primary);
|
|
4693
|
-
}
|
|
4694
|
-
.segmented-control__segment:first-child {
|
|
4695
|
-
margin-left: 0;
|
|
4696
|
-
}
|
|
4697
|
-
.segmented-control__segment:hover {
|
|
4698
|
-
background: rgba(0,0,0,0.10196);
|
|
4699
|
-
background: var(--color-background-overlay);
|
|
4700
|
-
}
|
|
4701
|
-
.segmented-control__radio-input {
|
|
4702
|
-
position: fixed;
|
|
4703
|
-
opacity: 0;
|
|
4704
|
-
pointer-events: none;
|
|
4705
|
-
}
|
|
4706
|
-
.segmented-control__button {
|
|
4707
|
-
width: 100%;
|
|
4708
|
-
height: 100%;
|
|
4709
|
-
background: none;
|
|
4710
|
-
-webkit-appearance: none;
|
|
4711
|
-
-moz-appearance: none;
|
|
4712
|
-
appearance: none;
|
|
4713
|
-
border: none;
|
|
4714
|
-
outline: none;
|
|
4715
|
-
font: inherit;
|
|
4716
|
-
outline: 2px solid transparent;
|
|
4717
|
-
}
|
|
4718
|
-
.segmented-control__button:focus {
|
|
4719
|
-
outline-offset: 0px;
|
|
4720
|
-
}
|
|
4721
|
-
.segmented-control__button:focus-visible {
|
|
4722
|
-
outline-color: var(--color-interactive-primary);
|
|
4723
|
-
}
|
|
4724
|
-
.segmented-control__selected-segment:hover {
|
|
4725
|
-
background: transparent;
|
|
4726
|
-
}
|
|
4727
|
-
.segmented-control__text {
|
|
4728
|
-
word-wrap: break-word;
|
|
4729
|
-
word-break: break-word;
|
|
4730
|
-
color: var(--color-interactive-primary);
|
|
4731
|
-
transition: font-weight 300ms;
|
|
4732
|
-
}
|
|
4733
4632
|
.np-summary {
|
|
4734
4633
|
min-width: 280px;
|
|
4735
4634
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -4629,107 +4629,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4629
4629
|
.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
|
|
4630
4630
|
box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
|
|
4631
4631
|
}
|
|
4632
|
-
.segmented-control {
|
|
4633
|
-
box-sizing: border-box;
|
|
4634
|
-
--segment-highlight-width: 0;
|
|
4635
|
-
--segment-highlight-x: var(--size-4);
|
|
4636
|
-
}
|
|
4637
|
-
.segmented-control__segments {
|
|
4638
|
-
display: inline-flex;
|
|
4639
|
-
position: relative;
|
|
4640
|
-
padding: 4px;
|
|
4641
|
-
padding: var(--size-4);
|
|
4642
|
-
width: 100%;
|
|
4643
|
-
justify-content: center;
|
|
4644
|
-
align-items: center;
|
|
4645
|
-
background: rgba(134,167,189,0.10196);
|
|
4646
|
-
background: var(--color-background-neutral);
|
|
4647
|
-
border-radius: 24px;
|
|
4648
|
-
border-radius: var(--size-24);
|
|
4649
|
-
transition: outline 300ms;
|
|
4650
|
-
outline: 2px solid transparent;
|
|
4651
|
-
}
|
|
4652
|
-
.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
|
|
4653
|
-
outline: 2px solid var(--color-interactive-primary);
|
|
4654
|
-
}
|
|
4655
|
-
.segmented-control__segments::after {
|
|
4656
|
-
content: "";
|
|
4657
|
-
position: absolute;
|
|
4658
|
-
width: var(--segment-highlight-width);
|
|
4659
|
-
top: 4px;
|
|
4660
|
-
top: var(--size-4);
|
|
4661
|
-
bottom: 4px;
|
|
4662
|
-
bottom: var(--size-4);
|
|
4663
|
-
left: var(--segment-highlight-x);
|
|
4664
|
-
z-index: 0;
|
|
4665
|
-
background: #ffffff;
|
|
4666
|
-
background: var(--color-background-screen);
|
|
4667
|
-
border-radius: 24px;
|
|
4668
|
-
border-radius: var(--size-24);
|
|
4669
|
-
transition: left 300ms;
|
|
4670
|
-
}
|
|
4671
|
-
.segmented-control__segments--no-animate::after {
|
|
4672
|
-
transition: none !important;
|
|
4673
|
-
}
|
|
4674
|
-
.segmented-control__segment {
|
|
4675
|
-
position: relative;
|
|
4676
|
-
flex: 1 1 100%;
|
|
4677
|
-
flex-flow: column;
|
|
4678
|
-
padding: 8px 16px;
|
|
4679
|
-
padding: var(--size-8) var(--size-16);
|
|
4680
|
-
margin: 0 0 0 4px;
|
|
4681
|
-
margin: 0 0 0 var(--size-4);
|
|
4682
|
-
min-width: 0;
|
|
4683
|
-
line-height: inherit;
|
|
4684
|
-
align-items: center;
|
|
4685
|
-
text-align: center;
|
|
4686
|
-
vertical-align: middle;
|
|
4687
|
-
border-radius: 24px;
|
|
4688
|
-
border-radius: var(--size-24);
|
|
4689
|
-
z-index: 1;
|
|
4690
|
-
cursor: pointer;
|
|
4691
|
-
transition: background 300ms;
|
|
4692
|
-
color: var(--color-interactive-primary);
|
|
4693
|
-
}
|
|
4694
|
-
.segmented-control__segment:first-child {
|
|
4695
|
-
margin-left: 0;
|
|
4696
|
-
}
|
|
4697
|
-
.segmented-control__segment:hover {
|
|
4698
|
-
background: rgba(0,0,0,0.10196);
|
|
4699
|
-
background: var(--color-background-overlay);
|
|
4700
|
-
}
|
|
4701
|
-
.segmented-control__radio-input {
|
|
4702
|
-
position: fixed;
|
|
4703
|
-
opacity: 0;
|
|
4704
|
-
pointer-events: none;
|
|
4705
|
-
}
|
|
4706
|
-
.segmented-control__button {
|
|
4707
|
-
width: 100%;
|
|
4708
|
-
height: 100%;
|
|
4709
|
-
background: none;
|
|
4710
|
-
-webkit-appearance: none;
|
|
4711
|
-
-moz-appearance: none;
|
|
4712
|
-
appearance: none;
|
|
4713
|
-
border: none;
|
|
4714
|
-
outline: none;
|
|
4715
|
-
font: inherit;
|
|
4716
|
-
outline: 2px solid transparent;
|
|
4717
|
-
}
|
|
4718
|
-
.segmented-control__button:focus {
|
|
4719
|
-
outline-offset: 0px;
|
|
4720
|
-
}
|
|
4721
|
-
.segmented-control__button:focus-visible {
|
|
4722
|
-
outline-color: var(--color-interactive-primary);
|
|
4723
|
-
}
|
|
4724
|
-
.segmented-control__selected-segment:hover {
|
|
4725
|
-
background: transparent;
|
|
4726
|
-
}
|
|
4727
|
-
.segmented-control__text {
|
|
4728
|
-
word-wrap: break-word;
|
|
4729
|
-
word-break: break-word;
|
|
4730
|
-
color: var(--color-interactive-primary);
|
|
4731
|
-
transition: font-weight 300ms;
|
|
4732
|
-
}
|
|
4733
4632
|
.np-summary {
|
|
4734
4633
|
min-width: 280px;
|
|
4735
4634
|
}
|
|
@@ -9,7 +9,7 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
|
|
|
9
9
|
/**
|
|
10
10
|
* Function to call when the checkbox option is clicked
|
|
11
11
|
*/
|
|
12
|
-
onChange
|
|
12
|
+
onChange?: (value: boolean) => void;
|
|
13
13
|
};
|
|
14
14
|
declare const CheckboxOption: import("react").ForwardRefExoticComponent<Omit<BaseOptionProps, "onChange"> & {
|
|
15
15
|
/**
|
|
@@ -19,7 +19,7 @@ declare const CheckboxOption: import("react").ForwardRefExoticComponent<Omit<Bas
|
|
|
19
19
|
/**
|
|
20
20
|
* Function to call when the checkbox option is clicked
|
|
21
21
|
*/
|
|
22
|
-
onChange
|
|
22
|
+
onChange?: ((value: boolean) => void) | undefined;
|
|
23
23
|
} & import("react").RefAttributes<ReferenceType>>;
|
|
24
24
|
export default CheckboxOption;
|
|
25
25
|
//# sourceMappingURL=CheckboxOption.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxOption.d.ts","sourceRoot":"","sources":["../../../src/checkboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACpE;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxOption.d.ts","sourceRoot":"","sources":["../../../src/checkboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACpE;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,cAAc;IAVlB;;OAEG;;IAEH;;OAEG;wBACgB,OAAO,KAAK,IAAI;iDAoBpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -8,12 +8,13 @@ export type { SearchInputProps } from './inputs/SearchInput';
|
|
|
8
8
|
export type { SelectInputGroupItem, SelectInputItem, SelectInputOptionContentProps, SelectInputOptionItem, SelectInputProps, SelectInputSeparatorItem, SelectInputTriggerButtonProps, } from './inputs/SelectInput';
|
|
9
9
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
10
10
|
export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
|
|
11
|
+
export type { SnackbarProps } from './snackbar/Snackbar';
|
|
12
|
+
export type { SnackbarContextType } from './snackbar/SnackbarContext';
|
|
11
13
|
export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
|
|
12
14
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
13
15
|
export type { ModalProps } from './modal';
|
|
14
16
|
export type { CurrencyHeaderItem, CurrencyItem, CurrencyOptionItem, MoneyInputProps, } from './moneyInput';
|
|
15
17
|
export type { LayoutDirection, TypographyTypes, TitleTypes, BodyTypes, LinkTypes, DisplayTypes, } from './common';
|
|
16
|
-
export type { SegmentedControlProps } from './segmentedControl';
|
|
17
18
|
/**
|
|
18
19
|
* Components
|
|
19
20
|
*/
|
|
@@ -83,7 +84,6 @@ export { default as RadioGroup } from './radioGroup';
|
|
|
83
84
|
export { default as RadioOption } from './radioOption';
|
|
84
85
|
export { default as Section } from './section';
|
|
85
86
|
export { default as Select } from './select';
|
|
86
|
-
export { default as SegmentedControl } from './segmentedControl';
|
|
87
87
|
export { default as SlidingPanel } from './slidingPanel';
|
|
88
88
|
export { default as SnackbarPortal } from './snackbar/Snackbar';
|
|
89
89
|
export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAClF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,eAAe,EACf,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +1,30 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import { Component } from 'react';
|
|
2
|
+
import { ThemeDark, ThemeLight } from '../common';
|
|
3
|
+
export declare const CSS_TRANSITION_DURATION = 400;
|
|
4
|
+
export interface SnackbarProps {
|
|
5
|
+
action?: {
|
|
6
|
+
label: string;
|
|
7
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
8
|
+
};
|
|
9
|
+
text: React.ReactNode;
|
|
10
|
+
theme?: ThemeLight | ThemeDark;
|
|
11
|
+
timeout: number;
|
|
12
|
+
timestamp: number;
|
|
13
|
+
}
|
|
14
|
+
interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
|
|
15
|
+
visible: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare class Snackbar extends Component<SnackbarProps, SnackbarState> {
|
|
18
|
+
bodyRef: import("react").RefObject<HTMLSpanElement>;
|
|
19
|
+
timeout: number;
|
|
20
|
+
transitionTimeout: number;
|
|
21
|
+
constructor(props: SnackbarProps);
|
|
22
|
+
componentWillUnmount(): void;
|
|
23
|
+
shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState): boolean;
|
|
24
|
+
setLeaveTimeout: () => void;
|
|
25
|
+
componentDidUpdate(previousProps: SnackbarProps): void;
|
|
26
|
+
render(): import("react").JSX.Element;
|
|
27
|
+
}
|
|
28
|
+
declare const _default: (props: SnackbarProps) => import("react").ReactPortal | null;
|
|
29
|
+
export default _default;
|
|
30
|
+
//# sourceMappingURL=Snackbar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/snackbar/Snackbar.
|
|
1
|
+
{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAS,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIzD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9E,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,QAAS,SAAQ,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IACnE,OAAO,6CAAgC;IACvC,OAAO,SAAK;IACZ,iBAAiB,SAAK;gBAEV,KAAK,EAAE,aAAa;IAQhC,oBAAoB;IAKpB,qBAAqB,CAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa;IAexE,eAAe,aAMb;IAEF,kBAAkB,CAAC,aAAa,EAAE,aAAa;IAwB/C,MAAM;CAkCP;;AAID,wBAAwC"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { SnackbarProps } from './Snackbar';
|
|
3
|
+
export type SnackbarContextType = {
|
|
4
|
+
createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const SnackbarContext: import("react").Context<SnackbarContextType>;
|
|
7
|
+
export declare const SnackbarConsumer: import("react").Consumer<SnackbarContextType>;
|
|
3
8
|
//# sourceMappingURL=SnackbarContext.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarContext.
|
|
1
|
+
{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/E,CAAC;AAEF,eAAO,MAAM,eAAe,8CAAmE,CAAC;AAEhG,eAAO,MAAM,gBAAgB,+CAA2B,CAAC"}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
children
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export default class SnackbarProvider extends React.Component<SnackbarProviderProps, any> {
|
|
9
|
-
render(): JSX.Element;
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface SnackbarProviderProps {
|
|
3
|
+
timeout?: number;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export default function SnackbarProvider({ timeout, children }: SnackbarProviderProps): import("react").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=SnackbarProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarProvider.
|
|
1
|
+
{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarProvider.tsx"],"names":[],"mappings":";AAKA,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BA4B3F"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/snackbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSnackbar.d.ts","sourceRoot":"","sources":["../../../src/snackbar/useSnackbar.
|
|
1
|
+
{"version":3,"file":"useSnackbar.d.ts","sourceRoot":"","sources":["../../../src/snackbar/useSnackbar.ts"],"names":[],"mappings":"AAIA,iBAAS,WAAW,uFAInB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export default function withNextPortalWrapper<T extends Record<string, any>>(Component: React.
|
|
2
|
+
export default function withNextPortalWrapper<T extends Record<string, any>>(Component: React.ComponentType<T>): (props: T) => import("react").ReactPortal | null;
|
|
3
3
|
//# sourceMappingURL=withNextPortal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,WAET,CAAC,wCAQ1B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-b7402e7",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"!**/*.tsbuildinfo"
|
|
22
22
|
],
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@babel/core": "^7.
|
|
24
|
+
"@babel/core": "^7.23.9",
|
|
25
25
|
"@babel/plugin-transform-runtime": "^7.22.15",
|
|
26
26
|
"@babel/preset-env": "^7.22.15",
|
|
27
27
|
"@babel/preset-react": "^7.22.15",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@types/use-sync-external-store": "^0.0.4",
|
|
66
66
|
"@wise/art": "^2.7.0",
|
|
67
67
|
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
|
|
68
|
-
"babel-plugin-formatjs": "^10.5.
|
|
68
|
+
"babel-plugin-formatjs": "^10.5.13",
|
|
69
69
|
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
70
70
|
"enzyme": "^3.11.0",
|
|
71
71
|
"jest": "^27.0.6",
|
|
@@ -76,12 +76,12 @@
|
|
|
76
76
|
"rollup": "^3.28.1",
|
|
77
77
|
"storybook": "^7.4.5",
|
|
78
78
|
"@transferwise/less-config": "3.1.0",
|
|
79
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
79
|
+
"@transferwise/neptune-css": "0.0.0-experimental-b7402e7",
|
|
80
80
|
"@wise/components-theming": "0.8.4"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"@transferwise/icons": "^3.7.0",
|
|
84
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
84
|
+
"@transferwise/neptune-css": "0.0.0-experimental-b7402e7",
|
|
85
85
|
"@wise/art": "^2.7.0",
|
|
86
86
|
"@wise/components-theming": "^0.8.4",
|
|
87
87
|
"react": ">=16.14",
|
|
@@ -13,7 +13,7 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
|
|
|
13
13
|
/**
|
|
14
14
|
* Function to call when the checkbox option is clicked
|
|
15
15
|
*/
|
|
16
|
-
onChange
|
|
16
|
+
onChange?: (value: boolean) => void;
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(
|
|
@@ -27,7 +27,7 @@ const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(
|
|
|
27
27
|
<CheckboxButton
|
|
28
28
|
checked={checked}
|
|
29
29
|
disabled={disabled}
|
|
30
|
-
onChange={() => onChange(!checked)}
|
|
30
|
+
onChange={() => onChange?.(!checked)}
|
|
31
31
|
/>
|
|
32
32
|
}
|
|
33
33
|
/>
|
package/src/index.ts
CHANGED
|
@@ -16,6 +16,8 @@ export type {
|
|
|
16
16
|
} from './inputs/SelectInput';
|
|
17
17
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
18
18
|
export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
|
|
19
|
+
export type { SnackbarProps } from './snackbar/Snackbar';
|
|
20
|
+
export type { SnackbarContextType } from './snackbar/SnackbarContext';
|
|
19
21
|
export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
|
|
20
22
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
21
23
|
export type { ModalProps } from './modal';
|
|
@@ -33,7 +35,6 @@ export type {
|
|
|
33
35
|
LinkTypes,
|
|
34
36
|
DisplayTypes,
|
|
35
37
|
} from './common';
|
|
36
|
-
export type { SegmentedControlProps } from './segmentedControl';
|
|
37
38
|
|
|
38
39
|
/**
|
|
39
40
|
* Components
|
|
@@ -108,7 +109,6 @@ export { default as RadioGroup } from './radioGroup';
|
|
|
108
109
|
export { default as RadioOption } from './radioOption';
|
|
109
110
|
export { default as Section } from './section';
|
|
110
111
|
export { default as Select } from './select';
|
|
111
|
-
export { default as SegmentedControl } from './segmentedControl';
|
|
112
112
|
export { default as SlidingPanel } from './slidingPanel';
|
|
113
113
|
export { default as SnackbarPortal } from './snackbar/Snackbar';
|
|
114
114
|
export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
|
package/src/main.css
CHANGED
|
@@ -4629,107 +4629,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4629
4629
|
.np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
|
|
4630
4630
|
box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
|
|
4631
4631
|
}
|
|
4632
|
-
.segmented-control {
|
|
4633
|
-
box-sizing: border-box;
|
|
4634
|
-
--segment-highlight-width: 0;
|
|
4635
|
-
--segment-highlight-x: var(--size-4);
|
|
4636
|
-
}
|
|
4637
|
-
.segmented-control__segments {
|
|
4638
|
-
display: inline-flex;
|
|
4639
|
-
position: relative;
|
|
4640
|
-
padding: 4px;
|
|
4641
|
-
padding: var(--size-4);
|
|
4642
|
-
width: 100%;
|
|
4643
|
-
justify-content: center;
|
|
4644
|
-
align-items: center;
|
|
4645
|
-
background: rgba(134,167,189,0.10196);
|
|
4646
|
-
background: var(--color-background-neutral);
|
|
4647
|
-
border-radius: 24px;
|
|
4648
|
-
border-radius: var(--size-24);
|
|
4649
|
-
transition: outline 300ms;
|
|
4650
|
-
outline: 2px solid transparent;
|
|
4651
|
-
}
|
|
4652
|
-
.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
|
|
4653
|
-
outline: 2px solid var(--color-interactive-primary);
|
|
4654
|
-
}
|
|
4655
|
-
.segmented-control__segments::after {
|
|
4656
|
-
content: "";
|
|
4657
|
-
position: absolute;
|
|
4658
|
-
width: var(--segment-highlight-width);
|
|
4659
|
-
top: 4px;
|
|
4660
|
-
top: var(--size-4);
|
|
4661
|
-
bottom: 4px;
|
|
4662
|
-
bottom: var(--size-4);
|
|
4663
|
-
left: var(--segment-highlight-x);
|
|
4664
|
-
z-index: 0;
|
|
4665
|
-
background: #ffffff;
|
|
4666
|
-
background: var(--color-background-screen);
|
|
4667
|
-
border-radius: 24px;
|
|
4668
|
-
border-radius: var(--size-24);
|
|
4669
|
-
transition: left 300ms;
|
|
4670
|
-
}
|
|
4671
|
-
.segmented-control__segments--no-animate::after {
|
|
4672
|
-
transition: none !important;
|
|
4673
|
-
}
|
|
4674
|
-
.segmented-control__segment {
|
|
4675
|
-
position: relative;
|
|
4676
|
-
flex: 1 1 100%;
|
|
4677
|
-
flex-flow: column;
|
|
4678
|
-
padding: 8px 16px;
|
|
4679
|
-
padding: var(--size-8) var(--size-16);
|
|
4680
|
-
margin: 0 0 0 4px;
|
|
4681
|
-
margin: 0 0 0 var(--size-4);
|
|
4682
|
-
min-width: 0;
|
|
4683
|
-
line-height: inherit;
|
|
4684
|
-
align-items: center;
|
|
4685
|
-
text-align: center;
|
|
4686
|
-
vertical-align: middle;
|
|
4687
|
-
border-radius: 24px;
|
|
4688
|
-
border-radius: var(--size-24);
|
|
4689
|
-
z-index: 1;
|
|
4690
|
-
cursor: pointer;
|
|
4691
|
-
transition: background 300ms;
|
|
4692
|
-
color: var(--color-interactive-primary);
|
|
4693
|
-
}
|
|
4694
|
-
.segmented-control__segment:first-child {
|
|
4695
|
-
margin-left: 0;
|
|
4696
|
-
}
|
|
4697
|
-
.segmented-control__segment:hover {
|
|
4698
|
-
background: rgba(0,0,0,0.10196);
|
|
4699
|
-
background: var(--color-background-overlay);
|
|
4700
|
-
}
|
|
4701
|
-
.segmented-control__radio-input {
|
|
4702
|
-
position: fixed;
|
|
4703
|
-
opacity: 0;
|
|
4704
|
-
pointer-events: none;
|
|
4705
|
-
}
|
|
4706
|
-
.segmented-control__button {
|
|
4707
|
-
width: 100%;
|
|
4708
|
-
height: 100%;
|
|
4709
|
-
background: none;
|
|
4710
|
-
-webkit-appearance: none;
|
|
4711
|
-
-moz-appearance: none;
|
|
4712
|
-
appearance: none;
|
|
4713
|
-
border: none;
|
|
4714
|
-
outline: none;
|
|
4715
|
-
font: inherit;
|
|
4716
|
-
outline: 2px solid transparent;
|
|
4717
|
-
}
|
|
4718
|
-
.segmented-control__button:focus {
|
|
4719
|
-
outline-offset: 0px;
|
|
4720
|
-
}
|
|
4721
|
-
.segmented-control__button:focus-visible {
|
|
4722
|
-
outline-color: var(--color-interactive-primary);
|
|
4723
|
-
}
|
|
4724
|
-
.segmented-control__selected-segment:hover {
|
|
4725
|
-
background: transparent;
|
|
4726
|
-
}
|
|
4727
|
-
.segmented-control__text {
|
|
4728
|
-
word-wrap: break-word;
|
|
4729
|
-
word-break: break-word;
|
|
4730
|
-
color: var(--color-interactive-primary);
|
|
4731
|
-
transition: font-weight 300ms;
|
|
4732
|
-
}
|
|
4733
4632
|
.np-summary {
|
|
4734
4633
|
min-width: 280px;
|
|
4735
4634
|
}
|
package/src/main.less
CHANGED
|
@@ -53,7 +53,6 @@
|
|
|
53
53
|
@import "./statusIcon/StatusIcon.less";
|
|
54
54
|
@import "./stepper/Stepper.less";
|
|
55
55
|
@import "./select/Select.less";
|
|
56
|
-
@import "./segmentedControl/SegmentedControl.less";
|
|
57
56
|
@import "./summary/Summary.less";
|
|
58
57
|
@import "./switch/Switch.less";
|
|
59
58
|
@import "./tabs/Tabs.less";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { action } from '@storybook/addon-actions';
|
|
2
2
|
import { number } from '@storybook/addon-knobs';
|
|
3
|
+
import { StoryContext } from '@storybook/react';
|
|
3
4
|
import { Mobile, Theme, Switch, Bulb, Info, Coins } from '@transferwise/icons';
|
|
4
5
|
|
|
5
6
|
import Button from '../button';
|
|
@@ -120,7 +121,7 @@ export const basic = () => {
|
|
|
120
121
|
);
|
|
121
122
|
};
|
|
122
123
|
|
|
123
|
-
basic.play =
|
|
124
|
+
basic.play = ({ canvasElement }: StoryContext) => {
|
|
124
125
|
const canvas = within(canvasElement);
|
|
125
126
|
userEvent.click(canvas.getByRole('button'));
|
|
126
127
|
};
|