@transferwise/components 0.0.0-experimental-c9cdfe3 → 0.0.0-experimental-79c0fba

package/README.md

@@ -53,7 +53,7 @@ Please follow [rules for JS components](https://github.com/transferwise/neptune-
 We expose reusable mocks for Jest and Vitest under an isolated entry point. They can be applied by passing the testing framework as the parameter:
 
 ```ts
-import { mockMatchMedia, mockResizeObserver } from '@transferwise/components/build/mocks';
+import { mockMatchMedia, mockResizeObserver } from '@transferwise/components/mocks';
 import { jest } from '@jest/globals';
 import { vi } from 'vitest';
 

package/build/index.esm.js

@@ -1753,15 +1753,14 @@ const useLayout = () => {
 
 const EXIT_ANIMATION = 350;
 const SlidingPanel = /*#__PURE__*/forwardRef(({
-  children,
-  className,
+  position = 'left',
   open,
-  position,
   showSlidingPanelBorder,
   slidingPanelPositionFixed,
+  className,
+  children,
   ...rest
 }, reference) => {
-  /** @type {RefObject<HTMLDivElement>} */
   const localReference = useRef(null);
   return /*#__PURE__*/createElement(CSSTransition, {
     ...rest,
@@ -1774,34 +1773,15 @@ const SlidingPanel = /*#__PURE__*/forwardRef(({
       enter: 0,
       exit: EXIT_ANIMATION
     },
-    classNames: classNames(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
-      'sliding-panel--fixed': slidingPanelPositionFixed
-    }, 'sliding-panel'),
+    classNames: "sliding-panel",
     appear: true,
     unmountOnExit: true
   }, /*#__PURE__*/jsx("div", {
     ref: mergeRefs([reference, localReference]),
-    className: classNames('sliding-panel', `sliding-panel--open-${position}`, className),
+    className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
     children: children
   }));
 });
-SlidingPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  open: PropTypes.bool,
-  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  showSlidingPanelBorder: PropTypes.bool,
-  slidingPanelPositionFixed: PropTypes.bool
-};
-SlidingPanel.defaultProps = {
-  children: null,
-  className: undefined,
-  open: false,
-  position: 'left',
-  showSlidingPanelBorder: false,
-  slidingPanelPositionFixed: false
-};
-var SlidingPanel$1 = SlidingPanel;
 
 const Drawer = ({
   children,
@@ -1820,7 +1800,7 @@ const Drawer = ({
   return /*#__PURE__*/jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(SlidingPanel$1, {
+    children: /*#__PURE__*/jsx(SlidingPanel, {
       open: open,
       position: isMobile ? Position.BOTTOM : position,
       children: /*#__PURE__*/jsxs("div", {
@@ -1937,15 +1917,15 @@ const BottomSheet$1 = props => {
       props.onClose(event);
     }
   }
-  const onSwipeStart = isMobile => event => {
-    initialYCoordinate.current = (isMobile ? event.touches[0] : event).clientY;
+  const onSwipeStart = event => {
+    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;
     setPressed(true);
   };
-  const onSwipeMove = isMobile => event => {
+  const onSwipeMove = event => {
     if (pressed) {
       const {
         clientY
-      } = isMobile ? event.touches[0] : event;
+      } = 'touches' in event ? event.touches[0] : event;
       const offset = calculateOffsetAfterMove(clientY);
       // check whether move is to the bottom only and content scroll position is at the top
       if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {
@@ -2014,34 +1994,37 @@ const BottomSheet$1 = props => {
     fadeContentOnEnter: true,
     fadeContentOnExit: true,
     onClose: close,
-    children: /*#__PURE__*/jsxs(SlidingPanel$1, {
+    children: /*#__PURE__*/jsx(SlidingPanel, {
       ref: bottomSheetReference,
       open: props.open,
       position: Position.BOTTOM,
       className: classNames('np-bottom-sheet', props.className),
-      role: "dialog",
-      onTouchStart: onSwipeStart(true),
-      onTouchMove: onSwipeMove(true),
-      onTouchEnd: onSwipeEnd,
-      onMouseDown: onSwipeStart(false),
-      onMouseMove: onSwipeMove(false),
-      onMouseUp: onSwipeEnd,
-      children: [/*#__PURE__*/jsxs("div", {
-        ref: topBarReference,
-        className: "np-bottom-sheet--top-bar",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "np-bottom-sheet--handler"
-        }), /*#__PURE__*/jsx(CloseButton, {
-          size: "sm",
-          className: "sr-only np-bottom-sheet--close-btn",
-          onClick: close
+      children: /*#__PURE__*/jsxs("div", {
+        role: "dialog",
+        "aria-modal": true,
+        onTouchStart: onSwipeStart,
+        onTouchMove: onSwipeMove,
+        onTouchEnd: onSwipeEnd,
+        onMouseDown: onSwipeStart,
+        onMouseMove: onSwipeMove,
+        onMouseUp: onSwipeEnd,
+        children: [/*#__PURE__*/jsxs("div", {
+          ref: topBarReference,
+          className: "np-bottom-sheet--top-bar",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "np-bottom-sheet--handler"
+          }), /*#__PURE__*/jsx(CloseButton, {
+            size: "sm",
+            className: "sr-only np-bottom-sheet--close-btn",
+            onClick: close
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          ref: contentReference,
+          style: setContentMaxHeight(),
+          className: "np-bottom-sheet--content",
+          children: props.children
         })]
-      }), /*#__PURE__*/jsx("div", {
-        ref: contentReference,
-        style: setContentMaxHeight(),
-        className: "np-bottom-sheet--content",
-        children: props.children
-      })]
+      })
     })
   });
 };
@@ -10942,28 +10925,19 @@ function SnackbarProvider({
   });
 }
 
-const Sticky = ({
-  open,
-  position,
+function Sticky({
+  open = true,
+  position = 'bottom',
   children
-}) => /*#__PURE__*/jsx(SlidingPanel$1, {
-  open: open,
-  position: position,
-  slidingPanelPositionFixed: true,
-  showSlidingPanelBorder: true,
-  children: children
-});
-Sticky.propTypes = {
-  open: PropTypes.bool,
-  position: PropTypes.oneOf(['top', 'bottom']),
-  children: PropTypes.node
-};
-Sticky.defaultProps = {
-  open: true,
-  position: 'bottom',
-  children: null
-};
-var Sticky$1 = Sticky;
+}) {
+  return /*#__PURE__*/jsx(SlidingPanel, {
+    open: open,
+    position: position,
+    slidingPanelPositionFixed: true,
+    showSlidingPanelBorder: true,
+    children: children
+  });
+}
 
 var messages$1 = defineMessages({
   statusNotDone: {
@@ -15078,5 +15052,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-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$1 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$1 as 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 };
+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$1 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, 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 };
 //# sourceMappingURL=index.esm.js.map