@transferwise/components 0.0.0-experimental-eecc435 → 0.0.0-experimental-683a8ba
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.esm.js +38 -55
- package/build/index.esm.js.map +1 -1
- package/build/index.js +38 -55
- package/build/index.js.map +1 -1
- package/build/types/circularButton/CircularButton.d.ts +2 -2
- package/build/types/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/slidingPanel/SlidingPanel.d.ts +12 -17
- package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
- package/build/types/slidingPanel/index.d.ts +2 -1
- package/build/types/slidingPanel/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/circularButton/CircularButton.tsx +2 -2
- package/src/common/bottomSheet/BottomSheet.tsx +47 -41
- package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +37 -33
- package/src/index.ts +1 -0
- package/src/select/Select.spec.js +1 -1
- package/src/slidingPanel/SlidingPanel.spec.js +9 -19
- package/src/slidingPanel/SlidingPanel.tsx +62 -0
- package/src/slidingPanel/index.ts +2 -0
- package/src/sticky/Sticky.spec.js +0 -1
- package/src/slidingPanel/SlidingPanel.js +0 -73
- package/src/slidingPanel/index.js +0 -1
- /package/src/slidingPanel/{SlidingPanel.story.js → SlidingPanel.story.tsx} +0 -0
package/build/index.js
CHANGED
|
@@ -1801,15 +1801,14 @@ const useLayout = () => {
|
|
|
1801
1801
|
|
|
1802
1802
|
const EXIT_ANIMATION = 350;
|
|
1803
1803
|
const SlidingPanel = /*#__PURE__*/React.forwardRef(({
|
|
1804
|
-
|
|
1805
|
-
className,
|
|
1804
|
+
position = 'left',
|
|
1806
1805
|
open,
|
|
1807
|
-
position,
|
|
1808
1806
|
showSlidingPanelBorder,
|
|
1809
1807
|
slidingPanelPositionFixed,
|
|
1808
|
+
className,
|
|
1809
|
+
children,
|
|
1810
1810
|
...rest
|
|
1811
1811
|
}, reference) => {
|
|
1812
|
-
/** @type {RefObject<HTMLDivElement>} */
|
|
1813
1812
|
const localReference = React.useRef(null);
|
|
1814
1813
|
return /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
|
|
1815
1814
|
...rest,
|
|
@@ -1822,34 +1821,15 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
|
|
|
1822
1821
|
enter: 0,
|
|
1823
1822
|
exit: EXIT_ANIMATION
|
|
1824
1823
|
},
|
|
1825
|
-
classNames:
|
|
1826
|
-
'sliding-panel--fixed': slidingPanelPositionFixed
|
|
1827
|
-
}, 'sliding-panel'),
|
|
1824
|
+
classNames: "sliding-panel",
|
|
1828
1825
|
appear: true,
|
|
1829
1826
|
unmountOnExit: true
|
|
1830
1827
|
}, /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1831
1828
|
ref: mergeRefs__default.default([reference, localReference]),
|
|
1832
|
-
className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, className),
|
|
1829
|
+
className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
|
|
1833
1830
|
children: children
|
|
1834
1831
|
}));
|
|
1835
1832
|
});
|
|
1836
|
-
SlidingPanel.propTypes = {
|
|
1837
|
-
children: PropTypes__default.default.node,
|
|
1838
|
-
className: PropTypes__default.default.string,
|
|
1839
|
-
open: PropTypes__default.default.bool,
|
|
1840
|
-
position: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
|
|
1841
|
-
showSlidingPanelBorder: PropTypes__default.default.bool,
|
|
1842
|
-
slidingPanelPositionFixed: PropTypes__default.default.bool
|
|
1843
|
-
};
|
|
1844
|
-
SlidingPanel.defaultProps = {
|
|
1845
|
-
children: null,
|
|
1846
|
-
className: undefined,
|
|
1847
|
-
open: false,
|
|
1848
|
-
position: 'left',
|
|
1849
|
-
showSlidingPanelBorder: false,
|
|
1850
|
-
slidingPanelPositionFixed: false
|
|
1851
|
-
};
|
|
1852
|
-
var SlidingPanel$1 = SlidingPanel;
|
|
1853
1833
|
|
|
1854
1834
|
const Drawer = ({
|
|
1855
1835
|
children,
|
|
@@ -1868,7 +1848,7 @@ const Drawer = ({
|
|
|
1868
1848
|
return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
|
|
1869
1849
|
open: open,
|
|
1870
1850
|
onClose: onClose,
|
|
1871
|
-
children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel
|
|
1851
|
+
children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel, {
|
|
1872
1852
|
open: open,
|
|
1873
1853
|
position: isMobile ? exports.Position.BOTTOM : position,
|
|
1874
1854
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -1985,15 +1965,15 @@ const BottomSheet$1 = props => {
|
|
|
1985
1965
|
props.onClose(event);
|
|
1986
1966
|
}
|
|
1987
1967
|
}
|
|
1988
|
-
const onSwipeStart =
|
|
1989
|
-
initialYCoordinate.current = (
|
|
1968
|
+
const onSwipeStart = event => {
|
|
1969
|
+
initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;
|
|
1990
1970
|
setPressed(true);
|
|
1991
1971
|
};
|
|
1992
|
-
const onSwipeMove =
|
|
1972
|
+
const onSwipeMove = event => {
|
|
1993
1973
|
if (pressed) {
|
|
1994
1974
|
const {
|
|
1995
1975
|
clientY
|
|
1996
|
-
} =
|
|
1976
|
+
} = 'touches' in event ? event.touches[0] : event;
|
|
1997
1977
|
const offset = calculateOffsetAfterMove(clientY);
|
|
1998
1978
|
// check whether move is to the bottom only and content scroll position is at the top
|
|
1999
1979
|
if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {
|
|
@@ -2062,34 +2042,37 @@ const BottomSheet$1 = props => {
|
|
|
2062
2042
|
fadeContentOnEnter: true,
|
|
2063
2043
|
fadeContentOnExit: true,
|
|
2064
2044
|
onClose: close,
|
|
2065
|
-
children: /*#__PURE__*/jsxRuntime.
|
|
2045
|
+
children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel, {
|
|
2066
2046
|
ref: bottomSheetReference,
|
|
2067
2047
|
open: props.open,
|
|
2068
2048
|
position: exports.Position.BOTTOM,
|
|
2069
2049
|
className: classNames__default.default('np-bottom-sheet', props.className),
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
className: "np-bottom-sheet--
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2050
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2051
|
+
role: "dialog",
|
|
2052
|
+
"aria-modal": true,
|
|
2053
|
+
onTouchStart: onSwipeStart,
|
|
2054
|
+
onTouchMove: onSwipeMove,
|
|
2055
|
+
onTouchEnd: onSwipeEnd,
|
|
2056
|
+
onMouseDown: onSwipeStart,
|
|
2057
|
+
onMouseMove: onSwipeMove,
|
|
2058
|
+
onMouseUp: onSwipeEnd,
|
|
2059
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2060
|
+
ref: topBarReference,
|
|
2061
|
+
className: "np-bottom-sheet--top-bar",
|
|
2062
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2063
|
+
className: "np-bottom-sheet--handler"
|
|
2064
|
+
}), /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
|
|
2065
|
+
size: "sm",
|
|
2066
|
+
className: "sr-only np-bottom-sheet--close-btn",
|
|
2067
|
+
onClick: close
|
|
2068
|
+
})]
|
|
2069
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2070
|
+
ref: contentReference,
|
|
2071
|
+
style: setContentMaxHeight(),
|
|
2072
|
+
className: "np-bottom-sheet--content",
|
|
2073
|
+
children: props.children
|
|
2086
2074
|
})]
|
|
2087
|
-
})
|
|
2088
|
-
ref: contentReference,
|
|
2089
|
-
style: setContentMaxHeight(),
|
|
2090
|
-
className: "np-bottom-sheet--content",
|
|
2091
|
-
children: props.children
|
|
2092
|
-
})]
|
|
2075
|
+
})
|
|
2093
2076
|
})
|
|
2094
2077
|
});
|
|
2095
2078
|
};
|
|
@@ -11014,7 +10997,7 @@ const Sticky = ({
|
|
|
11014
10997
|
open,
|
|
11015
10998
|
position,
|
|
11016
10999
|
children
|
|
11017
|
-
}) => /*#__PURE__*/jsxRuntime.jsx(SlidingPanel
|
|
11000
|
+
}) => /*#__PURE__*/jsxRuntime.jsx(SlidingPanel, {
|
|
11018
11001
|
open: open,
|
|
11019
11002
|
position: position,
|
|
11020
11003
|
slidingPanelPositionFixed: true,
|
|
@@ -15222,7 +15205,7 @@ exports.Select = Select;
|
|
|
15222
15205
|
exports.SelectInput = SelectInput;
|
|
15223
15206
|
exports.SelectInputOptionContent = SelectInputOptionContent;
|
|
15224
15207
|
exports.SelectInputTriggerButton = SelectInputTriggerButton;
|
|
15225
|
-
exports.SlidingPanel = SlidingPanel
|
|
15208
|
+
exports.SlidingPanel = SlidingPanel;
|
|
15226
15209
|
exports.SnackbarConsumer = SnackbarConsumer;
|
|
15227
15210
|
exports.SnackbarContext = SnackbarContext;
|
|
15228
15211
|
exports.SnackbarPortal = SnackbarPortal;
|