@transferwise/components 0.0.0-experimental-63cdd4d → 0.0.0-experimental-0f1fe62

package/build/index.js

@@ -14,11 +14,11 @@ var reactTransitionGroup = require('react-transition-group');
 var reactDom = require('react-dom');
 var focus = require('@react-aria/focus');
 var mergeRefs = require('react-merge-refs');
-var shim = require('use-sync-external-store/shim');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var reactPopper = require('react-popper');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
+var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
 var art = require('@wise/art');
@@ -192,7 +192,6 @@ exports.Priority = void 0;
 
 exports.Breakpoint = void 0;
 (function (Breakpoint) {
-  Breakpoint[Breakpoint["ZOOM_400"] = 385] = "ZOOM_400";
   Breakpoint[Breakpoint["EXTRA_SMALL"] = 480] = "EXTRA_SMALL";
   Breakpoint[Breakpoint["SMALL"] = 576] = "SMALL";
   Breakpoint[Breakpoint["MEDIUM"] = 768] = "MEDIUM";
@@ -1741,6 +1740,58 @@ const DimmerContentWrapper = ({
 };
 var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
+const EXIT_ANIMATION = 350;
+const SlidingPanel = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  open,
+  position,
+  showSlidingPanelBorder,
+  slidingPanelPositionFixed,
+  ...rest
+}, reference) => {
+  /** @type {RefObject<HTMLDivElement>} */
+  const localReference = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+    ...rest,
+    nodeRef: localReference,
+    in: open
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: classNames__default.default(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
+      'sliding-panel--fixed': slidingPanelPositionFixed
+    }, 'sliding-panel'),
+    appear: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: mergeRefs__default.default([reference, localReference]),
+      className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, className),
+      children: children
+    })
+  });
+});
+SlidingPanel.propTypes = {
+  children: PropTypes__default.default.node,
+  className: PropTypes__default.default.string,
+  open: PropTypes__default.default.bool,
+  position: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
+  showSlidingPanelBorder: PropTypes__default.default.bool,
+  slidingPanelPositionFixed: PropTypes__default.default.bool
+};
+SlidingPanel.defaultProps = {
+  children: null,
+  className: undefined,
+  open: false,
+  position: 'left',
+  showSlidingPanelBorder: false,
+  slidingPanelPositionFixed: false
+};
+var SlidingPanel$1 = SlidingPanel;
+
 const THROTTLE_MS = 100;
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 const useClientWidth = ({
@@ -1911,137 +1962,6 @@ const useLayout = () => {
   };
 };
 
-const EXIT_ANIMATION = 350;
-const SlidingPanel = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  open,
-  position,
-  showSlidingPanelBorder,
-  slidingPanelPositionFixed,
-  ...rest
-}, reference) => {
-  /** @type {RefObject<HTMLDivElement>} */
-  const localReference = React.useRef(null);
-  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-    ...rest,
-    nodeRef: localReference,
-    in: open
-    // Wait for animation to finish before unmount.
-    ,
-    timeout: {
-      enter: 0,
-      exit: EXIT_ANIMATION
-    },
-    classNames: classNames__default.default(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
-      'sliding-panel--fixed': slidingPanelPositionFixed
-    }, 'sliding-panel'),
-    appear: true,
-    unmountOnExit: true,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: mergeRefs__default.default([reference, localReference]),
-      className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, className),
-      children: children
-    })
-  });
-});
-SlidingPanel.propTypes = {
-  children: PropTypes__default.default.node,
-  className: PropTypes__default.default.string,
-  open: PropTypes__default.default.bool,
-  position: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
-  showSlidingPanelBorder: PropTypes__default.default.bool,
-  slidingPanelPositionFixed: PropTypes__default.default.bool
-};
-SlidingPanel.defaultProps = {
-  children: null,
-  className: undefined,
-  open: false,
-  position: 'left',
-  showSlidingPanelBorder: false,
-  slidingPanelPositionFixed: false
-};
-var SlidingPanel$1 = SlidingPanel;
-
-const Drawer = ({
-  children,
-  className,
-  footerContent,
-  headerTitle,
-  onClose,
-  open,
-  position
-}) => {
-  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
-  const {
-    isMobile
-  } = useLayout();
-  return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
-    open: open,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel$1, {
-      open: open,
-      position: isMobile ? exports.Position.BOTTOM : position,
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-drawer', className),
-        role: "dialog",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: classNames__default.default('np-drawer-header', {
-            'np-drawer-header--withborder': headerTitle
-          }),
-          children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
-            type: exports.Typography.TITLE_BODY,
-            children: headerTitle
-          }), /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-            onClick: onClose
-          })]
-        }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames__default.default('np-drawer-content'),
-          children: children
-        }), footerContent && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames__default.default('np-drawer-footer'),
-          children: footerContent
-        })]
-      })
-    })
-  });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes__default.default.node,
-  className: PropTypes__default.default.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes__default.default.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes__default.default.node,
-  /** The action to perform on close click. */
-  onClose: PropTypes__default.default.func,
-  /** The status of Drawer either open or not. */
-  open: PropTypes__default.default.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom'])
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: exports.Position.RIGHT
-};
-var Drawer$1 = Drawer;
-
-function useMedia(query) {
-  return shim.useSyncExternalStore(onStoreChange => {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', onStoreChange);
-    return () => {
-      mediaQueryList.removeEventListener('change', onStoreChange);
-    };
-  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
-}
-
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -2169,13 +2089,7 @@ const BottomSheet$1 = props => {
       maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
     };
   }
-  const is400Zoom = useMedia(`(max-width: ${exports.Breakpoint.ZOOM_400}px)`);
-  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
-    open: props.open,
-    className: props.className,
-    onClose: close,
-    children: props.children
-  }) : /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
+  return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
     open: props.open,
     fadeContentOnEnter: true,
     fadeContentOnExit: true,
@@ -2347,7 +2261,7 @@ const typeClassMap$1 = {
   [exports.ControlType.POSITIVE]: 'btn-positive',
   [exports.ControlType.NEGATIVE]: 'btn-negative'
 };
-const priorityClassMap = {
+const priorityClassMap$1 = {
   [exports.Priority.PRIMARY]: 'btn-priority-1',
   [exports.Priority.SECONDARY]: 'btn-priority-2',
   [exports.Priority.TERTIARY]: 'btn-priority-3'
@@ -2429,7 +2343,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   typeClassMap$1[newType],
   // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  priorityClassMap[newPriority], className);
+  priorityClassMap$1[newPriority], className);
   function processIndicatorSize() {
     return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
   }
@@ -2693,6 +2607,10 @@ const CheckboxOption = /*#__PURE__*/React.forwardRef(({
   });
 });
 
+const priorityClassMap = {
+  [exports.Priority.PRIMARY]: 'np-chip--priority-1',
+  [exports.Priority.SECONDARY]: 'np-chip--priority-2'
+};
 const Chip = ({
   label,
   value,
@@ -2703,7 +2621,8 @@ const Chip = ({
   'aria-label': ariaLabel,
   'aria-checked': ariaChecked,
   role,
-  closeButton
+  closeButton,
+  priority = exports.Priority.PRIMARY
 }) => {
   const isActionable = onClick || onKeyPress;
   const defaultRole = isActionable ? 'button' : undefined;
@@ -2724,7 +2643,7 @@ const Chip = ({
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-checked": ariaChecked,
-    className: classNames__default.default('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
+    className: classNames__default.default('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', priorityClassMap[priority], className),
     ...(isActionable && {
       onClick,
       onKeyPress
@@ -2760,7 +2679,8 @@ const Chips = ({
   selected,
   'aria-label': ariaLabel,
   className,
-  multiple
+  multiple,
+  priority
 }) => {
   const intl = reactIntl.useIntl();
   const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
@@ -2788,6 +2708,7 @@ const Chips = ({
           'np-chip--selected': chipSelected,
           'p-r-1': multiple && chipSelected
         }),
+        priority: priority,
         ...(multiple && chipSelected ? {
           onRemove: () => handleOnChange(chip.value, chipSelected),
           'aria-label': chip.label
@@ -2811,7 +2732,7 @@ const CircularButton = ({
   type,
   ...rest
 }) => {
-  const classes = classNames__default.default('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
+  const classes = classNames__default.default('btn np-btn', typeClassMap$1[type], priorityClassMap$1[priority]);
   const iconElement = icon.props.size !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
   }) : icon;
@@ -3531,11 +3452,8 @@ const DateHeader = ({
   dateMode
 }) => {
   const intl = reactIntl.useIntl();
-  const {
-    isMobile
-  } = useLayout();
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('text-xs-center', !isMobile && ['clearfix', 'p-y-1']),
+    className: "text-xs-center p-t-1 p-b-2 clearfix",
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "pull-left-single-direction",
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -4131,8 +4049,7 @@ class DateLookup extends React.PureComponent {
       viewMonth: (props.value || new Date()).getMonth(),
       viewYear: (props.value || new Date()).getFullYear(),
       open: false,
-      mode: MODE.DAY,
-      isMobile: false
+      mode: MODE.DAY
     };
   }
   static getDerivedStateFromProps(props, state) {
@@ -4167,10 +4084,6 @@ class DateLookup extends React.PureComponent {
     if (+this.props.value !== +previousProps.value && this.state.open) {
       this.focusOn('.active');
     }
-    this.mediaQuery = window.matchMedia(`(max-width: ${exports.Breakpoint.SMALL}px)`);
-    this.setState({
-      isMobile: this.mediaQuery.matches
-    });
   }
   componentWillUnmount() {
     // Prevents memory leak by cleaning state.
@@ -4303,17 +4216,14 @@ class DateLookup extends React.PureComponent {
       max,
       viewMonth,
       viewYear,
-      mode,
-      isMobile
+      mode
     } = this.state;
     const {
       placeholder,
       monthFormat
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames__default.default({
-        'p-a-1': !isMobile
-      }),
+      className: "p-a-1",
       children: [mode === MODE.DAY && /*#__PURE__*/jsxRuntime.jsx(DayCalendar$1, {
         selectedDate,
         min,
@@ -4821,6 +4731,75 @@ function Display({
   });
 }
 
+const Drawer = ({
+  children,
+  className,
+  footerContent,
+  headerTitle,
+  onClose,
+  open,
+  position
+}) => {
+  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
+  const {
+    isMobile
+  } = useLayout();
+  return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
+    open: open,
+    onClose: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(SlidingPanel$1, {
+      open: open,
+      position: isMobile ? exports.Position.BOTTOM : position,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames__default.default('np-drawer', className),
+        role: "dialog",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: classNames__default.default('np-drawer-header', {
+            'np-drawer-header--withborder': headerTitle
+          }),
+          children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
+            type: exports.Typography.TITLE_BODY,
+            children: headerTitle
+          }), /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
+            onClick: onClose
+          })]
+        }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames__default.default('np-drawer-content'),
+          children: children
+        }), footerContent && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames__default.default('np-drawer-footer'),
+          children: footerContent
+        })]
+      })
+    })
+  });
+};
+Drawer.propTypes = {
+  /** The content to appear in the drawer body. */
+  children: PropTypes__default.default.node,
+  className: PropTypes__default.default.string,
+  /** The content to appear in the drawer footer. */
+  footerContent: PropTypes__default.default.node,
+  /** The content to appear in the drawer header. */
+  headerTitle: PropTypes__default.default.node,
+  /** The action to perform on close click. */
+  onClose: PropTypes__default.default.func,
+  /** The status of Drawer either open or not. */
+  open: PropTypes__default.default.bool,
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom'])
+};
+Drawer.defaultProps = {
+  children: null,
+  className: undefined,
+  footerContent: null,
+  headerTitle: null,
+  onClose: null,
+  open: false,
+  position: exports.Position.RIGHT
+};
+var Drawer$1 = Drawer;
+
 const DropFade = ({
   children,
   show
@@ -5953,14 +5932,13 @@ const Modal = ({
 }) => {
   const checkSpecialClasses = classToCheck => className?.split(' ').includes(classToCheck);
   const {
-    isMobile,
-    isMedium: isTablet
+    isMobile
   } = useLayout();
   // These should be replaced with props in breaking change.
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
-  return isMobile || isTablet ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return isMobile ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -6383,6 +6361,16 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   });
 });
 
+function useMedia(query) {
+  return shim.useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
 function useScreenSize(size) {
   return useMedia(`(min-width: ${size}px)`);
 }