@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-1

package/README.md

@@ -6,10 +6,16 @@ The documentation and how to integrate the UIKIT in your project can be found he
 
 ## Release
 
-Starting with version 0.12.8, all versions of the uikit will be available under https://uikit.developers.rio.cloud/${VERSION}.
+Starting with version `0.12.8`, all versions of the uikit will be available under https://uikit.developers.rio.cloud/${VERSION}/.
 
-Changes made without incrementing the version number will not be published under the new version number, but the latest
-"in development" state will be available under https://uikit.developers.rio.cloud/latest
+Starting with verion `0.14.6`, even the corresponding uikit-demo will be published under https://uikit.developers.rio.cloud/${VERSION}/.
+
+All changes made on `master` will be deployed to https://uikit.developers.rio.cloud/latest/.
+
+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.
 
 ## Development
 
@@ -21,6 +27,43 @@ $ npm install && cd uikit-demo/ && npm i && npm start
 
 The UIKIT demo is accessable at http://localhost:8090.
 
+## Versions List
+
+We introduced a versions list containing all the versions for which a uikit-demo exists. It looks as follows.
+
+```json
+{
+    "latest_release": "0.15.1",
+    "versions": [
+        {
+            "id": "0.16.0",
+            "label": "v0.16.0",
+            "path": "latest/",
+            "url": "https://uikit.developers.rio.cloud/latest/",
+            "tag": "Beta"
+        },
+        {
+            "id": "0.15.1",
+            "label": "v0.15.1",
+            "path": "0.15.1/",
+            "url": "https://uikit.developers.rio.cloud/0.15.1/"
+        },
+        {
+            "id": "0.15.0",
+            "label": "v0.15.0",
+            "path": "0.15.0/",
+            "url": "https://uikit.developers.rio.cloud/0.15.0/"
+        },
+        {
+            "id": "0.14.6",
+            "label": "v0.14.6",
+            "path": "0.14.6/",
+            "url": "https://uikit.developers.rio.cloud/0.14.6/"
+        }
+    ]
+}
+```
+
 ## License
 
 RIO UIKIT is licensed under the Apache 2.0 license.

package/lib/components/actionBarItem/ActionBarItem.js

@@ -25,7 +25,7 @@ var _delay = _interopRequireDefault(require("lodash/fp/delay"));
 
 var _ActionBarOverlay = require("./ActionBarOverlay");
 
-var _ActionBarItemPopover = require("./ActionBarItemPopover");
+var _ActionBarItemPopoverContent = require("./ActionBarItemPopoverContent");
 
 var _ActionBarItemIcon = require("./ActionBarItemIcon");
 
@@ -78,7 +78,7 @@ var checkIfSmallResolution = function checkIfSmallResolution() {
 var isActionBarItemPopover = function isActionBarItemPopover(child) {
   var _child$type;
 
-  return ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === _ActionBarItemPopover.ActionBarItemPopover.displayName;
+  return ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === _ActionBarItemPopoverContent.ActionBarItemPopoverContent.displayName;
 };
 
 var isActionBarItemIcon = function isActionBarItemIcon(child) {
@@ -215,7 +215,7 @@ var ActionBarItem = /*#__PURE__*/_react.default.memo(function (props) {
     show: isShown || useOffscreen,
     placement: _OverlayTrigger.default.BOTTOM_END,
     overlay: overlay,
-    trigger: 'click',
+    trigger: "click",
     rootClose: false,
     popperConfig: {
       modifiers: [{
@@ -230,7 +230,7 @@ var ActionBarItem = /*#__PURE__*/_react.default.memo(function (props) {
 
 exports.ActionBarItem = ActionBarItem;
 ActionBarItem.Icon = _ActionBarItemIcon.ActionBarItemIcon;
-ActionBarItem.Popover = _ActionBarItemPopover.ActionBarItemPopover;
+ActionBarItem.Popover = _ActionBarItemPopoverContent.ActionBarItemPopoverContent;
 ActionBarItem.List = _ActionBarItemList.ActionBarItemList;
 ActionBarItem.ListItem = _ActionBarItemListItem.ActionBarItemListItem;
 ActionBarItem.ListSeparator = _ActionBarItemListSeparator.ActionBarItemListSeparator;

package/lib/components/actionBarItem/ActionBarItemPopoverContent.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ActionBarItemPopoverContent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _omit = _interopRequireDefault(require("lodash/fp/omit"));
+
+var _excluded = ["className", "children"];
+
+var ActionBarItemPopoverContent = function ActionBarItemPopoverContent(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      remainingProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('ActionBarItemPopoverContent', className);
+  var filterProps = (0, _omit.default)(['title', 'useOffscreen']);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, filterProps(remainingProps), {
+    className: classes
+  }), children);
+};
+
+exports.ActionBarItemPopoverContent = ActionBarItemPopoverContent;
+ActionBarItemPopoverContent.displayName = 'ActionBarItemPopoverContent';
+ActionBarItemPopoverContent.propTypes = {
+  title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
+  className: _propTypes.default.string,
+  useOffscreen: _propTypes.default.bool
+};
+var _default = ActionBarItemPopoverContent;
+exports.default = _default;

package/lib/components/actionBarItem/ActionBarOverlay.js

@@ -44,6 +44,8 @@ var ActionBarOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, r
   });
 
   var adjustedClassName = preRender && !show ? (0, _classnames.default)(className, 'position-offscreen') : className;
+  var popoverTitleClasses = (0, _classnames.default)('ActionBarItemPopover popover-title text-color-dark', className);
+  var popoverContentClasses = (0, _classnames.default)('ActionBarItemPopover popover-content', className);
   return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
     ref: ref,
     id: id,
@@ -52,9 +54,9 @@ var ActionBarOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, r
     style: adjustedStyles,
     className: adjustedClassName
   }), title && /*#__PURE__*/_react.default.createElement(_Popover.default.Title, {
-    className: "popover-title text-color-dark"
+    className: popoverTitleClasses
   }, title), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
-    className: "popover-content"
+    className: popoverContentClasses
   }, children));
 });
 
@@ -68,7 +70,10 @@ ActionBarOverlay.propTypes = {
   title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
   preRender: _propTypes.default.bool,
   show: _propTypes.default.bool,
-  width: _propTypes.default.oneOf([100, 150, 200, 250, 300, 350, 400, 450, 500])
+  width: _propTypes.default.oneOf([100, 150, 200, 250, 300, 350, 400, 450, 500]),
+  onClick: _propTypes.default.func,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string
 };
 var _default = ActionBarOverlay;
 exports.default = _default;

package/lib/components/applicationHeader/AppMenuDropdown.js

@@ -15,10 +15,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
+
 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; }
@@ -49,17 +49,13 @@ var DropdownMenu = function DropdownMenu(props) {
     className: "dropdown-menu"
   }, children);
 };
-/*
- * The onClickOutside HOC cannot be on the top level anymore as we have to provide
- * handleClickOutside as prop.
- */
-
 
-var AppMenuDropdownOpener = (0, _reactOnclickoutside.default)(function (props) {
+var AppMenuDropdownOpener = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var showAsOpen = props.showAsOpen,
       children = props.children,
       onDropdownClick = props.onDropdownClick;
   return /*#__PURE__*/_react.default.createElement("li", {
+    ref: ref,
     className: (0, _classnames.default)('dropdown', {
       open: showAsOpen
     }),
@@ -77,19 +73,19 @@ var AppMenuDropdown = function AppMenuDropdown(props) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var wrapperRef = (0, _useClickOutside.default)(function () {
+    return setIsOpen(false);
+  });
+
   var handleDropdownClick = function handleDropdownClick() {
     return setIsOpen(!isOpen);
   };
 
-  var handleClickOutside = function handleClickOutside() {
-    setIsOpen(false);
-  };
-
   var openWithChildren = children && children.length && isOpen;
   return /*#__PURE__*/_react.default.createElement(AppMenuDropdownOpener, {
     showAsOpen: openWithChildren,
     onDropdownClick: handleDropdownClick,
-    handleClickOutside: handleClickOutside
+    ref: wrapperRef
   }, /*#__PURE__*/_react.default.createElement(ToggleButton, {
     title: title,
     caret: caret

package/lib/components/applicationLayout/ApplicationLayout.js

@@ -28,6 +28,8 @@ 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; }
 
 // initializes document bootstrapping - keep the import to avoid being tree-shaked
+_init.initDocumentBootstrapping;
+
 var ApplicationLayout = function ApplicationLayout(_ref) {
   var className = _ref.className,
       children = _ref.children;

package/lib/components/applicationLayout/ApplicationLayoutBody.js

@@ -19,6 +19,8 @@ var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _ApplicationLayoutBodyBottomBar = require("./ApplicationLayoutBodyBottomBar");
+
 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; }
@@ -68,7 +70,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'module-content-wrapper'
+    className: "module-content-wrapper"
   }, banner && banner, navigation && navigation, /*#__PURE__*/_react.default.createElement("div", {
     className: innerClasses,
     onScroll: handleScroll,
@@ -76,10 +78,10 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
   }, children)), enableScrollToTop && /*#__PURE__*/_react.default.createElement("span", {
     className: scrollToTopClasses
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: 'btn btn-primary btn-icon-only',
+    className: "btn btn-primary btn-icon-only",
     onClick: handleToTop
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-arrow-up'
+    className: "rioglyph rioglyph-arrow-up"
   })))), bottomBar && bottomBar);
 };
 

package/lib/components/assetTree/AssetTree.js

@@ -59,7 +59,7 @@ var getCurrentCategoryElement = function getCurrentCategoryElement(children, cur
 
 var renderTreesOffscreen = function renderTreesOffscreen(children, categoryId) {
   return _react.default.Children.map(children, function (child) {
-    var offscreenClasses = (0, _classnames.default)('TreeOffscreenWrapper', child.props.id !== categoryId && 'position-offscreen');
+    var offscreenClasses = (0, _classnames.default)('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
     return /*#__PURE__*/_react.default.createElement("div", {
       className: offscreenClasses
     }, child);

package/lib/components/assetTree/Tree.js

@@ -608,7 +608,7 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     className: treeClassNames,
     ref: treeRef
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'TreeHeader'
+    className: "TreeHeader"
   }, !hideSearch && !search && /*#__PURE__*/_react.default.createElement(_TreeSearch.default, {
     value: state.searchValue,
     onChange: handleSearchChange,
@@ -621,7 +621,7 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     isIndeterminate: isIndeterminate,
     onSelect: handeSelectAll
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'display-flex flex-row justify-content-between width-100pct'
+    className: "display-flex justify-content-between align-items-center width-100pct"
   }, renderSummary(), /*#__PURE__*/_react.default.createElement(_TreeOptions.default, {
     treeOptions: treeOptions
   })))), /*#__PURE__*/_react.default.createElement(_TreeRoot.default, {

package/lib/components/assetTree/TreeLeaf.js

@@ -26,33 +26,33 @@ var TreeLeaf = /*#__PURE__*/_react.default.memo(function (props) {
       isSelected = props.isSelected,
       onSelectItem = props.onSelectItem,
       onActiveItem = props.onActiveItem;
-  var treeNodeClassNames = (0, _classnames.default)('TreeLeaf', 'from-group', isSelected && 'active', item.className && item.className);
+  var treeNodeClassNames = (0, _classnames.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: treeNodeClassNames,
     "data-key": item.id
   }, hasMultiselect && /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
-    className: 'TreeCheckbox',
+    className: "TreeCheckbox",
     checked: isSelected,
     onClick: onSelectItem
   }), !hasMultiselect && showRadioButtons && /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
-    className: 'TreeRadioButton',
+    className: "TreeRadioButton",
     checked: isSelected,
     onChange: onSelectItem
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabel',
+    className: "TreeLabel",
     onClick: onActiveItem
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelName'
+    className: "TreeLabelName"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "rioglyph rioglyph-".concat(item.type)
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelNameText'
+    className: "TreeLabelNameText"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelNameTextHeadline'
+    className: "TreeLabelNameTextHeadline"
   }, (0, _isObject.default)(item.name) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'text-light margin-right-3'
+    className: "text-light margin-right-3"
   }, item.name.firstName), /*#__PURE__*/_react.default.createElement("span", null, item.name.lastName)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.name)), item.info && /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelNameTextSubline'
+    className: "TreeLabelNameTextSubline"
   }, item.info)))));
 });
 

package/lib/components/bottomSheet/BottomSheet.js

@@ -13,6 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -21,6 +23,8 @@ var _reactMotion = require("react-motion");
 
 var _isFunction = _interopRequireDefault(require("lodash/fp/isFunction"));
 
+var _portalRoot = require("../../utils/portalRoot");
+
 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; }
@@ -54,6 +58,7 @@ var BottomSheet = function BottomSheet(props) {
   (0, _react.useEffect)(function () {
     return setIsShown(show);
   }, [show]);
+  var modalRoot = (0, _portalRoot.getOrCreatePortalRoot)();
 
   var handleToggle = function handleToggle() {
     var newValue = !isShown;
@@ -71,9 +76,8 @@ var BottomSheet = function BottomSheet(props) {
     onHeightChange();
   };
 
-  var sheetClasses = (0, _classnames.default)('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white z-index-max', 'shadow-hard', detatch ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
+  var sheetClasses = (0, _classnames.default)('bottom-sheet', 'position-fixed left-0', !width && 'width-100pct', !height && !isMaxHeight && 'height-auto', 'bg-white', 'shadow-hard', detatch ? 'margin-15 rounded' : 'rounded-top-left rounded-top-right', className && className);
   var sheetBodyCasses = (0, _classnames.default)('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);
-  var backdropClassNames = (0, _classnames.default)('modal-backdrop', 'bg-black opacity-50');
   var sheetHeight = isMaxHeight ? window.innerHeight : height;
   var motionStyles = {}; // Animate the bottom position
 
@@ -89,7 +93,7 @@ var BottomSheet = function BottomSheet(props) {
     });
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactMotion.Motion, {
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactMotion.Motion, {
     defaultStyle: {
       bottom: -1000,
       height: height
@@ -104,7 +108,7 @@ var BottomSheet = function BottomSheet(props) {
         height: style.height
       }
     }, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("div", {
-      className: "bottom-sheet-title display-flex justify-content-between padding-15 border border-top-none border-left-none border-right-none border-color-lighter"
+      className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' + 'border border-top-none border-left-none border-right-none border-color-lighter'
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "text-size-18"
     }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
@@ -115,7 +119,7 @@ var BottomSheet = function BottomSheet(props) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "rioglyph rioglyph-remove"
     }))), showMaximizeButton && /*#__PURE__*/_react.default.createElement("div", {
-      className: "bottom-sheet-maximize height-30 position-absolute top-5 left-50pct translate-x-50 cursor-pointer",
+      className: 'bottom-sheet-maximize height-30 ' + 'position-absolute top-5 left-50pct translate-x-50 cursor-pointer',
       onClick: handleMaximize
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "height-5 width-40 rounded bg-lighter"
@@ -124,9 +128,9 @@ var BottomSheet = function BottomSheet(props) {
       ref: bodyRef
     }, children));
   }), useBackdrop && isShown && /*#__PURE__*/_react.default.createElement("div", {
-    className: backdropClassNames,
+    className: "bottom-sheet-backdrop",
     onClick: handleToggle
-  }));
+  })), modalRoot);
 };
 
 BottomSheet.defaultProps = {