@transferwise/components 0.0.0-experimental-4658255 → 0.0.0-experimental-6e68717
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/inputs/_BottomSheet.js +29 -1
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs +30 -2
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/main.css +16 -5
- package/build/styles/inputs/SelectInput.css +16 -5
- package/build/styles/main.css +16 -5
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +94 -0
- package/src/inputs/SelectInput.css +16 -5
- package/src/inputs/SelectInput.spec.tsx +33 -0
- package/src/inputs/SelectInput.test.story.tsx +83 -0
- package/src/inputs/_BottomSheet.less +16 -3
- package/src/inputs/_BottomSheet.tsx +19 -3
- package/src/main.css +16 -5
- package/src/moneyInput/MoneyInput.test.story.tsx +101 -0
|
@@ -6,12 +6,37 @@ var focus = require('@react-aria/focus');
|
|
|
6
6
|
var componentsTheming = require('@wise/components-theming');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var React = require('react');
|
|
9
|
+
require('../common/theme.js');
|
|
10
|
+
require('../common/direction.js');
|
|
11
|
+
require('../common/propsValues/control.js');
|
|
12
|
+
require('../common/propsValues/breakpoint.js');
|
|
13
|
+
var size = require('../common/propsValues/size.js');
|
|
14
|
+
require('../common/propsValues/typography.js');
|
|
15
|
+
require('../common/propsValues/width.js');
|
|
16
|
+
require('../common/propsValues/type.js');
|
|
17
|
+
require('../common/propsValues/dateMode.js');
|
|
18
|
+
require('../common/propsValues/monthFormat.js');
|
|
19
|
+
require('../common/propsValues/position.js');
|
|
20
|
+
require('../common/propsValues/layouts.js');
|
|
21
|
+
require('../common/propsValues/status.js');
|
|
22
|
+
require('../common/propsValues/sentiment.js');
|
|
23
|
+
require('../common/propsValues/profileType.js');
|
|
24
|
+
require('../common/propsValues/variant.js');
|
|
25
|
+
require('../common/propsValues/scroll.js');
|
|
26
|
+
require('../common/propsValues/markdownNodeType.js');
|
|
27
|
+
require('../common/fileType.js');
|
|
9
28
|
var CloseButton = require('../common/closeButton/CloseButton.js');
|
|
10
29
|
var useVirtualKeyboard = require('../common/hooks/useVirtualKeyboard.js');
|
|
11
30
|
var PreventScroll = require('../common/preventScroll/PreventScroll.js');
|
|
12
|
-
var size = require('../common/propsValues/size.js');
|
|
13
31
|
var jsxRuntime = require('react/jsx-runtime');
|
|
14
32
|
|
|
33
|
+
const freezeScroll = (shouldFreeze = true) => {
|
|
34
|
+
if (shouldFreeze) {
|
|
35
|
+
document.documentElement.classList.add('wds-select-input-scroll-freeze');
|
|
36
|
+
} else {
|
|
37
|
+
document.documentElement.classList.remove('wds-select-input-scroll-freeze');
|
|
38
|
+
}
|
|
39
|
+
};
|
|
15
40
|
function BottomSheet({
|
|
16
41
|
open,
|
|
17
42
|
renderTrigger,
|
|
@@ -34,6 +59,9 @@ function BottomSheet({
|
|
|
34
59
|
}
|
|
35
60
|
}
|
|
36
61
|
});
|
|
62
|
+
React.useEffect(() => {
|
|
63
|
+
freezeScroll(open);
|
|
64
|
+
}, [open]);
|
|
37
65
|
const dismiss = react.useDismiss(context);
|
|
38
66
|
const role = react.useRole(context);
|
|
39
67
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common
|
|
1
|
+
{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useEffect, useState } from 'react';\n\nimport { CloseButton , Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open. It complements <PreventScroll />.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n if (shouldFreeze) {\n document.documentElement.classList.add('wds-select-input-scroll-freeze');\n } else {\n document.documentElement.classList.remove('wds-select-input-scroll-freeze');\n }\n};\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard();\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n useEffect(() => {\n freezeScroll(open);\n }, [open]);\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider\n theme=\"personal\"\n screenMode={theme === 'personal' ? screenMode : 'light'}\n isNotRootProvider\n >\n <Transition\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <Transition.Child\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <Transition.Child\n ref={refs.setFloating}\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </Transition.Child>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","classList","add","remove","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
|
@@ -3,13 +3,38 @@ import { Transition } from '@headlessui/react';
|
|
|
3
3
|
import { FocusScope } from '@react-aria/focus';
|
|
4
4
|
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
|
-
import { useState, Fragment as Fragment$1 } from 'react';
|
|
6
|
+
import { useEffect, useState, Fragment as Fragment$1 } from 'react';
|
|
7
|
+
import '../common/theme.mjs';
|
|
8
|
+
import '../common/direction.mjs';
|
|
9
|
+
import '../common/propsValues/control.mjs';
|
|
10
|
+
import '../common/propsValues/breakpoint.mjs';
|
|
11
|
+
import { Size } from '../common/propsValues/size.mjs';
|
|
12
|
+
import '../common/propsValues/typography.mjs';
|
|
13
|
+
import '../common/propsValues/width.mjs';
|
|
14
|
+
import '../common/propsValues/type.mjs';
|
|
15
|
+
import '../common/propsValues/dateMode.mjs';
|
|
16
|
+
import '../common/propsValues/monthFormat.mjs';
|
|
17
|
+
import '../common/propsValues/position.mjs';
|
|
18
|
+
import '../common/propsValues/layouts.mjs';
|
|
19
|
+
import '../common/propsValues/status.mjs';
|
|
20
|
+
import '../common/propsValues/sentiment.mjs';
|
|
21
|
+
import '../common/propsValues/profileType.mjs';
|
|
22
|
+
import '../common/propsValues/variant.mjs';
|
|
23
|
+
import '../common/propsValues/scroll.mjs';
|
|
24
|
+
import '../common/propsValues/markdownNodeType.mjs';
|
|
25
|
+
import '../common/fileType.mjs';
|
|
7
26
|
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
|
|
8
27
|
import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard.mjs';
|
|
9
28
|
import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
|
|
10
|
-
import { Size } from '../common/propsValues/size.mjs';
|
|
11
29
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
12
30
|
|
|
31
|
+
const freezeScroll = (shouldFreeze = true) => {
|
|
32
|
+
if (shouldFreeze) {
|
|
33
|
+
document.documentElement.classList.add('wds-select-input-scroll-freeze');
|
|
34
|
+
} else {
|
|
35
|
+
document.documentElement.classList.remove('wds-select-input-scroll-freeze');
|
|
36
|
+
}
|
|
37
|
+
};
|
|
13
38
|
function BottomSheet({
|
|
14
39
|
open,
|
|
15
40
|
renderTrigger,
|
|
@@ -32,6 +57,9 @@ function BottomSheet({
|
|
|
32
57
|
}
|
|
33
58
|
}
|
|
34
59
|
});
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
freezeScroll(open);
|
|
62
|
+
}, [open]);
|
|
35
63
|
const dismiss = useDismiss(context);
|
|
36
64
|
const role = useRole(context);
|
|
37
65
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common
|
|
1
|
+
{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useEffect, useState } from 'react';\n\nimport { CloseButton , Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open. It complements <PreventScroll />.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n if (shouldFreeze) {\n document.documentElement.classList.add('wds-select-input-scroll-freeze');\n } else {\n document.documentElement.classList.remove('wds-select-input-scroll-freeze');\n }\n};\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard();\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n useEffect(() => {\n freezeScroll(open);\n }, [open]);\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider\n theme=\"personal\"\n screenMode={theme === 'personal' ? screenMode : 'light'}\n isNotRootProvider\n >\n <Transition\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <Transition.Child\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <Transition.Child\n ref={refs.setFloating}\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </Transition.Child>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","classList","add","remove","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -3524,6 +3524,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3524
3524
|
padding-inline-start: 8px;
|
|
3525
3525
|
padding-inline-start: var(--size-8);
|
|
3526
3526
|
}
|
|
3527
|
+
.wds-select-input-scroll-freeze {
|
|
3528
|
+
scroll-behavior: unset !important;
|
|
3529
|
+
height: 100vh;
|
|
3530
|
+
}
|
|
3531
|
+
.wds-select-input-scroll-freeze body {
|
|
3532
|
+
height: 100vh;
|
|
3533
|
+
}
|
|
3527
3534
|
.np-bottom-sheet-v2-container {
|
|
3528
3535
|
position: relative;
|
|
3529
3536
|
z-index: 1060;
|
|
@@ -3537,6 +3544,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3537
3544
|
transition-property: opacity;
|
|
3538
3545
|
transition-timing-function: ease-out;
|
|
3539
3546
|
transition-duration: 300ms;
|
|
3547
|
+
will-change: transform;
|
|
3548
|
+
min-height: 100vh;
|
|
3540
3549
|
}
|
|
3541
3550
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3542
3551
|
opacity: 0;
|
|
@@ -3544,7 +3553,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3544
3553
|
.np-bottom-sheet-v2 {
|
|
3545
3554
|
position: fixed;
|
|
3546
3555
|
inset: 0px;
|
|
3547
|
-
bottom: env(keyboard-inset-height,
|
|
3556
|
+
bottom: calc(env(keyboard-inset-height, 12px));
|
|
3557
|
+
bottom: calc(env(keyboard-inset-height, var(--size-12)));
|
|
3548
3558
|
margin-left: 8px;
|
|
3549
3559
|
margin-left: var(--size-8);
|
|
3550
3560
|
margin-right: 8px;
|
|
@@ -3559,13 +3569,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3559
3569
|
display: flex;
|
|
3560
3570
|
flex-direction: column;
|
|
3561
3571
|
overflow: auto;
|
|
3562
|
-
border-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3572
|
+
border-radius: 32px;
|
|
3573
|
+
border-radius: var(--size-32);
|
|
3574
|
+
margin-bottom: 8px;
|
|
3575
|
+
margin-bottom: var(--size-8);
|
|
3566
3576
|
background-color: #ffffff;
|
|
3567
3577
|
background-color: var(--color-background-elevated);
|
|
3568
3578
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3579
|
+
will-change: transform;
|
|
3569
3580
|
}
|
|
3570
3581
|
.np-bottom-sheet-v2-content:focus {
|
|
3571
3582
|
outline: none;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
.wds-select-input-scroll-freeze {
|
|
2
|
+
scroll-behavior: unset !important;
|
|
3
|
+
height: 100vh;
|
|
4
|
+
}
|
|
5
|
+
.wds-select-input-scroll-freeze body {
|
|
6
|
+
height: 100vh;
|
|
7
|
+
}
|
|
1
8
|
.np-bottom-sheet-v2-container {
|
|
2
9
|
position: relative;
|
|
3
10
|
z-index: 1060;
|
|
@@ -11,6 +18,8 @@
|
|
|
11
18
|
transition-property: opacity;
|
|
12
19
|
transition-timing-function: ease-out;
|
|
13
20
|
transition-duration: 300ms;
|
|
21
|
+
will-change: transform;
|
|
22
|
+
min-height: 100vh;
|
|
14
23
|
}
|
|
15
24
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
16
25
|
opacity: 0;
|
|
@@ -18,7 +27,8 @@
|
|
|
18
27
|
.np-bottom-sheet-v2 {
|
|
19
28
|
position: fixed;
|
|
20
29
|
inset: 0px;
|
|
21
|
-
bottom: env(keyboard-inset-height,
|
|
30
|
+
bottom: calc(env(keyboard-inset-height, 12px));
|
|
31
|
+
bottom: calc(env(keyboard-inset-height, var(--size-12)));
|
|
22
32
|
margin-left: 8px;
|
|
23
33
|
margin-left: var(--size-8);
|
|
24
34
|
margin-right: 8px;
|
|
@@ -33,13 +43,14 @@
|
|
|
33
43
|
display: flex;
|
|
34
44
|
flex-direction: column;
|
|
35
45
|
overflow: auto;
|
|
36
|
-
border-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
46
|
+
border-radius: 32px;
|
|
47
|
+
border-radius: var(--size-32);
|
|
48
|
+
margin-bottom: 8px;
|
|
49
|
+
margin-bottom: var(--size-8);
|
|
40
50
|
background-color: #ffffff;
|
|
41
51
|
background-color: var(--color-background-elevated);
|
|
42
52
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
53
|
+
will-change: transform;
|
|
43
54
|
}
|
|
44
55
|
.np-bottom-sheet-v2-content:focus {
|
|
45
56
|
outline: none;
|
package/build/styles/main.css
CHANGED
|
@@ -3524,6 +3524,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3524
3524
|
padding-inline-start: 8px;
|
|
3525
3525
|
padding-inline-start: var(--size-8);
|
|
3526
3526
|
}
|
|
3527
|
+
.wds-select-input-scroll-freeze {
|
|
3528
|
+
scroll-behavior: unset !important;
|
|
3529
|
+
height: 100vh;
|
|
3530
|
+
}
|
|
3531
|
+
.wds-select-input-scroll-freeze body {
|
|
3532
|
+
height: 100vh;
|
|
3533
|
+
}
|
|
3527
3534
|
.np-bottom-sheet-v2-container {
|
|
3528
3535
|
position: relative;
|
|
3529
3536
|
z-index: 1060;
|
|
@@ -3537,6 +3544,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3537
3544
|
transition-property: opacity;
|
|
3538
3545
|
transition-timing-function: ease-out;
|
|
3539
3546
|
transition-duration: 300ms;
|
|
3547
|
+
will-change: transform;
|
|
3548
|
+
min-height: 100vh;
|
|
3540
3549
|
}
|
|
3541
3550
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3542
3551
|
opacity: 0;
|
|
@@ -3544,7 +3553,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3544
3553
|
.np-bottom-sheet-v2 {
|
|
3545
3554
|
position: fixed;
|
|
3546
3555
|
inset: 0px;
|
|
3547
|
-
bottom: env(keyboard-inset-height,
|
|
3556
|
+
bottom: calc(env(keyboard-inset-height, 12px));
|
|
3557
|
+
bottom: calc(env(keyboard-inset-height, var(--size-12)));
|
|
3548
3558
|
margin-left: 8px;
|
|
3549
3559
|
margin-left: var(--size-8);
|
|
3550
3560
|
margin-right: 8px;
|
|
@@ -3559,13 +3569,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3559
3569
|
display: flex;
|
|
3560
3570
|
flex-direction: column;
|
|
3561
3571
|
overflow: auto;
|
|
3562
|
-
border-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3572
|
+
border-radius: 32px;
|
|
3573
|
+
border-radius: var(--size-32);
|
|
3574
|
+
margin-bottom: 8px;
|
|
3575
|
+
margin-bottom: var(--size-8);
|
|
3566
3576
|
background-color: #ffffff;
|
|
3567
3577
|
background-color: var(--color-background-elevated);
|
|
3568
3578
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3579
|
+
will-change: transform;
|
|
3569
3580
|
}
|
|
3570
3581
|
.np-bottom-sheet-v2-content:focus {
|
|
3571
3582
|
outline: none;
|
|
@@ -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,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAiGlB"}
|
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-6e68717",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -102,8 +102,8 @@
|
|
|
102
102
|
"@floating-ui/react": "^0.27.16",
|
|
103
103
|
"@headlessui/react": "^1.7.19",
|
|
104
104
|
"@popperjs/core": "^2.11.8",
|
|
105
|
-
"@react-aria/focus": "^3.21.
|
|
106
|
-
"@react-aria/overlays": "^3.
|
|
105
|
+
"@react-aria/focus": "^3.21.1",
|
|
106
|
+
"@react-aria/overlays": "^3.29.1",
|
|
107
107
|
"@react-spring/web": "~10.0.1",
|
|
108
108
|
"@transferwise/formatting": "^2.13.4",
|
|
109
109
|
"@transferwise/neptune-validation": "^3.3.1",
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
+
import { userEvent, within } from 'storybook/test';
|
|
4
|
+
import { lorem100, lorem500 } from '../../test-utils';
|
|
5
|
+
import { Typography } from '../propsValues/typography';
|
|
6
|
+
import Alert from '../../alert';
|
|
7
|
+
import Body from '../../body';
|
|
8
|
+
import Button from '../../button';
|
|
9
|
+
import Title from '../../title';
|
|
10
|
+
import BottomSheet from './BottomSheet';
|
|
11
|
+
|
|
12
|
+
const wait = async (duration = 500) =>
|
|
13
|
+
new Promise<void>((resolve) => {
|
|
14
|
+
setTimeout(resolve, duration);
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
component: BottomSheet,
|
|
19
|
+
title: 'Dialogs/BottomSheet/tests',
|
|
20
|
+
tags: ['!autodocs'],
|
|
21
|
+
args: {
|
|
22
|
+
open: false,
|
|
23
|
+
},
|
|
24
|
+
} satisfies Meta<typeof BottomSheet>;
|
|
25
|
+
|
|
26
|
+
type Story = StoryObj<typeof BottomSheet>;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
30
|
+
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
31
|
+
* Expected preview should start with green bar at the top, with yellow section
|
|
32
|
+
* not in the viewport.
|
|
33
|
+
*
|
|
34
|
+
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
35
|
+
*/
|
|
36
|
+
export const SmoothScrollReset: Story = {
|
|
37
|
+
args: {
|
|
38
|
+
children: (
|
|
39
|
+
<>
|
|
40
|
+
<Title type={Typography.TITLE_SECTION}>Observe the document</Title>
|
|
41
|
+
<Alert className="m-t-2" type="warning">
|
|
42
|
+
Once the <code>BottomSheet</code> opens, the document underneath should be static and
|
|
43
|
+
should not scroll.
|
|
44
|
+
</Alert>
|
|
45
|
+
<Body as="p">{lorem100}</Body>
|
|
46
|
+
<Body as="p">{lorem100}</Body>
|
|
47
|
+
</>
|
|
48
|
+
),
|
|
49
|
+
},
|
|
50
|
+
decorators: [
|
|
51
|
+
(Story) => (
|
|
52
|
+
<>
|
|
53
|
+
<style>{'html { scroll-behavior: smooth; }'}</style>
|
|
54
|
+
<div style={{ maxWidth: 500 }}>
|
|
55
|
+
<Body>
|
|
56
|
+
<p>{lorem100}</p>
|
|
57
|
+
<p>{lorem100}</p>
|
|
58
|
+
</Body>
|
|
59
|
+
<Story />
|
|
60
|
+
<Body as="p" className="m-t-5 disabled">
|
|
61
|
+
{lorem500}
|
|
62
|
+
</Body>
|
|
63
|
+
</div>
|
|
64
|
+
</>
|
|
65
|
+
),
|
|
66
|
+
],
|
|
67
|
+
parameters: {
|
|
68
|
+
chromatic: {
|
|
69
|
+
disableSnapshot: true,
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
play: async ({ canvasElement }) => {
|
|
73
|
+
document.documentElement.scrollTop = 400;
|
|
74
|
+
await wait(500);
|
|
75
|
+
const canvas = within(canvasElement);
|
|
76
|
+
await userEvent.click(canvas.getByRole('button'));
|
|
77
|
+
},
|
|
78
|
+
render: ({ open, ...args }) => {
|
|
79
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<div>
|
|
83
|
+
<Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
|
|
84
|
+
<BottomSheet
|
|
85
|
+
{...args}
|
|
86
|
+
open={isOpen}
|
|
87
|
+
onClose={() => {
|
|
88
|
+
setIsOpen(false);
|
|
89
|
+
}}
|
|
90
|
+
/>
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
},
|
|
94
|
+
};
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
.wds-select-input-scroll-freeze {
|
|
2
|
+
scroll-behavior: unset !important;
|
|
3
|
+
height: 100vh;
|
|
4
|
+
}
|
|
5
|
+
.wds-select-input-scroll-freeze body {
|
|
6
|
+
height: 100vh;
|
|
7
|
+
}
|
|
1
8
|
.np-bottom-sheet-v2-container {
|
|
2
9
|
position: relative;
|
|
3
10
|
z-index: 1060;
|
|
@@ -11,6 +18,8 @@
|
|
|
11
18
|
transition-property: opacity;
|
|
12
19
|
transition-timing-function: ease-out;
|
|
13
20
|
transition-duration: 300ms;
|
|
21
|
+
will-change: transform;
|
|
22
|
+
min-height: 100vh;
|
|
14
23
|
}
|
|
15
24
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
16
25
|
opacity: 0;
|
|
@@ -18,7 +27,8 @@
|
|
|
18
27
|
.np-bottom-sheet-v2 {
|
|
19
28
|
position: fixed;
|
|
20
29
|
inset: 0px;
|
|
21
|
-
bottom: env(keyboard-inset-height,
|
|
30
|
+
bottom: calc(env(keyboard-inset-height, 12px));
|
|
31
|
+
bottom: calc(env(keyboard-inset-height, var(--size-12)));
|
|
22
32
|
margin-left: 8px;
|
|
23
33
|
margin-left: var(--size-8);
|
|
24
34
|
margin-right: 8px;
|
|
@@ -33,13 +43,14 @@
|
|
|
33
43
|
display: flex;
|
|
34
44
|
flex-direction: column;
|
|
35
45
|
overflow: auto;
|
|
36
|
-
border-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
46
|
+
border-radius: 32px;
|
|
47
|
+
border-radius: var(--size-32);
|
|
48
|
+
margin-bottom: 8px;
|
|
49
|
+
margin-bottom: var(--size-8);
|
|
40
50
|
background-color: #ffffff;
|
|
41
51
|
background-color: var(--color-background-elevated);
|
|
42
52
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
53
|
+
will-change: transform;
|
|
43
54
|
}
|
|
44
55
|
.np-bottom-sheet-v2-content:focus {
|
|
45
56
|
outline: none;
|
|
@@ -3,13 +3,21 @@ import { userEvent } from '@testing-library/user-event';
|
|
|
3
3
|
|
|
4
4
|
import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
|
|
5
5
|
|
|
6
|
+
import { useScreenSize } from '../common/hooks/useScreenSize';
|
|
6
7
|
import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
|
|
7
8
|
import { Field } from '../field/Field';
|
|
8
9
|
|
|
9
10
|
mockMatchMedia();
|
|
10
11
|
mockResizeObserver();
|
|
12
|
+
jest.mock('../common/hooks/useScreenSize');
|
|
11
13
|
|
|
12
14
|
describe('SelectInput', () => {
|
|
15
|
+
beforeEach(() => {
|
|
16
|
+
(useScreenSize as jest.Mock).mockReturnValue(true);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
afterEach(jest.clearAllMocks);
|
|
20
|
+
|
|
13
21
|
it('renders placeholder', () => {
|
|
14
22
|
render(
|
|
15
23
|
<SelectInput
|
|
@@ -309,4 +317,29 @@ describe('SelectInput', () => {
|
|
|
309
317
|
expect(listBox).not.toHaveAttribute('aria-labelledby');
|
|
310
318
|
});
|
|
311
319
|
});
|
|
320
|
+
|
|
321
|
+
describe('smooth scroll reset', () => {
|
|
322
|
+
const options: SelectInputOptionItem[] = [
|
|
323
|
+
{ type: 'option', value: 'Banana' },
|
|
324
|
+
{ type: 'option', value: 'Orange' },
|
|
325
|
+
{ type: 'option', value: 'Olive' },
|
|
326
|
+
];
|
|
327
|
+
|
|
328
|
+
beforeEach(() => {
|
|
329
|
+
(useScreenSize as jest.Mock).mockReturnValue(false);
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
afterEach(jest.clearAllMocks);
|
|
333
|
+
|
|
334
|
+
it('toggles scroll-resetting class', async () => {
|
|
335
|
+
render(<SelectInput items={options} />);
|
|
336
|
+
expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
|
|
337
|
+
|
|
338
|
+
await userEvent.click(screen.getByRole('combobox'));
|
|
339
|
+
expect(document.documentElement).toHaveClass('wds-select-input-scroll-freeze');
|
|
340
|
+
|
|
341
|
+
await userEvent.click(document.documentElement);
|
|
342
|
+
expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
|
|
343
|
+
});
|
|
344
|
+
});
|
|
312
345
|
});
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import { fn, type Mock, userEvent, within } from 'storybook/test';
|
|
3
|
+
import { allModes } from '../../.storybook/modes';
|
|
4
|
+
import { lorem5, lorem500 } from '../test-utils';
|
|
5
|
+
import { Field } from '../field/Field';
|
|
6
|
+
import Body from '../body';
|
|
7
|
+
import { SelectInput, type SelectInputProps } from './SelectInput';
|
|
8
|
+
|
|
9
|
+
const meta = {
|
|
10
|
+
title: 'Forms/SelectInput/tests',
|
|
11
|
+
component: SelectInput,
|
|
12
|
+
args: {
|
|
13
|
+
onFilterChange: fn() satisfies Mock,
|
|
14
|
+
onChange: fn() satisfies Mock,
|
|
15
|
+
onClose: fn() satisfies Mock,
|
|
16
|
+
onOpen: fn() satisfies Mock,
|
|
17
|
+
},
|
|
18
|
+
tags: ['!autodocs'],
|
|
19
|
+
} satisfies Meta<typeof SelectInput>;
|
|
20
|
+
export default meta;
|
|
21
|
+
|
|
22
|
+
type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
|
|
23
|
+
|
|
24
|
+
const wait = async (duration = 500) =>
|
|
25
|
+
new Promise<void>((resolve) => {
|
|
26
|
+
setTimeout(resolve, duration);
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
31
|
+
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
32
|
+
* Expected preview should start with green bar at the top, with yellow section
|
|
33
|
+
* not in the viewport.
|
|
34
|
+
*
|
|
35
|
+
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
36
|
+
*/
|
|
37
|
+
export const SmoothScrollReset: Story<string> = {
|
|
38
|
+
args: {
|
|
39
|
+
items: Array.from({ length: 15 }).map((_, id) => ({
|
|
40
|
+
type: 'option',
|
|
41
|
+
value: `option ${id + 1}`,
|
|
42
|
+
})),
|
|
43
|
+
placeholder: 'Select option',
|
|
44
|
+
},
|
|
45
|
+
decorators: [
|
|
46
|
+
(Story) => (
|
|
47
|
+
<>
|
|
48
|
+
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
49
|
+
<div>
|
|
50
|
+
<div
|
|
51
|
+
className="d-flex align-items-center justify-content-center"
|
|
52
|
+
style={{
|
|
53
|
+
backgroundColor: 'var(--color-bright-yellow)',
|
|
54
|
+
height: 400,
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
This block should not be in the viewport.
|
|
58
|
+
</div>
|
|
59
|
+
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
60
|
+
<Field id="el1" label={lorem5}>
|
|
61
|
+
<Story />
|
|
62
|
+
</Field>
|
|
63
|
+
<Body as="p">{lorem500}</Body>
|
|
64
|
+
</div>
|
|
65
|
+
</>
|
|
66
|
+
),
|
|
67
|
+
],
|
|
68
|
+
play: async ({ canvasElement }) => {
|
|
69
|
+
document.documentElement.scrollTop = 400;
|
|
70
|
+
await wait();
|
|
71
|
+
const canvas = within(canvasElement);
|
|
72
|
+
const triggerButton = canvas.getByRole('combobox');
|
|
73
|
+
await userEvent.click(triggerButton);
|
|
74
|
+
},
|
|
75
|
+
globals: {
|
|
76
|
+
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
77
|
+
},
|
|
78
|
+
parameters: {
|
|
79
|
+
chromatic: {
|
|
80
|
+
disableSnapshot: true,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
};
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
.wds-select-input-scroll-freeze {
|
|
2
|
+
scroll-behavior: unset !important;
|
|
3
|
+
height: 100vh;
|
|
4
|
+
|
|
5
|
+
body{
|
|
6
|
+
height: 100vh;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
1
10
|
.np-bottom-sheet-v2-container {
|
|
2
11
|
position: relative;
|
|
3
12
|
z-index: 1060;
|
|
@@ -11,6 +20,8 @@
|
|
|
11
20
|
transition-property: opacity;
|
|
12
21
|
transition-timing-function: ease-out;
|
|
13
22
|
transition-duration: 300ms;
|
|
23
|
+
will-change: transform;
|
|
24
|
+
min-height: 100vh;
|
|
14
25
|
|
|
15
26
|
&--closed {
|
|
16
27
|
opacity: 0;
|
|
@@ -20,23 +31,25 @@
|
|
|
20
31
|
.np-bottom-sheet-v2 {
|
|
21
32
|
position: fixed;
|
|
22
33
|
inset: 0px;
|
|
23
|
-
bottom: env(keyboard-inset-height,
|
|
34
|
+
bottom: calc(env(keyboard-inset-height, var(--size-12)));
|
|
24
35
|
margin-left: var(--size-8);
|
|
25
36
|
margin-right: var(--size-8);
|
|
26
37
|
margin-top: var(--size-64);
|
|
27
38
|
display: flex;
|
|
28
39
|
flex-direction: column;
|
|
29
40
|
justify-content: flex-end;
|
|
41
|
+
// height: calc(100vh - var(--size-64) - 40px);
|
|
30
42
|
}
|
|
31
43
|
|
|
32
44
|
.np-bottom-sheet-v2-content {
|
|
33
45
|
display: flex;
|
|
34
46
|
flex-direction: column;
|
|
35
47
|
overflow: auto;
|
|
36
|
-
border-
|
|
37
|
-
|
|
48
|
+
border-radius: var(--size-32);
|
|
49
|
+
margin-bottom: var(--size-8);
|
|
38
50
|
background-color: var(--color-background-elevated);
|
|
39
51
|
box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
|
|
52
|
+
will-change: transform;
|
|
40
53
|
|
|
41
54
|
&:focus {
|
|
42
55
|
outline: none;
|
|
@@ -10,12 +10,11 @@ import { Transition } from '@headlessui/react';
|
|
|
10
10
|
import { FocusScope } from '@react-aria/focus';
|
|
11
11
|
import { ThemeProvider, useTheme } from '@wise/components-theming';
|
|
12
12
|
import { clsx } from 'clsx';
|
|
13
|
-
import { Fragment, useState } from 'react';
|
|
13
|
+
import { Fragment, useEffect, useState } from 'react';
|
|
14
14
|
|
|
15
|
-
import { CloseButton } from '../common
|
|
15
|
+
import { CloseButton , Size } from '../common';
|
|
16
16
|
import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
|
|
17
17
|
import { PreventScroll } from '../common/preventScroll/PreventScroll';
|
|
18
|
-
import { Size } from '../common/propsValues/size';
|
|
19
18
|
|
|
20
19
|
export interface BottomSheetProps {
|
|
21
20
|
open: boolean;
|
|
@@ -33,6 +32,19 @@ export interface BottomSheetProps {
|
|
|
33
32
|
onCloseEnd?: () => void;
|
|
34
33
|
}
|
|
35
34
|
|
|
35
|
+
/**
|
|
36
|
+
* App pages set scroll-behavior to 'smooth' which causes mobile Safari to
|
|
37
|
+
* slow-scroll and glitch. This function temporarily disables that behaviour
|
|
38
|
+
* while the BottomSheet is open. It complements <PreventScroll />.
|
|
39
|
+
*/
|
|
40
|
+
const freezeScroll = (shouldFreeze = true) => {
|
|
41
|
+
if (shouldFreeze) {
|
|
42
|
+
document.documentElement.classList.add('wds-select-input-scroll-freeze');
|
|
43
|
+
} else {
|
|
44
|
+
document.documentElement.classList.remove('wds-select-input-scroll-freeze');
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
36
48
|
export function BottomSheet({
|
|
37
49
|
open,
|
|
38
50
|
renderTrigger,
|
|
@@ -54,6 +66,10 @@ export function BottomSheet({
|
|
|
54
66
|
},
|
|
55
67
|
});
|
|
56
68
|
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
freezeScroll(open);
|
|
71
|
+
}, [open]);
|
|
72
|
+
|
|
57
73
|
const dismiss = useDismiss(context);
|
|
58
74
|
const role = useRole(context);
|
|
59
75
|
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
|
package/src/main.css
CHANGED
|
@@ -3524,6 +3524,13 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3524
3524
|
padding-inline-start: 8px;
|
|
3525
3525
|
padding-inline-start: var(--size-8);
|
|
3526
3526
|
}
|
|
3527
|
+
.wds-select-input-scroll-freeze {
|
|
3528
|
+
scroll-behavior: unset !important;
|
|
3529
|
+
height: 100vh;
|
|
3530
|
+
}
|
|
3531
|
+
.wds-select-input-scroll-freeze body {
|
|
3532
|
+
height: 100vh;
|
|
3533
|
+
}
|
|
3527
3534
|
.np-bottom-sheet-v2-container {
|
|
3528
3535
|
position: relative;
|
|
3529
3536
|
z-index: 1060;
|
|
@@ -3537,6 +3544,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3537
3544
|
transition-property: opacity;
|
|
3538
3545
|
transition-timing-function: ease-out;
|
|
3539
3546
|
transition-duration: 300ms;
|
|
3547
|
+
will-change: transform;
|
|
3548
|
+
min-height: 100vh;
|
|
3540
3549
|
}
|
|
3541
3550
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3542
3551
|
opacity: 0;
|
|
@@ -3544,7 +3553,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3544
3553
|
.np-bottom-sheet-v2 {
|
|
3545
3554
|
position: fixed;
|
|
3546
3555
|
inset: 0px;
|
|
3547
|
-
bottom: env(keyboard-inset-height,
|
|
3556
|
+
bottom: calc(env(keyboard-inset-height, 12px));
|
|
3557
|
+
bottom: calc(env(keyboard-inset-height, var(--size-12)));
|
|
3548
3558
|
margin-left: 8px;
|
|
3549
3559
|
margin-left: var(--size-8);
|
|
3550
3560
|
margin-right: 8px;
|
|
@@ -3559,13 +3569,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3559
3569
|
display: flex;
|
|
3560
3570
|
flex-direction: column;
|
|
3561
3571
|
overflow: auto;
|
|
3562
|
-
border-
|
|
3563
|
-
|
|
3564
|
-
|
|
3565
|
-
|
|
3572
|
+
border-radius: 32px;
|
|
3573
|
+
border-radius: var(--size-32);
|
|
3574
|
+
margin-bottom: 8px;
|
|
3575
|
+
margin-bottom: var(--size-8);
|
|
3566
3576
|
background-color: #ffffff;
|
|
3567
3577
|
background-color: var(--color-background-elevated);
|
|
3568
3578
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3579
|
+
will-change: transform;
|
|
3569
3580
|
}
|
|
3570
3581
|
.np-bottom-sheet-v2-content:focus {
|
|
3571
3582
|
outline: none;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import { userEvent, within } from 'storybook/test';
|
|
3
|
+
import { allModes } from '../../.storybook/modes';
|
|
4
|
+
import { lorem500 } from '../test-utils';
|
|
5
|
+
import { Field } from '../field/Field';
|
|
6
|
+
import Body from '../body';
|
|
7
|
+
import MoneyInput from './MoneyInput';
|
|
8
|
+
|
|
9
|
+
const meta = {
|
|
10
|
+
title: 'Forms/MoneyInput/tests',
|
|
11
|
+
component: MoneyInput,
|
|
12
|
+
args: {
|
|
13
|
+
amount: 1000,
|
|
14
|
+
id: 'moneyInput',
|
|
15
|
+
currencies: [
|
|
16
|
+
{
|
|
17
|
+
value: 'EUR',
|
|
18
|
+
label: 'EUR',
|
|
19
|
+
note: 'Euro',
|
|
20
|
+
currency: 'eur',
|
|
21
|
+
searchable: 'Spain, Germany, France, Austria',
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
value: 'GBP',
|
|
25
|
+
label: 'GBP',
|
|
26
|
+
note: 'British pound',
|
|
27
|
+
currency: 'gbp',
|
|
28
|
+
searchable: 'England, Scotland, Wales',
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
selectedCurrency: {
|
|
32
|
+
value: 'EUR',
|
|
33
|
+
label: 'EUR',
|
|
34
|
+
note: 'Euro',
|
|
35
|
+
currency: 'eur',
|
|
36
|
+
searchable: 'Spain, Germany, France, Austria',
|
|
37
|
+
},
|
|
38
|
+
searchPlaceholder: '',
|
|
39
|
+
onAmountChange: () => {},
|
|
40
|
+
onCurrencyChange: () => {},
|
|
41
|
+
},
|
|
42
|
+
tags: ['!autodocs'],
|
|
43
|
+
} satisfies Meta<typeof MoneyInput>;
|
|
44
|
+
export default meta;
|
|
45
|
+
|
|
46
|
+
type Story = StoryObj<typeof MoneyInput>;
|
|
47
|
+
|
|
48
|
+
const wait = async (duration = 500) =>
|
|
49
|
+
new Promise<void>((resolve) => {
|
|
50
|
+
setTimeout(resolve, duration);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
55
|
+
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
56
|
+
* Expected preview should start with green bar at the top, with yellow section
|
|
57
|
+
* not in the viewport.
|
|
58
|
+
*
|
|
59
|
+
* NB: This test is disabled in Chromatic as there's no obvious way to control <html/> element of a snapshot.
|
|
60
|
+
*/
|
|
61
|
+
export const SmoothScrollReset: Story = {
|
|
62
|
+
decorators: [
|
|
63
|
+
(Story) => (
|
|
64
|
+
<>
|
|
65
|
+
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
66
|
+
<div>
|
|
67
|
+
<div
|
|
68
|
+
className="d-flex align-items-center justify-content-center"
|
|
69
|
+
style={{
|
|
70
|
+
backgroundColor: 'var(--color-bright-yellow)',
|
|
71
|
+
height: 400,
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
74
|
+
This block should not be in the viewport.
|
|
75
|
+
</div>
|
|
76
|
+
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
77
|
+
<Field id="el1" label="Select currency">
|
|
78
|
+
<Story />
|
|
79
|
+
</Field>
|
|
80
|
+
<Body as="p">{lorem500}</Body>
|
|
81
|
+
</div>
|
|
82
|
+
</>
|
|
83
|
+
),
|
|
84
|
+
],
|
|
85
|
+
play: async ({ canvasElement }) => {
|
|
86
|
+
await wait();
|
|
87
|
+
document.documentElement.scrollTop = 400;
|
|
88
|
+
await wait();
|
|
89
|
+
const canvas = within(canvasElement);
|
|
90
|
+
const triggerButton = canvas.getByRole('combobox');
|
|
91
|
+
await userEvent.click(triggerButton);
|
|
92
|
+
},
|
|
93
|
+
globals: {
|
|
94
|
+
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
95
|
+
},
|
|
96
|
+
parameters: {
|
|
97
|
+
chromatic: {
|
|
98
|
+
disableSnapshot: true,
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
};
|