@transferwise/components 0.0.0-experimental-a8d876e → 0.0.0-experimental-28a6366
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 +1 -29
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs +2 -30
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/main.css +3 -15
- package/build/styles/inputs/SelectInput.css +3 -15
- package/build/styles/main.css +3 -15
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/package.json +6 -6
- package/src/inputs/SelectInput.css +3 -15
- package/src/inputs/SelectInput.spec.tsx +0 -33
- package/src/inputs/_BottomSheet.less +3 -16
- package/src/inputs/_BottomSheet.tsx +3 -19
- package/src/main.css +3 -15
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +0 -94
- package/src/inputs/SelectInput.test.story.tsx +0 -83
- package/src/moneyInput/MoneyInput.test.story.tsx +0 -101
|
@@ -6,37 +6,12 @@ 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');
|
|
28
9
|
var CloseButton = require('../common/closeButton/CloseButton.js');
|
|
29
10
|
var useVirtualKeyboard = require('../common/hooks/useVirtualKeyboard.js');
|
|
30
11
|
var PreventScroll = require('../common/preventScroll/PreventScroll.js');
|
|
12
|
+
var size = require('../common/propsValues/size.js');
|
|
31
13
|
var jsxRuntime = require('react/jsx-runtime');
|
|
32
14
|
|
|
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
|
-
};
|
|
40
15
|
function BottomSheet({
|
|
41
16
|
open,
|
|
42
17
|
renderTrigger,
|
|
@@ -59,9 +34,6 @@ function BottomSheet({
|
|
|
59
34
|
}
|
|
60
35
|
}
|
|
61
36
|
});
|
|
62
|
-
React.useEffect(() => {
|
|
63
|
-
freezeScroll(open);
|
|
64
|
-
}, [open]);
|
|
65
37
|
const dismiss = react.useDismiss(context);
|
|
66
38
|
const role = react.useRole(context);
|
|
67
39
|
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,
|
|
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/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\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\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 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":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","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,38 +3,13 @@ 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 {
|
|
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';
|
|
6
|
+
import { useState, Fragment as Fragment$1 } from 'react';
|
|
26
7
|
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
|
|
27
8
|
import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard.mjs';
|
|
28
9
|
import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
|
|
10
|
+
import { Size } from '../common/propsValues/size.mjs';
|
|
29
11
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
30
12
|
|
|
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
|
-
};
|
|
38
13
|
function BottomSheet({
|
|
39
14
|
open,
|
|
40
15
|
renderTrigger,
|
|
@@ -57,9 +32,6 @@ function BottomSheet({
|
|
|
57
32
|
}
|
|
58
33
|
}
|
|
59
34
|
});
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
freezeScroll(open);
|
|
62
|
-
}, [open]);
|
|
63
35
|
const dismiss = useDismiss(context);
|
|
64
36
|
const role = useRole(context);
|
|
65
37
|
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,
|
|
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/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\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\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 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":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","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
|
@@ -3519,13 +3519,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3519
3519
|
padding-inline-start: 8px;
|
|
3520
3520
|
padding-inline-start: var(--size-8);
|
|
3521
3521
|
}
|
|
3522
|
-
.wds-select-input-scroll-freeze {
|
|
3523
|
-
scroll-behavior: unset !important;
|
|
3524
|
-
height: 100vh;
|
|
3525
|
-
}
|
|
3526
|
-
.wds-select-input-scroll-freeze body {
|
|
3527
|
-
height: 100vh;
|
|
3528
|
-
}
|
|
3529
3522
|
.np-bottom-sheet-v2-container {
|
|
3530
3523
|
position: relative;
|
|
3531
3524
|
z-index: 1060;
|
|
@@ -3539,8 +3532,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3539
3532
|
transition-property: opacity;
|
|
3540
3533
|
transition-timing-function: ease-out;
|
|
3541
3534
|
transition-duration: 300ms;
|
|
3542
|
-
will-change: transform;
|
|
3543
|
-
min-height: 100vh;
|
|
3544
3535
|
}
|
|
3545
3536
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3546
3537
|
opacity: 0;
|
|
@@ -3548,7 +3539,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3548
3539
|
.np-bottom-sheet-v2 {
|
|
3549
3540
|
position: fixed;
|
|
3550
3541
|
inset: 0px;
|
|
3551
|
-
bottom: env(
|
|
3542
|
+
bottom: env(keyboard-inset-height, 0px);
|
|
3552
3543
|
margin-left: 8px;
|
|
3553
3544
|
margin-left: var(--size-8);
|
|
3554
3545
|
margin-right: 8px;
|
|
@@ -3558,21 +3549,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3558
3549
|
display: flex;
|
|
3559
3550
|
flex-direction: column;
|
|
3560
3551
|
justify-content: flex-end;
|
|
3561
|
-
height: calc(100vh - 64px - 40px);
|
|
3562
|
-
height: calc(100vh - var(--size-64) - 40px);
|
|
3563
3552
|
}
|
|
3564
3553
|
.np-bottom-sheet-v2-content {
|
|
3565
3554
|
display: flex;
|
|
3566
3555
|
flex-direction: column;
|
|
3567
3556
|
overflow: auto;
|
|
3568
3557
|
border-top-left-radius: 32px;
|
|
3569
|
-
|
|
3558
|
+
/* TODO: Tokenize */
|
|
3570
3559
|
border-top-right-radius: 32px;
|
|
3571
|
-
|
|
3560
|
+
/* TODO: Tokenize */
|
|
3572
3561
|
background-color: #ffffff;
|
|
3573
3562
|
background-color: var(--color-background-elevated);
|
|
3574
3563
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3575
|
-
will-change: transform;
|
|
3576
3564
|
}
|
|
3577
3565
|
.np-bottom-sheet-v2-content:focus {
|
|
3578
3566
|
outline: none;
|
|
@@ -1,10 +1,3 @@
|
|
|
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
|
-
}
|
|
8
1
|
.np-bottom-sheet-v2-container {
|
|
9
2
|
position: relative;
|
|
10
3
|
z-index: 1060;
|
|
@@ -18,8 +11,6 @@
|
|
|
18
11
|
transition-property: opacity;
|
|
19
12
|
transition-timing-function: ease-out;
|
|
20
13
|
transition-duration: 300ms;
|
|
21
|
-
will-change: transform;
|
|
22
|
-
min-height: 100vh;
|
|
23
14
|
}
|
|
24
15
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
25
16
|
opacity: 0;
|
|
@@ -27,7 +18,7 @@
|
|
|
27
18
|
.np-bottom-sheet-v2 {
|
|
28
19
|
position: fixed;
|
|
29
20
|
inset: 0px;
|
|
30
|
-
bottom: env(
|
|
21
|
+
bottom: env(keyboard-inset-height, 0px);
|
|
31
22
|
margin-left: 8px;
|
|
32
23
|
margin-left: var(--size-8);
|
|
33
24
|
margin-right: 8px;
|
|
@@ -37,21 +28,18 @@
|
|
|
37
28
|
display: flex;
|
|
38
29
|
flex-direction: column;
|
|
39
30
|
justify-content: flex-end;
|
|
40
|
-
height: calc(100vh - 64px - 40px);
|
|
41
|
-
height: calc(100vh - var(--size-64) - 40px);
|
|
42
31
|
}
|
|
43
32
|
.np-bottom-sheet-v2-content {
|
|
44
33
|
display: flex;
|
|
45
34
|
flex-direction: column;
|
|
46
35
|
overflow: auto;
|
|
47
36
|
border-top-left-radius: 32px;
|
|
48
|
-
|
|
37
|
+
/* TODO: Tokenize */
|
|
49
38
|
border-top-right-radius: 32px;
|
|
50
|
-
|
|
39
|
+
/* TODO: Tokenize */
|
|
51
40
|
background-color: #ffffff;
|
|
52
41
|
background-color: var(--color-background-elevated);
|
|
53
42
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
54
|
-
will-change: transform;
|
|
55
43
|
}
|
|
56
44
|
.np-bottom-sheet-v2-content:focus {
|
|
57
45
|
outline: none;
|
package/build/styles/main.css
CHANGED
|
@@ -3519,13 +3519,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3519
3519
|
padding-inline-start: 8px;
|
|
3520
3520
|
padding-inline-start: var(--size-8);
|
|
3521
3521
|
}
|
|
3522
|
-
.wds-select-input-scroll-freeze {
|
|
3523
|
-
scroll-behavior: unset !important;
|
|
3524
|
-
height: 100vh;
|
|
3525
|
-
}
|
|
3526
|
-
.wds-select-input-scroll-freeze body {
|
|
3527
|
-
height: 100vh;
|
|
3528
|
-
}
|
|
3529
3522
|
.np-bottom-sheet-v2-container {
|
|
3530
3523
|
position: relative;
|
|
3531
3524
|
z-index: 1060;
|
|
@@ -3539,8 +3532,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3539
3532
|
transition-property: opacity;
|
|
3540
3533
|
transition-timing-function: ease-out;
|
|
3541
3534
|
transition-duration: 300ms;
|
|
3542
|
-
will-change: transform;
|
|
3543
|
-
min-height: 100vh;
|
|
3544
3535
|
}
|
|
3545
3536
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3546
3537
|
opacity: 0;
|
|
@@ -3548,7 +3539,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3548
3539
|
.np-bottom-sheet-v2 {
|
|
3549
3540
|
position: fixed;
|
|
3550
3541
|
inset: 0px;
|
|
3551
|
-
bottom: env(
|
|
3542
|
+
bottom: env(keyboard-inset-height, 0px);
|
|
3552
3543
|
margin-left: 8px;
|
|
3553
3544
|
margin-left: var(--size-8);
|
|
3554
3545
|
margin-right: 8px;
|
|
@@ -3558,21 +3549,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3558
3549
|
display: flex;
|
|
3559
3550
|
flex-direction: column;
|
|
3560
3551
|
justify-content: flex-end;
|
|
3561
|
-
height: calc(100vh - 64px - 40px);
|
|
3562
|
-
height: calc(100vh - var(--size-64) - 40px);
|
|
3563
3552
|
}
|
|
3564
3553
|
.np-bottom-sheet-v2-content {
|
|
3565
3554
|
display: flex;
|
|
3566
3555
|
flex-direction: column;
|
|
3567
3556
|
overflow: auto;
|
|
3568
3557
|
border-top-left-radius: 32px;
|
|
3569
|
-
|
|
3558
|
+
/* TODO: Tokenize */
|
|
3570
3559
|
border-top-right-radius: 32px;
|
|
3571
|
-
|
|
3560
|
+
/* TODO: Tokenize */
|
|
3572
3561
|
background-color: #ffffff;
|
|
3573
3562
|
background-color: var(--color-background-elevated);
|
|
3574
3563
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3575
|
-
will-change: transform;
|
|
3576
3564
|
}
|
|
3577
3565
|
.np-bottom-sheet-v2-content:focus {
|
|
3578
3566
|
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":"AAmBA,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,+BA6FlB"}
|
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-28a6366",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@types/react": "^18.3.23",
|
|
69
69
|
"@types/react-dom": "^18.3.7",
|
|
70
70
|
"@types/react-transition-group": "4.4.12",
|
|
71
|
-
"@wise/art": "^2.24.
|
|
71
|
+
"@wise/art": "^2.24.7",
|
|
72
72
|
"@wise/eslint-config": "^13.1.0",
|
|
73
73
|
"babel-plugin-formatjs": "^10.5.39",
|
|
74
74
|
"eslint": "^9.33.0",
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
86
|
"@transferwise/less-config": "3.1.2",
|
|
87
87
|
"@transferwise/neptune-css": "14.25.0",
|
|
88
|
-
"@wise/
|
|
89
|
-
"@wise/
|
|
88
|
+
"@wise/wds-configs": "0.0.0",
|
|
89
|
+
"@wise/components-theming": "1.7.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@transferwise/icons": "^3.22.4",
|
|
@@ -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.0",
|
|
106
|
+
"@react-aria/overlays": "^3.28.0",
|
|
107
107
|
"@react-spring/web": "~10.0.1",
|
|
108
108
|
"@transferwise/formatting": "^2.13.4",
|
|
109
109
|
"@transferwise/neptune-validation": "^3.3.1",
|
|
@@ -1,10 +1,3 @@
|
|
|
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
|
-
}
|
|
8
1
|
.np-bottom-sheet-v2-container {
|
|
9
2
|
position: relative;
|
|
10
3
|
z-index: 1060;
|
|
@@ -18,8 +11,6 @@
|
|
|
18
11
|
transition-property: opacity;
|
|
19
12
|
transition-timing-function: ease-out;
|
|
20
13
|
transition-duration: 300ms;
|
|
21
|
-
will-change: transform;
|
|
22
|
-
min-height: 100vh;
|
|
23
14
|
}
|
|
24
15
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
25
16
|
opacity: 0;
|
|
@@ -27,7 +18,7 @@
|
|
|
27
18
|
.np-bottom-sheet-v2 {
|
|
28
19
|
position: fixed;
|
|
29
20
|
inset: 0px;
|
|
30
|
-
bottom: env(
|
|
21
|
+
bottom: env(keyboard-inset-height, 0px);
|
|
31
22
|
margin-left: 8px;
|
|
32
23
|
margin-left: var(--size-8);
|
|
33
24
|
margin-right: 8px;
|
|
@@ -37,21 +28,18 @@
|
|
|
37
28
|
display: flex;
|
|
38
29
|
flex-direction: column;
|
|
39
30
|
justify-content: flex-end;
|
|
40
|
-
height: calc(100vh - 64px - 40px);
|
|
41
|
-
height: calc(100vh - var(--size-64) - 40px);
|
|
42
31
|
}
|
|
43
32
|
.np-bottom-sheet-v2-content {
|
|
44
33
|
display: flex;
|
|
45
34
|
flex-direction: column;
|
|
46
35
|
overflow: auto;
|
|
47
36
|
border-top-left-radius: 32px;
|
|
48
|
-
|
|
37
|
+
/* TODO: Tokenize */
|
|
49
38
|
border-top-right-radius: 32px;
|
|
50
|
-
|
|
39
|
+
/* TODO: Tokenize */
|
|
51
40
|
background-color: #ffffff;
|
|
52
41
|
background-color: var(--color-background-elevated);
|
|
53
42
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
54
|
-
will-change: transform;
|
|
55
43
|
}
|
|
56
44
|
.np-bottom-sheet-v2-content:focus {
|
|
57
45
|
outline: none;
|
|
@@ -3,21 +3,13 @@ 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';
|
|
7
6
|
import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
|
|
8
7
|
import { Field } from '../field/Field';
|
|
9
8
|
|
|
10
9
|
mockMatchMedia();
|
|
11
10
|
mockResizeObserver();
|
|
12
|
-
jest.mock('../common/hooks/useScreenSize');
|
|
13
11
|
|
|
14
12
|
describe('SelectInput', () => {
|
|
15
|
-
beforeEach(() => {
|
|
16
|
-
(useScreenSize as jest.Mock).mockReturnValue(true);
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
afterEach(jest.clearAllMocks);
|
|
20
|
-
|
|
21
13
|
it('renders placeholder', () => {
|
|
22
14
|
render(
|
|
23
15
|
<SelectInput
|
|
@@ -317,29 +309,4 @@ describe('SelectInput', () => {
|
|
|
317
309
|
expect(listBox).not.toHaveAttribute('aria-labelledby');
|
|
318
310
|
});
|
|
319
311
|
});
|
|
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
|
-
});
|
|
345
312
|
});
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
.wds-select-input-scroll-freeze {
|
|
2
|
-
scroll-behavior: unset !important;
|
|
3
|
-
height: 100vh;
|
|
4
|
-
|
|
5
|
-
body{
|
|
6
|
-
height: 100vh;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
1
|
.np-bottom-sheet-v2-container {
|
|
11
2
|
position: relative;
|
|
12
3
|
z-index: 1060;
|
|
@@ -20,8 +11,6 @@
|
|
|
20
11
|
transition-property: opacity;
|
|
21
12
|
transition-timing-function: ease-out;
|
|
22
13
|
transition-duration: 300ms;
|
|
23
|
-
will-change: transform;
|
|
24
|
-
min-height: 100vh;
|
|
25
14
|
|
|
26
15
|
&--closed {
|
|
27
16
|
opacity: 0;
|
|
@@ -31,25 +20,23 @@
|
|
|
31
20
|
.np-bottom-sheet-v2 {
|
|
32
21
|
position: fixed;
|
|
33
22
|
inset: 0px;
|
|
34
|
-
bottom: env(
|
|
23
|
+
bottom: env(keyboard-inset-height, 0px);
|
|
35
24
|
margin-left: var(--size-8);
|
|
36
25
|
margin-right: var(--size-8);
|
|
37
26
|
margin-top: var(--size-64);
|
|
38
27
|
display: flex;
|
|
39
28
|
flex-direction: column;
|
|
40
29
|
justify-content: flex-end;
|
|
41
|
-
height: calc(100vh - var(--size-64) - 40px);
|
|
42
30
|
}
|
|
43
31
|
|
|
44
32
|
.np-bottom-sheet-v2-content {
|
|
45
33
|
display: flex;
|
|
46
34
|
flex-direction: column;
|
|
47
35
|
overflow: auto;
|
|
48
|
-
border-top-left-radius:
|
|
49
|
-
border-top-right-radius:
|
|
36
|
+
border-top-left-radius: 32px; /* TODO: Tokenize */
|
|
37
|
+
border-top-right-radius: 32px; /* TODO: Tokenize */
|
|
50
38
|
background-color: var(--color-background-elevated);
|
|
51
39
|
box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
|
|
52
|
-
will-change: transform;
|
|
53
40
|
|
|
54
41
|
&:focus {
|
|
55
42
|
outline: none;
|
|
@@ -10,11 +10,12 @@ 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,
|
|
13
|
+
import { Fragment, useState } from 'react';
|
|
14
14
|
|
|
15
|
-
import { CloseButton
|
|
15
|
+
import { CloseButton } from '../common/closeButton';
|
|
16
16
|
import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
|
|
17
17
|
import { PreventScroll } from '../common/preventScroll/PreventScroll';
|
|
18
|
+
import { Size } from '../common/propsValues/size';
|
|
18
19
|
|
|
19
20
|
export interface BottomSheetProps {
|
|
20
21
|
open: boolean;
|
|
@@ -32,19 +33,6 @@ export interface BottomSheetProps {
|
|
|
32
33
|
onCloseEnd?: () => void;
|
|
33
34
|
}
|
|
34
35
|
|
|
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
|
-
|
|
48
36
|
export function BottomSheet({
|
|
49
37
|
open,
|
|
50
38
|
renderTrigger,
|
|
@@ -66,10 +54,6 @@ export function BottomSheet({
|
|
|
66
54
|
},
|
|
67
55
|
});
|
|
68
56
|
|
|
69
|
-
useEffect(() => {
|
|
70
|
-
freezeScroll(open);
|
|
71
|
-
}, [open]);
|
|
72
|
-
|
|
73
57
|
const dismiss = useDismiss(context);
|
|
74
58
|
const role = useRole(context);
|
|
75
59
|
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
|
package/src/main.css
CHANGED
|
@@ -3519,13 +3519,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3519
3519
|
padding-inline-start: 8px;
|
|
3520
3520
|
padding-inline-start: var(--size-8);
|
|
3521
3521
|
}
|
|
3522
|
-
.wds-select-input-scroll-freeze {
|
|
3523
|
-
scroll-behavior: unset !important;
|
|
3524
|
-
height: 100vh;
|
|
3525
|
-
}
|
|
3526
|
-
.wds-select-input-scroll-freeze body {
|
|
3527
|
-
height: 100vh;
|
|
3528
|
-
}
|
|
3529
3522
|
.np-bottom-sheet-v2-container {
|
|
3530
3523
|
position: relative;
|
|
3531
3524
|
z-index: 1060;
|
|
@@ -3539,8 +3532,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3539
3532
|
transition-property: opacity;
|
|
3540
3533
|
transition-timing-function: ease-out;
|
|
3541
3534
|
transition-duration: 300ms;
|
|
3542
|
-
will-change: transform;
|
|
3543
|
-
min-height: 100vh;
|
|
3544
3535
|
}
|
|
3545
3536
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3546
3537
|
opacity: 0;
|
|
@@ -3548,7 +3539,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3548
3539
|
.np-bottom-sheet-v2 {
|
|
3549
3540
|
position: fixed;
|
|
3550
3541
|
inset: 0px;
|
|
3551
|
-
bottom: env(
|
|
3542
|
+
bottom: env(keyboard-inset-height, 0px);
|
|
3552
3543
|
margin-left: 8px;
|
|
3553
3544
|
margin-left: var(--size-8);
|
|
3554
3545
|
margin-right: 8px;
|
|
@@ -3558,21 +3549,18 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3558
3549
|
display: flex;
|
|
3559
3550
|
flex-direction: column;
|
|
3560
3551
|
justify-content: flex-end;
|
|
3561
|
-
height: calc(100vh - 64px - 40px);
|
|
3562
|
-
height: calc(100vh - var(--size-64) - 40px);
|
|
3563
3552
|
}
|
|
3564
3553
|
.np-bottom-sheet-v2-content {
|
|
3565
3554
|
display: flex;
|
|
3566
3555
|
flex-direction: column;
|
|
3567
3556
|
overflow: auto;
|
|
3568
3557
|
border-top-left-radius: 32px;
|
|
3569
|
-
|
|
3558
|
+
/* TODO: Tokenize */
|
|
3570
3559
|
border-top-right-radius: 32px;
|
|
3571
|
-
|
|
3560
|
+
/* TODO: Tokenize */
|
|
3572
3561
|
background-color: #ffffff;
|
|
3573
3562
|
background-color: var(--color-background-elevated);
|
|
3574
3563
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3575
|
-
will-change: transform;
|
|
3576
3564
|
}
|
|
3577
3565
|
.np-bottom-sheet-v2-content:focus {
|
|
3578
3566
|
outline: none;
|
|
@@ -1,94 +0,0 @@
|
|
|
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,83 +0,0 @@
|
|
|
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,101 +0,0 @@
|
|
|
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
|
-
};
|