@transferwise/components 0.0.0-experimental-27624ec → 0.0.0-experimental-701de4b
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 +0 -1
- package/build/styles/dimmer/Dimmer.css +0 -1
- package/build/styles/main.css +0 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/dimmer/Dimmer.css +0 -1
- package/src/dimmer/Dimmer.less +0 -1
- package/src/inputs/SelectInput.spec.tsx +0 -33
- package/src/inputs/_BottomSheet.tsx +6 -19
- package/src/main.css +0 -1
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +0 -73
- package/src/inputs/SelectInput.test.story.tsx +0 -149
|
@@ -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.style.scrollBehavior = 'unset';
|
|
36
|
-
} else {
|
|
37
|
-
document.documentElement.style.removeProperty('scroll-behavior');
|
|
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, useState
|
|
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.style.scrollBehavior = 'unset';
|
|
34
|
-
} else {
|
|
35
|
-
document.documentElement.style.removeProperty('scroll-behavior');
|
|
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, useState
|
|
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
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":"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
package/src/dimmer/Dimmer.css
CHANGED
package/src/dimmer/Dimmer.less
CHANGED
|
@@ -3,19 +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
13
|
it('renders placeholder', () => {
|
|
20
14
|
render(
|
|
21
15
|
<SelectInput
|
|
@@ -315,31 +309,4 @@ describe('SelectInput', () => {
|
|
|
315
309
|
expect(listBox).not.toHaveAttribute('aria-labelledby');
|
|
316
310
|
});
|
|
317
311
|
});
|
|
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
|
-
});
|
|
345
312
|
});
|
|
@@ -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, useState
|
|
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.
|
|
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
|
-
|
|
48
36
|
export function BottomSheet({
|
|
49
37
|
open,
|
|
50
38
|
renderTrigger,
|
|
@@ -56,6 +44,7 @@ export function BottomSheet({
|
|
|
56
44
|
onCloseEnd,
|
|
57
45
|
}: BottomSheetProps) {
|
|
58
46
|
useVirtualKeyboard();
|
|
47
|
+
|
|
59
48
|
const { refs, context } = useFloating<Element>({
|
|
60
49
|
open,
|
|
61
50
|
onOpenChange: (value) => {
|
|
@@ -65,14 +54,12 @@ export function BottomSheet({
|
|
|
65
54
|
},
|
|
66
55
|
});
|
|
67
56
|
|
|
68
|
-
useEffect(() => {
|
|
69
|
-
freezeScroll(open);
|
|
70
|
-
}, [open]);
|
|
71
|
-
|
|
72
57
|
const dismiss = useDismiss(context);
|
|
73
58
|
const role = useRole(context);
|
|
74
59
|
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
|
|
60
|
+
|
|
75
61
|
const [floatingKey, setFloatingKey] = useState(0);
|
|
62
|
+
|
|
76
63
|
const { theme, screenMode } = useTheme();
|
|
77
64
|
|
|
78
65
|
return (
|
package/src/main.css
CHANGED
|
@@ -1,73 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
-
import { fn, type Mock, userEvent, within } from 'storybook/test';
|
|
3
|
-
import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
|
|
4
|
-
|
|
5
|
-
import { isChromatic } from '../../.storybook/helpers/isChromatic';
|
|
6
|
-
import { allModes } from '../../.storybook/modes';
|
|
7
|
-
import { lorem5, lorem500 } from '../test-utils';
|
|
8
|
-
import { Field } from '../field/Field';
|
|
9
|
-
import Body from '../body';
|
|
10
|
-
import { SelectInput, type SelectInputProps } from './SelectInput';
|
|
11
|
-
|
|
12
|
-
const meta = {
|
|
13
|
-
title: 'Forms/SelectInput/tests',
|
|
14
|
-
component: SelectInput,
|
|
15
|
-
args: {
|
|
16
|
-
onFilterChange: fn() satisfies Mock,
|
|
17
|
-
onChange: fn() satisfies Mock,
|
|
18
|
-
onClose: fn() satisfies Mock,
|
|
19
|
-
onOpen: fn() satisfies Mock,
|
|
20
|
-
},
|
|
21
|
-
tags: ['!autodocs'],
|
|
22
|
-
} satisfies Meta<typeof SelectInput>;
|
|
23
|
-
export default meta;
|
|
24
|
-
|
|
25
|
-
type Story<T, M extends boolean = false> = StoryObj<SelectInputProps<T, M>>;
|
|
26
|
-
|
|
27
|
-
const wait = async (duration = 1000) =>
|
|
28
|
-
new Promise<void>((resolve) => {
|
|
29
|
-
setTimeout(resolve, duration);
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
34
|
-
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
35
|
-
* Expected preview should start with green bar at the top, with yellow section
|
|
36
|
-
* not in the viewport.
|
|
37
|
-
* NB: This test is disabled in Chromatic as there's no known way .
|
|
38
|
-
*/
|
|
39
|
-
export const SmoothScrollReset: Story<string> = {
|
|
40
|
-
args: {
|
|
41
|
-
items: Array.from({ length: 15 }).map((_, id) => ({
|
|
42
|
-
type: 'option',
|
|
43
|
-
value: `option ${id + 1}`,
|
|
44
|
-
})),
|
|
45
|
-
placeholder: 'Select option',
|
|
46
|
-
},
|
|
47
|
-
decorators: [
|
|
48
|
-
(Story) => (
|
|
49
|
-
<>
|
|
50
|
-
<style>{`html { scroll-behavior: smooth; }`}</style>
|
|
51
|
-
<div>
|
|
52
|
-
<div
|
|
53
|
-
className="d-flex align-items-center justify-content-center"
|
|
54
|
-
style={{
|
|
55
|
-
backgroundColor: 'var(--color-bright-yellow)',
|
|
56
|
-
height: 400,
|
|
57
|
-
}}
|
|
58
|
-
>
|
|
59
|
-
This block should not be in the viewport.
|
|
60
|
-
</div>
|
|
61
|
-
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
62
|
-
<Field id="el1" label={lorem5}>
|
|
63
|
-
<Story />
|
|
64
|
-
</Field>
|
|
65
|
-
<Body as="p">{lorem500}</Body>
|
|
66
|
-
</div>
|
|
67
|
-
</>
|
|
68
|
-
),
|
|
69
|
-
],
|
|
70
|
-
play: async ({ canvasElement }) => {
|
|
71
|
-
document.documentElement.scrollTop = 400;
|
|
72
|
-
document.body.scrollTop = 400;
|
|
73
|
-
window.scrollTo(0, 400);
|
|
74
|
-
window.scroll(0, 400);
|
|
75
|
-
await wait(500);
|
|
76
|
-
const canvas = within(canvasElement);
|
|
77
|
-
const triggerButton = canvas.getByRole('combobox');
|
|
78
|
-
await userEvent.click(triggerButton);
|
|
79
|
-
},
|
|
80
|
-
globals: {
|
|
81
|
-
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
82
|
-
},
|
|
83
|
-
parameters: {
|
|
84
|
-
chromatic: {
|
|
85
|
-
disableSnapshot: true,
|
|
86
|
-
},
|
|
87
|
-
},
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* This test ensures that when the SelectInput is used within a scrollable page,
|
|
92
|
-
* opening the dropdown does not cause any unwanted scrolling or layout shifts.
|
|
93
|
-
* Expected preview should start with green bar at the top, with yellow section
|
|
94
|
-
* not in the viewport.
|
|
95
|
-
* NB: This test is disabled in Chromatic as there's no known way .
|
|
96
|
-
*/
|
|
97
|
-
export const SmoothScrollReset2: Story<string> = {
|
|
98
|
-
args: {
|
|
99
|
-
items: Array.from({ length: 15 }).map((_, id) => ({
|
|
100
|
-
type: 'option',
|
|
101
|
-
value: `option ${id + 1}`,
|
|
102
|
-
})),
|
|
103
|
-
placeholder: 'Select option',
|
|
104
|
-
},
|
|
105
|
-
decorators: [
|
|
106
|
-
(Story) => (
|
|
107
|
-
<>
|
|
108
|
-
<style>{`html { scroll-behavior: smooth; width: 414px; height 800px ; overflow: auto}`}</style>
|
|
109
|
-
<div>
|
|
110
|
-
<div
|
|
111
|
-
className="d-flex align-items-center justify-content-center"
|
|
112
|
-
style={{
|
|
113
|
-
backgroundColor: 'var(--color-bright-yellow)',
|
|
114
|
-
height: 400,
|
|
115
|
-
}}
|
|
116
|
-
>
|
|
117
|
-
This block should not be in the viewport.
|
|
118
|
-
</div>
|
|
119
|
-
<div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
|
|
120
|
-
<Field id="el1" label={lorem5}>
|
|
121
|
-
<Story />
|
|
122
|
-
</Field>
|
|
123
|
-
<Body as="p">{lorem500}</Body>
|
|
124
|
-
</div>
|
|
125
|
-
</>
|
|
126
|
-
),
|
|
127
|
-
],
|
|
128
|
-
play: async ({ canvasElement }) => {
|
|
129
|
-
document.documentElement.scrollTop = 400;
|
|
130
|
-
document.body.scrollTop = 400;
|
|
131
|
-
window.scrollTo(0, 400);
|
|
132
|
-
window.scroll(0, 400);
|
|
133
|
-
await wait(500);
|
|
134
|
-
const canvas = within(canvasElement);
|
|
135
|
-
const triggerButton = canvas.getByRole('combobox');
|
|
136
|
-
await userEvent.click(triggerButton);
|
|
137
|
-
},
|
|
138
|
-
globals: {
|
|
139
|
-
viewport: { value: allModes.largeMobile.viewport, isRotated: false },
|
|
140
|
-
},
|
|
141
|
-
parameters: {
|
|
142
|
-
chromatic: {
|
|
143
|
-
delay: 250,
|
|
144
|
-
modes: {
|
|
145
|
-
largeMobile: allModes.largeMobile,
|
|
146
|
-
},
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
};
|