@transferwise/components 0.0.0-experimental-bcfa03a → 0.0.0-experimental-3cdcd93

package/build/styles/main.css

@@ -3976,49 +3976,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-.np-select-input-option-container {
-  display: flex;
-  cursor: default;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-  -moz-column-gap: var(--size-8);
-       column-gap: var(--size-8);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-primary);
-}
-.np-select-input-option-container:focus {
-  outline: none;
-}
-.np-select-input-option-container--active {
-  box-shadow: inset 0 0 0 1px #c9cbce;
-  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-}
-.np-select-input-option-container--disabled {
-  opacity: 0.45;
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.np-select-input-option {
-  flex: 1;
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
 }
-.np-select-input-option-check--not-selected {
-  visibility: hidden;
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 }
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
+.np-select-input-options-container:focus {
+  outline: none;
 }
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
 }
 .np-select-input-options-status {
   display: flex;
@@ -4084,22 +4062,54 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   contain: strict;
   height: 100%;
 }
-.np-select-input-options-container {
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}
+.np-select-input-option-container {
   display: flex;
-  height: 100%;
-  flex-direction: column;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-select-input-options-container:focus {
+.np-select-input-option-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
 }
 .np-select-input-option-content-container {
   display: flex;
@@ -4138,6 +4148,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-left: 8px;
   margin-left: var(--size-8);
 }
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
 .np-select-input-addon-container {
   pointer-events: none;
   margin-inline-start: 4px;
@@ -4149,21 +4163,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
 .np-select-input-addon {
   border-width: 0;
   background: none;
@@ -4193,6 +4192,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}
 .np-text-area {
   min-height: 72px;
   min-height: var(--size-72);

package/build/tabs/Tabs.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var web = require('@react-spring/web');
 var clsx = require('clsx');
 var clamp = require('lodash.clamp');
 var React = require('react');
@@ -40,17 +39,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var clamp__default = /*#__PURE__*/_interopDefault(clamp);
 
 const MIN_INDEX = 0;
-const SpacerWidth = {
-  default: 0,
-  xs: 8,
-  sm: 16,
-  md: 24,
-  lg: 32
-};
 class Tabs extends React.Component {
   static defaultProps = {
     changeTabOnSwipe: true,
-    transitionSpacing: 'default',
     headerWidth: width.Width.BLOCK
   };
   containerReference = /*#__PURE__*/React.createRef();
@@ -58,25 +49,15 @@ class Tabs extends React.Component {
     super(props);
     this.state = {
       start: null,
-      translateX: 0,
-      translateFrom: 0,
-      translateTo: 0,
       translateLineX: null,
-      isAnimating: false,
       isSwiping: false,
       isScrolling: false,
-      lastSwipeVelocity: 0,
-      fullWidthTabs: props.headerWidth === width.Width.BLOCK,
-      currentSwipe: [],
-      selectedTabIndex: props.selected
+      fullWidthTabs: props.headerWidth === width.Width.BLOCK
     };
   }
   container = null;
   containerWidth = 0;
   tabRefs = [];
-  get filteredTabsLength() {
-    return this.props.tabs.filter(tab => !tab.disabled).length;
-  }
   get MAX_INDEX() {
     return this.props.tabs.length - 1;
   }
@@ -86,7 +67,7 @@ class Tabs extends React.Component {
     } = this.props;
     this.setTabWidth();
     this.switchTab(clamp__default.default(selected, MIN_INDEX, this.MAX_INDEX));
-    this.animateToTab(clamp__default.default(selected, MIN_INDEX, this.MAX_INDEX), true);
+    this.animateLine(clamp__default.default(selected, MIN_INDEX, this.MAX_INDEX));
     document.body.addEventListener('touchmove', this.disableScroll, {
       passive: false
     });
@@ -95,7 +76,7 @@ class Tabs extends React.Component {
     });
     window.addEventListener('resize', this.handleResize);
   }
-  componentDidUpdate(previousProps, previousState) {
+  componentDidUpdate(previousProps) {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
@@ -108,15 +89,11 @@ class Tabs extends React.Component {
     const previousDisabledTabsLength = previousProps.tabs.filter(tab => !tab.disabled).length;
     const currentHeaderWidth = this.props.headerWidth;
     const previousFullHeaderWidth = previousProps.headerWidth;
-    const {
-      animatePanelsOnClick
-    } = this.props;
-    const instantOnClick = !animatePanelsOnClick && !previousState.isSwiping;
     if (currentHeaderWidth !== previousFullHeaderWidth || currentTabsLength !== previousTabsLength) {
       this.setTabWidth();
     }
     if (currentSelected !== previousSelected || currentDisabledTabsLength !== previousDisabledTabsLength || currentSelectedTabIsDisabled !== previousSelectedTabIsDisabled) {
-      this.animateToTab(clamp__default.default(currentSelected, MIN_INDEX, this.MAX_INDEX), currentSelected === previousSelected || instantOnClick);
+      this.animateLine(clamp__default.default(currentSelected, MIN_INDEX, this.MAX_INDEX));
     }
   }
   componentWillUnmount() {
@@ -126,11 +103,6 @@ class Tabs extends React.Component {
   }
   handleResize = () => {
     this.setContainerWidth(this.container);
-    this.setState(({
-      selectedTabIndex
-    }) => ({
-      translateTo: -(this.containerWidth * selectedTabIndex)
-    }));
   };
   setContainerRefAndWidth = node => {
     this.container = node;
@@ -220,60 +192,17 @@ class Tabs extends React.Component {
     return nextSelected;
   };
   swipedOverHalfOfContainer = difference => difference / this.containerWidth >= 0.5;
-  calculateApplicableDragDifference = ({
-    currentSelected,
-    nextSelected,
-    start,
-    end
-  }) => {
-    const difference = utils.getSwipeDifference(start, end);
-    const elasticDrag = utils.getElasticDragDifference(difference);
-    if (utils.swipedLeftToRight(start, end)) {
-      if (currentSelected > MIN_INDEX && currentSelected !== nextSelected) {
-        return Math.min(difference, this.containerWidth);
-      }
-      return elasticDrag;
-    }
-    if (utils.swipedRightToLeft(start, end)) {
-      if (currentSelected < this.MAX_INDEX && currentSelected !== nextSelected) {
-        return -Math.min(difference, this.containerWidth);
-      }
-      return -elasticDrag;
-    }
-    return false;
-  };
   switchTab = index => {
     const {
       onTabSelect
     } = this.props;
     onTabSelect(index);
   };
-  getTabIndexWithoutDisabledTabs(index) {
-    return index - this.props.tabs.slice(0, index).filter(tab => tab.disabled).length;
-  }
-  animateToTab = (index, instant) => {
-    this.animateLine(index);
-    this.animatePanel(this.getTabIndexWithoutDisabledTabs(index), instant);
-  };
   animateLine = index => {
     this.setState(previousState => ({
       translateLineX: previousState.fullWidthTabs ? `${index * 100}%` : `${this.getDistanceToSelectedTab(index)}px`
     }));
   };
-  // Pass `instant` to set the `translateX` to the new panel with no transition
-  animatePanel = (index, instant = false) => {
-    const {
-      translateTo: currentTranslateTo
-    } = this.state;
-    const translateFrom = currentTranslateTo;
-    const translateTo = -(this.containerWidth * index);
-    this.setState({
-      selectedTabIndex: index,
-      isAnimating: !instant && translateFrom !== translateTo,
-      translateFrom,
-      translateTo
-    });
-  };
   disableScroll = event => {
     const {
       isSwiping
@@ -297,10 +226,8 @@ class Tabs extends React.Component {
       time: Date.now()
     };
     this.setState({
-      start,
-      currentSwipe: [start]
+      start
     });
-    event.persist();
   };
   handleTouchMove = event => {
     const {
@@ -312,7 +239,6 @@ class Tabs extends React.Component {
     const {
       selected: currentSelectedFromProps
     } = this.props;
-    const selected = this.getTabIndexWithoutDisabledTabs(currentSelectedFromProps);
     const end = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
@@ -324,7 +250,6 @@ class Tabs extends React.Component {
       isScrolling,
       isSwiping
     } = this.state;
-    event.persist();
     if (!isScrolling && !isSwiping) {
       if (difference > yAxisDifference) {
         isSwiping = true;
@@ -339,18 +264,6 @@ class Tabs extends React.Component {
     if (isSwiping) {
       const nextSelected = this.getTabToSelect(currentSelectedFromProps, start, end);
       this.animateLine(this.swipedOverHalfOfContainer(difference) ? nextSelected : currentSelectedFromProps);
-      const dragDifference = this.calculateApplicableDragDifference({
-        currentSelected: currentSelectedFromProps,
-        nextSelected,
-        start,
-        end
-      });
-      const translateX = dragDifference ? -(this.containerWidth * selected) + dragDifference : false;
-      this.setState(state => ({
-        currentSwipe: [...state.currentSwipe, end],
-        translateFrom: translateX || state.translateFrom,
-        translateTo: translateX || state.translateTo
-      }));
     }
   };
   handleTouchEnd = event => {
@@ -370,23 +283,15 @@ class Tabs extends React.Component {
       time: Date.now()
     };
     const difference = utils.getSwipeDifference(start, end);
-    const velocity = utils.getVelocity([...this.state.currentSwipe, end]);
-    this.setState({
-      currentSwipe: []
-    });
     let nextSelected = selected;
-    event.persist();
     if (isSwiping) {
       if (utils.swipeShouldChangeTab(start, end) || this.swipedOverHalfOfContainer(difference)) {
         nextSelected = this.getTabToSelect(nextSelected, start, end);
       }
       if (nextSelected !== selected) {
         this.switchTab(nextSelected);
-        this.setState({
-          lastSwipeVelocity: velocity
-        });
       } else {
-        this.animateToTab(nextSelected);
+        this.animateLine(nextSelected);
       }
     }
     this.setState({
@@ -401,34 +306,13 @@ class Tabs extends React.Component {
       name,
       selected,
       className,
-      transitionSpacing,
       headerWidth
     } = this.props;
     const {
-      isSwiping,
       translateLineX,
-      isAnimating,
-      translateFrom,
-      translateTo,
-      lastSwipeVelocity,
       fullWidthTabs
     } = this.state;
-    const spacer = SpacerWidth[transitionSpacing];
-    const tabsLength = this.filteredTabsLength;
-    const distanceSwiped = Math.abs(-translateFrom - this.containerWidth * selected);
-    const remainingContainerToTravel = isSwiping ? 1 - distanceSwiped / this.containerWidth : 1 - Math.abs(distanceSwiped / this.containerWidth - 1);
-    const restrictedVelocity = (Number.isNaN(remainingContainerToTravel) ? 0 : remainingContainerToTravel) * Math.min(10 * Math.E, lastSwipeVelocity * 10 * Math.E);
-    const hidePanelOverflow = isAnimating || isSwiping;
-    const sliderWidth = tabsLength * this.containerWidth + spacer * 2;
-    // Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
-    const Spacer = ({
-      id
-    }) => spacer > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-      style: {
-        width: spacer,
-        display: hidePanelOverflow ? 'block' : 'none'
-      }
-    }, id);
+    const selectedTab = tabs[selected];
     return /*#__PURE__*/jsxRuntime.jsx(DirectionProvider.DirectionContext.Consumer, {
       children: direction$1 => {
         const isRTL = direction$1 === direction.Direction.RTL;
@@ -478,55 +362,14 @@ class Tabs extends React.Component {
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
             ref: this.setContainerRefAndWidth,
             className: "tabs__panel-container",
-            style: {
-              overflow: hidePanelOverflow ? 'hidden' : 'visible'
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx(web.Spring, {
-              from: {
-                transform: `translateX(${translateFrom - spacer}px)`
-              },
-              to: {
-                transform: `translateX(${translateTo - spacer}px)`
-              },
-              config: {
-                precision: isSwiping ? 1 : 0.01,
-                velocity: !isSwiping ? restrictedVelocity : 0,
-                clamp: true
-              },
-              onRest: () => {
-                if (isAnimating) {
-                  this.setState({
-                    isAnimating: false,
-                    lastSwipeVelocity: 0
-                  });
-                }
+            children: selectedTab && !selectedTab.disabled ? /*#__PURE__*/jsxRuntime.jsx(TabPanel.default, {
+              tabId: `${name}-tab-${selected}`,
+              id: `${name}-panel-${selected}`,
+              style: {
+                width: '100%'
               },
-              children: props => /*#__PURE__*/jsxRuntime.jsx(web.animated.div, {
-                className: "tabs__slider",
-                style: {
-                  width: hidePanelOverflow ? `${sliderWidth}px` : '100%',
-                  transform: hidePanelOverflow ? props.transform : 'translateX(0px)'
-                },
-                children: tabs.map(({
-                  content,
-                  disabled
-                }, index) => !disabled ? /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
-                  children: [index === selected && /*#__PURE__*/jsxRuntime.jsx(Spacer, {
-                    id: "left-spacer"
-                  }), /*#__PURE__*/jsxRuntime.jsx(TabPanel.default, {
-                    tabId: `${name}-tab-${index}`,
-                    id: `${name}-panel-${index}`,
-                    style: {
-                      width: hidePanelOverflow ? `${this.containerWidth}px` : '100%',
-                      display: hidePanelOverflow || index === selected ? 'block' : 'none'
-                    },
-                    children: content
-                  }, tabs[index].title), index === selected && /*#__PURE__*/jsxRuntime.jsx(Spacer, {
-                    id: "right-spacer"
-                  })]
-                }, `${tabs[index].title}-fragment`) : null)
-              })
-            })
+              children: selectedTab.content
+            }, selectedTab.title) : null
           })]
         });
       }