@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.esm.js
CHANGED
|
@@ -1768,15 +1768,14 @@ const useLayout = () => {
|
|
|
1768
1768
|
|
|
1769
1769
|
const EXIT_ANIMATION = 350;
|
|
1770
1770
|
const SlidingPanel = /*#__PURE__*/forwardRef(({
|
|
1771
|
-
|
|
1772
|
-
className,
|
|
1771
|
+
position = 'left',
|
|
1773
1772
|
open,
|
|
1774
|
-
position,
|
|
1775
1773
|
showSlidingPanelBorder,
|
|
1776
1774
|
slidingPanelPositionFixed,
|
|
1775
|
+
className,
|
|
1776
|
+
children,
|
|
1777
1777
|
...rest
|
|
1778
1778
|
}, reference) => {
|
|
1779
|
-
/** @type {RefObject<HTMLDivElement>} */
|
|
1780
1779
|
const localReference = useRef(null);
|
|
1781
1780
|
return /*#__PURE__*/createElement(CSSTransition, {
|
|
1782
1781
|
...rest,
|
|
@@ -1789,34 +1788,15 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
|
|
|
1789
1788
|
enter: 0,
|
|
1790
1789
|
exit: EXIT_ANIMATION
|
|
1791
1790
|
},
|
|
1792
|
-
classNames:
|
|
1793
|
-
'sliding-panel--fixed': slidingPanelPositionFixed
|
|
1794
|
-
}, 'sliding-panel'),
|
|
1791
|
+
classNames: "sliding-panel",
|
|
1795
1792
|
appear: true,
|
|
1796
1793
|
unmountOnExit: true
|
|
1797
1794
|
}, /*#__PURE__*/jsx("div", {
|
|
1798
1795
|
ref: mergeRefs([reference, localReference]),
|
|
1799
|
-
className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
|
|
1796
|
+
className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
|
|
1800
1797
|
children: children
|
|
1801
1798
|
}));
|
|
1802
1799
|
});
|
|
1803
|
-
SlidingPanel.propTypes = {
|
|
1804
|
-
children: PropTypes.node,
|
|
1805
|
-
className: PropTypes.string,
|
|
1806
|
-
open: PropTypes.bool,
|
|
1807
|
-
position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
|
|
1808
|
-
showSlidingPanelBorder: PropTypes.bool,
|
|
1809
|
-
slidingPanelPositionFixed: PropTypes.bool
|
|
1810
|
-
};
|
|
1811
|
-
SlidingPanel.defaultProps = {
|
|
1812
|
-
children: null,
|
|
1813
|
-
className: undefined,
|
|
1814
|
-
open: false,
|
|
1815
|
-
position: 'left',
|
|
1816
|
-
showSlidingPanelBorder: false,
|
|
1817
|
-
slidingPanelPositionFixed: false
|
|
1818
|
-
};
|
|
1819
|
-
var SlidingPanel$1 = SlidingPanel;
|
|
1820
1800
|
|
|
1821
1801
|
const Drawer = ({
|
|
1822
1802
|
children,
|
|
@@ -1835,7 +1815,7 @@ const Drawer = ({
|
|
|
1835
1815
|
return /*#__PURE__*/jsx(Dimmer$1, {
|
|
1836
1816
|
open: open,
|
|
1837
1817
|
onClose: onClose,
|
|
1838
|
-
children: /*#__PURE__*/jsx(SlidingPanel
|
|
1818
|
+
children: /*#__PURE__*/jsx(SlidingPanel, {
|
|
1839
1819
|
open: open,
|
|
1840
1820
|
position: isMobile ? Position.BOTTOM : position,
|
|
1841
1821
|
children: /*#__PURE__*/jsxs("div", {
|
|
@@ -1952,15 +1932,15 @@ const BottomSheet$1 = props => {
|
|
|
1952
1932
|
props.onClose(event);
|
|
1953
1933
|
}
|
|
1954
1934
|
}
|
|
1955
|
-
const onSwipeStart =
|
|
1956
|
-
initialYCoordinate.current = (
|
|
1935
|
+
const onSwipeStart = event => {
|
|
1936
|
+
initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;
|
|
1957
1937
|
setPressed(true);
|
|
1958
1938
|
};
|
|
1959
|
-
const onSwipeMove =
|
|
1939
|
+
const onSwipeMove = event => {
|
|
1960
1940
|
if (pressed) {
|
|
1961
1941
|
const {
|
|
1962
1942
|
clientY
|
|
1963
|
-
} =
|
|
1943
|
+
} = 'touches' in event ? event.touches[0] : event;
|
|
1964
1944
|
const offset = calculateOffsetAfterMove(clientY);
|
|
1965
1945
|
// check whether move is to the bottom only and content scroll position is at the top
|
|
1966
1946
|
if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {
|
|
@@ -2029,34 +2009,37 @@ const BottomSheet$1 = props => {
|
|
|
2029
2009
|
fadeContentOnEnter: true,
|
|
2030
2010
|
fadeContentOnExit: true,
|
|
2031
2011
|
onClose: close,
|
|
2032
|
-
children: /*#__PURE__*/
|
|
2012
|
+
children: /*#__PURE__*/jsx(SlidingPanel, {
|
|
2033
2013
|
ref: bottomSheetReference,
|
|
2034
2014
|
open: props.open,
|
|
2035
2015
|
position: Position.BOTTOM,
|
|
2036
2016
|
className: classNames('np-bottom-sheet', props.className),
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
className: "np-bottom-sheet--
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2017
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
2018
|
+
role: "dialog",
|
|
2019
|
+
"aria-modal": true,
|
|
2020
|
+
onTouchStart: onSwipeStart,
|
|
2021
|
+
onTouchMove: onSwipeMove,
|
|
2022
|
+
onTouchEnd: onSwipeEnd,
|
|
2023
|
+
onMouseDown: onSwipeStart,
|
|
2024
|
+
onMouseMove: onSwipeMove,
|
|
2025
|
+
onMouseUp: onSwipeEnd,
|
|
2026
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
2027
|
+
ref: topBarReference,
|
|
2028
|
+
className: "np-bottom-sheet--top-bar",
|
|
2029
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
2030
|
+
className: "np-bottom-sheet--handler"
|
|
2031
|
+
}), /*#__PURE__*/jsx(CloseButton, {
|
|
2032
|
+
size: "sm",
|
|
2033
|
+
className: "sr-only np-bottom-sheet--close-btn",
|
|
2034
|
+
onClick: close
|
|
2035
|
+
})]
|
|
2036
|
+
}), /*#__PURE__*/jsx("div", {
|
|
2037
|
+
ref: contentReference,
|
|
2038
|
+
style: setContentMaxHeight(),
|
|
2039
|
+
className: "np-bottom-sheet--content",
|
|
2040
|
+
children: props.children
|
|
2053
2041
|
})]
|
|
2054
|
-
})
|
|
2055
|
-
ref: contentReference,
|
|
2056
|
-
style: setContentMaxHeight(),
|
|
2057
|
-
className: "np-bottom-sheet--content",
|
|
2058
|
-
children: props.children
|
|
2059
|
-
})]
|
|
2042
|
+
})
|
|
2060
2043
|
})
|
|
2061
2044
|
});
|
|
2062
2045
|
};
|
|
@@ -10981,7 +10964,7 @@ const Sticky = ({
|
|
|
10981
10964
|
open,
|
|
10982
10965
|
position,
|
|
10983
10966
|
children
|
|
10984
|
-
}) => /*#__PURE__*/jsx(SlidingPanel
|
|
10967
|
+
}) => /*#__PURE__*/jsx(SlidingPanel, {
|
|
10985
10968
|
open: open,
|
|
10986
10969
|
position: position,
|
|
10987
10970
|
slidingPanelPositionFixed: true,
|
|
@@ -15113,5 +15096,5 @@ const translations = {
|
|
|
15113
15096
|
'zh-HK': zhHK
|
|
15114
15097
|
};
|
|
15115
15098
|
|
|
15116
|
-
export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel
|
|
15099
|
+
export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
|
|
15117
15100
|
//# sourceMappingURL=index.esm.js.map
|