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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/{AssetGallery-5b55a512.js → AssetGallery-d01e5e39.js} +2 -2
  2. package/{CompactTextInput-7c88fdf9.js → CompactTextInput-c3dd0913.js} +1 -1
  3. package/{Tabs-0865ab94.js → Tabs-ca33dd67.js} +33 -10
  4. package/data/Tabs/index.js +1 -1
  5. package/data/index.js +1 -1
  6. package/inputs/CompactTextInput/index.js +2 -2
  7. package/inputs/index.js +2 -2
  8. package/package.json +1 -1
  9. package/widgets/AssetGallery/index.js +3 -3
  10. package/widgets/index.js +3 -3
package/{AssetGallery-5b55a512.js → AssetGallery-d01e5e39.js} RENAMED
@@ -11,7 +11,7 @@ require('./AutocompleteSelect-45be3cb4.js');
11
11
  require('./Button-dd271c4b.js');
12
12
  require('./Checkbox-012bbd3f.js');
13
13
  require('./CompactStarRating-364ca893.js');
14
- require('./CompactTextInput-7c88fdf9.js');
14
+ require('./CompactTextInput-c3dd0913.js');
15
15
  require('./MultiSelect-2cbc13b3.js');
16
16
  require('./Radio-0594409d.js');
17
17
  require('./TextArea-8cffb1e7.js');
@@ -20,7 +20,7 @@ require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
21
21
  require('./Popover-11df9750.js');
22
22
  require('./Tab-bd0f3345.js');
23
- require('./Tabs-0865ab94.js');
23
+ require('./Tabs-ca33dd67.js');
24
24
  var Tooltip = require('./Tooltip-e4e5e0e5.js');
25
25
  var styled = require('styled-components');
26
26
  var polished = require('polished');
package/{CompactTextInput-7c88fdf9.js → CompactTextInput-c3dd0913.js} RENAMED
@@ -10,7 +10,7 @@ require('./Alert-3e4f8be1.js');
10
10
  require('./Badge-9bcebe96.js');
11
11
  var Popover = require('./Popover-11df9750.js');
12
12
  require('./Tab-bd0f3345.js');
13
- require('./Tabs-0865ab94.js');
13
+ require('./Tabs-ca33dd67.js');
14
14
  var Tooltip = require('./Tooltip-e4e5e0e5.js');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
package/{Tabs-0865ab94.js → Tabs-ca33dd67.js} RENAMED
@@ -11,15 +11,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
15
- var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral([""])));
16
- 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"])));
17
- 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) {
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
15
+ var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
16
+ return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background-color: ", ";\n "])), props.backgroundColor);
17
+ });
18
+ 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"])));
19
+ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = 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) {
18
20
  return props.theme.secondaryFontFamily;
19
21
  }, function (props) {
20
- return props.hidden && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
22
+ return props.hidden && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
21
23
  }, function (props) {
22
- return props.active && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
24
+ return props.active && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
23
25
  return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
24
26
  });
25
27
  }, function (props) {
@@ -37,7 +39,7 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
37
39
  }
38
40
  });
39
41
  });
40
- 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) {
42
+ 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 ", ";\n"])), function (props) {
41
43
  return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
42
44
  });
43
45
 
@@ -50,12 +52,25 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
50
52
  activeTab = _useState2[0],
51
53
  setActiveTab = _useState2[1];
52
54
 
55
+ var _useState3 = React.useState(null),
56
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
57
+ minHeight = _useState4[0],
58
+ setMinHeight = _useState4[1];
59
+
60
+ var contentRef = React.useRef(null);
53
61
  var visibleTabs = [];
54
62
  React.useEffect(function () {
55
63
  if ((visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0) {
56
64
  setActiveTab(visibleTabs[0].key);
57
65
  }
58
66
  }, [visibleTabs]);
67
+ React.useEffect(function () {
68
+ if (contentRef.current) {
69
+ var height = contentRef.current.offsetHeight;
70
+ setMinHeight(height);
71
+ }
72
+ }, [children]);
73
+ console.log(minHeight);
59
74
  var tabs = React.useMemo(function () {
60
75
  var tabs = [];
61
76
 
@@ -67,7 +82,8 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
67
82
 
68
83
  if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger) && !child.props.hidden) {
69
84
  visibleTabs.push({
70
- key: index
85
+ key: index,
86
+ content: child.props.children
71
87
  });
72
88
  tabs.push({
73
89
  key: index,
@@ -96,15 +112,22 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
96
112
  role: "tab"
97
113
  }, tab.trigger);
98
114
  })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
115
+ var _visibleTabs$;
116
+
99
117
  return React__default['default'].createElement("div", {
118
+ ref: tab.key === ((_visibleTabs$ = visibleTabs[0]) === null || _visibleTabs$ === void 0 ? void 0 : _visibleTabs$.key) ? contentRef : null,
100
119
  key: tab.key,
101
120
  role: "tabpanel",
102
- hidden: tab.key !== activeTab
121
+ hidden: tab.key !== activeTab,
122
+ style: {
123
+ minHeight: minHeight
124
+ }
103
125
  }, tab.content);
104
126
  })));
105
127
  });
106
128
  Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
107
- children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object])
129
+ children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
130
+ backgroundColor: defaultTheme.PropTypes.string
108
131
  } : {};
109
132
  Tabs.defaultProps = {};
110
133
 
package/data/Tabs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Tabs = require('../../Tabs-0865ab94.js');
3
+ var Tabs = require('../../Tabs-ca33dd67.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/data/index.js CHANGED
@@ -6,7 +6,7 @@ var Alert = require('../Alert-3e4f8be1.js');
6
6
  var Badge = require('../Badge-9bcebe96.js');
7
7
  var Popover = require('../Popover-11df9750.js');
8
8
  var Tab = require('../Tab-bd0f3345.js');
9
- var Tabs = require('../Tabs-0865ab94.js');
9
+ var Tabs = require('../Tabs-ca33dd67.js');
10
10
  var Tooltip = require('../Tooltip-e4e5e0e5.js');
11
11
  require('../defaultTheme-50f2b88f.js');
12
12
  require('styled-components');
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-7c88fdf9.js');
3
+ var CompactTextInput = require('../../CompactTextInput-c3dd0913.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -14,7 +14,7 @@ require('polished');
14
14
  require('@tippyjs/react');
15
15
  require('../../shift-away-subtle-cfdf1dbe.js');
16
16
  require('../../Tab-bd0f3345.js');
17
- require('../../Tabs-0865ab94.js');
17
+ require('../../Tabs-ca33dd67.js');
18
18
  require('../../Tooltip-e4e5e0e5.js');
19
19
 
20
20
 
package/inputs/index.js CHANGED
@@ -7,7 +7,7 @@ var AutocompleteSelect = require('../AutocompleteSelect-45be3cb4.js');
7
7
  var Button = require('../Button-dd271c4b.js');
8
8
  var Checkbox = require('../Checkbox-012bbd3f.js');
9
9
  var CompactStarRating = require('../CompactStarRating-364ca893.js');
10
- var CompactTextInput = require('../CompactTextInput-7c88fdf9.js');
10
+ var CompactTextInput = require('../CompactTextInput-c3dd0913.js');
11
11
  var MultiSelect = require('../MultiSelect-2cbc13b3.js');
12
12
  var Radio = require('../Radio-0594409d.js');
13
13
  var TextArea = require('../TextArea-8cffb1e7.js');
@@ -33,7 +33,7 @@ require('../edit-note-c47d292e.js');
33
33
  require('../Alert-3e4f8be1.js');
34
34
  require('../Badge-9bcebe96.js');
35
35
  require('../Tab-bd0f3345.js');
36
- require('../Tabs-0865ab94.js');
36
+ require('../Tabs-ca33dd67.js');
37
37
  require('../Tooltip-e4e5e0e5.js');
38
38
 
39
39
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.49",
3
+ "version": "1.1.0-beta.50",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-5b55a512.js');
3
+ var AssetGallery = require('../../AssetGallery-d01e5e39.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -26,11 +26,11 @@ require('../../shift-away-subtle-cfdf1dbe.js');
26
26
  require('../../ContextMenu-d088833b.js');
27
27
  require('../../Checkbox-012bbd3f.js');
28
28
  require('../../CompactStarRating-364ca893.js');
29
- require('../../CompactTextInput-7c88fdf9.js');
29
+ require('../../CompactTextInput-c3dd0913.js');
30
30
  require('../../Alert-3e4f8be1.js');
31
31
  require('../../Badge-9bcebe96.js');
32
32
  require('../../Tab-bd0f3345.js');
33
- require('../../Tabs-0865ab94.js');
33
+ require('../../Tabs-ca33dd67.js');
34
34
  require('../../Tooltip-e4e5e0e5.js');
35
35
  require('../../MultiSelect-2cbc13b3.js');
36
36
  require('../../Radio-0594409d.js');
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-5b55a512.js');
5
+ var AssetGallery = require('../AssetGallery-d01e5e39.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-159b9885.js');
8
8
  var Instructions = require('../Instructions-d8ab91c2.js');
@@ -30,11 +30,11 @@ require('@tippyjs/react');
30
30
  require('../shift-away-subtle-cfdf1dbe.js');
31
31
  require('../Checkbox-012bbd3f.js');
32
32
  require('../CompactStarRating-364ca893.js');
33
- require('../CompactTextInput-7c88fdf9.js');
33
+ require('../CompactTextInput-c3dd0913.js');
34
34
  require('../Alert-3e4f8be1.js');
35
35
  require('../Badge-9bcebe96.js');
36
36
  require('../Tab-bd0f3345.js');
37
- require('../Tabs-0865ab94.js');
37
+ require('../Tabs-ca33dd67.js');
38
38
  require('../Tooltip-e4e5e0e5.js');
39
39
  require('../MultiSelect-2cbc13b3.js');
40
40
  require('../Radio-0594409d.js');