@rio-cloud/rio-uikit 0.16.1-beta-10 → 0.16.1-beta.13

package/lib/components/actionBarItem/ActionBarItem.js

@@ -49,6 +49,10 @@ var CLASSNAME_OFFSCREEN = 'position-offscreen';
 var POPOVER_CLOSE_DELAY_IN_MS = 200;
 var SMALL_RESOLUTION_THRESHOLD_IN_PX = 580;
 
+var getRandomString = function getRandomString() {
+  return (Math.random() + 1).toString(36).toUpperCase().substring(2);
+};
+
 var hasClass = function hasClass(element, className) {
   return element.classList.contains(className);
 };
@@ -91,8 +95,7 @@ var ActionBarItem = /*#__PURE__*/_react.default.memo(function (props) {
   var className = props.className,
       children = props.children,
       popoverWidth = props.popoverWidth,
-      _props$id = props.id,
-      id = _props$id === void 0 ? "".concat(Math.random()) : _props$id,
+      id = props.id,
       hidePopoverOnClick = props.hidePopoverOnClick;
 
   var _useState3 = (0, _react.useState)(false),
@@ -235,11 +238,12 @@ ActionBarItem.List = _ActionBarItemList.ActionBarItemList;
 ActionBarItem.ListItem = _ActionBarItemListItem.ActionBarItemListItem;
 ActionBarItem.ListSeparator = _ActionBarItemListSeparator.ActionBarItemListSeparator;
 ActionBarItem.defaultProps = {
+  id: getRandomString(),
   hidePopoverOnClick: true,
   popoverWidth: 250
 };
 ActionBarItem.propTypes = {
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
   className: _propTypes.default.string,
   hidePopoverOnClick: _propTypes.default.bool,

package/lib/components/applicationHeader/ApplicationHeader.js

@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var MOBILE_MAX_WIDTH = 580;
+var SCREEN_SM = 768; // @screen-sm: 768px;
 
 var ApplicationHeader = function ApplicationHeader(props) {
   var homeRoute = props.homeRoute,
@@ -62,7 +62,7 @@ var ApplicationHeader = function ApplicationHeader(props) {
     return contentRect && Math.round(contentRect[key]);
   }, [contentRect]);
   var containerWidth = getContentRect('width') || 0;
-  var isMobileWidth = containerWidth <= MOBILE_MAX_WIDTH;
+  var isMobileWidth = containerWidth <= SCREEN_SM;
   var hasActionBarItems = !(0, _isEmpty.default)(actionBarItems);
   var classNames = (0, _classnames.default)('ApplicationHeader', 'user-select-none', isMobileWidth && 'mobile', className && className);
   return /*#__PURE__*/_react.default.createElement("nav", {

package/lib/components/applicationHeader/MobileAppMenu.js

@@ -42,7 +42,7 @@ var MobileAppMenu = function MobileAppMenu(props) {
 
   var hasAppContent = !(0, _isNil.default)(appMenuItems) || !(0, _isNil.default)(appNavigator);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative",
+    className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",
     onClick: handleToggleNavigation
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "navbar-brand height-40 width-40 ".concat(showHomeIcon ? 'home-icon' : '')

package/lib/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -42,20 +42,21 @@ var MobileSubmoduleNavigation = function MobileSubmoduleNavigation(props) {
   };
 
   var hasNavItems = !(0, _isEmpty.default)(navItems);
-  var classes = (0, _classnames.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', 'ellipsis-1', className);
-  var labelClasses = (0, _classnames.default)(hasNavItems ? 'text-size-12' : 'text-size-14', 'text-color-dark line-height-14 width-100pct');
+  var classes = (0, _classnames.default)('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
+  var labelClasses = (0, _classnames.default)(hasNavItems ? 'text-size-12 text-color-dark line-height-14' : 'text-size-16 line-height-16 text-color-darkest text-medium text-uppercase', 'width-100pct ellipsis-1');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes,
     onClick: handleToggleNavigation
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-1-1 display-flex flex-column align-items-center"
+    className: "flex-1-1 display-flex flex-column align-items-center width-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: labelClasses
   }, label), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-medium width-100pct"
   }, navItems.map(function (navItem) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: navItem.key
+      key: navItem.key,
+      className: "ellipsis-1"
     }, /*#__PURE__*/_react.default.cloneElement(navItem.route, {
       className: 'text-size-16 line-height-16 text-color-darkest text-decoration-none',
       onClick: function onClick(event) {

package/lib/components/applicationLayout/ApplicationLayoutBody.js

@@ -33,6 +33,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
       banner = props.banner,
       navigation = props.navigation,
       bottomBar = props.bottomBar,
+      bottomBarHeight = props.bottomBarHeight,
       children = props.children;
 
   var _useState = (0, _react.useState)(0),
@@ -41,6 +42,12 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
       setOffset = _useState2[1];
 
   var moduleContentRef = (0, _react.useRef)();
+  var layoutBodyRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (layoutBodyRef.current) {
+      layoutBodyRef.current.parentNode.style = "--ApplicationLayoutBodyBottomBarHeight: ".concat(bottomBarHeight, "px");
+    }
+  }, [bottomBarHeight]);
   var handleScroll = (0, _debounce.default)(RESIZE_THROTTELING)(function () {
     if (moduleContentRef.current) {
       setOffset(moduleContentRef.current.scrollTop);
@@ -66,6 +73,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
   var offsetThreshold = window.innerHeight * 0.1;
   var scrollToTopClasses = (0, _classnames.default)('scroll-to-top', offset > offsetThreshold && 'in');
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: layoutBodyRef,
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "module-content-wrapper"
@@ -87,7 +95,8 @@ exports.ApplicationLayoutBody = ApplicationLayoutBody;
 ApplicationLayoutBody.defaultProps = {
   className: '',
   enableScrollToTop: true,
-  forceScrollbar: false
+  forceScrollbar: false,
+  bottomBarHeight: 54
 };
 ApplicationLayoutBody.propTypes = {
   className: _propTypes.default.string,
@@ -96,7 +105,8 @@ ApplicationLayoutBody.propTypes = {
   innerClassName: _propTypes.default.string,
   banner: _propTypes.default.node,
   navigation: _propTypes.default.node,
-  bottomBar: _propTypes.default.node
+  bottomBar: _propTypes.default.node,
+  bottomBarHeight: _propTypes.default.number
 };
 var _default = ApplicationLayoutBody;
 exports.default = _default;

package/lib/components/dataTabs/DataTab.js

@@ -11,31 +11,55 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Fade = _interopRequireDefault(require("../fade/Fade"));
-
-var DataTab = function DataTab(_ref) {
-  var disableTransition = _ref.disableTransition,
-      children = _ref.children,
-      active = _ref.active,
-      mountOnEnter = _ref.mountOnEnter,
-      unmountOnExit = _ref.unmountOnExit;
-  var content = disableTransition ? /*#__PURE__*/_react.default.createElement("div", null, active && children) : /*#__PURE__*/_react.default.createElement(_Fade.default, {
-    in: active,
-    mountOnEnter: mountOnEnter,
-    unmountOnExit: unmountOnExit
-  }, /*#__PURE__*/_react.default.createElement("div", null, active && children));
-  return content;
+var _framerMotion = require("framer-motion");
+
+var DataTab = function DataTab(props) {
+  var active = props.active,
+      tabKey = props.tabKey,
+      disableTransition = props.disableTransition,
+      children = props.children;
+
+  if (disableTransition) {
+    return /*#__PURE__*/_react.default.createElement("div", null, active && children);
+  }
+
+  return active && /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
+    key: tabKey,
+    initial: {
+      x: 0,
+      y: 0,
+      opacity: 0
+    },
+    animate: {
+      x: 0,
+      y: 0,
+      opacity: 1
+    },
+    exit: {
+      x: 0,
+      y: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: 0.1
+    } // TODO: added "fade in" for backwards compatibility for service tests
+    // To be removed for next major version
+    ,
+    className: "fade in"
+  }, children);
 };
 
 DataTab.defaultProps = {
   active: false,
-  disableTransition: false
-}; // Props are injected from the wrapping DataTabs component
-
+  disableTransition: false,
+  className: ''
+};
 DataTab.propTypes = {
-  mountOnEnter: _propTypes.default.bool,
-  unmountOnExit: _propTypes.default.bool,
-  className: _propTypes.default.string
+  // Props are injected from the wrapping DataTabs component
+  disableTransition: _propTypes.default.bool,
+  active: _propTypes.default.bool,
+  tabKey: _propTypes.default.string.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])
 };
 var _default = DataTab;
 exports.default = _default;

package/lib/components/dataTabs/DataTabs.js

@@ -17,10 +17,21 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _framerMotion = require("framer-motion");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var getFirstTabKey = function getFirstTabKey() {
+  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  var _children = (0, _slicedToArray2.default)(children, 1),
+      firstItem = _children[0];
+
+  return firstItem && firstItem.props.tabKey;
+};
+
 var DataTabs = function DataTabs(props) {
   var activeBgColor = props.activeBgColor,
       activeKey = props.activeKey,
@@ -36,16 +47,7 @@ var DataTabs = function DataTabs(props) {
       tabContentClassName = props.tabContentClassName,
       vertical = props.vertical;
 
-  var getFirstTabKey = function getFirstTabKey() {
-    var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
-    var _children = (0, _slicedToArray2.default)(children, 1),
-        firstItem = _children[0];
-
-    return firstItem && firstItem.props.tabKey;
-  };
-
-  var _useState = (0, _react.useState)(activeKey || getFirstTabKey(props.children)),
+  var _useState = (0, _react.useState)(activeKey || getFirstTabKey(children)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       internalActiveKey = _useState2[0],
       setInternalActiveKey = _useState2[1];
@@ -61,21 +63,37 @@ var DataTabs = function DataTabs(props) {
   var wrapperClassNames = (0, _classnames.default)('DataTabsContainer', bordered && 'DataTab-bordered', wrapperClassName, vertical && 'DataTabs-vertical');
 
   var enrichChildren = function enrichChildren() {
-    return _react.default.Children.map(children, function (child) {
+    if (disableTransition) {
+      return _react.default.Children.map(children, function (child) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          active: child.props.tabKey === internalActiveKey,
+          disableTransition: disableTransition
+        });
+      });
+    }
+
+    var enhancedChildren = _react.default.Children.toArray(children).filter(function (child) {
+      return child.props.tabKey === internalActiveKey;
+    }).map(function (child) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
-        active: child.props.tabKey === internalActiveKey,
+        active: true,
         disableTransition: disableTransition
       });
     });
+
+    return /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false,
+      exitBeforeEnter: true
+    }, enhancedChildren);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassNames
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'DataTabsWrapper'
+    className: "DataTabsWrapper"
   }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'DataTabs',
-    role: 'tabList'
+    className: "DataTabs",
+    role: "tabList"
   }, _react.default.Children.map(children, function (child) {
     var _child$props = child.props,
         tabKey = _child$props.tabKey,
@@ -93,7 +111,7 @@ var DataTabs = function DataTabs(props) {
     }));
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "tab-content ".concat(tabContentClassName),
-    role: 'tabpanel'
+    role: "tabpanel"
   }, commonTabContent ? commonTabContent : enrichChildren()));
 };
 
@@ -102,8 +120,6 @@ DataTabs.defaultProps = {
   onSelectTab: function onSelectTab() {},
   className: '',
   tabContentClassName: '',
-  mountOnEnter: true,
-  unmountOnExit: true,
   hoverTextColor: 'hover-text-color-darkest',
   hoverBgColor: 'hover-bg-highlight-decent',
   activeTextColor: 'text-color-white',
@@ -116,8 +132,6 @@ DataTabs.defaultProps = {
 DataTabs.propTypes = {
   activeKey: _propTypes.default.string,
   onSelectTab: _propTypes.default.func.isRequired,
-  mountOnEnter: _propTypes.default.bool,
-  unmountOnExit: _propTypes.default.bool,
   tabContentClassName: _propTypes.default.string,
   hoverTextColor: _propTypes.default.string,
   hoverBgColor: _propTypes.default.string,
@@ -126,7 +140,9 @@ DataTabs.propTypes = {
   bordered: _propTypes.default.bool,
   disableTransition: _propTypes.default.bool,
   className: _propTypes.default.string,
-  vertical: _propTypes.default.bool
+  vertical: _propTypes.default.bool,
+  commonTabContent: _propTypes.default.node,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])
 };
 var _default = DataTabs;
 exports.default = _default;