@rio-cloud/rio-uikit 0.16.1-beta.21 → 0.16.1-beta.23

package/components/applicationHeader/MobileSubmoduleNavigation.js

@@ -7,18 +7,15 @@ import modulePropTypes from './modulePropTypes';
 import { MobileHeaderModal } from './MobileHeaderModal';
 export var MobileSubmoduleNavigation = function MobileSubmoduleNavigation(props) {
   var navItems = props.navItems,
-      label = props.label,
-      className = props.className;
-
+    label = props.label,
+    className = props.className;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isShown = _useState2[0],
-      setIsShown = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isShown = _useState2[0],
+    setIsShown = _useState2[1];
   var handleToggleNavigation = function handleToggleNavigation() {
     return setIsShown(!isShown);
   };
-
   var hasNavItems = !isEmpty(navItems);
   var classes = classNames('MobileSubmoduleNavigation', 'display-flex gap-10 align-items-center', 'padding-x-10', 'cursor-pointer', className);
   var labelClasses = classNames(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');

package/components/applicationHeader/NavItems.js

@@ -11,37 +11,36 @@ var collapsedDropdownWidth = 50;
 var paddingLeft = 15;
 export var NavItems = function NavItems(props) {
   var externalNavItems = props.navItems,
-      actionBarItems = props.actionBarItems,
-      containerWidth = props.containerWidth;
-
+    actionBarItems = props.actionBarItems,
+    containerWidth = props.containerWidth;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isCollapsedNavItemOpen = _useState2[0],
-      setIsCollapsedNavItemOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsedNavItemOpen = _useState2[0],
+    setIsCollapsedNavItemOpen = _useState2[1];
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      collapsedNavItems = _useState4[0],
-      setCollapsedNavItems = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsedNavItems = _useState4[0],
+    setCollapsedNavItems = _useState4[1];
   var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      visibleNavItems = _useState6[0],
-      setVisibleNavItems = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    visibleNavItems = _useState6[0],
+    setVisibleNavItems = _useState6[1];
   var collapsedDropdownRef = useClickOutside(function () {
     return setIsCollapsedNavItemOpen(false);
   });
   var navigationRef = useRef();
-  var isOffscreen = useRef(true); // console.log({ containerWidth });
-  // Before any new changes are applied
+  var isOffscreen = useRef(true);
 
+  // console.log({ containerWidth });
+
+  // Before any new changes are applied
   useEffect(function () {
     // After the component received new props, every nav item has to be rendered offscreen
     // again without collapsing them into the dropdown to measure its width
     isOffscreen.current = true;
-  }, [externalNavItems, actionBarItems, containerWidth]); // After the component has been rendered
+  }, [externalNavItems, actionBarItems, containerWidth]);
 
+  // After the component has been rendered
   useLayoutEffect(function () {
     // After every nav item was rendered offscreen again we need to recalculate the width
     // of the items again and render the result with possible collapsible dropdown.
@@ -49,66 +48,64 @@ export var NavItems = function NavItems(props) {
       computeNavItems();
     }
   });
-
   var getAvailableWidth = function getAvailableWidth(element) {
     // Get relevant elements
     // const parent = element.parentNode;
+
     // const actionBar = head(parent.getElementsByClassName('ApplicationActionBar'));
     // const actionBarWidth = actionBar && actionBar.childElementCount > 0 ? actionBar.scrollWidth : 0;
+
     // Since the collapsed dropdown has not been rendered yet,
     // use the fixed with for it to compute available width
     var availableWidth = element.scrollWidth - collapsedDropdownWidth - paddingLeft;
     return availableWidth;
   };
-
   var computeNavItems = function computeNavItems() {
     var element = navigationRef.current;
-
     var navItems = _toConsumableArray(element.children);
-
     var availableWidth = getAvailableWidth(element);
-
     if (availableWidth < 0) {
       return;
-    } // Iterate over all rendered navItems to figure out their widths in order to figure out
-    // which navItems need to be rendered in the collapsed dropdown
-
+    }
 
+    // Iterate over all rendered navItems to figure out their widths in order to figure out
+    // which navItems need to be rendered in the collapsed dropdown
     var requiredNavItemsSize = 0;
     var updatedVisibleItems = [];
     var updatedCollapsedItems = [];
     navItems.forEach(function (item) {
       if (!item.className) {
         return;
-      } // Calculate the remaining width
+      }
 
+      // Calculate the remaining width
+      requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth;
 
-      requiredNavItemsSize = requiredNavItemsSize + item.scrollWidth; // console.log({ requiredNavItemsSize });
-      // Use the navItems.key to find corresponding navItems for each DOM node
+      // console.log({ requiredNavItemsSize });
 
+      // Use the navItems.key to find corresponding navItems for each DOM node
       var matchedNavItem = externalNavItems.find(function (navItem) {
         var dataAttr = item.attributes['data-nav-item-key'];
         return dataAttr && navItem.key === dataAttr.value;
       });
-
       if (!matchedNavItem) {
         return;
-      } // Add navItems to the visible group until the available with exceeds.
-      // All other navItems will be added to the collapsed group
-
+      }
 
+      // Add navItems to the visible group until the available with exceeds.
+      // All other navItems will be added to the collapsed group
       if (availableWidth > requiredNavItemsSize) {
         updatedVisibleItems.push(matchedNavItem);
       } else {
         updatedCollapsedItems.push(matchedNavItem);
       }
-    }); // Set the state to render the navItems again
+    });
 
+    // Set the state to render the navItems again
     isOffscreen.current = false;
     setVisibleNavItems(updatedVisibleItems);
     setCollapsedNavItems(updatedCollapsedItems);
   };
-
   var handleCollapsedDropdown = function handleCollapsedDropdown() {
     // When the dropdown is open, set showCollapsedNavItems to false so all submodule items
     // are rendered and their size can be computed
@@ -119,21 +116,17 @@ export var NavItems = function NavItems(props) {
       setIsCollapsedNavItemOpen(true);
     }
   };
-
   var handleCollapsedNavItemSelected = function handleCollapsedNavItemSelected() {
     // Close collapsed dropdown on item select
     if (isCollapsedNavItemOpen) {
       setIsCollapsedNavItemOpen(false);
     }
   };
-
   var renderCollapsedNavItem = function renderCollapsedNavItem(navItems) {
     var collapsedDropdownClass = isCollapsedNavItemOpen ? 'open' : '';
-
     if (isEmpty(navItems) && isEmpty(actionBarItems)) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("li", {
       className: "CollapsedDropdown dropdown ".concat(collapsedDropdownClass),
       key: "collapsed-dropdown",
@@ -161,7 +154,6 @@ export var NavItems = function NavItems(props) {
       }, navItem.route);
     })));
   };
-
   var renderNavItem = function renderNavItem(navItem, isItemOffscreen) {
     return /*#__PURE__*/React.createElement("li", {
       key: navItem.key,
@@ -169,7 +161,6 @@ export var NavItems = function NavItems(props) {
       "data-nav-item-key": navItem.key
     }, navItem.route);
   };
-
   var renderNavItems = function renderNavItems() {
     if (!isOffscreen.current && !isEmpty(collapsedNavItems)) {
       var visibleItems = visibleNavItems.map(function (navItem) {
@@ -177,15 +168,15 @@ export var NavItems = function NavItems(props) {
       });
       return [].concat(_toConsumableArray(visibleItems), [renderCollapsedNavItem(collapsedNavItems)]);
     }
-
     return externalNavItems.map(function (navItem) {
       return renderNavItem(navItem, isOffscreen.current);
     });
-  }; // As all navItems need to be added to the DOM first in order to get their real size
+  };
+
+  // As all navItems need to be added to the DOM first in order to get their real size
   // the computation wheather a navItem need to be shown under the collapsed dropdown or not
   // needs to be done after the component did mount to the DOM.
 
-
   var classes = classname('SubmoduleNavigation', 'nav');
   return /*#__PURE__*/React.createElement("ul", {
     className: classes,

package/components/applicationLayout/ApplicationLayout.js

@@ -6,16 +6,16 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ApplicationLayoutHeader from './ApplicationLayoutHeader';
 import ApplicationLayoutSidebar from './ApplicationLayoutSidebar';
-import ApplicationLayoutBody from './ApplicationLayoutBody'; // initializes document bootstrapping - keep the import to avoid being tree-shaked
+import ApplicationLayoutBody from './ApplicationLayoutBody';
 
+// initializes document bootstrapping - keep the import to avoid being tree-shaked
 import { initDocumentBootstrapping } from '../../utils/init';
 initDocumentBootstrapping;
 export var ApplicationLayout = function ApplicationLayout(_ref) {
   var className = _ref.className,
-      layoutRef = _ref.layoutRef,
-      children = _ref.children,
-      remainigProps = _objectWithoutProperties(_ref, _excluded);
-
+    layoutRef = _ref.layoutRef,
+    children = _ref.children,
+    remainigProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ApplicationLayout', className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
     ref: layoutRef,

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -9,21 +9,19 @@ import classNames from 'classnames';
 var RESIZE_THROTTELING = 200;
 export var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
   var className = props.className,
-      innerClassName = props.innerClassName,
-      forceScrollbar = props.forceScrollbar,
-      enableScrollToTop = props.enableScrollToTop,
-      banner = props.banner,
-      navigation = props.navigation,
-      bottomBar = props.bottomBar,
-      bottomBarHeight = props.bottomBarHeight,
-      children = props.children,
-      remainigProps = _objectWithoutProperties(props, _excluded);
-
+    innerClassName = props.innerClassName,
+    forceScrollbar = props.forceScrollbar,
+    enableScrollToTop = props.enableScrollToTop,
+    banner = props.banner,
+    navigation = props.navigation,
+    bottomBar = props.bottomBar,
+    bottomBarHeight = props.bottomBarHeight,
+    children = props.children,
+    remainigProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      offset = _useState2[0],
-      setOffset = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
   var moduleContentRef = useRef();
   var layoutBodyRef = useRef();
   useEffect(function () {
@@ -36,21 +34,17 @@ export var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
       setOffset(moduleContentRef.current.scrollTop);
     }
   });
-
   var handleToTop = function handleToTop() {
     if (!moduleContentRef.current) {
       return;
     }
-
     var currentScroll = moduleContentRef.current.scrollTop;
-
     if (currentScroll > 0) {
       window.requestAnimationFrame(handleToTop);
       moduleContentRef.current.scrollTo(0, currentScroll - currentScroll / 5);
       setOffset(currentScroll);
     }
   };
-
   var classes = classNames('ApplicationLayoutBody', bottomBar && 'has-footer', className);
   var innerClasses = classNames('module-content', forceScrollbar && 'overflow-y-scroll', innerClassName && innerClassName);
   var offsetThreshold = window.innerHeight * 0.1;

package/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -6,12 +6,11 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var ApplicationLayoutBodyBanner = function ApplicationLayoutBodyBanner(props) {
   var textColor = props.textColor,
-      backgroundColor = props.backgroundColor,
-      isSticky = props.isSticky,
-      className = props.className,
-      children = props.children,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    backgroundColor = props.backgroundColor,
+    isSticky = props.isSticky,
+    className = props.className,
+    children = props.children,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var bannerClasses = classNames('ApplicationLayoutBodyBanner', textColor, backgroundColor, isSticky && 'position-sticky top-0 z-index-3', className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
     className: bannerClasses

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -6,11 +6,10 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var ApplicationLayoutBodyBottomBar = function ApplicationLayoutBodyBottomBar(_ref) {
   var className = _ref.className,
-      buttonAlignment = _ref.buttonAlignment,
-      useBodyPaddings = _ref.useBodyPaddings,
-      children = _ref.children,
-      remainigProps = _objectWithoutProperties(_ref, _excluded);
-
+    buttonAlignment = _ref.buttonAlignment,
+    useBodyPaddings = _ref.useBodyPaddings,
+    children = _ref.children,
+    remainigProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ApplicationLayoutBodyBottomBar', buttonAlignment === 'left' && 'justify-content-start', buttonAlignment === 'right' && 'justify-content-end', buttonAlignment !== 'left' && buttonAlignment !== 'right' && 'justify-content-between', useBodyPaddings && 'use-body-padding', className && className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
     className: classes

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js

@@ -6,9 +6,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var ApplicationLayoutBodyNavigation = function ApplicationLayoutBodyNavigation(props) {
   var className = props.className,
-      children = props.children,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    children = props.children,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
     className: navigationClasses

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -6,9 +6,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var ApplicationLayoutHeader = function ApplicationLayoutHeader(_ref) {
   var className = _ref.className,
-      children = _ref.children,
-      remainigProps = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    remainigProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ApplicationLayoutHeader', className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
     className: classes,

package/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -6,9 +6,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var ApplicationLayoutSidebar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      children = _ref.children,
-      remainigProps = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    remainigProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ApplicationLayoutSidebar', className);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref

package/components/applicationLayout/SubNavigation.js

@@ -6,10 +6,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var SubNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-      navItems = props.navItems,
-      right = props.right,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    navItems = props.navItems,
+    right = props.right,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var navigationClasses = classNames('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref

package/components/assetTree/AssetTree.js

@@ -10,33 +10,26 @@ import isArray from 'lodash/fp/isArray';
 import Resizer from '../resizer/Resizer';
 import TreeSidebar from './TreeSidebar';
 import TreeCategory from './TreeCategory';
-
 var getSidebarBodyRef = function getSidebarBodyRef(sidebarRef) {
   return head(sidebarRef.current.getElementsByClassName('AssetTreeBody'));
 };
-
 var getWidthInBoundaries = function getWidthInBoundaries(minWidth, maxWidth, width) {
   if (width > 0 && width < minWidth) {
     return minWidth;
   }
-
   if (width > 0 && width > maxWidth) {
     return maxWidth;
   }
-
   if (width > 0 && width > maxWidth) {
     return maxWidth;
   }
-
   return width;
 };
-
 var getCurrentCategoryElement = function getCurrentCategoryElement(children, currentCategoryId) {
   return isArray(children) ? children.find(function (child) {
     return child && child.props.id === currentCategoryId;
   }) : children;
 };
-
 var renderTreesOffscreen = function renderTreesOffscreen(children, categoryId) {
   return React.Children.map(children, function (child) {
     var offscreenClasses = classNames('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
@@ -45,46 +38,41 @@ var renderTreesOffscreen = function renderTreesOffscreen(children, categoryId) {
     }, child);
   });
 };
-
 var AssetTree = /*#__PURE__*/memo(function (props) {
   var className = props.className,
-      resizable = props.resizable,
-      width = props.width,
-      maxWidth = props.maxWidth,
-      minWidth = props.minWidth,
-      height = props.height,
-      bordered = props.bordered,
-      currentCategoryId = props.currentCategoryId,
-      isOpen = props.isOpen,
-      useOffscreen = props.useOffscreen,
-      fly = props.fly,
-      onCategoryChange = props.onCategoryChange,
-      onToggleTree = props.onToggleTree,
-      onResizeEnd = props.onResizeEnd,
-      children = props.children,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    resizable = props.resizable,
+    width = props.width,
+    maxWidth = props.maxWidth,
+    minWidth = props.minWidth,
+    height = props.height,
+    bordered = props.bordered,
+    currentCategoryId = props.currentCategoryId,
+    isOpen = props.isOpen,
+    useOffscreen = props.useOffscreen,
+    fly = props.fly,
+    onCategoryChange = props.onCategoryChange,
+    onToggleTree = props.onToggleTree,
+    onResizeEnd = props.onResizeEnd,
+    children = props.children,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var getSidebarMode = function getSidebarMode(isFly) {
     return isFly ? AssetTree.MODE_FLY : AssetTree.MODE_FLUID;
   };
-
   var _useState = useState(parseInt(width, 10)),
-      _useState2 = _slicedToArray(_useState, 2),
-      treeWidth = _useState2[0],
-      setTreeWidth = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    treeWidth = _useState2[0],
+    setTreeWidth = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isResize = _useState4[0],
-      setIsResize = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResize = _useState4[0],
+    setIsResize = _useState4[1];
   var _useState5 = useState(getSidebarMode(fly)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      sidebarMode = _useState6[0],
-      setSidebarMode = _useState6[1];
-
-  var sidebarRef = useRef(); // Update internal state when props change
+    _useState6 = _slicedToArray(_useState5, 2),
+    sidebarMode = _useState6[0],
+    setSidebarMode = _useState6[1];
+  var sidebarRef = useRef();
 
+  // Update internal state when props change
   useEffect(function () {
     return setTreeWidth(width);
   }, [width]);
@@ -104,52 +92,42 @@ var AssetTree = /*#__PURE__*/memo(function (props) {
     width: treeWidth,
     height: height
   };
-
   var handleToggleTreeContent = function handleToggleTreeContent() {
     return onToggleTree(!isOpen);
   };
-
   var handleSelectCategory = function handleSelectCategory(selectedCategoryId) {
     onCategoryChange(selectedCategoryId);
-
     if (!isOpen) {
       handleToggleTreeContent();
     } else if (isOpen && currentCategoryId === selectedCategoryId) {
       handleToggleTreeContent();
     }
   };
-
   var handleResize = function handleResize(diff) {
     var halfWindowWidth = window.innerWidth * 0.5;
     var usedMaxWidth = maxWidth || halfWindowWidth;
     var updatedWidth = treeWidth - diff;
-    var newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth); // Check for sidebar with if it is half window size. If it was before but the sidebar was resized so it is
-    // no longer walf window size, set the sidebar with to hals window size to avoid jumping sidebar to old width
+    var newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
 
+    // Check for sidebar with if it is half window size. If it was before but the sidebar was resized so it is
+    // no longer walf window size, set the sidebar with to hals window size to avoid jumping sidebar to old width
     setTreeWidth(newWidth);
   };
-
   var handleResizeStart = function handleResizeStart() {
     var body = getSidebarBodyRef(sidebarRef);
-
     if (body) {
       body.classList.add('pointer-events-none');
     }
-
     setIsResize(true);
   };
-
   var handleResizeEnd = function handleResizeEnd() {
     var body = getSidebarBodyRef(sidebarRef);
-
     if (body) {
       body.classList.remove('pointer-events-none');
     }
-
     setIsResize(false);
     onResizeEnd();
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
     className: classes,
     style: style,