@transferwise/components 46.114.0 → 46.114.1
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/common/hooks/useVirtualKeyboard.js +4 -3
- package/build/common/hooks/useVirtualKeyboard.js.map +1 -1
- package/build/common/hooks/useVirtualKeyboard.mjs +4 -3
- package/build/common/hooks/useVirtualKeyboard.mjs.map +1 -1
- package/build/i18n/nl.json +1 -1
- package/build/i18n/nl.json.js +1 -1
- package/build/i18n/nl.json.mjs +1 -1
- package/build/inputs/_BottomSheet.js +1 -1
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs +1 -1
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/types/common/hooks/useVirtualKeyboard.d.ts +2 -1
- package/build/types/common/hooks/useVirtualKeyboard.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/common/hooks/useVirtualKeyboard.ts +4 -3
- package/src/i18n/nl.json +1 -1
- package/src/inputs/_BottomSheet.tsx +1 -1
- package/src/provider/theme/ThemeProvider.story.tsx +23 -0
|
@@ -6,20 +6,21 @@ var React = require('react');
|
|
|
6
6
|
* This progressive enhancement uses an experimental API, it might change,
|
|
7
7
|
* and at the time of authoring is not supported on iOS or mobile Firefox.
|
|
8
8
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
|
|
9
|
+
* @param open - Controls whether the virtual keyboard should overlay content
|
|
9
10
|
*/
|
|
10
|
-
function useVirtualKeyboard() {
|
|
11
|
+
function useVirtualKeyboard(open) {
|
|
11
12
|
React.useEffect(() => {
|
|
12
13
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
|
|
13
14
|
if ('virtualKeyboard' in navigator) {
|
|
14
15
|
const virtualKeyboard = navigator.virtualKeyboard;
|
|
15
16
|
const initialOverlaysContent = virtualKeyboard.overlaysContent;
|
|
16
|
-
virtualKeyboard.overlaysContent =
|
|
17
|
+
virtualKeyboard.overlaysContent = open;
|
|
17
18
|
return () => {
|
|
18
19
|
virtualKeyboard.overlaysContent = initialOverlaysContent;
|
|
19
20
|
};
|
|
20
21
|
}
|
|
21
22
|
/* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
|
|
22
|
-
}, []);
|
|
23
|
+
}, [open]);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
exports.useVirtualKeyboard = useVirtualKeyboard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualKeyboard.js","sources":["../../../src/common/hooks/useVirtualKeyboard.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * This progressive enhancement uses an experimental API, it might change,\n * and at the time of authoring is not supported on iOS or mobile Firefox.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard\n */\nexport function useVirtualKeyboard() {\n useEffect(() => {\n /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */\n if ('virtualKeyboard' in navigator) {\n const virtualKeyboard: any = navigator.virtualKeyboard;\n const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;\n virtualKeyboard.overlaysContent =
|
|
1
|
+
{"version":3,"file":"useVirtualKeyboard.js","sources":["../../../src/common/hooks/useVirtualKeyboard.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * This progressive enhancement uses an experimental API, it might change,\n * and at the time of authoring is not supported on iOS or mobile Firefox.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard\n * @param open - Controls whether the virtual keyboard should overlay content\n */\nexport function useVirtualKeyboard(open: boolean) {\n useEffect(() => {\n /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */\n if ('virtualKeyboard' in navigator) {\n const virtualKeyboard: any = navigator.virtualKeyboard;\n const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;\n virtualKeyboard.overlaysContent = open;\n return () => {\n virtualKeyboard.overlaysContent = initialOverlaysContent;\n };\n }\n /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */\n }, [open]);\n}\n"],"names":["useVirtualKeyboard","open","useEffect","navigator","virtualKeyboard","initialOverlaysContent","overlaysContent"],"mappings":";;;;AAEA;;;;;AAKG;AACG,SAAUA,kBAAkBA,CAACC,IAAa,EAAA;AAC9CC,EAAAA,eAAS,CAAC,MAAK;AACb;IACA,IAAI,iBAAiB,IAAIC,SAAS,EAAE;AAClC,MAAA,MAAMC,eAAe,GAAQD,SAAS,CAACC,eAAe;AACtD,MAAA,MAAMC,sBAAsB,GAAYD,eAAe,CAACE,eAAe;MACvEF,eAAe,CAACE,eAAe,GAAGL,IAAI;AACtC,MAAA,OAAO,MAAK;QACVG,eAAe,CAACE,eAAe,GAAGD,sBAAsB;MAC1D,CAAC;AACH,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;AACZ;;;;"}
|
|
@@ -4,20 +4,21 @@ import { useEffect } from 'react';
|
|
|
4
4
|
* This progressive enhancement uses an experimental API, it might change,
|
|
5
5
|
* and at the time of authoring is not supported on iOS or mobile Firefox.
|
|
6
6
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
|
|
7
|
+
* @param open - Controls whether the virtual keyboard should overlay content
|
|
7
8
|
*/
|
|
8
|
-
function useVirtualKeyboard() {
|
|
9
|
+
function useVirtualKeyboard(open) {
|
|
9
10
|
useEffect(() => {
|
|
10
11
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
|
|
11
12
|
if ('virtualKeyboard' in navigator) {
|
|
12
13
|
const virtualKeyboard = navigator.virtualKeyboard;
|
|
13
14
|
const initialOverlaysContent = virtualKeyboard.overlaysContent;
|
|
14
|
-
virtualKeyboard.overlaysContent =
|
|
15
|
+
virtualKeyboard.overlaysContent = open;
|
|
15
16
|
return () => {
|
|
16
17
|
virtualKeyboard.overlaysContent = initialOverlaysContent;
|
|
17
18
|
};
|
|
18
19
|
}
|
|
19
20
|
/* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
|
|
20
|
-
}, []);
|
|
21
|
+
}, [open]);
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
export { useVirtualKeyboard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualKeyboard.mjs","sources":["../../../src/common/hooks/useVirtualKeyboard.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * This progressive enhancement uses an experimental API, it might change,\n * and at the time of authoring is not supported on iOS or mobile Firefox.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard\n */\nexport function useVirtualKeyboard() {\n useEffect(() => {\n /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */\n if ('virtualKeyboard' in navigator) {\n const virtualKeyboard: any = navigator.virtualKeyboard;\n const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;\n virtualKeyboard.overlaysContent =
|
|
1
|
+
{"version":3,"file":"useVirtualKeyboard.mjs","sources":["../../../src/common/hooks/useVirtualKeyboard.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * This progressive enhancement uses an experimental API, it might change,\n * and at the time of authoring is not supported on iOS or mobile Firefox.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard\n * @param open - Controls whether the virtual keyboard should overlay content\n */\nexport function useVirtualKeyboard(open: boolean) {\n useEffect(() => {\n /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */\n if ('virtualKeyboard' in navigator) {\n const virtualKeyboard: any = navigator.virtualKeyboard;\n const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;\n virtualKeyboard.overlaysContent = open;\n return () => {\n virtualKeyboard.overlaysContent = initialOverlaysContent;\n };\n }\n /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */\n }, [open]);\n}\n"],"names":["useVirtualKeyboard","open","useEffect","navigator","virtualKeyboard","initialOverlaysContent","overlaysContent"],"mappings":";;AAEA;;;;;AAKG;AACG,SAAUA,kBAAkBA,CAACC,IAAa,EAAA;AAC9CC,EAAAA,SAAS,CAAC,MAAK;AACb;IACA,IAAI,iBAAiB,IAAIC,SAAS,EAAE;AAClC,MAAA,MAAMC,eAAe,GAAQD,SAAS,CAACC,eAAe;AACtD,MAAA,MAAMC,sBAAsB,GAAYD,eAAe,CAACE,eAAe;MACvEF,eAAe,CAACE,eAAe,GAAGL,IAAI;AACtC,MAAA,OAAO,MAAK;QACVG,eAAe,CAACE,eAAe,GAAGD,sBAAsB;MAC1D,CAAC;AACH,IAAA;AACA;AACF,EAAA,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;AACZ;;;;"}
|
package/build/i18n/nl.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"neptune.DateLookup.selected": "geselecteerd",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 jaar",
|
|
18
18
|
"neptune.DateLookup.year": "jaar",
|
|
19
|
-
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "
|
|
19
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
|
|
20
20
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
|
|
21
21
|
"neptune.FlowNavigation.back": "terug naar vorige stap",
|
|
22
22
|
"neptune.Info.ariaLabel": "Meer informatie",
|
package/build/i18n/nl.json.js
CHANGED
|
@@ -20,7 +20,7 @@ var nl = {
|
|
|
20
20
|
"neptune.DateLookup.selected": "geselecteerd",
|
|
21
21
|
"neptune.DateLookup.twentyYears": "20 jaar",
|
|
22
22
|
"neptune.DateLookup.year": "jaar",
|
|
23
|
-
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "
|
|
23
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
|
|
24
24
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
|
|
25
25
|
"neptune.FlowNavigation.back": "terug naar vorige stap",
|
|
26
26
|
"neptune.Info.ariaLabel": "Meer informatie",
|
package/build/i18n/nl.json.mjs
CHANGED
|
@@ -16,7 +16,7 @@ var nl = {
|
|
|
16
16
|
"neptune.DateLookup.selected": "geselecteerd",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 jaar",
|
|
18
18
|
"neptune.DateLookup.year": "jaar",
|
|
19
|
-
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "
|
|
19
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
|
|
20
20
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
|
|
21
21
|
"neptune.FlowNavigation.back": "terug naar vorige stap",
|
|
22
22
|
"neptune.Info.ariaLabel": "Meer informatie",
|
|
@@ -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/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":";;;;;;;;;;;;;;AAmCM,SAAUA,WAAWA,CAAC;EAC1BC,IAAI;EACJC,aAAa;EACbC,KAAK;EACLC,eAAe;AACfC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAU,CACO,EAAA;
|
|
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(open);\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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"}
|
|
@@ -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/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":";;;;;;;;;;;;AAmCM,SAAUA,WAAWA,CAAC;EAC1BC,IAAI;EACJC,aAAa;EACbC,KAAK;EACLC,eAAe;AACfC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAU,CACO,EAAA;
|
|
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(open);\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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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* This progressive enhancement uses an experimental API, it might change,
|
|
3
3
|
* and at the time of authoring is not supported on iOS or mobile Firefox.
|
|
4
4
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
|
|
5
|
+
* @param open - Controls whether the virtual keyboard should overlay content
|
|
5
6
|
*/
|
|
6
|
-
export declare function useVirtualKeyboard(): void;
|
|
7
|
+
export declare function useVirtualKeyboard(open: boolean): void;
|
|
7
8
|
//# sourceMappingURL=useVirtualKeyboard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,QAa/C"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.114.
|
|
3
|
+
"version": "46.114.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"framer-motion": "^12.23.22",
|
|
87
87
|
"@transferwise/less-config": "3.1.2",
|
|
88
88
|
"@transferwise/neptune-css": "14.25.2",
|
|
89
|
-
"@wise/components-theming": "1.7.
|
|
89
|
+
"@wise/components-theming": "1.7.1",
|
|
90
90
|
"@wise/wds-configs": "0.0.0"
|
|
91
91
|
},
|
|
92
92
|
"peerDependencies": {
|
|
@@ -4,18 +4,19 @@ import { useEffect } from 'react';
|
|
|
4
4
|
* This progressive enhancement uses an experimental API, it might change,
|
|
5
5
|
* and at the time of authoring is not supported on iOS or mobile Firefox.
|
|
6
6
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
|
|
7
|
+
* @param open - Controls whether the virtual keyboard should overlay content
|
|
7
8
|
*/
|
|
8
|
-
export function useVirtualKeyboard() {
|
|
9
|
+
export function useVirtualKeyboard(open: boolean) {
|
|
9
10
|
useEffect(() => {
|
|
10
11
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
|
|
11
12
|
if ('virtualKeyboard' in navigator) {
|
|
12
13
|
const virtualKeyboard: any = navigator.virtualKeyboard;
|
|
13
14
|
const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;
|
|
14
|
-
virtualKeyboard.overlaysContent =
|
|
15
|
+
virtualKeyboard.overlaysContent = open;
|
|
15
16
|
return () => {
|
|
16
17
|
virtualKeyboard.overlaysContent = initialOverlaysContent;
|
|
17
18
|
};
|
|
18
19
|
}
|
|
19
20
|
/* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
|
|
20
|
-
}, []);
|
|
21
|
+
}, [open]);
|
|
21
22
|
}
|
package/src/i18n/nl.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"neptune.DateLookup.selected": "geselecteerd",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 jaar",
|
|
18
18
|
"neptune.DateLookup.year": "jaar",
|
|
19
|
-
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "
|
|
19
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Voer een valuta / land in",
|
|
20
20
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Selecteer valuta",
|
|
21
21
|
"neptune.FlowNavigation.back": "terug naar vorige stap",
|
|
22
22
|
"neptune.Info.ariaLabel": "Meer informatie",
|
|
@@ -2,6 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
|
2
2
|
import { ThemeProvider } from '@wise/components-theming';
|
|
3
3
|
|
|
4
4
|
import Button from '../../button';
|
|
5
|
+
import { lorem100 } from '../../test-utils';
|
|
6
|
+
import Display from '../../display';
|
|
7
|
+
import Logo from '../../logo';
|
|
8
|
+
import Body from '../../body';
|
|
5
9
|
|
|
6
10
|
export default {
|
|
7
11
|
component: ThemeProvider,
|
|
@@ -17,3 +21,22 @@ export const PlatformTheme: Story = {
|
|
|
17
21
|
</ThemeProvider>
|
|
18
22
|
),
|
|
19
23
|
};
|
|
24
|
+
|
|
25
|
+
export const BusinessLandingPage: Story = {
|
|
26
|
+
render: () => (
|
|
27
|
+
<ThemeProvider theme="business">
|
|
28
|
+
<Display type="display-large">Wise Business</Display>
|
|
29
|
+
<Body type="body-large-bold">
|
|
30
|
+
{lorem100}
|
|
31
|
+
</Body>
|
|
32
|
+
<ThemeProvider theme="business--forest-green">
|
|
33
|
+
<Body type="body-large">
|
|
34
|
+
{lorem100}
|
|
35
|
+
</Body>
|
|
36
|
+
</ThemeProvider>
|
|
37
|
+
<Body type="body-large">
|
|
38
|
+
{lorem100}
|
|
39
|
+
</Body>
|
|
40
|
+
</ThemeProvider>
|
|
41
|
+
),
|
|
42
|
+
};
|