@transferwise/components 0.0.0-experimental-5bcac43 → 0.0.0-experimental-14afc1f
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/index.js +63 -60
- package/build/index.js.map +1 -1
- package/build/index.mjs +63 -60
- package/build/index.mjs.map +1 -1
- package/build/main.css +16 -0
- package/build/styles/logo/Logo.css +16 -0
- package/build/styles/main.css +16 -0
- package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
- package/build/types/inputs/_Popover.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/package.json +6 -6
- package/src/inputs/_BottomSheet.tsx +33 -28
- package/src/inputs/_Popover.tsx +23 -20
- package/src/logo/Logo.css +16 -0
- package/src/logo/Logo.js +2 -7
- package/src/logo/Logo.less +16 -0
- package/src/logo/__snapshots__/Logo.spec.js.snap +104 -8
- package/src/main.css +16 -0
- package/src/provider/theme/ThemeProvider.story.tsx +0 -21
package/build/index.js
CHANGED
|
@@ -14,11 +14,11 @@ var react$1 = require('@headlessui/react');
|
|
|
14
14
|
var mergeProps = require('merge-props');
|
|
15
15
|
var index_js = require('use-sync-external-store/shim/index.js');
|
|
16
16
|
var react = require('@floating-ui/react');
|
|
17
|
+
var focus = require('@react-aria/focus');
|
|
17
18
|
var overlays = require('@react-aria/overlays');
|
|
18
19
|
var reactTransitionGroup = require('react-transition-group');
|
|
19
20
|
var neptuneValidation = require('@transferwise/neptune-validation');
|
|
20
21
|
var reactDom = require('react-dom');
|
|
21
|
-
var focus = require('@react-aria/focus');
|
|
22
22
|
var reactPopper = require('react-popper');
|
|
23
23
|
var throttle = require('lodash.throttle');
|
|
24
24
|
var art = require('@wise/art');
|
|
@@ -4582,15 +4582,14 @@ const Logo = ({
|
|
|
4582
4582
|
}) => {
|
|
4583
4583
|
const LogoSm = svgPaths[`WISE_FLAG${type === exports.LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
|
|
4584
4584
|
const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
|
|
4585
|
-
const screenMd = useScreenSize(exports.Breakpoint.MEDIUM);
|
|
4586
4585
|
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
4587
4586
|
"aria-label": type === exports.LogoType.WISE ? 'Wise' : 'Wise Business' | type === exports.LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
|
|
4588
4587
|
role: "img",
|
|
4589
4588
|
className: classNames__default.default(className, 'np-logo'),
|
|
4590
|
-
children: [
|
|
4591
|
-
className: "np-logo-svg"
|
|
4592
|
-
}),
|
|
4593
|
-
className: "np-logo-svg"
|
|
4589
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
|
|
4590
|
+
className: "np-logo-svg np-logo-svg--size-sm"
|
|
4591
|
+
}), /*#__PURE__*/jsxRuntime.jsx(LogoMd, {
|
|
4592
|
+
className: "np-logo-svg np-logo-svg--size-md"
|
|
4594
4593
|
})]
|
|
4595
4594
|
});
|
|
4596
4595
|
};
|
|
@@ -5521,35 +5520,37 @@ function BottomSheet({
|
|
|
5521
5520
|
enterFrom: "np-bottom-sheet-v2-content--enter-from",
|
|
5522
5521
|
leave: "np-bottom-sheet-v2-content--leave",
|
|
5523
5522
|
leaveTo: "np-bottom-sheet-v2-content--leave-to",
|
|
5524
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
5525
|
-
|
|
5526
|
-
|
|
5527
|
-
|
|
5528
|
-
|
|
5529
|
-
|
|
5530
|
-
|
|
5531
|
-
|
|
5532
|
-
|
|
5533
|
-
|
|
5534
|
-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5538
|
-
|
|
5539
|
-
|
|
5540
|
-
|
|
5541
|
-
|
|
5542
|
-
'np-bottom-sheet-v2-content-inner
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5523
|
+
children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
|
|
5524
|
+
children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
|
|
5525
|
+
context: context,
|
|
5526
|
+
initialFocus: initialFocusRef,
|
|
5527
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5528
|
+
// Force inner state invalidation on open
|
|
5529
|
+
ref: refs.setFloating,
|
|
5530
|
+
className: "np-bottom-sheet-v2-content-inner-container",
|
|
5531
|
+
...getFloatingProps(),
|
|
5532
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5533
|
+
className: "np-bottom-sheet-v2-header",
|
|
5534
|
+
children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
|
|
5535
|
+
size: exports.Size.SMALL,
|
|
5536
|
+
onClick: () => {
|
|
5537
|
+
onClose?.();
|
|
5538
|
+
}
|
|
5539
|
+
})
|
|
5540
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5541
|
+
className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
|
|
5542
|
+
'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
|
|
5543
|
+
}),
|
|
5544
|
+
children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
|
|
5545
|
+
className: "np-bottom-sheet-v2-title np-text-title-body",
|
|
5546
|
+
children: title
|
|
5547
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5548
|
+
className: "np-bottom-sheet-v2-body np-text-body-default",
|
|
5549
|
+
children: children
|
|
5550
|
+
})]
|
|
5550
5551
|
})]
|
|
5551
|
-
})
|
|
5552
|
-
}
|
|
5552
|
+
}, floatingKey)
|
|
5553
|
+
})
|
|
5553
5554
|
})
|
|
5554
5555
|
})
|
|
5555
5556
|
})]
|
|
@@ -5650,32 +5651,34 @@ function Popover({
|
|
|
5650
5651
|
setFloatingKey(prev => prev + 1);
|
|
5651
5652
|
},
|
|
5652
5653
|
afterLeave: onCloseEnd,
|
|
5653
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
5654
|
-
|
|
5655
|
-
|
|
5656
|
-
|
|
5657
|
-
|
|
5658
|
-
|
|
5659
|
-
'np-popover-v2-container
|
|
5660
|
-
|
|
5661
|
-
|
|
5662
|
-
|
|
5663
|
-
|
|
5664
|
-
|
|
5665
|
-
|
|
5666
|
-
|
|
5667
|
-
|
|
5668
|
-
'np-popover-v2
|
|
5669
|
-
|
|
5670
|
-
|
|
5671
|
-
|
|
5672
|
-
|
|
5673
|
-
|
|
5674
|
-
|
|
5675
|
-
|
|
5676
|
-
|
|
5677
|
-
|
|
5678
|
-
|
|
5654
|
+
children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
|
|
5655
|
+
children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
|
|
5656
|
+
context: context,
|
|
5657
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5658
|
+
// Force inner state invalidation on open
|
|
5659
|
+
ref: refs.setFloating,
|
|
5660
|
+
className: classNames__default.default('np-popover-v2-container', {
|
|
5661
|
+
'np-popover-v2-container--size-md': size === 'md',
|
|
5662
|
+
'np-popover-v2-container--size-lg': size === 'lg'
|
|
5663
|
+
})
|
|
5664
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
5665
|
+
,
|
|
5666
|
+
style: floatingStyles,
|
|
5667
|
+
...getFloatingProps(),
|
|
5668
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5669
|
+
className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
|
|
5670
|
+
'np-popover-v2--padding-md': padding === 'md'
|
|
5671
|
+
}),
|
|
5672
|
+
children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
|
|
5673
|
+
className: "np-popover-v2-title np-text-title-body",
|
|
5674
|
+
children: title
|
|
5675
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5676
|
+
className: "np-popover-v2-content np-text-body-default",
|
|
5677
|
+
children: children
|
|
5678
|
+
})]
|
|
5679
|
+
})
|
|
5680
|
+
}, floatingKey)
|
|
5681
|
+
})
|
|
5679
5682
|
})
|
|
5680
5683
|
})
|
|
5681
5684
|
})
|