@transferwise/components 0.0.0-experimental-ab487a4 → 0.0.0-experimental-a8d876e
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.
|
@@ -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, useEffect, useState } from 'react';\n\nimport { CloseButton , Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open
|
|
1
|
+
{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useEffect, useState } from 'react';\n\nimport { CloseButton , Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open. It complements <PreventScroll />.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n if (shouldFreeze) {\n document.documentElement.classList.add('wds-select-input-scroll-freeze');\n } else {\n document.documentElement.classList.remove('wds-select-input-scroll-freeze');\n }\n};\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard();\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n useEffect(() => {\n freezeScroll(open);\n }, [open]);\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider\n theme=\"personal\"\n screenMode={theme === 'personal' ? screenMode : 'light'}\n isNotRootProvider\n >\n <Transition\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <Transition.Child\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <Transition.Child\n ref={refs.setFloating}\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </Transition.Child>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","classList","add","remove","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
|
@@ -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, useEffect, useState } from 'react';\n\nimport { CloseButton , Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open
|
|
1
|
+
{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useEffect, useState } from 'react';\n\nimport { CloseButton , Size } from '../common';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface BottomSheetProps {\n open: boolean;\n renderTrigger?: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\n/**\n * App pages set scroll-behavior to 'smooth' which causes mobile Safari to\n * slow-scroll and glitch. This function temporarily disables that behaviour\n * while the BottomSheet is open. It complements <PreventScroll />.\n */\nconst freezeScroll = (shouldFreeze = true) => {\n if (shouldFreeze) {\n document.documentElement.classList.add('wds-select-input-scroll-freeze');\n } else {\n document.documentElement.classList.remove('wds-select-input-scroll-freeze');\n }\n};\n\nexport function BottomSheet({\n open,\n renderTrigger,\n title,\n initialFocusRef,\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: BottomSheetProps) {\n useVirtualKeyboard();\n\n const { refs, context } = useFloating<Element>({\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n useEffect(() => {\n freezeScroll(open);\n }, [open]);\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger?.({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider\n theme=\"personal\"\n screenMode={theme === 'personal' ? screenMode : 'light'}\n isNotRootProvider\n >\n <Transition\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <Transition.Child\n className=\"np-bottom-sheet-v2-backdrop\"\n enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n />\n\n <div className=\"np-bottom-sheet-v2\">\n <FocusScope>\n <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n <Fragment\n key={floatingKey} // Force inner state invalidation on open\n >\n <Transition.Child\n ref={refs.setFloating}\n className=\"np-bottom-sheet-v2-content\"\n enterFrom=\"np-bottom-sheet-v2-content--closed\"\n leaveTo=\"np-bottom-sheet-v2-content--closed\"\n {...getFloatingProps()}\n >\n <div className=\"np-bottom-sheet-v2-header\">\n <CloseButton\n size={Size.SMALL}\n onClick={() => {\n onClose?.();\n }}\n />\n </div>\n <div\n className={clsx(\n 'np-bottom-sheet-v2-content-inner',\n title && 'np-bottom-sheet-v2-content-inner--has-title',\n padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n )}\n >\n {title ? (\n <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n {children}\n </div>\n </div>\n </Transition.Child>\n </Fragment>\n </FloatingFocusManager>\n </FocusScope>\n </div>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["freezeScroll","shouldFreeze","document","documentElement","classList","add","remove","BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","useEffect","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,YAAY,GAAGA,CAACC,YAAY,GAAG,IAAI,KAAI;AAC3C,EAAA,IAAIA,YAAY,EAAE;IAChBC,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,GAAG,CAAC,gCAAgC,CAAC;AAC1E,EAAA,CAAC,MAAM;IACLH,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACE,MAAM,CAAC,gCAAgC,CAAC;AAC7E,EAAA;AACF,CAAC;AAEK,SAAUC,WAAWA,CAAC;EAC1BC,IAAI;EACJC,aAAa;EACbC,KAAK;EACLC,eAAe;AACfC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAU,CACO,EAAA;AACjBC,EAAAA,kBAAkB,EAAE;EAEpB,MAAM;IAAEC,IAAI;AAAEC,IAAAA;GAAS,GAAGC,WAAW,CAAU;IAC7CX,IAAI;IACJY,YAAY,EAAGC,KAAK,IAAI;MACtB,IAAI,CAACA,KAAK,EAAE;AACVP,QAAAA,OAAO,IAAI;AACb,MAAA;AACF,IAAA;AACD,GAAA,CAAC;AAEFQ,EAAAA,SAAS,CAAC,MAAK;IACbtB,YAAY,CAACQ,IAAI,CAAC;AACpB,EAAA,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AAEV,EAAA,MAAMe,OAAO,GAAGC,UAAU,CAACN,OAAO,CAAC;AACnC,EAAA,MAAMO,IAAI,GAAGC,OAAO,CAACR,OAAO,CAAC;EAC7B,MAAM;IAAES,iBAAiB;AAAEC,IAAAA;GAAkB,GAAGC,eAAe,CAAC,CAACN,OAAO,EAAEE,IAAI,CAAC,CAAC;EAEhF,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,CAAC,CAAC;EAEjD,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAxB,IAAAA,QAAA,EAAA,CACGL,IAAI,gBAAG8B,GAAA,CAACC,aAAa,EAAA,EAAA,CAAG,GAAG,IAAI,EAC/B9B,aAAa,GAAG;MACf+B,GAAG,EAAEvB,IAAI,CAACwB,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf;AACtB,KAAA,CAAC,eAEFW,GAAA,CAACK,cAAc,EAAA;MAAA9B,QAAA,eACbyB,GAAA,CAACM,aAAa,EAAA;AACZX,QAAAA,KAAK,EAAC,UAAU;AAChBC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QACxDW,iBAAiB,EAAA,IAAA;QAAAhC,QAAA,eAEjBuB,IAAA,CAACU,UAAU,EAAA;AACTC,UAAAA,IAAI,EAAEvC,IAAK;AACXwC,UAAAA,SAAS,EAAC,8BAA8B;UACxCC,WAAW,EAAEA,MAAK;AAChBlB,YAAAA,cAAc,CAAEmB,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;UACpC,CAAE;AACFC,UAAAA,UAAU,EAAEpC,UAAW;AAAAF,UAAAA,QAAA,EAAA,cAEvByB,GAAA,CAACQ,UAAU,CAACM,KAAK,EAAA;AACfJ,YAAAA,SAAS,EAAC,6BAA6B;AACvCK,YAAAA,SAAS,EAAC,qCAAqC;AAC/CC,YAAAA,OAAO,EAAC;WAAqC,CAG/C,eAAAhB,GAAA,CAAA,KAAA,EAAA;AAAKU,YAAAA,SAAS,EAAC,oBAAoB;YAAAnC,QAAA,eACjCyB,GAAA,CAACiB,UAAU,EAAA;cAAA1C,QAAA,eACTyB,GAAA,CAACkB,oBAAoB,EAAA;AAACtC,gBAAAA,OAAO,EAAEA,OAAQ;AAACuC,gBAAAA,YAAY,EAAE9C,eAAgB;gBAAAE,QAAA,eACpEyB,GAAA,CAACoB,UAAQ,EAAA;AAAA7C,kBAAAA,QAAA,eAGPuB,IAAA,CAACU,UAAU,CAACM,KAAK,EAAA;oBACfZ,GAAG,EAAEvB,IAAI,CAAC0C,WAAY;AACtBX,oBAAAA,SAAS,EAAC,4BAA4B;AACtCK,oBAAAA,SAAS,EAAC,oCAAoC;AAC9CC,oBAAAA,OAAO,EAAC,oCAAoC;oBAAA,GACxC1B,gBAAgB,EAAE;AAAAf,oBAAAA,QAAA,gBAEtByB,GAAA,CAAA,KAAA,EAAA;AAAKU,sBAAAA,SAAS,EAAC,2BAA2B;sBAAAnC,QAAA,eACxCyB,GAAA,CAACsB,WAAW,EAAA;wBACVC,IAAI,EAAEC,IAAI,CAACC,KAAM;wBACjBC,OAAO,EAAEA,MAAK;AACZlD,0BAAAA,OAAO,IAAI;AACb,wBAAA;uBAAE;qBAED,CACL,eAAAsB,IAAA,CAAA,KAAA,EAAA;AACEY,sBAAAA,SAAS,EAAEiB,IAAI,CACb,kCAAkC,EAClCvD,KAAK,IAAI,6CAA6C,EACtDE,OAAO,KAAK,IAAI,IAAI,8CAA8C,CAClE;sBAAAC,QAAA,EAAA,CAEDH,KAAK,gBACJ4B,GAAA,CAAA,IAAA,EAAA;AAAIU,wBAAAA,SAAS,EAAC,6CAA6C;AAAAnC,wBAAAA,QAAA,EAAEH;AAAK,uBAAK,CAAC,GACtE,IAAI,eACR4B,GAAA,CAAA,KAAA,EAAA;AAAKU,wBAAAA,SAAS,EAAC,8CAA8C;AAAAnC,wBAAAA,QAAA,EAC1DA;AAAQ,uBACN,CACP;AAAA,qBAAK,CACP;mBAAkB;AACpB,iBAAA,EAhCOiB,WAgCG;eACU;aACZ;AACd,WAAK,CACP;SAAY;OACC;AACjB,KAAgB,CAClB;AAAA,GAAA,CAAG;AAEP;;;;"}
|
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-a8d876e",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
86
|
"@transferwise/less-config": "3.1.2",
|
|
87
|
+
"@transferwise/neptune-css": "14.25.0",
|
|
87
88
|
"@wise/components-theming": "1.7.0",
|
|
88
|
-
"@wise/wds-configs": "0.0.0"
|
|
89
|
-
"@transferwise/neptune-css": "14.25.0"
|
|
89
|
+
"@wise/wds-configs": "0.0.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@transferwise/icons": "^3.22.4",
|
|
@@ -3,13 +3,21 @@ import { userEvent } from '@testing-library/user-event';
|
|
|
3
3
|
|
|
4
4
|
import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
|
|
5
5
|
|
|
6
|
+
import { useScreenSize } from '../common/hooks/useScreenSize';
|
|
6
7
|
import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
|
|
7
8
|
import { Field } from '../field/Field';
|
|
8
9
|
|
|
9
10
|
mockMatchMedia();
|
|
10
11
|
mockResizeObserver();
|
|
12
|
+
jest.mock('../common/hooks/useScreenSize');
|
|
11
13
|
|
|
12
14
|
describe('SelectInput', () => {
|
|
15
|
+
beforeEach(() => {
|
|
16
|
+
(useScreenSize as jest.Mock).mockReturnValue(true);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
afterEach(jest.clearAllMocks);
|
|
20
|
+
|
|
13
21
|
it('renders placeholder', () => {
|
|
14
22
|
render(
|
|
15
23
|
<SelectInput
|
|
@@ -309,4 +317,29 @@ describe('SelectInput', () => {
|
|
|
309
317
|
expect(listBox).not.toHaveAttribute('aria-labelledby');
|
|
310
318
|
});
|
|
311
319
|
});
|
|
320
|
+
|
|
321
|
+
describe('smooth scroll reset', () => {
|
|
322
|
+
const options: SelectInputOptionItem[] = [
|
|
323
|
+
{ type: 'option', value: 'Banana' },
|
|
324
|
+
{ type: 'option', value: 'Orange' },
|
|
325
|
+
{ type: 'option', value: 'Olive' },
|
|
326
|
+
];
|
|
327
|
+
|
|
328
|
+
beforeEach(() => {
|
|
329
|
+
(useScreenSize as jest.Mock).mockReturnValue(false);
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
afterEach(jest.clearAllMocks);
|
|
333
|
+
|
|
334
|
+
it('toggles scroll-resetting class', async () => {
|
|
335
|
+
render(<SelectInput items={options} />);
|
|
336
|
+
expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
|
|
337
|
+
|
|
338
|
+
await userEvent.click(screen.getByRole('combobox'));
|
|
339
|
+
expect(document.documentElement).toHaveClass('wds-select-input-scroll-freeze');
|
|
340
|
+
|
|
341
|
+
await userEvent.click(document.documentElement);
|
|
342
|
+
expect(document.documentElement).not.toHaveClass('wds-select-input-scroll-freeze');
|
|
343
|
+
});
|
|
344
|
+
});
|
|
312
345
|
});
|
|
@@ -35,7 +35,7 @@ export interface BottomSheetProps {
|
|
|
35
35
|
/**
|
|
36
36
|
* App pages set scroll-behavior to 'smooth' which causes mobile Safari to
|
|
37
37
|
* slow-scroll and glitch. This function temporarily disables that behaviour
|
|
38
|
-
* while the BottomSheet is open.
|
|
38
|
+
* while the BottomSheet is open. It complements <PreventScroll />.
|
|
39
39
|
*/
|
|
40
40
|
const freezeScroll = (shouldFreeze = true) => {
|
|
41
41
|
if (shouldFreeze) {
|