@transferwise/components 0.0.0-experimental-70919ee → 0.0.0-experimental-58e9ef8
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/preventScroll/PreventScroll.js +8 -1
- package/build/common/preventScroll/PreventScroll.js.map +1 -1
- package/build/common/preventScroll/PreventScroll.mjs +8 -1
- package/build/common/preventScroll/PreventScroll.mjs.map +1 -1
- package/build/index.js +4 -4
- package/build/inputs/SelectInput.mjs +1 -1
- 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/listItem/Prompt/ListItemPrompt.js +3 -0
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +1 -1
- package/build/main.css +13 -9
- package/build/popover/Popover.mjs +1 -1
- package/build/promoCard/PromoCardContext.mjs +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +3 -0
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -1
- package/build/slidingPanel/SlidingPanel.js +23 -20
- package/build/slidingPanel/SlidingPanel.js.map +1 -1
- package/build/slidingPanel/SlidingPanel.mjs +24 -21
- package/build/slidingPanel/SlidingPanel.mjs.map +1 -1
- package/build/styles/dimmer/Dimmer.css +1 -0
- package/build/styles/inputs/SelectInput.css +12 -9
- package/build/styles/main.css +13 -9
- package/build/types/common/preventScroll/PreventScroll.d.ts +1 -1
- package/build/types/common/preventScroll/PreventScroll.d.ts.map +1 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +94 -0
- package/src/common/bottomSheet/__snapshots__/BottomSheet.test.tsx.snap +6 -0
- package/src/common/preventScroll/PreventScroll.tsx +11 -1
- package/src/dimmer/Dimmer.css +1 -0
- package/src/dimmer/Dimmer.less +1 -0
- package/src/inputs/SelectInput.css +12 -9
- package/src/inputs/SelectInput.test.story.tsx +83 -0
- package/src/inputs/_BottomSheet.less +12 -6
- package/src/inputs/_BottomSheet.tsx +19 -5
- package/src/main.css +13 -9
- package/src/moneyInput/MoneyInput.test.story.tsx +101 -0
- package/src/slidingPanel/SlidingPanel.tsx +29 -24
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var overlays = require('@react-aria/overlays');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
5
|
|
|
5
6
|
function PreventScroll() {
|
|
6
7
|
overlays.usePreventScroll();
|
|
7
|
-
|
|
8
|
+
// ios18
|
|
9
|
+
return /*#__PURE__*/jsxRuntime.jsx("style", {
|
|
10
|
+
children: `html, body {
|
|
11
|
+
height: 100dvh;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
}`
|
|
14
|
+
});
|
|
8
15
|
}
|
|
9
16
|
|
|
10
17
|
exports.PreventScroll = PreventScroll;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreventScroll.js","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n usePreventScroll();\n return
|
|
1
|
+
{"version":3,"file":"PreventScroll.js","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n usePreventScroll();\n\n // ios18\n return (\n <style>{`html, body { \n height: 100dvh; \n overflow: hidden;\n }`}</style>\n );\n\n // ios26\n return <style>{`html, body { height: 100dvh; overflow: hidden; }`}</style>;\n}\n"],"names":["PreventScroll","usePreventScroll","_jsx","children"],"mappings":";;;;;SAEgBA,aAAaA,GAAA;AAC3BC,EAAAA,yBAAgB,EAAE;AAElB;AACA,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AAAAC,IAAAA,QAAA,EAAQ,CAAA;;;AAGR,GAAA;AAAA,GAAQ,CAAC;AAKb;;;;"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { usePreventScroll } from '@react-aria/overlays';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
3
|
|
|
3
4
|
function PreventScroll() {
|
|
4
5
|
usePreventScroll();
|
|
5
|
-
|
|
6
|
+
// ios18
|
|
7
|
+
return /*#__PURE__*/jsx("style", {
|
|
8
|
+
children: `html, body {
|
|
9
|
+
height: 100dvh;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
}`
|
|
12
|
+
});
|
|
6
13
|
}
|
|
7
14
|
|
|
8
15
|
export { PreventScroll };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreventScroll.mjs","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n usePreventScroll();\n return
|
|
1
|
+
{"version":3,"file":"PreventScroll.mjs","sources":["../../../src/common/preventScroll/PreventScroll.tsx"],"sourcesContent":["import { usePreventScroll } from '@react-aria/overlays';\n\nexport function PreventScroll() {\n usePreventScroll();\n\n // ios18\n return (\n <style>{`html, body { \n height: 100dvh; \n overflow: hidden;\n }`}</style>\n );\n\n // ios26\n return <style>{`html, body { height: 100dvh; overflow: hidden; }`}</style>;\n}\n"],"names":["PreventScroll","usePreventScroll","_jsx","children"],"mappings":";;;SAEgBA,aAAaA,GAAA;AAC3BC,EAAAA,gBAAgB,EAAE;AAElB;AACA,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AAAAC,IAAAA,QAAA,EAAQ,CAAA;;;AAGR,GAAA;AAAA,GAAQ,CAAC;AAKb;;;;"}
|
package/build/index.js
CHANGED
|
@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
|
|
|
23
23
|
var Button_resolver = require('./button/Button.resolver.js');
|
|
24
24
|
var IconButton = require('./iconButton/IconButton.js');
|
|
25
25
|
var Carousel = require('./carousel/Carousel.js');
|
|
26
|
-
var Card
|
|
26
|
+
var Card = require('./card/Card.js');
|
|
27
27
|
var Checkbox = require('./checkbox/Checkbox.js');
|
|
28
28
|
var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
|
|
29
29
|
var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
|
|
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
|
|
|
33
33
|
var CircularButton = require('./circularButton/CircularButton.js');
|
|
34
34
|
var Option = require('./common/Option/Option.js');
|
|
35
35
|
var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
|
|
36
|
-
var Card = require('./common/card/Card.js');
|
|
36
|
+
var Card$1 = require('./common/card/Card.js');
|
|
37
37
|
var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
|
|
38
38
|
var DateInput = require('./dateInput/DateInput.js');
|
|
39
39
|
var DateLookup = require('./dateLookup/DateLookup.js');
|
|
@@ -173,7 +173,7 @@ exports.Body = Body.default;
|
|
|
173
173
|
exports.Button = Button_resolver.default;
|
|
174
174
|
exports.IconButton = IconButton.default;
|
|
175
175
|
exports.Carousel = Carousel.default;
|
|
176
|
-
exports.Card = Card
|
|
176
|
+
exports.Card = Card.default;
|
|
177
177
|
exports.Checkbox = Checkbox.default;
|
|
178
178
|
exports.CheckboxButton = CheckboxButton.default;
|
|
179
179
|
exports.CheckboxOption = CheckboxOption.default;
|
|
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
|
|
|
183
183
|
exports.CircularButton = CircularButton.default;
|
|
184
184
|
exports.Option = Option.default;
|
|
185
185
|
exports.BottomSheet = BottomSheet.default;
|
|
186
|
-
exports.BaseCard = Card.default;
|
|
186
|
+
exports.BaseCard = Card$1.default;
|
|
187
187
|
exports.CriticalCommsBanner = CriticalCommsBanner.default;
|
|
188
188
|
exports.DateInput = DateInput.default;
|
|
189
189
|
exports.DateLookup = DateLookup.default;
|
|
@@ -2,7 +2,7 @@ import { Listbox, ListboxOptions, ListboxButton, ListboxOption } from '@headless
|
|
|
2
2
|
import { CrossCircle, ChevronDown, Cross, Check } from '@transferwise/icons';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import mergeProps from 'merge-props';
|
|
5
|
-
import { useState, useRef, useEffect, useDeferredValue, useContext, useMemo, useId,
|
|
5
|
+
import { useState, useRef, useEffect, useDeferredValue, createContext, useContext, useMemo, useId, forwardRef } from 'react';
|
|
6
6
|
import { useIntl } from 'react-intl';
|
|
7
7
|
import { Virtualizer } from 'virtua';
|
|
8
8
|
import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
|
|
@@ -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, TransitionChild } 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, TransitionChild } 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(open);\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 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 theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <TransitionChild\n as=\"div\"\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 <TransitionChild\n ref={refs.setFloating}\n as=\"div\"\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 </TransitionChild>\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","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
|
|
@@ -3,13 +3,38 @@ import { Transition, TransitionChild } 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, TransitionChild } 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, TransitionChild } 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(open);\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 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 theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n className=\"np-bottom-sheet-v2-container\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <TransitionChild\n as=\"div\"\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 <TransitionChild\n ref={refs.setFloating}\n as=\"div\"\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 </TransitionChild>\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","Transition","as","show","className","beforeEnter","prev","afterLeave","TransitionChild","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;AAChBC,IAAAA,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,cAAc,GAAG,OAAO;AACzD,EAAA,CAAC,MAAM;IACLH,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACE,cAAc,CAAC,iBAAiB,CAAC;AAClE,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;EACjBC,kBAAkB,CAACR,IAAI,CAAC;EAExB,MAAM;IAAES,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;EAChF,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,CAAC,CAAC;EACjD,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;AAACX,QAAAA,KAAK,EAAC,UAAU;AAACC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QAAArB,QAAA,eACtFuB,IAAA,CAACS,UAAU,EAAA;AACTC,UAAAA,EAAE,EAAC,KAAK;AACRC,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;UAAAF,QAAA,EAAA,cAEvByB,GAAA,CAACc,eAAe,EAAA;AACdN,YAAAA,EAAE,EAAC,KAAK;AACRE,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;kBAAA7C,QAAA,eAGPuB,IAAA,CAACgB,eAAe,EAAA;oBACdZ,GAAG,EAAEvB,IAAI,CAAC0C,WAAY;AACtBb,oBAAAA,EAAE,EAAC,KAAK;AACRE,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;mBAAiB;AACnB,iBAAA,EAjCOiB,WAiCG;eACU;aACZ;AACd,WAAK,CACP;SAAY;OACC;AACjB,KAAgB,CAClB;AAAA,GAAA,CAAG;AAEP;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
require('../../common/theme.js');
|
|
5
7
|
require('../../common/direction.js');
|
|
@@ -61,4 +63,5 @@ const Prompt = ({
|
|
|
61
63
|
Prompt.displayName = 'ListItem.Prompt';
|
|
62
64
|
|
|
63
65
|
exports.Prompt = Prompt;
|
|
66
|
+
exports.default = Prompt;
|
|
64
67
|
//# sourceMappingURL=ListItemPrompt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}
|
package/build/main.css
CHANGED
|
@@ -2574,6 +2574,7 @@ button.np-option {
|
|
|
2574
2574
|
}
|
|
2575
2575
|
.no-scroll {
|
|
2576
2576
|
overflow: hidden;
|
|
2577
|
+
scroll-behavior: unset;
|
|
2577
2578
|
}
|
|
2578
2579
|
.dimmer {
|
|
2579
2580
|
position: fixed;
|
|
@@ -3839,35 +3840,38 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3839
3840
|
transition-property: opacity;
|
|
3840
3841
|
transition-timing-function: ease-out;
|
|
3841
3842
|
transition-duration: 300ms;
|
|
3843
|
+
height: 100vh;
|
|
3844
|
+
min-height: -webkit-fill-available;
|
|
3842
3845
|
}
|
|
3843
3846
|
.np-bottom-sheet-v2-backdrop--closed {
|
|
3844
3847
|
opacity: 0;
|
|
3845
3848
|
}
|
|
3846
3849
|
.np-bottom-sheet-v2 {
|
|
3847
3850
|
position: fixed;
|
|
3848
|
-
inset:
|
|
3851
|
+
inset: 0;
|
|
3849
3852
|
bottom: env(keyboard-inset-height, 0px);
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
margin-top: 64px;
|
|
3855
|
-
margin-top: var(--size-64);
|
|
3853
|
+
padding-top: 64px;
|
|
3854
|
+
padding-top: var(--size-64);
|
|
3855
|
+
padding-bottom: min(env(safe-area-inset-bottom, 16px));
|
|
3856
|
+
padding-bottom: min(env(safe-area-inset-bottom, var(--size-16)));
|
|
3856
3857
|
display: flex;
|
|
3857
3858
|
flex-direction: column;
|
|
3858
3859
|
justify-content: flex-end;
|
|
3860
|
+
height: 100%;
|
|
3861
|
+
min-height: -webkit-fill-available;
|
|
3859
3862
|
}
|
|
3860
3863
|
.np-bottom-sheet-v2-content {
|
|
3861
3864
|
display: flex;
|
|
3862
3865
|
flex-direction: column;
|
|
3863
3866
|
overflow: auto;
|
|
3864
3867
|
border-top-left-radius: 32px;
|
|
3865
|
-
|
|
3868
|
+
border-top-left-radius: var(--size-32);
|
|
3866
3869
|
border-top-right-radius: 32px;
|
|
3867
|
-
|
|
3870
|
+
border-top-right-radius: var(--size-32);
|
|
3868
3871
|
background-color: #ffffff;
|
|
3869
3872
|
background-color: var(--color-background-elevated);
|
|
3870
3873
|
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
|
|
3874
|
+
will-change: transform;
|
|
3871
3875
|
}
|
|
3872
3876
|
.np-bottom-sheet-v2-content:focus {
|
|
3873
3877
|
outline: none;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
|
-
import { useId, useEffect, useRef, useState,
|
|
2
|
+
import { useId, useEffect, useRef, useState, cloneElement, isValidElement } from 'react';
|
|
3
3
|
import '../common/theme.mjs';
|
|
4
4
|
import '../common/direction.mjs';
|
|
5
5
|
import '../common/propsValues/control.mjs';
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var StatusIcon = require('../../statusIcon/StatusIcon.js');
|
|
5
7
|
var Body = require('../../body/Body.js');
|
|
@@ -117,4 +119,5 @@ const ActionPrompt = ({
|
|
|
117
119
|
};
|
|
118
120
|
|
|
119
121
|
exports.ActionPrompt = ActionPrompt;
|
|
122
|
+
exports.default = ActionPrompt;
|
|
120
123
|
//# sourceMappingURL=ActionPrompt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media,\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView {...media.avatar} badge={badge} size={48}>\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView size={48}>\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon size={48} sentiment={sentiment} />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n onDismiss={onDismiss}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n {description && <Body>{description}</Body>}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media,\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView {...media.avatar} badge={badge} size={48}>\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView size={48}>\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon size={48} sentiment={sentiment} />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n onDismiss={onDismiss}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n {description && <Body>{description}</Body>}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactTransitionGroup = require('react-transition-group');
|
|
8
|
+
var PreventScroll = require('../common/preventScroll/PreventScroll.js');
|
|
8
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
10
|
|
|
10
11
|
const EXIT_ANIMATION = 350;
|
|
@@ -20,26 +21,28 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
|
|
|
20
21
|
}, reference) => {
|
|
21
22
|
const localReference = React.useRef(null);
|
|
22
23
|
React.useImperativeHandle(reference, () => localReference.current, []);
|
|
23
|
-
return /*#__PURE__*/
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
24
|
+
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
25
|
+
children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
|
|
26
|
+
...rest,
|
|
27
|
+
key: `sliding-panel--open-${position}`,
|
|
28
|
+
nodeRef: localReference,
|
|
29
|
+
in: open
|
|
30
|
+
// Wait for animation to finish before unmount.
|
|
31
|
+
,
|
|
32
|
+
timeout: {
|
|
33
|
+
enter: 0,
|
|
34
|
+
exit: EXIT_ANIMATION
|
|
35
|
+
},
|
|
36
|
+
classNames: "sliding-panel",
|
|
37
|
+
appear: true,
|
|
38
|
+
unmountOnExit: true
|
|
39
|
+
}, /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
40
|
+
ref: localReference,
|
|
41
|
+
"data-testid": testId,
|
|
42
|
+
className: clsx.clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
|
|
43
|
+
children: children
|
|
44
|
+
}))]
|
|
45
|
+
});
|
|
43
46
|
});
|
|
44
47
|
|
|
45
48
|
exports.EXIT_ANIMATION = EXIT_ANIMATION;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n open: boolean;\n showSlidingPanelBorder?: boolean;\n slidingPanelPositionFixed?: boolean;\n testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n (\n {\n position = 'left',\n open,\n showSlidingPanelBorder,\n slidingPanelPositionFixed,\n className,\n children,\n testId,\n ...rest\n }: Omit<SlidingPanelProps, 'ref'>,\n reference: React.ForwardedRef<HTMLDivElement | null>,\n ) => {\n const localReference = useRef<HTMLDivElement>(null as never);\n useImperativeHandle(reference, () => localReference.current, []);\n\n return (\n <CSSTransition\n
|
|
1
|
+
{"version":3,"file":"SlidingPanel.js","sources":["../../src/slidingPanel/SlidingPanel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { Position } from '../common';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport const EXIT_ANIMATION = 350;\n\nexport interface SlidingPanelProps\n extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {\n position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;\n open: boolean;\n showSlidingPanelBorder?: boolean;\n slidingPanelPositionFixed?: boolean;\n testId?: string;\n}\n\nconst SlidingPanel = forwardRef(\n (\n {\n position = 'left',\n open,\n showSlidingPanelBorder,\n slidingPanelPositionFixed,\n className,\n children,\n testId,\n ...rest\n }: Omit<SlidingPanelProps, 'ref'>,\n reference: React.ForwardedRef<HTMLDivElement | null>,\n ) => {\n const localReference = useRef<HTMLDivElement>(null as never);\n useImperativeHandle(reference, () => localReference.current, []);\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n\n <CSSTransition\n {...rest}\n key={`sliding-panel--open-${position}`}\n nodeRef={localReference}\n in={open}\n // Wait for animation to finish before unmount.\n timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n classNames=\"sliding-panel\"\n appear\n unmountOnExit\n >\n <div\n ref={localReference}\n data-testid={testId}\n className={clsx(\n 'sliding-panel',\n `sliding-panel--open-${position}`,\n showSlidingPanelBorder && `sliding-panel--border-${position}`,\n slidingPanelPositionFixed && 'sliding-panel--fixed',\n className,\n )}\n >\n {children}\n </div>\n </CSSTransition>\n </>\n );\n },\n);\n\nexport default SlidingPanel;\n"],"names":["EXIT_ANIMATION","SlidingPanel","forwardRef","position","open","showSlidingPanelBorder","slidingPanelPositionFixed","className","children","testId","rest","reference","localReference","useRef","useImperativeHandle","current","_jsxs","_Fragment","_jsx","PreventScroll","_createElement","CSSTransition","key","nodeRef","in","timeout","enter","exit","classNames","appear","unmountOnExit","ref","clsx"],"mappings":";;;;;;;;;;AAOO,MAAMA,cAAc,GAAG;AAW9B,MAAMC,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,IAAI;EACJC,sBAAsB;EACtBC,yBAAyB;EACzBC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACN,GAAGC;AAAI,CACwB,EACjCC,SAAoD,KAClD;AACF,EAAA,MAAMC,cAAc,GAAGC,YAAM,CAAiB,IAAa,CAAC;EAC5DC,yBAAmB,CAACH,SAAS,EAAE,MAAMC,cAAc,CAACG,OAAO,EAAE,EAAE,CAAC;EAEhE,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGJ,IAAI,gBAAGc,cAAA,CAACC,2BAAa,EAAA,EAAA,CAAG,GAAG,IAAI,eAEhCC,mBAAA,CAACC,kCAAa,EAAA;AAAA,MAAA,GACRX,IAAI;MACRY,GAAG,EAAE,CAAA,oBAAA,EAAuBnB,QAAQ,CAAA,CAAG;AACvCoB,MAAAA,OAAO,EAAEX,cAAe;AACxBY,MAAAA,EAAE,EAAEpB;AACJ;AAAA;AACAqB,MAAAA,OAAO,EAAE;AAAEC,QAAAA,KAAK,EAAE,CAAC;AAAEC,QAAAA,IAAI,EAAE3B;OAAiB;AAC5C4B,MAAAA,UAAU,EAAC,eAAe;MAC1BC,MAAM,EAAA,IAAA;MACNC,aAAa,EAAA;AAAA,KAAA,eAEbZ,cAAA,CAAA,KAAA,EAAA;AACEa,MAAAA,GAAG,EAAEnB,cAAe;AACpB,MAAA,aAAA,EAAaH,MAAO;MACpBF,SAAS,EAAEyB,SAAI,CACb,eAAe,EACf,CAAA,oBAAA,EAAuB7B,QAAQ,EAAE,EACjCE,sBAAsB,IAAI,CAAA,sBAAA,EAAyBF,QAAQ,EAAE,EAC7DG,yBAAyB,IAAI,sBAAsB,EACnDC,SAAS,CACT;AAAAC,MAAAA,QAAA,EAEDA;AAAQ,KACN,CACQ,CACjB;AAAA,GAAA,CAAG;AAEP,CAAC;;;;;"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { forwardRef, useRef, useImperativeHandle, createElement } from 'react';
|
|
3
3
|
import { CSSTransition } from 'react-transition-group';
|
|
4
|
-
import {
|
|
4
|
+
import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
|
|
5
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
5
6
|
|
|
6
7
|
const EXIT_ANIMATION = 350;
|
|
7
8
|
const SlidingPanel = /*#__PURE__*/forwardRef(({
|
|
@@ -16,26 +17,28 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
|
|
|
16
17
|
}, reference) => {
|
|
17
18
|
const localReference = useRef(null);
|
|
18
19
|
useImperativeHandle(reference, () => localReference.current, []);
|
|
19
|
-
return /*#__PURE__*/
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
21
|
+
children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, /*#__PURE__*/createElement(CSSTransition, {
|
|
22
|
+
...rest,
|
|
23
|
+
key: `sliding-panel--open-${position}`,
|
|
24
|
+
nodeRef: localReference,
|
|
25
|
+
in: open
|
|
26
|
+
// Wait for animation to finish before unmount.
|
|
27
|
+
,
|
|
28
|
+
timeout: {
|
|
29
|
+
enter: 0,
|
|
30
|
+
exit: EXIT_ANIMATION
|
|
31
|
+
},
|
|
32
|
+
classNames: "sliding-panel",
|
|
33
|
+
appear: true,
|
|
34
|
+
unmountOnExit: true
|
|
35
|
+
}, /*#__PURE__*/jsx("div", {
|
|
36
|
+
ref: localReference,
|
|
37
|
+
"data-testid": testId,
|
|
38
|
+
className: clsx('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
|
|
39
|
+
children: children
|
|
40
|
+
}))]
|
|
41
|
+
});
|
|
39
42
|
});
|
|
40
43
|
|
|
41
44
|
export { EXIT_ANIMATION, SlidingPanel as default };
|