@ntbjs/react-components 1.1.0-beta.58 → 1.1.0-beta.59

package/{AssetGallery-25e96bb0.js → AssetGallery-5a0cfc32.js}

@@ -11,16 +11,16 @@ require('./AutocompleteSelect-45be3cb4.js');
 require('./Button-dd271c4b.js');
 require('./Checkbox-012bbd3f.js');
 require('./CompactStarRating-942afff1.js');
-require('./CompactTextInput-8add474f.js');
+require('./CompactTextInput-ba47a0c3.js');
 require('./MultiSelect-5b008b32.js');
 require('./Radio-0594409d.js');
-require('./TextArea-dbbcd0be.js');
+require('./TextArea-6dad1bbe.js');
 require('./Switch-cd165c8c.js');
 require('./Alert-3e4f8be1.js');
 require('./Badge-9bcebe96.js');
 require('./Popover-11df9750.js');
 require('./Tab-bd0f3345.js');
-require('./Tabs-6b6c9b98.js');
+require('./Tabs-5d043540.js');
 var Tooltip = require('./Tooltip-f4f9ab8f.js');
 var styled = require('styled-components');
 var polished = require('polished');

package/{CompactTextInput-8add474f.js → CompactTextInput-ba47a0c3.js}

@@ -10,7 +10,7 @@ require('./Alert-3e4f8be1.js');
 require('./Badge-9bcebe96.js');
 var Popover = require('./Popover-11df9750.js');
 require('./Tab-bd0f3345.js');
-require('./Tabs-6b6c9b98.js');
+require('./Tabs-5d043540.js');
 var Tooltip = require('./Tooltip-f4f9ab8f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -75,7 +75,7 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
 }, function (props) {
   return props.error && props.theme.themeProp('background', '#7f1b1b', '#fbeae6');
 }, function (props) {
-  return props.edit && props.theme.themeProp('background', '#505050', '#FAFFFD');
+  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
 }, function (props) {
   return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }, function (props) {

package/{Instructions-06b46041.js → Instructions-504093f2.js}

@@ -3,7 +3,7 @@
 var defaultTheme = require('./defaultTheme-50f2b88f.js');
 var React = require('react');
 var styled = require('styled-components');
-var TextArea = require('./TextArea-dbbcd0be.js');
+var TextArea = require('./TextArea-6dad1bbe.js');
 var AutocompleteSelect = require('./AutocompleteSelect-45be3cb4.js');
 var warningCircle = require('./warning-circle-24522402.js');
 var lodash = require('lodash');

package/{Tabs-6b6c9b98.js → Tabs-5d043540.js}

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  ", ";\n"])), function (props) {
   return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), props.backgroundColor);
 });
 var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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"])));
@@ -39,28 +39,29 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
     }
   });
 });
-var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 16px;\n  border-top: 1px solid;\n  margin-top: -2px;\n  display: block;\n  ", ";\n"])), function (props) {
+var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  border-top: 1px solid;\n  margin-top: -2px;\n  display: block;\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
 });
 
 var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
   var children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children"]);
+      heightCallback = _ref.heightCallback,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "heightCallback"]);
 
   var _useState = React.useState(0),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
       activeTab = _useState2[0],
       setActiveTab = _useState2[1];
 
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState(),
       _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      minHeight = _useState4[0],
-      setMinHeight = _useState4[1];
+      firstTab = _useState4[0],
+      setFirstTab = _useState4[1];
 
   var _useState5 = React.useState(),
       _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      firstTab = _useState6[0],
-      setFirstTab = _useState6[1];
+      minHeight = _useState6[0],
+      setMinHeight = _useState6[1];
 
   var contentRef = React.useRef(null);
   var visibleTabs = [];
@@ -70,9 +71,11 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
       setFirstTab(visibleTabs[0]);
     }
   }, [visibleTabs]);
+  console.log(firstTab);
   React.useEffect(function () {
     if (contentRef.current) {
       var height = contentRef.current.offsetHeight;
+      heightCallback(height);
       setMinHeight(height);
     }
   }, [firstTab]);
@@ -117,22 +120,21 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
       role: "tab"
     }, tab.trigger);
   })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
-    var _visibleTabs$;
-
     return React__default['default'].createElement("div", {
-      ref: tab.key === ((_visibleTabs$ = visibleTabs[0]) === null || _visibleTabs$ === void 0 ? void 0 : _visibleTabs$.key) ? contentRef : null,
+      ref: tab.key === (firstTab === null || firstTab === void 0 ? void 0 : firstTab.key) ? contentRef : null,
       key: tab.key,
       role: "tabpanel",
       hidden: tab.key !== activeTab,
       style: {
-        height: minHeight
+        minHeight: minHeight
       }
     }, tab.content);
   })));
 });
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
   children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
-  backgroundColor: defaultTheme.PropTypes.string
+  backgroundColor: defaultTheme.PropTypes.string,
+  heightCallback: defaultTheme.PropTypes.func
 } : {};
 Tabs.defaultProps = {};
 

package/{TextArea-dbbcd0be.js → TextArea-6dad1bbe.js}

@@ -39,7 +39,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.lightBackground && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n          ", "\n          ", "\n          &&:hover {\n            ", "\n          }\n        "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
 }, function (props) {
-  return props.edit && props.theme.themeProp('background', '#505050', '#FAFFFD');
+  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
 }, function (props) {
   return props.noBorder && !props.readOnly ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
 }, InputIconContainer, function (props) {

package/data/Tabs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Tabs = require('../../Tabs-6b6c9b98.js');
+var Tabs = require('../../Tabs-5d043540.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');

package/data/index.js

@@ -6,7 +6,7 @@ var Alert = require('../Alert-3e4f8be1.js');
 var Badge = require('../Badge-9bcebe96.js');
 var Popover = require('../Popover-11df9750.js');
 var Tab = require('../Tab-bd0f3345.js');
-var Tabs = require('../Tabs-6b6c9b98.js');
+var Tabs = require('../Tabs-5d043540.js');
 var Tooltip = require('../Tooltip-f4f9ab8f.js');
 require('../defaultTheme-50f2b88f.js');
 require('styled-components');

package/inputs/CompactTextInput/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var CompactTextInput = require('../../CompactTextInput-8add474f.js');
+var CompactTextInput = require('../../CompactTextInput-ba47a0c3.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
@@ -14,7 +14,7 @@ require('polished');
 require('@tippyjs/react');
 require('../../shift-away-subtle-cfdf1dbe.js');
 require('../../Tab-bd0f3345.js');
-require('../../Tabs-6b6c9b98.js');
+require('../../Tabs-5d043540.js');
 require('../../Tooltip-f4f9ab8f.js');
 
 

package/inputs/TextArea/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var TextArea = require('../../TextArea-dbbcd0be.js');
+var TextArea = require('../../TextArea-6dad1bbe.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');

package/inputs/index.js

@@ -7,10 +7,10 @@ var AutocompleteSelect = require('../AutocompleteSelect-45be3cb4.js');
 var Button = require('../Button-dd271c4b.js');
 var Checkbox = require('../Checkbox-012bbd3f.js');
 var CompactStarRating = require('../CompactStarRating-942afff1.js');
-var CompactTextInput = require('../CompactTextInput-8add474f.js');
+var CompactTextInput = require('../CompactTextInput-ba47a0c3.js');
 var MultiSelect = require('../MultiSelect-5b008b32.js');
 var Radio = require('../Radio-0594409d.js');
-var TextArea = require('../TextArea-dbbcd0be.js');
+var TextArea = require('../TextArea-6dad1bbe.js');
 var TextInput = require('../TextInput-a1083be3.js');
 var Switch = require('../Switch-cd165c8c.js');
 require('../defaultTheme-50f2b88f.js');
@@ -33,7 +33,7 @@ require('../edit-note-c47d292e.js');
 require('../Alert-3e4f8be1.js');
 require('../Badge-9bcebe96.js');
 require('../Tab-bd0f3345.js');
-require('../Tabs-6b6c9b98.js');
+require('../Tabs-5d043540.js');
 require('../Tooltip-f4f9ab8f.js');
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.1.0-beta.58",
+  "version": "1.1.0-beta.59",
   "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-25e96bb0.js');
+var AssetGallery = require('../../AssetGallery-5a0cfc32.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
@@ -26,15 +26,15 @@ require('../../shift-away-subtle-cfdf1dbe.js');
 require('../../ContextMenu-d088833b.js');
 require('../../Checkbox-012bbd3f.js');
 require('../../CompactStarRating-942afff1.js');
-require('../../CompactTextInput-8add474f.js');
+require('../../CompactTextInput-ba47a0c3.js');
 require('../../Alert-3e4f8be1.js');
 require('../../Badge-9bcebe96.js');
 require('../../Tab-bd0f3345.js');
-require('../../Tabs-6b6c9b98.js');
+require('../../Tabs-5d043540.js');
 require('../../Tooltip-f4f9ab8f.js');
 require('../../MultiSelect-5b008b32.js');
 require('../../Radio-0594409d.js');
-require('../../TextArea-dbbcd0be.js');
+require('../../TextArea-6dad1bbe.js');
 require('../../Switch-cd165c8c.js');
 require('../../warning-circle-24522402.js');
 

package/widgets/Instructions/index.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var Instructions = require('../../Instructions-06b46041.js');
+var Instructions = require('../../Instructions-504093f2.js');
 require('../../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
-require('../../TextArea-dbbcd0be.js');
+require('../../TextArea-6dad1bbe.js');
 require('nanoid');
 require('lodash');
 require('../../edit-note-c47d292e.js');

package/widgets/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-25e96bb0.js');
+var AssetGallery = require('../AssetGallery-5a0cfc32.js');
 var ContextMenu = require('../ContextMenu-d088833b.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-159b9885.js');
-var Instructions = require('../Instructions-06b46041.js');
+var Instructions = require('../Instructions-504093f2.js');
 require('../defaultTheme-50f2b88f.js');
 require('styled-components');
 require('react');
@@ -30,15 +30,15 @@ require('@tippyjs/react');
 require('../shift-away-subtle-cfdf1dbe.js');
 require('../Checkbox-012bbd3f.js');
 require('../CompactStarRating-942afff1.js');
-require('../CompactTextInput-8add474f.js');
+require('../CompactTextInput-ba47a0c3.js');
 require('../Alert-3e4f8be1.js');
 require('../Badge-9bcebe96.js');
 require('../Tab-bd0f3345.js');
-require('../Tabs-6b6c9b98.js');
+require('../Tabs-5d043540.js');
 require('../Tooltip-f4f9ab8f.js');
 require('../MultiSelect-5b008b32.js');
 require('../Radio-0594409d.js');
-require('../TextArea-dbbcd0be.js');
+require('../TextArea-6dad1bbe.js');
 require('../Switch-cd165c8c.js');
 require('../warning-circle-24522402.js');