@transferwise/components 0.0.0-experimental-f5ee9a7 → 0.0.0-experimental-89c4b74
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 +1 -0
- package/build/styles/dimmer/Dimmer.css +1 -0
- package/build/styles/main.css +1 -0
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +73 -0
- package/src/dimmer/Dimmer.css +1 -0
- package/src/dimmer/Dimmer.less +1 -0
- package/src/inputs/SelectInput.spec.tsx +33 -0
- package/src/inputs/SelectInput.test.story.tsx +69 -0
- package/src/inputs/_BottomSheet.tsx +19 -6
- package/src/main.css +1 -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.style.scrollBehavior = 'unset';
|
|
36
|
+
} else {
|
|
37
|
+
document.documentElement.style.removeProperty('scroll-behavior');
|
|
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, useState, useEffect } 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.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n if (shouldFreeze) {\n document.documentElement.style.scrollBehavior = 'unset';\n } else {\n document.documentElement.style.removeProperty('scroll-behavior');\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 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 const [floatingKey, setFloatingKey] = useState(0);\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","style","scrollBehavior","removeProperty","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.style.scrollBehavior = 'unset';
|
|
34
|
+
} else {
|
|
35
|
+
document.documentElement.style.removeProperty('scroll-behavior');
|
|
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, useState, useEffect } 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.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n if (shouldFreeze) {\n document.documentElement.style.scrollBehavior = 'unset';\n } else {\n document.documentElement.style.removeProperty('scroll-behavior');\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 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 const [floatingKey, setFloatingKey] = useState(0);\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","style","scrollBehavior","removeProperty","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
package/build/styles/main.css
CHANGED
|
@@ -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,+BA8FlB"}
|
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-89c4b74",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"storybook": "^9.1.3",
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
|
-
"@wise/components-theming": "1.7.0",
|
|
87
|
-
"@transferwise/neptune-css": "14.25.0",
|
|
88
86
|
"@transferwise/less-config": "3.1.2",
|
|
87
|
+
"@transferwise/neptune-css": "14.25.0",
|
|
88
|
+
"@wise/components-theming": "1.7.0",
|
|
89
89
|
"@wise/wds-configs": "0.0.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
|
|
4
|
+
import Body from '../../body/Body';
|
|
5
|
+
import Button from '../../button';
|
|
6
|
+
import { lorem100, lorem500 } from '../../test-utils';
|
|
7
|
+
import Title from '../../title/Title';
|
|
8
|
+
import { Typography } from '../propsValues/typography';
|
|
9
|
+
|
|
10
|
+
import BottomSheet from './BottomSheet';
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
component: BottomSheet,
|
|
14
|
+
title: 'Dialogs/BottomSheet/tests',
|
|
15
|
+
tags: ['!autodocs'],
|
|
16
|
+
args: {
|
|
17
|
+
open: false,
|
|
18
|
+
},
|
|
19
|
+
} satisfies Meta<typeof BottomSheet>;
|
|
20
|
+
|
|
21
|
+
type Story = StoryObj<typeof BottomSheet>;
|
|
22
|
+
|
|
23
|
+
export const SmoothScrollReset: Story = {
|
|
24
|
+
args: {
|
|
25
|
+
children: (
|
|
26
|
+
<>
|
|
27
|
+
<Title type={Typography.TITLE_SECTION}>Money without borders</Title>
|
|
28
|
+
<Body as="p">{lorem100}</Body>
|
|
29
|
+
<Body as="p">{lorem100}</Body>
|
|
30
|
+
</>
|
|
31
|
+
),
|
|
32
|
+
},
|
|
33
|
+
decorators: [
|
|
34
|
+
(Story) => (
|
|
35
|
+
<>
|
|
36
|
+
<style>{'html { scroll-behavior: smooth; }'}</style>
|
|
37
|
+
<div style={{ maxWidth: 500 }}>
|
|
38
|
+
<Story />
|
|
39
|
+
</div>
|
|
40
|
+
</>
|
|
41
|
+
),
|
|
42
|
+
],
|
|
43
|
+
parameters: {
|
|
44
|
+
chromatic: {
|
|
45
|
+
delay: 1000,
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
render: ({ open, ...args }) => {
|
|
49
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<Body as="p" className="disabled">
|
|
54
|
+
{lorem100}
|
|
55
|
+
</Body>
|
|
56
|
+
<Body as="p" className="m-b-5 disabled">
|
|
57
|
+
{lorem100}
|
|
58
|
+
</Body>
|
|
59
|
+
<Button onClick={() => setIsOpen(true)}>Open BottomSheet</Button>
|
|
60
|
+
<BottomSheet
|
|
61
|
+
{...args}
|
|
62
|
+
open={isOpen}
|
|
63
|
+
onClose={() => {
|
|
64
|
+
setIsOpen(false);
|
|
65
|
+
}}
|
|
66
|
+
/>
|
|
67
|
+
<Body as="p" className="m-t-5 disabled">
|
|
68
|
+
{lorem500}
|
|
69
|
+
</Body>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
},
|
|
73
|
+
};
|
package/src/dimmer/Dimmer.css
CHANGED
package/src/dimmer/Dimmer.less
CHANGED
|
@@ -3,13 +3,19 @@ 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
|
+
|
|
13
19
|
it('renders placeholder', () => {
|
|
14
20
|
render(
|
|
15
21
|
<SelectInput
|
|
@@ -309,4 +315,31 @@ describe('SelectInput', () => {
|
|
|
309
315
|
expect(listBox).not.toHaveAttribute('aria-labelledby');
|
|
310
316
|
});
|
|
311
317
|
});
|
|
318
|
+
|
|
319
|
+
describe('smooth scroll reset', () => {
|
|
320
|
+
const options: SelectInputOptionItem[] = [
|
|
321
|
+
{ type: 'option', value: 'Banana' },
|
|
322
|
+
{ type: 'option', value: 'Orange' },
|
|
323
|
+
{ type: 'option', value: 'Olive' },
|
|
324
|
+
];
|
|
325
|
+
|
|
326
|
+
beforeEach(() => {
|
|
327
|
+
document.documentElement.style.scrollBehavior = 'smooth';
|
|
328
|
+
(useScreenSize as jest.Mock).mockReturnValue(false);
|
|
329
|
+
});
|
|
330
|
+
|
|
331
|
+
afterEach(() => {
|
|
332
|
+
document.documentElement.removeAttribute('style');
|
|
333
|
+
});
|
|
334
|
+
|
|
335
|
+
it('renders with custom scroll behavior', async () => {
|
|
336
|
+
const { container } = render(<SelectInput items={options} />);
|
|
337
|
+
|
|
338
|
+
await userEvent.click(screen.getByRole('combobox'));
|
|
339
|
+
expect(document.documentElement).toHaveStyle({ scrollBehavior: 'unset' });
|
|
340
|
+
|
|
341
|
+
await userEvent.click(document.documentElement);
|
|
342
|
+
expect(container).toHaveStyle({ scrollBehavior: '' });
|
|
343
|
+
});
|
|
344
|
+
});
|
|
312
345
|
});
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
+
import { fn, type Mock, userEvent, within } from 'storybook/test';
|
|
3
|
+
|
|
4
|
+
import { Field } from '../field/Field';
|
|
5
|
+
import { SelectInput, type SelectInputProps } from './SelectInput';
|
|
6
|
+
import { lorem5, lorem500 } from '../test-utils';
|
|
7
|
+
import Body from '../body';
|
|
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
|
+
/**
|
|
25
|
+
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
26
|
+
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
27
|
+
* Expected snapshot should start with green bar at the top, with yellow section
|
|
28
|
+
* not in the viewport
|
|
29
|
+
*/
|
|
30
|
+
export const SmoothScrollReset: Story<string> = {
|
|
31
|
+
args: {
|
|
32
|
+
items: Array.from({ length: 15 }).map((_, id) => ({
|
|
33
|
+
type: 'option',
|
|
34
|
+
value: `option ${id + 1}`,
|
|
35
|
+
})),
|
|
36
|
+
placeholder: 'Select option',
|
|
37
|
+
},
|
|
38
|
+
decorators: [
|
|
39
|
+
(Story) => (
|
|
40
|
+
<>
|
|
41
|
+
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
42
|
+
<div style={{ maxWidth: 400 }}>
|
|
43
|
+
<div
|
|
44
|
+
className="d-flex align-items-center justify-content-center"
|
|
45
|
+
style={{ height: 400, backgroundColor: 'var(--color-bright-yellow)' }}
|
|
46
|
+
>
|
|
47
|
+
This block should not be visible on a snapshot
|
|
48
|
+
</div>
|
|
49
|
+
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
50
|
+
<Field id="el1" label={lorem5}>
|
|
51
|
+
<Story />
|
|
52
|
+
</Field>
|
|
53
|
+
<Body as="p">{lorem500}</Body>
|
|
54
|
+
</div>
|
|
55
|
+
</>
|
|
56
|
+
),
|
|
57
|
+
],
|
|
58
|
+
play: async ({ canvasElement, step }) => {
|
|
59
|
+
window.scrollTo({ top: 400, behavior: 'instant' });
|
|
60
|
+
const canvas = within(canvasElement);
|
|
61
|
+
const triggerButton = canvas.getByRole('combobox');
|
|
62
|
+
await userEvent.click(triggerButton);
|
|
63
|
+
},
|
|
64
|
+
parameters: {
|
|
65
|
+
chromatic: {
|
|
66
|
+
delay: 1000,
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
};
|
|
@@ -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, useState, useEffect } 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.
|
|
39
|
+
*/
|
|
40
|
+
const freezeScroll = (shouldFreeze = true) => {
|
|
41
|
+
if (shouldFreeze) {
|
|
42
|
+
document.documentElement.style.scrollBehavior = 'unset';
|
|
43
|
+
} else {
|
|
44
|
+
document.documentElement.style.removeProperty('scroll-behavior');
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
36
48
|
export function BottomSheet({
|
|
37
49
|
open,
|
|
38
50
|
renderTrigger,
|
|
@@ -44,7 +56,6 @@ export function BottomSheet({
|
|
|
44
56
|
onCloseEnd,
|
|
45
57
|
}: BottomSheetProps) {
|
|
46
58
|
useVirtualKeyboard();
|
|
47
|
-
|
|
48
59
|
const { refs, context } = useFloating<Element>({
|
|
49
60
|
open,
|
|
50
61
|
onOpenChange: (value) => {
|
|
@@ -54,12 +65,14 @@ export function BottomSheet({
|
|
|
54
65
|
},
|
|
55
66
|
});
|
|
56
67
|
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
freezeScroll(open);
|
|
70
|
+
}, [open]);
|
|
71
|
+
|
|
57
72
|
const dismiss = useDismiss(context);
|
|
58
73
|
const role = useRole(context);
|
|
59
74
|
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
|
|
60
|
-
|
|
61
75
|
const [floatingKey, setFloatingKey] = useState(0);
|
|
62
|
-
|
|
63
76
|
const { theme, screenMode } = useTheme();
|
|
64
77
|
|
|
65
78
|
return (
|