@ntbjs/react-components 1.2.0-rc.8 → 1.2.0-rc.80

package/{Popover-6afb3779.js → Popover-569cd272.js}

@@ -7,15 +7,17 @@ var styled = require('styled-components');
 var polished = require('polished');
 var TippyTooltip = require('@tippyjs/react');
 require('./shift-away-subtle-0bed9a3c.js');
+var maxSize = require('popper-max-size-modifier');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
+var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
 
 var _templateObject, _templateObject2, _templateObject3;
-var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  color: inherit;\n  border-radius: 0;\n  line-height: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .tippy-content {\n    padding: 0;\n  }\n\n  .tippy-arrow {\n    ", "\n  }\n\n  && > .tippy-arrow::before {\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  & > .tippy-arrow::after {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &[data-placement^='top'] {\n    & > .tippy-arrow:before {\n      bottom: -16px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -15px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      border-top-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='right'] {\n    & > .tippy-arrow:before {\n      bottom: -5px;\n      left: -16px;\n      border-width: 13px 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -5px;\n      left: -15px;\n      border-width: 13px 15px 13px 0;\n      border-right-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='bottom'] {\n    & > .tippy-arrow:before {\n      top: -16px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      top: -14.5px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      border-bottom-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='left'] {\n    & > .tippy-arrow::before {\n      bottom: -5px;\n      right: -16px;\n      border-width: 13px 0 13px 15px;\n      ", "\n    }\n\n    & > .tippy-arrow::after {\n      bottom: -5px;\n      right: -15px;\n      border-width: 13px 0 13px 15px;\n      border-left-color: initial;\n      transform-origin: center top;\n    }\n  }\n"])), function (props) {
+var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  color: inherit;\n  border-radius: 0;\n  line-height: inherit;\n  max-height: inherit;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .tippy-content {\n    padding: 0;\n    max-height: inherit;\n\n    > div {\n      max-height: inherit;\n    }\n  }\n\n  .tippy-arrow {\n    ", "\n  }\n\n  && > .tippy-arrow::before {\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  & > .tippy-arrow::after {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &[data-placement^='top'] {\n    & > .tippy-arrow:before {\n      bottom: -16px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -15px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      border-top-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='right'] {\n    & > .tippy-arrow:before {\n      bottom: -5px;\n      left: -16px;\n      border-width: 13px 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -5px;\n      left: -15px;\n      border-width: 13px 15px 13px 0;\n      border-right-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='bottom'] {\n    & > .tippy-arrow:before {\n      top: -16px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      top: -14.5px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      border-bottom-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='left'] {\n    & > .tippy-arrow::before {\n      bottom: -5px;\n      right: -16px;\n      border-width: 13px 0 13px 15px;\n      ", "\n    }\n\n    & > .tippy-arrow::after {\n      bottom: -5px;\n      right: -15px;\n      border-width: 13px 0 13px 15px;\n      border-left-color: initial;\n      transform-origin: center top;\n    }\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
@@ -55,7 +57,8 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
       contextMenu = _ref.contextMenu,
       contextMenuSublevel = _ref.contextMenuSublevel,
       children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children"]);
+      modifiers = _ref.modifiers,
+      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"]);
 
   var errorOffset = React.useMemo(function () {
     return arrow ? 15 : 0;
@@ -76,7 +79,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
     });
   };
 
-  return React__default['default'].createElement(Popover$1, defaultTheme._extends({
+  return React__default['default'].createElement("div", null, React__default['default'].createElement(Popover$1, defaultTheme._extends({
     ref: ref,
     content: content,
     interactive: interactive,
@@ -87,8 +90,29 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
     offset: [offset[0], offset[1] + errorOffset],
     arrow: contextMenu ? false : arrow,
     visible: visible,
+    popperOptions: {
+      modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default['default']), {}, {
+        options: {
+          boundary: 'viewport',
+          rootBoundary: 'viewport',
+          padding: 10
+        }
+      }), {
+        name: 'applyMaxSize',
+        enabled: true,
+        phase: 'beforeWrite',
+        requires: ['maxSize'],
+        fn: function fn(_ref2) {
+          var state = _ref2.state;
+          var height = state.modifiersData.maxSize.height;
+          state.styles.popper = defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, state.styles.popper), {}, {
+            maxHeight: "".concat(height, "px")
+          });
+        }
+      }].concat(defaultTheme._toConsumableArray(modifiers))
+    },
     onShown: contextMenu ? handleContextMenuItemClick : undefined
-  }, props), children);
+  }, props), children));
 });
 Popover.propTypes = process.env.NODE_ENV !== "production" ? {
   content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
@@ -99,6 +123,7 @@ Popover.propTypes = process.env.NODE_ENV !== "production" ? {
   offset: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
   arrow: defaultTheme.PropTypes.bool,
   visible: defaultTheme.PropTypes.bool,
+  modifiers: defaultTheme.PropTypes.array,
   contextMenu: defaultTheme.PropTypes.bool,
   contextMenuSublevel: defaultTheme.PropTypes.bool,
   children: defaultTheme.PropTypes.node.isRequired
@@ -114,7 +139,8 @@ Popover.defaultProps = {
   arrow: true,
   visible: undefined,
   contextMenu: false,
-  contextMenuSublevel: false
+  contextMenuSublevel: false,
+  modifiers: []
 };
 
 exports.Popover = Popover;

package/{Tabs-c2261e7e.js → Tabs-ea48ce3e.js}

@@ -43,9 +43,9 @@ var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 
 var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
   var children = _ref.children,
-      minHeight = _ref.minHeight,
       defaultMinHeight = _ref.defaultMinHeight,
-      props = defaultTheme._objectWithoutProperties(_ref, ["children", "minHeight", "defaultMinHeight"]);
+      onChangeTabCallback = _ref.onChangeTabCallback,
+      props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight", "onChangeTabCallback"]);
 
   var _useState = React.useState(0),
       _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -54,66 +54,70 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
 
   var _useState3 = React.useState(),
       _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      firstTab = _useState4[0],
-      setFirstTab = _useState4[1];
-
-  var _useState5 = React.useState(),
-      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      minTabHeight = _useState6[0],
-      setMinTabHeight = _useState6[1];
-
-  var _useState7 = React.useState(),
-      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-      defaultHeight = _useState8[0],
-      setDefaultHeight = _useState8[1];
+      defaultHeight = _useState4[0],
+      setDefaultHeight = _useState4[1];
 
   var contentRef = React.useRef(null);
-  var visibleTabs = [];
-  React.useEffect(function () {
-    if ((visibleTabs === null || visibleTabs === void 0 ? void 0 : visibleTabs.length) > 0) {
-      setActiveTab(visibleTabs[0].key);
-      setFirstTab(visibleTabs[0]);
-    }
-  }, []);
-  React.useLayoutEffect(function () {
-    if (contentRef.current) {
-      var height = contentRef.current.offsetHeight;
-      setMinTabHeight(height);
-    }
-  }, [firstTab]);
   React.useEffect(function () {
     setDefaultHeight(defaultMinHeight);
   }, []);
+  React.useEffect(function () {
+    onChangeTabCallback(activeTab);
+  }, [activeTab]);
   var tabs = React.useMemo(function () {
     var tabs = [];
 
     function extractChildren(children) {
       React.Children.forEach(children, function (child, index) {
+        var _child$props2;
+
+        if (lodash.isNil(child)) {
+          return null;
+        }
+
         if (child.type === React.Fragment) {
-          extractChildren(child.props.children);
+          var _child$props;
+
+          extractChildren((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
         }
 
-        if (child.props.hidden) {
+        if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.hidden) {
           return null;
         }
 
-        if (child.type === Tab.Tab && !lodash.isEmpty(child.props.trigger)) {
-          visibleTabs.push({
-            key: index,
-            content: child.props.children
-          });
+        if (child.type === Tab.Tab) {
+          var _child$props3, _child$props4;
+
           tabs.push({
             key: index,
-            trigger: child.props.trigger,
-            content: child.props.children
+            trigger: (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.trigger,
+            content: (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.children
           });
         }
       });
     }
 
     extractChildren(children);
+
+    if (!tabs.some(function (tab) {
+      return (tab === null || tab === void 0 ? void 0 : tab.key) === activeTab;
+    })) {
+      var _tabs$;
+
+      setActiveTab((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key);
+    }
+
     return tabs;
   }, [children]);
+  React.useEffect(function () {
+    if (!tabs.some(function (tab) {
+      return tab.key === activeTab;
+    })) {
+      var _tabs$2;
+
+      setActiveTab(((_tabs$2 = tabs[0]) === null || _tabs$2 === void 0 ? void 0 : _tabs$2.key) || 0);
+    }
+  }, [tabs, activeTab]);
   return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
     ref: forwardedRef
   }, props, {
@@ -130,25 +134,25 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
     }, tab.trigger);
   })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
     return React__default['default'].createElement("div", {
-      ref: tab.key === (firstTab === null || firstTab === void 0 ? void 0 : firstTab.key) ? contentRef : null,
+      ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
       key: tab.key,
       role: "tabpanel",
       hidden: tab.key !== activeTab,
       style: {
-        minHeight: minHeight ? minTabHeight : !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
+        minHeight: !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
       }
     }, tab.content);
   })));
 });
 Tabs.defaultProps = {
-  minHeight: false,
-  defaultMinHeight: ''
+  defaultMinHeight: '',
+  onChangeTabCallback: function onChangeTabCallback() {}
 };
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
   children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
   backgroundColor: defaultTheme.PropTypes.string,
-  minHeight: defaultTheme.PropTypes.bool,
-  defaultMinHeight: defaultTheme.PropTypes.string
+  defaultMinHeight: defaultTheme.PropTypes.string,
+  onChangeTabCallback: defaultTheme.PropTypes.func
 } : {};
 
 exports.Tabs = Tabs;