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

package/DeviceUtils.js

@@ -1,2 +1,2 @@
-import { hasTouch as _hasTouch, isDesktop as _isDesktop, isMobile as _isMobile, isMobileScreen as _isMobileScreen, MOBILE_SCREEN as _MOBILE_SCREEN, SCREEN_SM as _SCREEN_SM, SCREEN_MD as _SCREEN_MD, SCREEN_LG as _SCREEN_LG, SCREEN_XL as _SCREEN_XL, inIframe as _inIframe, toggleZoomOnMobile as _toggleZoomOnMobile } from '../utils/deviceUtils';
+import { hasTouch as _hasTouch, isDesktop as _isDesktop, isMobile as _isMobile, isMobileScreen as _isMobileScreen, MOBILE_SCREEN as _MOBILE_SCREEN, SCREEN_SM as _SCREEN_SM, SCREEN_MD as _SCREEN_MD, SCREEN_LG as _SCREEN_LG, SCREEN_XL as _SCREEN_XL, inIframe as _inIframe, toggleZoomOnMobile as _toggleZoomOnMobile } from './utils/deviceUtils';
 export { _hasTouch as hasTouch, _isDesktop as isDesktop, _isMobile as isMobile, _isMobileScreen as isMobileScreen, _MOBILE_SCREEN as MOBILE_SCREEN, _SCREEN_SM as SCREEN_SM, _SCREEN_MD as SCREEN_MD, _SCREEN_LG as SCREEN_LG, _SCREEN_XL as SCREEN_XL, _inIframe as inIframe, _toggleZoomOnMobile as toggleZoomOnMobile };

package/GroupSelectionUtil.js

@@ -1,2 +1,2 @@
-import { getNewGroupedSelected as _getNewGroupedSelected } from '../utils/GroupSelectionUtil';
+import { getNewGroupedSelected as _getNewGroupedSelected } from './utils/GroupSelectionUtil';
 export { _getNewGroupedSelected as getNewGroupedSelected };

package/README.md

@@ -64,6 +64,21 @@ We introduced a versions list containing all the versions for which a uikit-demo
 }
 ```
 
+## How to publish
+
+The UIKIT needs to be published to NPM for the JavaScript components and the UIKIT CDN for the CSS files.
+
+### Publish to NPM
+Run `npm run build:npm` to compile the components via babel to the `package` folder. The UIKIT exports CommonJS and ESM files. Later ones are directly in the package root. CommonJS components are generated in `package/lib/es` due to backwards compatibility reasons as Services import those components from `lib/es`.
+
+__Publish__ the UIKIT __only from__ the __package__ folder. All required files like package.json, README and License files are copied there during the build.
+
+### Publishing to UIKIT CDN
+Run `npm run build` to build the production bundle and compile the styles to inspect locally. When comitting to the main development branch the build outcome from `dist` is published via our internal CICD pipeline.
+
+### Beta Versions
+Beta versions of the UIKIT ideally should be kept in synch in NPM and CDN. After a new beta has been released, increase the version number to avoid overwriting published stylings.
+
 ## License
 
 RIO UIKIT is licensed under the Apache 2.0 license.

package/SortDirection.js

@@ -1,2 +1,2 @@
-import { SortDirection as _SortDirection } from '../utils/SortUtils';
+import { SortDirection as _SortDirection } from './utils/SortUtils';
 export { _SortDirection as default };

package/SortUtils.js

@@ -1,2 +1,2 @@
-import { sortByProperty as _sortByProperty, naturalSortByProperty as _naturalSortByProperty } from '../utils/SortUtils';
+import { sortByProperty as _sortByProperty, naturalSortByProperty as _naturalSortByProperty } from './utils/SortUtils';
 export { _sortByProperty as sortByProperty, _naturalSortByProperty as naturalSortByProperty };

package/VolkswagenApplicationHeader.js

@@ -1,2 +1,2 @@
-import { default as _VolkswagenApplicationHeader } from '../themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader';
+import { default as _VolkswagenApplicationHeader } from './themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader';
 export { _VolkswagenApplicationHeader as default };

package/components/actionBarItem/ActionBarItem.js

@@ -21,104 +21,88 @@ var CLASSNAME_SHOW = 'show';
 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);
 };
-
 var hasNotClass = negate(hasClass);
-
 var isNotChildNodeOf = function isNotChildNodeOf(childNode, parentNode) {
   return !parentNode.contains(childNode);
 };
-
 var checkIfSmallResolution = function checkIfSmallResolution() {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSmallResolution = _useState2[0],
-      setIsSmallResolution = _useState2[1]; // We only execute this once. Before it was re rendered on every change.
+    _useState2 = _slicedToArray(_useState, 2),
+    isSmallResolution = _useState2[0],
+    setIsSmallResolution = _useState2[1];
+
+  // We only execute this once. Before it was re rendered on every change.
   // Users probably don't switch between display sizes that often therefore it probably makes sense to
   // avoid the re rendering. Or applying an event listnener.
-
-
   useEffect(function () {
     var header = head(document.getElementsByClassName('ApplicationHeader'));
     setIsSmallResolution(header && header.offsetWidth < SMALL_RESOLUTION_THRESHOLD_IN_PX);
   }, []);
   return isSmallResolution;
 };
-
 var isActionBarItemPopover = function isActionBarItemPopover(child) {
   var _child$type;
-
   return ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === ActionBarItemPopoverContent.displayName;
 };
-
 var isActionBarItemIcon = function isActionBarItemIcon(child) {
   var _child$type2;
-
   return ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === ActionBarItemIcon.displayName;
 };
-
 export var ActionBarItem = /*#__PURE__*/React.memo(function (props) {
   var className = props.className,
-      children = props.children,
-      popoverWidth = props.popoverWidth,
-      id = props.id,
-      hidePopoverOnClick = props.hidePopoverOnClick,
-      remainigProps = _objectWithoutProperties(props, _excluded);
-
+    children = props.children,
+    popoverWidth = props.popoverWidth,
+    id = props.id,
+    hidePopoverOnClick = props.hidePopoverOnClick,
+    remainigProps = _objectWithoutProperties(props, _excluded);
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isShown = _useState4[0],
-      setIsShown = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isShown = _useState4[0],
+    setIsShown = _useState4[1];
   var clickOutsideRef = useRef();
   useLayoutEffect(function () {
     var listener = function listener(event) {
       if (!clickOutsideRef || !clickOutsideRef.current || !isShown) {
         return;
-      } // Since the popover component is based on React Portal and might be offscreen, we need to use
-      // old-school approach and query the DOM for the item ID.
-
+      }
 
+      // Since the popover component is based on React Portal and might be offscreen, we need to use
+      // old-school approach and query the DOM for the item ID.
       var popoverEl = document.getElementById(id);
-
       if (!popoverEl) {
         return;
-      } // Abort when the ActionBarItemIcon itself has been clicked as there is a toggle function
-      // applied to the icon that takes care of opening and closing
-
+      }
 
+      // Abort when the ActionBarItemIcon itself has been clicked as there is a toggle function
+      // applied to the icon that takes care of opening and closing
       var hasIconClickedToClose = event.target.offsetParent === clickOutsideRef.current;
-
       if (hasIconClickedToClose) {
         return;
-      } // Handle click outside the popover to close it
-
+      }
 
+      // Handle click outside the popover to close it
       var isClickOutsidePopover = isNotChildNodeOf(event.target, popoverEl);
       var isPopoverVisible = hasClass(popoverEl, CLASSNAME_SHOW) && hasNotClass(popoverEl, CLASSNAME_OFFSCREEN);
-
       if (isPopoverVisible && isClickOutsidePopover) {
         setIsShown(false);
         return;
-      } // Handle click inside the popover.
+      }
+
+      // Handle click inside the popover.
       // Delay the closing of the popover to execute possible actions from within the popover
       // like clicks on links or buttons
-
-
       if (hidePopoverOnClick) {
         delay(POPOVER_CLOSE_DELAY_IN_MS)(function () {
           return setIsShown(false);
         });
       }
     };
-
     document.addEventListener(EVENT, listener);
     return function () {
       document.removeEventListener(EVENT, listener);
@@ -128,32 +112,31 @@ export var ActionBarItem = /*#__PURE__*/React.memo(function (props) {
   var isSmallScreen = checkIfSmallResolution();
   var onToggle = useCallback(function () {
     return setIsShown(!isShown);
-  }, [setIsShown, isShown]); // The children depend on each other, that's why it's easier to convert them once to an array
+  }, [setIsShown, isShown]);
+
+  // The children depend on each other, that's why it's easier to convert them once to an array
   // and then pick the correct elements. In most cases there are only 2 or 3 elements in the children
   // array so the looping shouldn't be too worrysome.
-
   var childrenAsList = React.Children.toArray(children);
   var itemPopover = childrenAsList.find(isActionBarItemPopover);
   var itemIcon = childrenAsList.find(isActionBarItemIcon);
-
   if (!itemPopover) {
     return /*#__PURE__*/React.createElement("div", {
       className: classes
     }, children);
   }
-
   var _itemPopover$props = itemPopover.props,
-      _itemPopover$props$us = _itemPopover$props.useOffscreen,
-      useOffscreen = _itemPopover$props$us === void 0 ? false : _itemPopover$props$us,
-      title = _itemPopover$props.title; // Filter out the popover and icon component from the list of children as they are handled separetely
+    _itemPopover$props$us = _itemPopover$props.useOffscreen,
+    useOffscreen = _itemPopover$props$us === void 0 ? false : _itemPopover$props$us,
+    title = _itemPopover$props.title;
 
+  // Filter out the popover and icon component from the list of children as they are handled separetely
   var childrenWithoutPopover = childrenAsList.filter(function (child) {
     return !isActionBarItemPopover(child);
   });
   var childrenWithoutPopoverAndIcon = childrenWithoutPopover.filter(function (child) {
     return !isActionBarItemIcon(child);
   });
-
   if (isSmallScreen) {
     return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
       className: classes,
@@ -173,7 +156,6 @@ export var ActionBarItem = /*#__PURE__*/React.memo(function (props) {
       title: title
     })), childrenWithoutPopoverAndIcon);
   }
-
   var overlay = /*#__PURE__*/React.createElement(ActionBarOverlay, {
     id: id,
     key: "child",

package/components/actionBarItem/ActionBarItemIcon.js

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

package/components/actionBarItem/ActionBarItemList.js

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

package/components/actionBarItem/ActionBarItemListItem.js

@@ -6,12 +6,11 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export var ActionBarItemListItem = function ActionBarItemListItem(props) {
   var hasLink = props.hasLink,
-      icon = props.icon,
-      onClick = props.onClick,
-      className = props.className,
-      children = props.children,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    icon = props.icon,
+    onClick = props.onClick,
+    className = props.className,
+    children = props.children,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var classes = classNames('ActionBarItemListItem', className);
   var iconClasses = classNames('ActionBarItemListItemIcon', 'rioglyph', icon);
   var btnClasses = classNames('ActionBarItemListItemButton');

package/components/actionBarItem/ActionBarItemListSeparator.js

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

package/components/actionBarItem/ActionBarItemPopoverContent.js

@@ -7,9 +7,8 @@ import classNames from 'classnames';
 import omit from 'lodash/fp/omit';
 export var ActionBarItemPopoverContent = function ActionBarItemPopoverContent(_ref) {
   var className = _ref.className,
-      children = _ref.children,
-      remainingProps = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    remainingProps = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('ActionBarItemPopoverContent', className);
   var filterProps = omit(['title', 'useOffscreen']);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterProps(remainingProps), {

package/components/actionBarItem/ActionBarOverlay.js

@@ -2,31 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "show", "preRender", "id", "title", "onClick", "width", "style", "className"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Popover from 'react-bootstrap/Popover';
 export var ActionBarOverlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
-      show = props.show,
-      preRender = props.preRender,
-      id = props.id,
-      title = props.title,
-      onClick = props.onClick,
-      width = props.width,
-      style = props.style,
-      className = props.className,
-      rest = _objectWithoutProperties(props, _excluded);
-
+    show = props.show,
+    preRender = props.preRender,
+    id = props.id,
+    title = props.title,
+    onClick = props.onClick,
+    width = props.width,
+    style = props.style,
+    className = props.className,
+    rest = _objectWithoutProperties(props, _excluded);
   var adjustedStyles = _objectSpread(_objectSpread({}, style), {}, {
     width: width
   });
-
   var adjustedClassName = preRender && !show ? classNames(className, 'position-offscreen') : className;
   var popoverTitleClasses = classNames('ActionBarItemPopover popover-title text-color-dark', className);
   var popoverContentClasses = classNames('ActionBarItemPopover popover-content', className);

package/components/activity/Activity.js

@@ -1,27 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-
 var _Activity$icons;
-
 var _excluded = ["activity", "duration", "isOutdated", "bsSize", "onClick", "className"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 var Activity = function Activity(props) {
   var activity = props.activity,
-      duration = props.duration,
-      isOutdated = props.isOutdated,
-      bsSize = props.bsSize,
-      onClick = props.onClick,
-      className = props.className,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    duration = props.duration,
+    isOutdated = props.isOutdated,
+    bsSize = props.bsSize,
+    onClick = props.onClick,
+    className = props.className,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   if (!activity) {
     return null;
   }
-
   var icon = Activity.icons[activity];
   var wrapperClassNames = classNames('activity', "activity-".concat(activity), isOutdated && 'opacity-50', bsSize && "activity-".concat(bsSize), className && className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
@@ -35,7 +30,6 @@ var Activity = function Activity(props) {
     className: "activity-text"
   }, duration));
 };
-
 Activity.AVAILABLE = 'available';
 Activity.DRIVING = 'driving';
 Activity.RESTING = 'resting';

package/components/animatedNumber/AnimatedNumber.js

@@ -8,24 +8,21 @@ import useInterval from '../../hooks/useInterval';
 var TIMER = 10;
 export var AnimatedNumber = function AnimatedNumber(props) {
   var start = props.start,
-      end = props.end,
-      prefix = props.prefix,
-      unit = props.unit,
-      speed = props.speed,
-      decreasing = props.decreasing,
-      onEnd = props.onEnd,
-      className = props.className,
-      remainingProps = _objectWithoutProperties(props, _excluded);
-
+    end = props.end,
+    prefix = props.prefix,
+    unit = props.unit,
+    speed = props.speed,
+    decreasing = props.decreasing,
+    onEnd = props.onEnd,
+    className = props.className,
+    remainingProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState(start),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   if (typeof start !== 'number' || typeof end !== 'number' || typeof speed !== 'number') {
     throw new Error('Props "start", "end" and "speed" need to be of type number.');
   }
-
   var shallContiueToRun = decreasing ? value > end : value < end;
   useInterval(function () {
     setValue(function (currentValue) {

package/components/applicationHeader/AppMenu.js

@@ -6,20 +6,20 @@ import PropTypes from 'prop-types';
 import classname from 'classnames';
 import AppMenuDropdown from './AppMenuDropdown';
 import modulePropTypes from './modulePropTypes';
-
 var MenuContent = function MenuContent(props) {
   var appMenuItems = props.appMenuItems,
-      appNavigator = props.appNavigator; // In case there is a navigation component injected into the header,
-  // render this component
+    appNavigator = props.appNavigator;
 
+  // In case there is a navigation component injected into the header,
+  // render this component
   if (appNavigator) {
     return [/*#__PURE__*/React.createElement("li", {
       role: "presentation",
       key: "app-navigator"
     }, appNavigator)];
-  } // If there is a list of appMenuItems given, render them as a list
-
+  }
 
+  // If there is a list of appMenuItems given, render them as a list
   return appMenuItems.map(function (module) {
     return /*#__PURE__*/React.createElement("li", {
       role: "presentation",
@@ -27,15 +27,13 @@ var MenuContent = function MenuContent(props) {
     }, module.route);
   });
 };
-
 export var AppMenu = function AppMenu(props) {
   var _props$label = props.label,
-      label = _props$label === void 0 ? 'Unknown' : _props$label,
-      appMenuItems = props.appMenuItems,
-      appNavigatorClassName = props.appNavigatorClassName,
-      appNavigator = props.appNavigator,
-      remainigProps = _objectWithoutProperties(props, _excluded);
-
+    label = _props$label === void 0 ? 'Unknown' : _props$label,
+    appMenuItems = props.appMenuItems,
+    appNavigatorClassName = props.appNavigatorClassName,
+    appNavigator = props.appNavigator,
+    remainigProps = _objectWithoutProperties(props, _excluded);
   var hasItems = !!(appMenuItems && appMenuItems.length || appNavigator);
   var classNames = classname('ModuleNavigation AppMenu', 'user-select-none', {
     hasModules: hasItems

package/components/applicationHeader/AppMenuDropdown.js

@@ -4,10 +4,9 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 import useClickOutside from '../../hooks/useClickOutside';
-
 var ToggleButton = function ToggleButton(props) {
   var title = props.title,
-      caret = props.caret;
+    caret = props.caret;
   return /*#__PURE__*/React.createElement("a", {
     className: classNames('ModuleNavigation-dropdown dropdown-toggle justify-content-between', {
       inactive: !caret
@@ -18,24 +17,20 @@ var ToggleButton = function ToggleButton(props) {
     className: "caret"
   }));
 };
-
 var DropdownMenu = function DropdownMenu(props) {
   var children = props.children;
-
   if (isEmpty(children)) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("ul", {
     role: "menu",
     className: "dropdown-menu"
   }, children);
 };
-
 var AppMenuDropdownOpener = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var open = props.open,
-      children = props.children,
-      onDropdownClick = props.onDropdownClick;
+    children = props.children,
+    onDropdownClick = props.onDropdownClick;
   return /*#__PURE__*/React.createElement("li", {
     ref: ref,
     className: classNames('dropdown', {
@@ -46,22 +41,18 @@ var AppMenuDropdownOpener = /*#__PURE__*/React.forwardRef(function (props, ref)
 });
 export var AppMenuDropdown = function AppMenuDropdown(props) {
   var title = props.title,
-      caret = props.caret,
-      children = props.children;
-
+    caret = props.caret,
+    children = props.children;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var wrapperRef = useClickOutside(function () {
     return setIsOpen(false);
   });
-
   var handleDropdownClick = function handleDropdownClick() {
     return setIsOpen(!isOpen);
   };
-
   var openWithChildren = !isEmpty(children) && isOpen;
   return /*#__PURE__*/React.createElement(AppMenuDropdownOpener, {
     open: openWithChildren,

package/components/applicationHeader/ApplicationActionBar.js

@@ -4,11 +4,10 @@ var _excluded = ["items", "nodeRef", "className"];
 import React from 'react';
 export var ApplicationActionBar = function ApplicationActionBar(_ref) {
   var items = _ref.items,
-      nodeRef = _ref.nodeRef,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      remainigProps = _objectWithoutProperties(_ref, _excluded);
-
+    nodeRef = _ref.nodeRef,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    remainigProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("ul", _extends({}, remainigProps, {
     className: "ApplicationActionBar nav navbar-nav navbar-right ".concat(className),
     ref: nodeRef

package/components/applicationHeader/ApplicationHeader.js

@@ -18,23 +18,20 @@ var SCREEN_SM = 768; // @screen-sm: 768px;
 
 export var ApplicationHeader = function ApplicationHeader(props) {
   var homeRoute = props.homeRoute,
-      showHomeIcon = props.showHomeIcon,
-      label = props.label,
-      className = props.className,
-      appNavigator = props.appNavigator,
-      appNavigatorClassName = props.appNavigatorClassName,
-      appMenuItems = props.appMenuItems,
-      navItems = props.navItems,
-      actionBarItems = props.actionBarItems,
-      remainigProps = _objectWithoutProperties(props, _excluded);
-
+    showHomeIcon = props.showHomeIcon,
+    label = props.label,
+    className = props.className,
+    appNavigator = props.appNavigator,
+    appNavigatorClassName = props.appNavigatorClassName,
+    appMenuItems = props.appMenuItems,
+    navItems = props.navItems,
+    actionBarItems = props.actionBarItems,
+    remainigProps = _objectWithoutProperties(props, _excluded);
   var actionBarRef = useRef();
-
   var _useResizeObserver = useResizeObserver(),
-      _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
-      navRef = _useResizeObserver2[0],
-      contentRect = _useResizeObserver2[1].contentRect;
-
+    _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
+    navRef = _useResizeObserver2[0],
+    contentRect = _useResizeObserver2[1].contentRect;
   var getContentRect = useCallback(function (key) {
     return contentRect && Math.round(contentRect[key]);
   }, [contentRect]);
@@ -82,7 +79,6 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     items: actionBarItems
   })));
 };
-
 var Divider = function Divider() {
   return /*#__PURE__*/React.createElement("div", {
     className: "divider display-flex align-items-center"
@@ -90,7 +86,6 @@ var Divider = function Divider() {
     className: "width-3 height-20 bg-lighter"
   }));
 };
-
 export default ApplicationHeader;
 ApplicationHeader.defaultProps = {
   homeRoute: '',

package/components/applicationHeader/MobileAppMenu.js

@@ -6,19 +6,16 @@ import { MobileHeaderModal } from './MobileHeaderModal';
 import modulePropTypes from './modulePropTypes';
 export var MobileAppMenu = function MobileAppMenu(props) {
   var appMenuItems = props.appMenuItems,
-      appNavigator = props.appNavigator,
-      showHomeIcon = props.showHomeIcon,
-      homeRoute = props.homeRoute;
-
+    appNavigator = props.appNavigator,
+    showHomeIcon = props.showHomeIcon,
+    homeRoute = props.homeRoute;
   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 hasAppContent = !isNil(appMenuItems) || !isNil(appNavigator);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "navbar-header min-width-50 padding-5 overflow-hidden position-relative display-flex align-items-center",

package/components/applicationHeader/MobileHeaderModal.js

@@ -7,11 +7,11 @@ import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 var OFFSET_POSITION = -1000;
 export var MobileHeaderModal = function MobileHeaderModal(props) {
   var show = props.show,
-      showClose = props.showClose,
-      modalClassName = props.modalClassName,
-      className = props.className,
-      onClose = props.onClose,
-      children = props.children;
+    showClose = props.showClose,
+    modalClassName = props.modalClassName,
+    className = props.className,
+    onClose = props.onClose,
+    children = props.children;
   var wrapperClasses = classNames('MobileHeaderModal', 'position-fixed left-0 right-0 bottom-0', 'z-index-max', className);
   var modalClasses = classNames('display-flex flex-column justify-content-center', 'margin-15', 'text-center', 'rounded', 'bg-white', 'shadow-hard', 'overflow-auto', modalClassName);
   var modalRoot = getOrCreatePortalRoot();