@rio-cloud/rio-uikit 0.16.2-beta.9 → 0.16.3-beta.1

package/AspectRatioPlaceholder.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/AspectRatioPlaceholder' {
+    import React from 'react';
+    import { AspectRatioPlaceholderProps } from './types';
+    export default class AspectRatioPlaceholder extends React.Component<AspectRatioPlaceholderProps> {}
+}

package/AspectRatioPlaceholder.js

@@ -0,0 +1,2 @@
+import { default as _AspectRatioPlaceholder } from './components/aspectRatioPlaceholder/AspectRatioPlaceholder';
+export { _AspectRatioPlaceholder as default };

package/AspectRatioPlaceholder.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/AspectRatioPlaceholder' {
+    import React from 'react';
+    import { AspectRatioPlaceholderProps } from './types';
+    export default class AspectRatioPlaceholder extends React.Component<AspectRatioPlaceholderProps> {}
+}

package/ConfirmationDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/ConfirmationDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH = 'fullwidth';
+        static SIZE_FULL_HEIGHT = 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/Dialog.d.ts

@@ -5,6 +5,8 @@ declare module '@rio-cloud/rio-uikit/Dialog' {
     export default class Dialog extends React.Component<DialogProps> {
         public static SIZE_FULL_SCREEN: 'fullscreen';
         public static SIZE_FULL: 'full';
+        public static SIZE_FULL_WIDTH: 'fullwidth';
+        public static SIZE_FULL_HEIGHT: 'fullheight';
         public static SIZE_XL: 'xl';
         public static SIZE_LG: 'lg';
         public static SIZE_MD: 'md';

package/Map.d.ts

@@ -3,9 +3,10 @@ import { MapProps } from './types';
 
 export { BoundingBox } from './types';
 
-export default class Map extends React.Component<MapProps> {
+export default class Map extends React.Component<React.PropsWithChildren<MapProps>> {
     static TYPE_DEFAULT = 'DEFAULT';
     static TYPE_FLEET_STYLE = 'FLEET_STYLE';
     static TYPE_SATELLITE = 'SATELLITE';
     static TYPE_TERRAIN = 'TERRAIN';
+    static TYPE_NIGHT = 'NIGHT';
 }

package/README.md

@@ -17,6 +17,13 @@ When releasing a new version:
 1. Create new `release/${VERSION}` branch and trigger pipeline with a commit
 2. After the new uikit-demo is published, update `versionsList.json` in `master` branch.
 
+Create a new development beta version:
+
+1. Update the `package.json`. Example `0.16.3-beta.1`
+2. Update the `version.json`. Example `0.16.3-beta.1`
+3. run `npm i` or update `package-lock.json`. Example `0.16.3-beta.1`
+4. Update the `uikit-demo/package.json`. Example `0.16.3`
+
 ## Development
 
 To run the UIKIT and the UIKIT Demo locally for development, use:
@@ -69,14 +76,17 @@ We introduced a versions list containing all the versions for which a uikit-demo
 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.
+**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

package/ResponsiveColumnStripe.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/ResponsiveColumnStripe' {
+    import React from 'react';
+    import { ResponsiveColumnStripeProps } from './types';
+    export default class ResponsiveColumnStripe extends React.Component<ResponsiveColumnStripeProps> {}
+}

package/ResponsiveColumnStripe.js

@@ -0,0 +1,2 @@
+import { default as _ResponsiveColumnStripe } from './components/responsiveColumnStripe/ResponsiveColumnStripe';
+export { _ResponsiveColumnStripe as default };

package/RuleConnector.d.ts

@@ -1,7 +1,8 @@
 declare module '@rio-cloud/rio-uikit/RuleConnector' {
     import React from 'react';
     import { RuleConnectorProps } from './types';
-    export default class RuleConnector extends React.Component<RuleConnectorProps> {
+
+    export default class RuleConnector extends React.Component<React.PropsWithChildren<RuleConnectorProps>> {
         static START = 'start';
         static CENTER = 'center';
         static END = 'end';

package/RuleContainer.d.ts

@@ -1,5 +1,6 @@
 declare module '@rio-cloud/rio-uikit/RuleContainer' {
     import React from 'react';
     import { RuleContainerProps } from './types';
-    export default class RuleContainer extends React.Component<RuleContainerProps> {}
-}
+
+    export default class RuleContainer extends React.Component<React.PropsWithChildren<RuleContainerProps>> {}
+}

package/RulesWrapper.d.ts

@@ -1,5 +1,6 @@
 declare module '@rio-cloud/rio-uikit/RulesWrapper' {
     import React from 'react';
     import { RulesWrapperProps } from './types';
+
     export default class RulesWrapper extends React.Component<RulesWrapperProps> {}
-}
+}

package/SaveDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SaveDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/SimpleDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SimpleDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/SplitDialog.d.ts

@@ -7,6 +7,8 @@ declare module '@rio-cloud/rio-uikit/SplitDialog' {
         static SIZE_LG = 'lg';
         static SIZE_XL = 'xl';
         static SIZE_FULL = 'full';
+        static SIZE_FULL_WIDTH: 'fullwidth';
+        static SIZE_FULL_HEIGHT: 'fullheight';
         static SIZE_FULL_SCREEN = 'fullscreen';
     }
 }

package/components/activity/Activity.js

@@ -3,10 +3,10 @@ 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 React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-var Activity = function Activity(props) {
+var Activity = /*#__PURE__*/forwardRef(function (props, ref) {
   var activity = props.activity,
     duration = props.duration,
     isOutdated = props.isOutdated,
@@ -19,7 +19,9 @@ var Activity = function Activity(props) {
   }
   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, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, remainingProps, {
     className: wrapperClassNames,
     onClick: onClick
   }), /*#__PURE__*/React.createElement("span", {
@@ -29,7 +31,7 @@ var Activity = function Activity(props) {
   })), duration && /*#__PURE__*/React.createElement("span", {
     className: "activity-text"
   }, duration));
-};
+});
 Activity.AVAILABLE = 'available';
 Activity.DRIVING = 'driving';
 Activity.RESTING = 'resting';

package/components/animatedNumber/AnimatedNumber.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["start", "end", "prefix", "unit", "speed", "decreasing", "onEnd", "className"];
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import useInterval from '../../hooks/useInterval';
 var TIMER = 10;
-export var AnimatedNumber = function AnimatedNumber(props) {
+export var AnimatedNumber = /*#__PURE__*/forwardRef(function (props, ref) {
   var start = props.start,
     end = props.end,
     prefix = props.prefix,
@@ -34,10 +34,12 @@ export var AnimatedNumber = function AnimatedNumber(props) {
       onEnd();
     }
   });
-  return /*#__PURE__*/React.createElement("span", _extends({}, remainingProps, {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref
+  }, remainingProps, {
     className: className
   }), "".concat(prefix).concat(value).concat(unit));
-};
+});
 AnimatedNumber.defaultProps = {
   prefix: '',
   unit: '',

package/components/applicationHeader/AppMenu.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "appMenuItems", "appNavigatorClassName", "appNavigator"];
+var _excluded = ["label", "appMenuItems", "appNavigatorClassName", "appNavigator", "onToggleAppMenu"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import classname from 'classnames';
@@ -33,6 +33,7 @@ export var AppMenu = function AppMenu(props) {
     appMenuItems = props.appMenuItems,
     appNavigatorClassName = props.appNavigatorClassName,
     appNavigator = props.appNavigator,
+    onToggleAppMenu = props.onToggleAppMenu,
     remainigProps = _objectWithoutProperties(props, _excluded);
   var hasItems = !!(appMenuItems && appMenuItems.length || appNavigator);
   var classNames = classname('ModuleNavigation AppMenu', 'user-select-none', {
@@ -42,7 +43,8 @@ export var AppMenu = function AppMenu(props) {
     className: classNames
   }), /*#__PURE__*/React.createElement(AppMenuDropdown, {
     title: label,
-    caret: hasItems
+    caret: hasItems,
+    onToggleAppMenu: onToggleAppMenu
   }, /*#__PURE__*/React.createElement(MenuContent, props)));
 };
 AppMenu.defaultProps = {
@@ -52,5 +54,6 @@ AppMenu.propTypes = {
   // Support a list of items for services without the app navigator like internal MDM services
   appMenuItems: PropTypes.arrayOf(modulePropTypes),
   appNavigator: PropTypes.element,
-  appNavigatorClassName: PropTypes.string
+  appNavigatorClassName: PropTypes.string,
+  onToggleAppMenu: PropTypes.func
 };

package/components/applicationHeader/AppMenuDropdown.js

@@ -42,6 +42,7 @@ var AppMenuDropdownOpener = /*#__PURE__*/React.forwardRef(function (props, ref)
 export var AppMenuDropdown = function AppMenuDropdown(props) {
   var title = props.title,
     caret = props.caret,
+    onToggleAppMenu = props.onToggleAppMenu,
     children = props.children;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -51,7 +52,9 @@ export var AppMenuDropdown = function AppMenuDropdown(props) {
     return setIsOpen(false);
   });
   var handleDropdownClick = function handleDropdownClick() {
-    return setIsOpen(!isOpen);
+    var newState = !isOpen;
+    setIsOpen(newState);
+    onToggleAppMenu(newState);
   };
   var openWithChildren = !isEmpty(children) && isOpen;
   return /*#__PURE__*/React.createElement(AppMenuDropdownOpener, {
@@ -69,5 +72,6 @@ AppMenuDropdown.defaultProps = {
 };
 AppMenuDropdown.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  caret: PropTypes.bool
+  caret: PropTypes.bool,
+  onToggleAppMenu: PropTypes.func
 };

package/components/applicationHeader/ApplicationHeader.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems"];
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+var _excluded = ["homeRoute", "showHomeIcon", "label", "className", "appNavigator", "appNavigatorClassName", "appMenuItems", "navItems", "actionBarItems", "onToggleAppMenu"];
+import React, { useState, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/fp/debounce';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -16,7 +16,7 @@ import modulePropTypes from './modulePropTypes';
 import { MobileAppMenu } from './MobileAppMenu';
 var SCREEN_SM = 768; // @screen-sm: 768px;
 
-export var ApplicationHeader = function ApplicationHeader(props) {
+export var ApplicationHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var homeRoute = props.homeRoute,
     showHomeIcon = props.showHomeIcon,
     label = props.label,
@@ -26,12 +26,16 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     appMenuItems = props.appMenuItems,
     navItems = props.navItems,
     actionBarItems = props.actionBarItems,
+    onToggleAppMenu = props.onToggleAppMenu,
     remainigProps = _objectWithoutProperties(props, _excluded);
   var actionBarRef = useRef();
   var _useResizeObserver = useResizeObserver(),
     _useResizeObserver2 = _slicedToArray(_useResizeObserver, 2),
     navRef = _useResizeObserver2[0],
     contentRect = _useResizeObserver2[1].contentRect;
+  useImperativeHandle(ref, function () {
+    return navRef;
+  }, []);
   var getContentRect = useCallback(function (key) {
     return contentRect && Math.round(contentRect[key]);
   }, [contentRect]);
@@ -46,7 +50,8 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     showHomeIcon: showHomeIcon,
     homeRoute: homeRoute,
     appMenuItems: appMenuItems,
-    appNavigator: appNavigator
+    appNavigator: appNavigator,
+    onToggleAppMenu: onToggleAppMenu
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex-1-1-0 display-flex gap-10"
   }, /*#__PURE__*/React.createElement(MobileSubmoduleNavigation, {
@@ -66,7 +71,8 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     key: "AppMenu",
     appMenuItems: appMenuItems,
     appNavigator: appNavigator,
-    appNavigatorClassName: appNavigatorClassName
+    appNavigatorClassName: appNavigatorClassName,
+    onToggleAppMenu: onToggleAppMenu
   }), isEmpty(navItems) && /*#__PURE__*/React.createElement("ul", {
     className: "SubmoduleNavigation nav"
   }), !isEmpty(navItems) && /*#__PURE__*/React.createElement(NavItems, {
@@ -78,7 +84,7 @@ export var ApplicationHeader = function ApplicationHeader(props) {
     nodeRef: actionBarRef,
     items: actionBarItems
   })));
-};
+});
 var Divider = function Divider() {
   return /*#__PURE__*/React.createElement("div", {
     className: "divider display-flex align-items-center"
@@ -90,7 +96,8 @@ export default ApplicationHeader;
 ApplicationHeader.defaultProps = {
   homeRoute: '',
   showHomeIcon: true,
-  actionBarItems: []
+  actionBarItems: [],
+  onToggleAppMenu: function onToggleAppMenu() {}
 };
 ApplicationHeader.propTypes = {
   label: PropTypes.node,
@@ -101,5 +108,6 @@ ApplicationHeader.propTypes = {
   appNavigator: PropTypes.node,
   appNavigatorClassName: PropTypes.string,
   navItems: PropTypes.arrayOf(modulePropTypes),
-  actionBarItems: PropTypes.arrayOf(PropTypes.node)
+  actionBarItems: PropTypes.arrayOf(PropTypes.node),
+  onToggleAppMenu: PropTypes.func
 };

package/components/applicationHeader/MobileAppMenu.js

@@ -8,15 +8,18 @@ export var MobileAppMenu = function MobileAppMenu(props) {
   var appMenuItems = props.appMenuItems,
     appNavigator = props.appNavigator,
     showHomeIcon = props.showHomeIcon,
-    homeRoute = props.homeRoute;
+    homeRoute = props.homeRoute,
+    onToggleAppMenu = props.onToggleAppMenu;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShown = _useState2[0],
     setIsShown = _useState2[1];
   var handleToggleNavigation = function handleToggleNavigation() {
-    return setIsShown(!isShown);
+    var newState = !isShown;
+    setIsShown(newState);
+    onToggleAppMenu(newState);
   };
-  var hasAppContent = !isNil(appMenuItems) || !isNil(appNavigator);
+  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",
     onClick: handleToggleNavigation
@@ -47,5 +50,6 @@ MobileAppMenu.propTypes = {
   homeRoute: PropTypes.node,
   showHomeIcon: PropTypes.bool,
   appMenuItems: PropTypes.arrayOf(modulePropTypes),
-  appNavigator: PropTypes.element
+  appNavigator: PropTypes.element,
+  onToggleAppMenu: PropTypes.func
 };

package/components/applicationLayout/ApplicationLayout.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "layoutRef", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ApplicationLayoutHeader from './ApplicationLayoutHeader';
@@ -11,17 +11,17 @@ 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);
+export var ApplicationLayout = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    layoutRef = props.layoutRef,
+    children = props.children,
+    remainigProps = _objectWithoutProperties(props, _excluded);
   var classes = classNames('ApplicationLayout', className);
   return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
-    ref: layoutRef,
+    ref: ref || layoutRef,
     className: classes
   }), children);
-};
+});
 ApplicationLayout.Header = ApplicationLayoutHeader;
 ApplicationLayout.Sidebar = ApplicationLayoutSidebar;
 ApplicationLayout.Body = ApplicationLayoutBody;

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"];
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/fp/debounce';
 import classNames from 'classnames';
 var RESIZE_THROTTELING = 200;
-export var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
+export var ApplicationLayoutBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     innerClassName = props.innerClassName,
     forceScrollbar = props.forceScrollbar,
@@ -24,6 +24,9 @@ export var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
     setOffset = _useState2[1];
   var moduleContentRef = useRef();
   var layoutBodyRef = useRef();
+  useImperativeHandle(ref, function () {
+    return layoutBodyRef;
+  }, []);
   useEffect(function () {
     if (layoutBodyRef.current) {
       layoutBodyRef.current.parentNode.style = "--ApplicationLayoutBodyBottomBarHeight: ".concat(bottomBarHeight, "px");
@@ -66,7 +69,7 @@ export var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "rioglyph rioglyph-arrow-up"
   })))), bottomBar && bottomBar);
-};
+});
 ApplicationLayoutBody.defaultProps = {
   className: '',
   enableScrollToTop: true,

package/components/applicationLayout/ApplicationLayoutBodyBanner.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["textColor", "backgroundColor", "isSticky", "className", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export var ApplicationLayoutBodyBanner = function ApplicationLayoutBodyBanner(props) {
+export var ApplicationLayoutBodyBanner = /*#__PURE__*/forwardRef(function (props, ref) {
   var textColor = props.textColor,
     backgroundColor = props.backgroundColor,
     isSticky = props.isSticky,
@@ -13,9 +13,10 @@ export var ApplicationLayoutBodyBanner = function ApplicationLayoutBodyBanner(pr
     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, {
+    ref: ref,
     className: bannerClasses
   }), children);
-};
+});
 ApplicationLayoutBodyBanner.defaultProps = {
   textColor: 'text-color-white',
   backgroundColor: 'bg-primary',

package/components/applicationLayout/ApplicationLayoutBodyBottomBar.js

@@ -1,20 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "buttonAlignment", "useBodyPaddings", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export var ApplicationLayoutBodyBottomBar = function ApplicationLayoutBodyBottomBar(_ref) {
+export var ApplicationLayoutBodyBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     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, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, remainigProps, {
     className: classes
   }), children);
-};
+});
 ApplicationLayoutBodyBottomBar.LEFT = 'left';
 ApplicationLayoutBodyBottomBar.RIGHT = 'right';
 ApplicationLayoutBodyBottomBar.defaultProps = {

package/components/applicationLayout/ApplicationLayoutBodyNavigation.js

@@ -1,18 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-export var ApplicationLayoutBodyNavigation = function ApplicationLayoutBodyNavigation(props) {
+export var ApplicationLayoutBodyNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     children = props.children,
     remainingProps = _objectWithoutProperties(props, _excluded);
   var navigationClasses = classNames('ApplicationLayoutBodyNavigation', className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, remainingProps, {
     className: navigationClasses
   }), children);
-};
+});
 ApplicationLayoutBodyNavigation.propTypes = {
   className: PropTypes.string
 };

package/components/applicationLayout/ApplicationLayoutHeader.js

@@ -1,19 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 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);
+export var ApplicationLayoutHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    remainigProps = _objectWithoutProperties(props, _excluded);
   var classes = classNames('ApplicationLayoutHeader', className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainigProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, remainigProps, {
     className: classes,
     id: "ApplicationLayoutHeader"
   }), children);
-};
+});
 ApplicationLayoutHeader.propTypes = {
   className: PropTypes.string
 };

package/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+var AspectRatioPlaceholder = function AspectRatioPlaceholder(props) {
+  var width = props.width,
+    height = props.height,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    children = props.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "position-relative ".concat(className),
+    style: {
+      aspectRatio: "".concat(width, " / ").concat(height)
+    }
+  }, children);
+};
+AspectRatioPlaceholder.defaultProps = {
+  width: 16,
+  height: 9
+};
+AspectRatioPlaceholder.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  className: PropTypes.string
+};
+export default AspectRatioPlaceholder;

package/components/assetTree/AssetTree.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "resizable", "width", "maxWidth", "minWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"];
-import React, { memo, useState, useEffect, useRef } from 'react';
+import React, { memo, useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import head from 'lodash/fp/head';
@@ -38,7 +38,7 @@ var renderTreesOffscreen = function renderTreesOffscreen(children, categoryId) {
     }, child);
   });
 };
-var AssetTree = /*#__PURE__*/memo(function (props) {
+var AssetTree = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     resizable = props.resizable,
     width = props.width,
@@ -71,6 +71,9 @@ var AssetTree = /*#__PURE__*/memo(function (props) {
     sidebarMode = _useState6[0],
     setSidebarMode = _useState6[1];
   var sidebarRef = useRef();
+  useImperativeHandle(ref, function () {
+    return sidebarRef;
+  }, []);
 
   // Update internal state when props change
   useEffect(function () {
@@ -150,7 +153,7 @@ var AssetTree = /*#__PURE__*/memo(function (props) {
     direction: Resizer.HORIZONTAL,
     position: Resizer.RIGHT
   }));
-});
+}));
 AssetTree.displayName = 'AssetTree';
 AssetTree.MODE_FLY = 'fly';
 AssetTree.MODE_FLUID = 'fluid';