@ntbjs/react-components 1.1.0-beta.48 → 1.1.0-beta.49

package/{AssetGallery-2c8190de.js → AssetGallery-5b55a512.js}

@@ -11,7 +11,7 @@ require('./AutocompleteSelect-45be3cb4.js');
 require('./Button-dd271c4b.js');
 require('./Checkbox-012bbd3f.js');
 require('./CompactStarRating-364ca893.js');
-require('./CompactTextInput-ea908a7c.js');
+require('./CompactTextInput-7c88fdf9.js');
 require('./MultiSelect-2cbc13b3.js');
 require('./Radio-0594409d.js');
 require('./TextArea-8cffb1e7.js');
@@ -19,8 +19,8 @@ require('./Switch-cd165c8c.js');
 require('./Alert-3e4f8be1.js');
 require('./Badge-9bcebe96.js');
 require('./Popover-11df9750.js');
-require('./Tab-7fe07e8b.js');
-require('./Tabs-1269b6fe.js');
+require('./Tab-bd0f3345.js');
+require('./Tabs-0865ab94.js');
 var Tooltip = require('./Tooltip-e4e5e0e5.js');
 var styled = require('styled-components');
 var polished = require('polished');

package/{CompactTextInput-ea908a7c.js → CompactTextInput-7c88fdf9.js}

@@ -9,8 +9,8 @@ var editNote = require('./edit-note-c47d292e.js');
 require('./Alert-3e4f8be1.js');
 require('./Badge-9bcebe96.js');
 var Popover = require('./Popover-11df9750.js');
-require('./Tab-7fe07e8b.js');
-require('./Tabs-1269b6fe.js');
+require('./Tab-bd0f3345.js');
+require('./Tabs-0865ab94.js');
 var Tooltip = require('./Tooltip-e4e5e0e5.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/{Tab-7fe07e8b.js → Tab-bd0f3345.js}

@@ -10,21 +10,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject;
-var Tab$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n border-bottom: 1px solid;\n min-height: 35px;\n\n"])), function (props) {
+var Tab$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  border-bottom: 1px solid;\n  min-height: 35px;\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
 
 var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef) {
   var children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children"]);
+      hidden = _ref.hidden,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "hidden"]);
 
   return React__default['default'].createElement(Tab$1, defaultTheme._extends({
-    ref: forwardedRef
+    ref: forwardedRef,
+    hidden: hidden
   }, props), children);
 });
 Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.any
+  children: defaultTheme.PropTypes.any,
+  hidden: defaultTheme.PropTypes.bool
 } : {};
-Tab.defaultProps = {};
+Tab.defaultProps = {
+  hidden: false
+};
 
 exports.Tab = Tab;

package/{Tabs-1269b6fe.js → Tabs-0865ab94.js}

@@ -3,7 +3,7 @@
 var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
-var Tab = require('./Tab-7fe07e8b.js');
+var Tab = require('./Tab-bd0f3345.js');
 var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,13 +11,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral([""])));
-var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  gap: 24px;\n  margin: 0;\n  padding: 0;\n\n"])));
-var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-weight: 600;\n  font-size: 0.875rem;\n  display: flex;\n  padding-bottom: 8px;\n  letter-spacing: 0.6px;\n  cursor: pointer;\n  border-bottom: 1px solid;\n  border-color: transparent;\n  margin-bottom: 1px;\n  ", ";\n  &&:hover:not(:focus) {\n      ", ";\n"])), function (props) {
+var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n  gap: 24px;\n  margin: 0;\n  padding: 0;\n"])));
+var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-weight: 600;\n  font-size: 0.875rem;\n  display: flex;\n  padding-bottom: 8px;\n  letter-spacing: 0.6px;\n  cursor: pointer;\n  border-bottom: 1px solid;\n  border-color: transparent;\n  margin-bottom: 1px;\n  ", ";\n  ", ";\n  &&:hover:not(:focus) {\n    ", ";\n  }\n"])), function (props) {
   return props.theme.secondaryFontFamily;
 }, function (props) {
-  return props.active && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
+  return props.hidden && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      display: none;\n    "])));
+}, function (props) {
+  return props.active && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
     return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
   });
 }, function (props) {
@@ -35,7 +37,7 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
     }
   });
 });
-var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 16px;\n  border-top: 1px solid;\n  margin-top: -2px;\n  ", ";\n"])), function (props) {
+var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 16px;\n  border-top: 1px solid;\n  margin-top: -2px;\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
 });
 
@@ -48,6 +50,12 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
+  var visibleTabs = [];
+  React.useEffect(function () {
+    if ((visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0) {
+      setActiveTab(visibleTabs[0].key);
+    }
+  }, [visibleTabs]);
   var tabs = React.useMemo(function () {
     var tabs = [];
 
@@ -57,7 +65,10 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
           extractChildren(child.props.children);
         }
 
-        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
+        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger) && !child.props.hidden) {
+          visibleTabs.push({
+            key: index
+          });
           tabs.push({
             key: index,
             trigger: child.props.trigger,
@@ -77,6 +88,7 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
   }), React__default['default'].createElement(TabHeaders, null, tabs.map(function (tab) {
     return React__default['default'].createElement(TabHeader, {
       key: tab.key,
+      hidden: tab.hidden,
       active: tab.key === activeTab,
       onClick: function onClick() {
         return setActiveTab(tab.key);

package/data/Tab/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tab = require('../../Tab-7fe07e8b.js');
+var Tab = require('../../Tab-bd0f3345.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');

package/data/Tabs/index.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var Tabs = require('../../Tabs-1269b6fe.js');
+var Tabs = require('../../Tabs-0865ab94.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
-require('../../Tab-7fe07e8b.js');
+require('../../Tab-bd0f3345.js');
 require('lodash');
 
 

package/data/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Alert = require('../Alert-3e4f8be1.js');
 var Badge = require('../Badge-9bcebe96.js');
 var Popover = require('../Popover-11df9750.js');
-var Tab = require('../Tab-7fe07e8b.js');
-var Tabs = require('../Tabs-1269b6fe.js');
+var Tab = require('../Tab-bd0f3345.js');
+var Tabs = require('../Tabs-0865ab94.js');
 var Tooltip = require('../Tooltip-e4e5e0e5.js');
 require('../defaultTheme-50f2b88f.js');
 require('styled-components');

package/inputs/CompactTextInput/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var CompactTextInput = require('../../CompactTextInput-ea908a7c.js');
+var CompactTextInput = require('../../CompactTextInput-7c88fdf9.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
@@ -13,8 +13,8 @@ require('../../Popover-11df9750.js');
 require('polished');
 require('@tippyjs/react');
 require('../../shift-away-subtle-cfdf1dbe.js');
-require('../../Tab-7fe07e8b.js');
-require('../../Tabs-1269b6fe.js');
+require('../../Tab-bd0f3345.js');
+require('../../Tabs-0865ab94.js');
 require('../../Tooltip-e4e5e0e5.js');
 
 

package/inputs/index.js

@@ -7,7 +7,7 @@ var AutocompleteSelect = require('../AutocompleteSelect-45be3cb4.js');
 var Button = require('../Button-dd271c4b.js');
 var Checkbox = require('../Checkbox-012bbd3f.js');
 var CompactStarRating = require('../CompactStarRating-364ca893.js');
-var CompactTextInput = require('../CompactTextInput-ea908a7c.js');
+var CompactTextInput = require('../CompactTextInput-7c88fdf9.js');
 var MultiSelect = require('../MultiSelect-2cbc13b3.js');
 var Radio = require('../Radio-0594409d.js');
 var TextArea = require('../TextArea-8cffb1e7.js');
@@ -32,8 +32,8 @@ require('../ContextMenu-d088833b.js');
 require('../edit-note-c47d292e.js');
 require('../Alert-3e4f8be1.js');
 require('../Badge-9bcebe96.js');
-require('../Tab-7fe07e8b.js');
-require('../Tabs-1269b6fe.js');
+require('../Tab-bd0f3345.js');
+require('../Tabs-0865ab94.js');
 require('../Tooltip-e4e5e0e5.js');
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.1.0-beta.48",
+  "version": "1.1.0-beta.49",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-2c8190de.js');
+var AssetGallery = require('../../AssetGallery-5b55a512.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
@@ -26,11 +26,11 @@ require('../../shift-away-subtle-cfdf1dbe.js');
 require('../../ContextMenu-d088833b.js');
 require('../../Checkbox-012bbd3f.js');
 require('../../CompactStarRating-364ca893.js');
-require('../../CompactTextInput-ea908a7c.js');
+require('../../CompactTextInput-7c88fdf9.js');
 require('../../Alert-3e4f8be1.js');
 require('../../Badge-9bcebe96.js');
-require('../../Tab-7fe07e8b.js');
-require('../../Tabs-1269b6fe.js');
+require('../../Tab-bd0f3345.js');
+require('../../Tabs-0865ab94.js');
 require('../../Tooltip-e4e5e0e5.js');
 require('../../MultiSelect-2cbc13b3.js');
 require('../../Radio-0594409d.js');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-2c8190de.js');
+var AssetGallery = require('../AssetGallery-5b55a512.js');
 var ContextMenu = require('../ContextMenu-d088833b.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-159b9885.js');
 var Instructions = require('../Instructions-d8ab91c2.js');
@@ -30,11 +30,11 @@ require('@tippyjs/react');
 require('../shift-away-subtle-cfdf1dbe.js');
 require('../Checkbox-012bbd3f.js');
 require('../CompactStarRating-364ca893.js');
-require('../CompactTextInput-ea908a7c.js');
+require('../CompactTextInput-7c88fdf9.js');
 require('../Alert-3e4f8be1.js');
 require('../Badge-9bcebe96.js');
-require('../Tab-7fe07e8b.js');
-require('../Tabs-1269b6fe.js');
+require('../Tab-bd0f3345.js');
+require('../Tabs-0865ab94.js');
 require('../Tooltip-e4e5e0e5.js');
 require('../MultiSelect-2cbc13b3.js');
 require('../Radio-0594409d.js');