@transferwise/components 0.0.0-experimental-9ea64bb → 0.0.0-experimental-249c8c0

package/build/index.esm.js

@@ -12124,7 +12124,8 @@ class Tabs extends Component {
       selected,
       className,
       transitionSpacing,
-      headerWidth
+      headerWidth,
+      action
     } = this.props;
     const {
       isSwiping,
@@ -12163,40 +12164,46 @@ class Tabs extends Component {
           onTouchStart: changeTabOnSwipe ? this.handleTouchStart : undefined,
           onTouchEnd: changeTabOnSwipe ? this.handleTouchEnd : undefined,
           onTouchMove: changeTabOnSwipe ? this.handleTouchMove : undefined,
-          children: [/*#__PURE__*/jsxs(TabList$1, {
-            children: [tabs.map(({
-              title,
-              disabled
-            }, index) => {
-              return /*#__PURE__*/jsx(Tab$1, {
-                ref: node => {
-                  this.tabRefs[index] = node;
-                },
-                id: `${name}-tab-${index}`,
-                panelId: `${name}-panel-${index}`,
-                selected: selected === index,
-                disabled: disabled,
-                focusTab: () => {
-                  if (this.containerReference.current?.contains(document.activeElement)) {
-                    this.tabRefs[index].focus();
-                  }
-                },
-                onClick: disabled ? null : this.handleTabClick(index),
-                onKeyDown: this.onKeyDown(index),
-                ...(fullWidthTabs ? {
-                  style: {
-                    width: `${1 / tabs.length * 100}%`
-                  }
-                } : {}),
-                children: title
-              }, title);
-            }), translateLineX ? /*#__PURE__*/jsx("li", {
-              role: "none",
-              className: "tabs__line",
-              style: {
-                width: this.getTabLineWidth(),
-                transform: isRTL ? `translateX(-${translateLineX})` : `translateX(${translateLineX})`
-              }
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "tabs__header",
+            children: [/*#__PURE__*/jsxs(TabList$1, {
+              children: [tabs.map(({
+                title,
+                disabled
+              }, index) => {
+                return /*#__PURE__*/jsx(Tab$1, {
+                  ref: node => {
+                    this.tabRefs[index] = node;
+                  },
+                  id: `${name}-tab-${index}`,
+                  panelId: `${name}-panel-${index}`,
+                  selected: selected === index,
+                  disabled: disabled,
+                  focusTab: () => {
+                    if (this.containerReference.current?.contains(document.activeElement)) {
+                      this.tabRefs[index].focus();
+                    }
+                  },
+                  onClick: disabled ? null : this.handleTabClick(index),
+                  onKeyDown: this.onKeyDown(index),
+                  ...(fullWidthTabs ? {
+                    style: {
+                      width: `${1 / tabs.length * 100}%`
+                    }
+                  } : {}),
+                  children: title
+                }, title);
+              }), translateLineX ? /*#__PURE__*/jsx("li", {
+                role: "none",
+                className: "tabs__line",
+                style: {
+                  width: this.getTabLineWidth(),
+                  transform: isRTL ? `translateX(-${translateLineX})` : `translateX(${translateLineX})`
+                }
+              }) : null]
+            }), action ? /*#__PURE__*/jsx("div", {
+              className: "tabs__action-container",
+              children: action
             }) : null]
           }), /*#__PURE__*/jsx("div", {
             ref: this.setContainerRefAndWidth,
@@ -12274,7 +12281,8 @@ Tabs.propTypes = {
   className: PropTypes.string,
   transitionSpacing: PropTypes.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
   headerWidth: PropTypes.oneOf(['auto', 'block']),
-  id: PropTypes.string
+  id: PropTypes.string,
+  action: PropTypes.element
 };
 Tabs.defaultProps = {
   animatePanelsOnClick: false,