@transferwise/components 0.0.0-experimental-68c810c → 0.0.0-experimental-ff22dc3
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 +75 -68
- package/build/index.esm.js.map +1 -1
- package/build/index.js +75 -68
- package/build/index.js.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/build/types/inputs/_Popover.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/inputs/_BottomSheet.tsx +47 -37
- package/src/inputs/_Popover.tsx +30 -27
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAqGlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAOL,KAAK,IAAI,EAMV,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,OAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,YAAY,+BAgFd"}
|
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-ff22dc3",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
"rollup": "^3.28.1",
|
|
79
79
|
"storybook": "^7.4.5",
|
|
80
80
|
"@transferwise/less-config": "3.0.6",
|
|
81
|
-
"@transferwise/neptune-css": "
|
|
81
|
+
"@transferwise/neptune-css": "14.6.2",
|
|
82
82
|
"@wise/components-theming": "0.8.4"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
|
85
85
|
"@transferwise/icons": "^3.7.0",
|
|
86
|
-
"@transferwise/neptune-css": "
|
|
86
|
+
"@transferwise/neptune-css": "^14.6.2",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wise/components-theming": "^0.8.4",
|
|
89
89
|
"currency-flags": "^4.0.2",
|
|
@@ -12,6 +12,7 @@ import classNames from 'classnames';
|
|
|
12
12
|
import { useState } from 'react';
|
|
13
13
|
|
|
14
14
|
import { CloseButton } from '../common/closeButton';
|
|
15
|
+
import FocusBoundary from '../common/focusBoundary/FocusBoundary';
|
|
15
16
|
import { PreventScroll } from '../common/preventScroll/PreventScroll';
|
|
16
17
|
import { Size } from '../common/propsValues/size';
|
|
17
18
|
|
|
@@ -84,47 +85,56 @@ export function BottomSheet({
|
|
|
84
85
|
<div className="np-bottom-sheet-v2-backdrop" />
|
|
85
86
|
</Transition.Child>
|
|
86
87
|
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
88
|
+
<FocusBoundary>
|
|
89
|
+
<FloatingFocusManager
|
|
90
|
+
context={context}
|
|
91
|
+
initialFocus={initialFocusRef}
|
|
92
|
+
guards={false}
|
|
93
|
+
modal={false}
|
|
94
|
+
>
|
|
95
|
+
<div className="np-bottom-sheet-v2">
|
|
96
|
+
<Transition.Child
|
|
97
|
+
className="np-bottom-sheet-v2-content"
|
|
98
|
+
enter="np-bottom-sheet-v2-content--enter"
|
|
99
|
+
enterFrom="np-bottom-sheet-v2-content--enter-from"
|
|
100
|
+
leave="np-bottom-sheet-v2-content--leave"
|
|
101
|
+
leaveTo="np-bottom-sheet-v2-content--leave-to"
|
|
101
102
|
>
|
|
102
|
-
<div className="np-bottom-sheet-v2-header">
|
|
103
|
-
<CloseButton
|
|
104
|
-
size={Size.SMALL}
|
|
105
|
-
onClick={() => {
|
|
106
|
-
onClose?.();
|
|
107
|
-
}}
|
|
108
|
-
/>
|
|
109
|
-
</div>
|
|
110
103
|
<div
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
|
|
116
|
-
},
|
|
117
|
-
)}
|
|
104
|
+
key={floatingKey} // Force inner state invalidation on open
|
|
105
|
+
ref={refs.setFloating}
|
|
106
|
+
className="np-bottom-sheet-v2-content-inner-container"
|
|
107
|
+
{...getFloatingProps()}
|
|
118
108
|
>
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
109
|
+
<div className="np-bottom-sheet-v2-header">
|
|
110
|
+
<CloseButton
|
|
111
|
+
size={Size.SMALL}
|
|
112
|
+
onClick={() => {
|
|
113
|
+
onClose?.();
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
<div
|
|
118
|
+
className={classNames(
|
|
119
|
+
'np-bottom-sheet-v2-content-inner',
|
|
120
|
+
title && 'np-bottom-sheet-v2-content-inner--has-title',
|
|
121
|
+
{
|
|
122
|
+
'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
|
|
123
|
+
},
|
|
124
|
+
)}
|
|
125
|
+
>
|
|
126
|
+
{title ? (
|
|
127
|
+
<h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
|
|
128
|
+
) : null}
|
|
129
|
+
<div className="np-bottom-sheet-v2-body np-text-body-default">
|
|
130
|
+
{children}
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
123
133
|
</div>
|
|
124
|
-
</
|
|
125
|
-
</
|
|
126
|
-
</
|
|
127
|
-
</
|
|
134
|
+
</Transition.Child>
|
|
135
|
+
</div>
|
|
136
|
+
</FloatingFocusManager>
|
|
137
|
+
</FocusBoundary>
|
|
128
138
|
</Transition>
|
|
129
139
|
</ThemeProvider>
|
|
130
140
|
</FloatingPortal>
|
package/src/inputs/_Popover.tsx
CHANGED
|
@@ -17,6 +17,7 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
|
|
|
17
17
|
import classNames from 'classnames';
|
|
18
18
|
import { useState } from 'react';
|
|
19
19
|
|
|
20
|
+
import FocusBoundary from '../common/focusBoundary/FocusBoundary';
|
|
20
21
|
import { PreventScroll } from '../common/preventScroll/PreventScroll';
|
|
21
22
|
|
|
22
23
|
export interface PopoverProps {
|
|
@@ -88,36 +89,38 @@ export function Popover({
|
|
|
88
89
|
|
|
89
90
|
<FloatingPortal>
|
|
90
91
|
<ThemeProvider theme={theme} screenMode={screenMode} isNotRootProvider>
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
>
|
|
100
|
-
<
|
|
101
|
-
key={floatingKey} // Force inner state invalidation on open
|
|
102
|
-
ref={refs.setFloating}
|
|
103
|
-
className="np-popover-v2-container"
|
|
104
|
-
// eslint-disable-next-line react/forbid-dom-props
|
|
105
|
-
style={floatingStyles}
|
|
106
|
-
{...getFloatingProps()}
|
|
107
|
-
>
|
|
92
|
+
<Transition
|
|
93
|
+
show={open}
|
|
94
|
+
leave="transition-opacity"
|
|
95
|
+
leaveTo="opacity-0"
|
|
96
|
+
beforeEnter={() => {
|
|
97
|
+
setFloatingKey((prev) => prev + 1);
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
<FocusBoundary>
|
|
101
|
+
<FloatingFocusManager context={context} guards={false} modal={false}>
|
|
108
102
|
<div
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
103
|
+
key={floatingKey} // Force inner state invalidation on open
|
|
104
|
+
ref={refs.setFloating}
|
|
105
|
+
className="np-popover-v2-container"
|
|
106
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
107
|
+
style={floatingStyles}
|
|
108
|
+
{...getFloatingProps()}
|
|
112
109
|
>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
110
|
+
<div
|
|
111
|
+
className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
|
|
112
|
+
'np-popover-v2--padding-md': padding === 'md',
|
|
113
|
+
})}
|
|
114
|
+
>
|
|
115
|
+
{title ? (
|
|
116
|
+
<h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
|
|
117
|
+
) : null}
|
|
118
|
+
<div className="np-popover-v2-content np-text-body-default">{children}</div>
|
|
119
|
+
</div>
|
|
117
120
|
</div>
|
|
118
|
-
</
|
|
119
|
-
</
|
|
120
|
-
</
|
|
121
|
+
</FloatingFocusManager>
|
|
122
|
+
</FocusBoundary>
|
|
123
|
+
</Transition>
|
|
121
124
|
</ThemeProvider>
|
|
122
125
|
</FloatingPortal>
|
|
123
126
|
</>
|